Posted inDatabase PHP

Project PHP & MySQL: Membuat Sistem Login User

2 Comments
Project PHP & MySQL: Membuat Sistem Login User

Project PHP & MySQL: Membuat Sistem Login User

Membuat sistem login user adalah salah satu skill fundamental dalam pengembangan web. Dengan PHP dan MySQL, Anda dapat membuat sistem autentikasi yang aman untuk website atau aplikasi Anda. Artikel ini akan memandu Anda langkah demi langkah membuat sistem login, mulai dari database hingga halaman dashboard yang diproteksi.

Mengapa Membuat Sistem Login?

  1. Keamanan Data: Hanya pengguna terdaftar yang bisa mengakses konten tertentu.
  2. Personalisasi: Menyediakan pengalaman pengguna yang disesuaikan (user-specific content).
  3. Fondasi untuk Fitur Lanjutan: Seperti manajemen profil, transaksi, atau forum.

Persiapan Awal

  1. Install XAMPP/WAMP
    Unduh dari situs resmi dan install. Ini akan menyediakan PHP, MySQL, dan server lokal di komputer Anda.
  2. Buka Text Editor
    Gunakan VS Code untuk menulis kode.
  3. Struktur Folder: 
    📂 login-system
  ├── index.php        (Halaman login)
  ├── register.php     (Halaman registrasi)
  ├── dashboard.php    (Halaman setelah login)
  ├── logout.php       (Proses logout)
  ├── style.css        (Styling)
  └── includes/
      ├── config.php   (Koneksi database)
      └── functions.php(Fungsi validasi)
  4. Buka phpMyAdmin
    Ketik http://localhost/phpmyadmin di browser. Ini adalah tempat kita mengelola database.

Langkah 1: Membuat Database

  1. Di phpMyAdmin:
    • Klik New → Beri nama database: login_system → Create.
  2. Buat tabel users:
    • Klik SQL → Salin kode ini → Klik Go:
      sql
      CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) UNIQUE,
    email VARCHAR(100) UNIQUE,
    password VARCHAR(255),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

Penjelasan Tabel:

  • id: Nomor unik untuk setiap user (otomatis).
  • username & email: Harus unik, tidak boleh sama dengan user lain.
  • password: Disimpan dalam bentuk terenkripsi (aman!).

Langkah 2: Membuat File Koneksi ke Database (config.php)

Buat file config.php dan isi dengan:

php
<?php
$host = "localhost"; // Server database
$user = "root";      // Username default XAMPP
$pass = "";          // Password default XAMPP (kosong)
$db   = "login_system"; // Nama database

// Koneksi ke database
$conn = mysqli_connect($host, $user, $pass, $db);

// Cek error
if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}
?>

Tips:

  • Simpan file ini di folder includes agar rapi.
  • File ini akan dipanggil di halaman lain untuk terhubung ke database.

Langkah 3: Membuat Halaman Registrasi (register.php)

3.1. Tampilan Form Registrasi (HTML)

html
<!DOCTYPE html>
<html>
<head>
    <title>Daftar Akun</title>
    <style>
        .container { max-width: 400px; margin: 50px auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        input { width: 100%; padding: 8px; }
        button { background: #007bff; color: white; padding: 10px; border: none; }
    </style>
</head>
<body>
    <div class="container">
        <h2>Daftar Akun Baru</h2>
        <form method="POST">
            <div class="form-group">
                <input type="text" name="username" placeholder="Username" required>
            </div>
            <div class="form-group">
                <input type="email" name="email" placeholder="Email" required>
            </div>
            <div class="form-group">
                <input type="password" name="password" placeholder="Password" required>
            </div>
            <button type="submit" name="register">Daftar Sekarang</button>
        </form>
        <p>Sudah punya akun? <a href="index.php">Login di sini</a>.</p>
    </div>
</body>
</html>

Run HTML

3.2. Proses Registrasi (PHP)

Tambahkan di awal file register.php (sebelum tag <html>):

php
<?php
include 'includes/config.php'; // Panggil koneksi database

if (isset($_POST['register'])) {
    // Ambil data dari form
    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Enkripsi password
    
    // Simpan ke database
    $query = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
    
    if (mysqli_query($conn, $query)) {
        echo "<script>alert('Daftar berhasil! Silakan login.'); window.location='index.php';</script>";
    } else {
        echo "Error: " . mysqli_error($conn);
    }
}
?>

Penjelasan:

  • password_hash(): Mengubah password menjadi kode acak (misal: $2y$10$AbCdE...) untuk keamanan.
  • mysqli_query(): Mengirim perintah SQL ke database.

Langkah 4: Membuat Halaman Login (index.php)

4.1. Tampilan Form Login

html
<div class="container">
    <h2>Login</h2>
    <form method="POST">
        <div class="form-group">
            <input type="text" name="username_email" placeholder="Username atau Email" required>
        </div>
        <div class="form-group">
            <input type="password" name="password" placeholder="Password" required>
        </div>
        <button type="submit" name="login">Masuk</button>
    </form>
</div>

Run HTML

4.2. Proses Login (PHP)

Tambahkan di awal file index.php:

php
<?php
session_start(); // Mulai session
include 'includes/config.php';

if (isset($_POST['login'])) {
    $username_email = $_POST['username_email'];
    $password = $_POST['password'];
    
    // Cari user di database
    $query = "SELECT * FROM users WHERE username='$username_email' OR email='$username_email'";
    $result = mysqli_query($conn, $query);
    
    if (mysqli_num_rows($result) == 1) {
        $user = mysqli_fetch_assoc($result);
        
        // Cocokkan password
        if (password_verify($password, $user['password'])) {
            // Simpan data user di session
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['username'] = $user['username'];
            header("Location: dashboard.php"); // Redirect ke dashboard
            exit();
        } else {
            echo "<script>alert('Password salah!');</script>";
        }
    } else {
        echo "<script>alert('Akun tidak ditemukan!');</script>";
    }
}
?>

Analogi Session:

  • Session seperti kartu anggota yang Anda dapatkan setelah login.
  • Kartu ini akan diperiksa setiap kali Anda mengakses halaman terproteksi (misal: dashboard).

Langkah 5: Membuat Halaman Dashboard (dashboard.php)

php
<?php
session_start(); // Pastikan session dimulai

// Jika belum login, redirect ke halaman login
if (!isset($_SESSION['user_id'])) {
    header("Location: index.php");
    exit();
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
</head>
<body>
    <div class="container">
        <h2>Halo, <?php echo $_SESSION['username']; ?>! 👋</h2>
        <p>Ini adalah halaman khusus untuk Anda.</p>
        <a href="logout.php">Logout</a>
    </div>
</body>
</html>

Langkah 6: Membuat Logout (logout.php)

Buat file logout.php dengan kode:

php
<?php
session_start(); // Akses session yang ada
session_unset(); // Hapus semua data session
session_destroy(); // Hancurkan session
header("Location: index.php"); // Kembali ke halaman login
exit();
?>

Cara Testing

  1. Buka http://localhost/login-system/register.php → Daftarkan akun.
  2. Buka http://localhost/login-system/index.php → Login dengan akun yang sudah dibuat.
  3. Jika berhasil, Anda akan diarahkan ke dashboard.php.

Solusi Jika Error

  • Koneksi Database Gagal:
    Pastikan XAMPP/WAMP sudah menyala dan nama database sesuai.
  • Password Tidak Cocok:
    Pastikan menggunakan password_hash() saat registrasi dan password_verify() saat login.
  • Session Tidak Bekerja:
    Pastikan session_start() ada di awal file sebelum tag <html>.

Kesimpulan

Dengan mengikuti panduan ini, Anda telah membuat sistem login user yang aman menggunakan PHP dan MySQL. Sistem ini dapat dikembangkan lebih lanjut dengan menambahkan fitur seperti reset password, verifikasi email, atau two-factor authentication (2FA).

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *