Cara Membuat Login Website dengan PHP MySQL

July 21, 2025
oleh Edusoft Center

Daftar Isi :

Pendahuluan
Apa Itu Login Menggunakan SQL?
Alat dan Teknologi yang Dibutuhkan
Langkah – Langkah membuka Folder melalui cmd
Menambahkan File pada Visual Studio Code
Struktur Folder Aplikasi Login
Langkah 1: Membuat Database MySQL
Langkah 2: Membuat File Koneksi Database (koneksi.php)
Langkah 3: Membuat Halaman Form Login (login.php)
Langkah 4: Memproses Login (proses_login.php)
Langkah 5: Membuat Halaman Dashboard (dashboard.php)
Langkah 6: Logout (logout.php)

1. Pendahuluan

Login adalah pintu masuk ke aplikasi. Sistem login akan mengecek apakah username dan password yang diketik pengguna cocok dengan yang ada di database. Jika cocok, pengguna bisa masuk ke halaman tertentu (misalnya dashboard). Jika tidak, login akan ditolak.

2. Apa itu Login Menggunakan SQL?

Login menggunakan SQL berarti kamu mengambil data dari database (MySQL) menggunakan query SQL, dan mencocokkannya dengan input form pengguna seperti username dan password.

Contoh query :

3. Alat dan Teknologi yang Dibutuhkan

PHP: Bahasa pemrograman server,
MySQL: Database tempat menyimpan data user,
XAMPP / Laragon: Server lokal untuk menjalankan PHP & MySQL,
Editor: Visual Studio Code / Notepad++ ,
phpMyAdmin: Alat untuk mengelola database dengan mudah.

4. Langkah – Langkah membuka Folder melalui cmd
– Buka Folder Project Kamu

– Ketik “cmd” pada jendela File Explorer

– Selanjutnya ketik “code .” lalu pencet enter,maka tampilannya langsung masuk ke Visual Studio Code

5. menambahkan File pada Visual Studio Code
– Buka Folder Project Kamu di VSC

– Tambahkan File Baru Lewat Sidebar

Di sisi kiri (Explorer Panel), arahkan mouse ke area folder.

Klik ikon “New File” (ikon kertas dengan tanda +) di atas sidebar.

Ketik nama file baru (misalnya: login.php, koneksi.php, dashboard.php)

Tekan Enter, dan file baru akan langsung terbuka untuk kamu isi.

5. Struktur Folder Aplikasi Login

Struktur folder login adalah susunan file utama dalam sistem login sederhana menggunakan PHP dan MySQL. Setiap file memiliki peran penting agar proses login, validasi, dan logout berjalan dengan baik.

6. Langkah 1: Membuat Database MySQL

Buka browser lalu akses http://localhost/phpmyadmin

Buat database baru bernama: db_login

Jalankan SQL berikut:

setelah masukin query, klik “go” di bagian bawah samping kanan

7. Langkah 2: Membuat File Koneksi Database (koneksi.php)

<?php
$conn = mysqli_connect("localhost", "root", "", "db_login");

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

koneksi.php adalah file penting dalam aplikasi PHP yang digunakan untuk menghubungkan sistem ke database MySQL. File ini berisi konfigurasi seperti nama host, nama pengguna database, password, dan nama database yang digunakan.

8. Langkah 3: Membuat Halaman Form Login (login.php)

Berikut adalah code full pada login.php :

<?php
// Mulai session
session_start();

// Cek apakah user sudah login, jika ya arahkan ke dashboard
if (isset($_SESSION['username'])) {
    header("Location: dashboard.php");
    exit();
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Aplikasi Presensi</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f1f1f1;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .login-box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            width: 300px;
        }

        .login-box h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            width: 100%;
            padding: 10px;
            background: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }

        button:hover {
            background: #0056b3;
        }

        .error {
            color: red;
            margin-bottom: 15px;
            text-align: center;
        }

        .success {
            color: green;
            margin-bottom: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="login-box">
    <h2>Login</h2>

    <?php
    if (isset($_GET['pesan'])) {
        if ($_GET['pesan'] == "gagal") {
            echo "<div class='error'>Username atau Password salah!</div>";
        } else if ($_GET['pesan'] == "logout") {
            echo "<div class='success'>Anda berhasil logout.</div>";
        } else if ($_GET['pesan'] == "belum_login") {
            echo "<div class='error'>Silakan login terlebih dahulu.</div>";
        }
    }
    ?>

    <form method="POST" action="proses_login.php">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>
</div>

</body>
</html>

File login.php adalah halaman utama tempat pengguna memasukkan username dan password. Di sinilah proses login dimulai. Ketika user mengisi form dan klik tombol “Login”, data akan dikirim ke file lain (proses_login.php) untuk divalidasi.

9. Langkah 4: Memproses Login (proses_login.php)

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

$username = $_POST['username'];
$password = $_POST['password'];

$result = mysqli_query($conn, "SELECT * FROM users WHERE username='$username'");
$data = mysqli_fetch_assoc($result);

if ($data && $data['password'] === $password) {
    $_SESSION['username'] = $data['username'];
    header("Location: dashboard.php");
} else {
    header("Location: login.php?error=Login gagal!");
}
?>

proses_login.php adalah file backend yang memproses data login yang dikirim dari form login (login.php). File ini akan:

Menerima input username dan password dari form
Memeriksa data tersebut ke database
Menentukan apakah login berhasil atau gagal
Mengarahkan pengguna ke halaman dashboard jika berhasil, atau menampilkan pesan kesalahan jika gagal

10. Langkah 5: Membuat Halaman Dashboard (dashboard.php)

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

dashboard.php adalah halaman yang hanya dapat diakses oleh pengguna yang sudah berhasil login. Di sinilah pengguna akan diarahkan setelah proses login berhasil. Fungsinya seperti beranda utama atau pusat kontrol bagi user yang sudah terverifikasi.

11. Langkah 6: Logout (logout.php)

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

logout.php adalah file yang digunakan untuk mengakhiri sesi login pengguna. File ini berfungsi untuk:

Menghapus data session login dari browser pengguna
Mencegah akses ke halaman dashboard tanpa login ulang
Mengarahkan pengguna kembali ke halaman login setelah logout

Berikut adalah hasil tampilan Login dari code – code diatas :

Cara Membuat Login Website dengan PHP MySQL

Post comment

Cancel reply