Langsung ke konten utama

integrasi menghubungkan Login Page dengan Database MySQL

 Login Page Terkoneksi ke MySQL

( institut sains dan teknologi nasional )

    halo teman-teman dan para pembaca seperti biasa..begaimana kabar kalian?semoga baik dan sehat selalu yaa..oke baik pada postingan sebelumnya kita sudah membuat struktur tabel dengan database PHPMYADMIN dan pada kesempatan kali ini kita akan menghubungkan login page dengan database terkoneksi kita menggunakan pemograman php, wahh penasaran bukan?yuk ikuti terus makanya pembahasannya pada kali ini..

Menghubungkan Login Page dengan Database MySQL Menggunakan PHP

1. Persiapan Awal

Sebelum membuat login page, pastikan:

  1. XAMPP / Laragon / Server lokal sudah terinstall.

  2. Aktifkan Apache dan MySQL.

  3. Buat folder project di dalam:

    C:\xampp\htdocs\projekku

  4. Di dalam folder itu, kita akan menaruh file HTML, CSS, dan PHP.

2. Membuat Database & Tabel di MySQL

  1. Buka phpMyAdmin melalui browser:

    http://localhost/phpmyadmin/

  2. Buat database baru, misalnya:

    CREATE DATABASE db_login;

  3. Buat tabel users untuk menyimpan akun login:

    USE db_login;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(255) NOT NULL
);

  4. Masukkan contoh data (password bisa dienkripsi dengan MD5 atau password_hash):

    INSERT INTO users (username, password) 
VALUES ('admin', MD5('12345'));

3. Membuat File Koneksi Database (koneksi.php)

File ini berfungsi menghubungkan PHP ke MySQL:

<?php
$host = "localhost";
$user = "root";    // default user XAMPP
$pass = "";        // default kosong
$db   = "db_login";

$koneksi = mysqli_connect($host, $user, $pass, $db);

if (!$koneksi) {
    die("Koneksi gagal: " . mysqli_connect_error());
}
?>

4. Membuat Halaman Login (login.php)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="proses_login.php" method="post">
    <h2>Login</h2>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">Masuk</button>
  </form>
</body>
</html>

5. Membuat Proses Login (proses_login.php)

File ini akan memeriksa data dari form login dengan database:

<?php
session_start();
include "koneksi.php";

$username = $_POST['username'];
$password = md5($_POST['password']); // gunakan md5 sesuai data di database

// cek data di tabel users
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = mysqli_query($koneksi, $query);

if (mysqli_num_rows($result) > 0) {
    $_SESSION['username'] = $username;
    header("Location: dashboard.php"); // jika login berhasil
} else {
    echo "<script>alert('Login gagal, username atau password salah!');
    window.location='login.php';</script>";
}
?>

6. Membuat Halaman Dashboard (dashboard.php)

<?php
session_start();
if (!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit();
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Dashboard</title>
</head>
<body>
  <h1>Selamat datang, <?php echo $_SESSION['username']; ?>!</h1>
  <a href="logout.php">Logout</a>
</body>
</html>

7. Membuat Logout (logout.php)

<?php
session_start();
session_destroy();
header("Location: login.php");
?>

8. Alur Login Page

  1. User membuka login.php → isi username & password.

  2. Data dikirim ke proses_login.php.

  3. Script PHP memeriksa ke database MySQL:

    • Jika benar → redirect ke dashboard.php.

    • Jika salah → tampilkan pesan error.

  4. User bisa keluar dengan logout.php.

9. Catatan Penting

  • Jangan simpan password dalam bentuk teks asli. Gunakan password_hash() dan password_verify() agar lebih aman.

  • Jangan lupa mengatur validasi input untuk mencegah SQL Injection (gunakan mysqli_real_escape_string() atau Prepared Statement).

  • Login page ini bisa digabung dengan tampilan CSS seperti yang sudah kamu buat sebelumnya agar lebih menarik.


    bagaimana dengan pembahasan yang sudah dijelaskan diatas?cukup bermanfaat bukan?semoga apa yang saya berikan dapat dijadikan ilmu serta wawasan baru bagi teman-teman dan pembaca sekalian..saya ucapkan terimakasih karena sudah mengikuti sampai disini..akhir kata wr,wb..sampai jumpa lagi๐Ÿ˜€

Komentar

Posting Komentar

Postingan populer dari blog ini

Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web

 Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web ( institut sains dan teknologi nasional )      Perkembangan teknologi kecerdasan buatan (Artificial Intelligence/AI) telah membawa perubahan signifikan dalam berbagai bidang, termasuk dalam pengembangan situs web. Salah satu inovasi yang menarik perhatian dalam beberapa tahun terakhir adalah hadirnya platform Emergent.sh , sebuah layanan berbasis AI yang memungkinkan pengguna membuat situs web atau aplikasi secara otomatis hanya dengan memberikan instruksi dalam bentuk teks. Platform ini menjadi contoh nyata bagaimana teknologi AI dapat berfungsi sebagai asisten digital yang menggantikan sebagian besar proses teknis yang sebelumnya harus dilakukan secara manual oleh seorang pengembang web. Secara konseptual, Emergent.sh bekerja berdasarkan pendekatan multi-agent system , yaitu sistem yang terdiri dari beberapa agen kecerdasan buatan yang memiliki peran dan tanggung jawab berbeda. Setiap agen berfungsi sepert...
Posting Komentar
Baca selengkapnya

Hari Pertama PKL di ISTN: Awal Perjalanan Seru!

         cerita hari pertama pkl di (ISTN)  institut sains dan teknologi nasional  Cerita Hari Pertama PKL      Hari pertama PKL akhirnya tiba. Sejak malam sebelumnya, perasaan gugup dan antusias bercampur jadi satu. saya bangun lebih awal dari biasanya, mempersiapkan pakaian rapi dan segala perlengkapan yang diperlukan. Tepat pukul 07.00, saya sudah berangkat menuju tempat PKL: (ISTN) institut sains dan teknologi nasional , sebuah kampus universitas yang bergerak di bidang pengajaran berbasis sains dan teknologi.      Sesampainya di sana, suasana kampus masih cukup tenang. saya disambut oleh satpam dengan ramah dan kami langsung diarahkan ke ruang administrasi. Tak lama kemudian, pembimbing lapangan kami, Pak Ariadi , datang dan mengajak kami ke lab komputer. Ia memperkenalkan saya pada tempat saya akan melakukan pkl  serta  beliau memberikan kesempatan untuk memperkenalkan diri kami masing-masing. Kegiatan dila...
Posting Komentar
Baca selengkapnya

Level Up! Keseruan Hari Kedua PKL di ISTN

  cerita aktifitas pkl di hari kedua ISTN  (institut sains dan teknologi nasional) cerita di hari kedua pkl dan aktivitasnya Cerita Hari Kedua PKL Hari kedua PKL terasa lebih sibuk dibandingkan hari pertama, tapi tetap penuh pengalaman baru. Pagi-pagi, saya sudah datang lebih awal untuk memastikan tidak ada yang terlewat. Begitu sampai, saya langsung bertegur sapa dan bertemu dengan rekan-rekan teman saya dan pembimbing. Kegiatan dimulai dengan melanjutkan pekerjaan yang sudah diberikan, tetapi kali ini saya mulai lebih paham alurnya. Pembimbing kami PAK ARIADI   memberikan arahan tambahan dan tips agar pekerjaan lebih cepat selesai tanpa mengurangi kualitas. Saya juga diberi kesempatan mencoba tugas baru yang diberikan, sehingga bisa menambah keterampilan. Di sela-sela pekerjaan, saya sempat berbincang dengan teman-teman PKL lainnya. Kami saling bertukar cerita tentang tugas masing-masing yang sudah diberikan, dan ternyata cukup banyak hal yang bisa dipelajari dari penge...
Posting Komentar
Baca selengkapnya