Membuat Halaman Login Sederhana untuk Pemula

Halaman login adalah salah satu komponen penting dalam pengembangan website yang membutuhkan autentikasi pengguna. Dalam tutorial ini, kita akan membangun sistem login sederhana menggunakan PHP dan MySQL. Sistem ini akan membedakan akses antara admin dan user biasa, sehingga dapat digunakan sebagai dasar pengembangan aplikasi berbasis role (hak akses).

Untuk Files Lengkap ada di Akhir Artikel ini

Proyek ini cocok untuk pemula yang ingin memahami:

• Koneksi database MySQL dengan PHP

• Proses login dan logout

• Pembagian hak akses (admin & user)

• Keamanan dasar dalam autentikasi

Kita akan membuat struktur folder dengan file-file berikut:

• login.php → Halaman login

• logout.php → Proses logout

• dashboard.php → Halaman admin

• user_dashboard.php → Halaman user biasa

• config.php → File koneksi database

• users.sql → Struktur tabel untuk menyimpan data login

---

1. Persiapan Database (users.sql)

Sebelum memulai, kita perlu menyiapkan database ( login_system ) untuk menyimpan data pengguna. Buat tabel users dengan kolom:

• id → Primary key (auto-increment)

• username → Untuk menyimpan nama pengguna

• password → Untuk menyimpan kata sandi (tanpa hashing dalam contoh ini, hanya untuk pembelajaran lokal)

• role → Menentukan hak akses (admin atau user)

• created_at → Waktu pembuatan akun

Pastikan database sudah dibuat di phpMyAdmin atau alat manajemen database lainnya sebelum menjalankan proyek.

---

2. Membuat Koneksi Database (config.php)

File ini berisi koneksi ke database MySQL menggunakan MySQLi. Fungsi-fungsi dasar yang diperlukan:

• Koneksi ke database

• Fungsi login → Memeriksa kecocokan username & password

• Fungsi logout → Menghapus session dan mengarahkan ke halaman login

Pastikan untuk mengganti host, username, password, dan nama database sesuai dengan pengaturan lokal Anda.

---

3. Membuat Halaman Login (login.php)

Halaman login adalah tempat pengguna memasukkan username dan password. Beberapa fitur yang diterapkan:

• Form sederhana dengan validasi input

• Pengecekan session → Jika sudah login, redirect ke dashboard sesuai role

• Pesan error jika login gagal

Desain menggunakan CSS sederhana dengan gaya Windows 11 untuk memberikan tampilan yang modern dan rapi.

---

4. Proses Logout (logout.php)

File ini bertugas:

• Menghapus semua data session

• Mengarahkan pengguna kembali ke halaman login

Ini penting untuk memastikan keamanan saat pengguna keluar dari sistem.

---

5. Halaman Dashboard Admin (dashboard.php)

Halaman ini hanya bisa diakses oleh role admin dan berisi:

• Navigasi sidebar dengan menu khusus admin

• Informasi login user

• Tombol logout

• Fitur tambah user (bisa dikembangkan lebih lanjut)

Jika user biasa mencoba mengakses, sistem akan mengarahkannya ke user_dashboard.php.

---

6. Halaman Dashboard User (user_dashboard.php)

Halaman ini diperuntukkan bagi pengguna biasa dengan fitur:

• Tampilan sederhana dengan informasi akun

• Navigasi terbatas sesuai hak akses

• Peringatan keamanan bahwa password disimpan tanpa hashing (hanya untuk pembelajaran)

---

7. Keamanan Dasar yang Perlu Diperhatikan

Meskipun proyek ini hanya untuk localhost, beberapa prinsip keamanan tetap harus dipahami:

a. Gunakan Password Hashing di Produksi

Contoh ini menyimpan password tanpa di-hash, yang sangat berbahaya jika digunakan di lingkungan nyata. Sebaiknya gunakan:

php

password_hash($password, PASSWORD_BCRYPT);

dan verifikasi dengan:

php

password_verify($input_password, $hashed_password);

b. Hindari SQL Injection

Gunakan prepared statements atau parameterized queries untuk mencegah serangan SQL injection.

c. Batasi Akses dengan Session

Selalu periksa role pengguna sebelum memberikan akses ke halaman tertentu.

d. Gunakan HTTPS

Jika proyek ini di-deploy, pastikan menggunakan HTTPS untuk mengenkripsi data login.

---

8. Pengembangan Lebih Lanjut

Setelah memahami sistem login dasar, Anda bisa mengembangkannya dengan:

• Manajemen User (Edit, Hapus, Reset Password)

• Remember Me menggunakan cookies

• Captcha untuk mencegah brute force

• Otorisasi berbasis permission (bukan hanya role)

---

Kesimpulan

Membuat sistem login sederhana adalah langkah awal yang baik untuk memahami autentikasi dan otorisasi dalam pengembangan web. Proyek ini menggunakan:

• PHP untuk logika backend

• MySQL untuk penyimpanan data

• Session untuk manajemen login

Dengan struktur folder yang jelas dan kode yang mudah dipahami, pemula dapat memodifikasi dan mengembangkannya sesuai kebutuhan.

Catatan: Sistem ini tidak aman untuk produksi karena tidak menggunakan hashing password dan proteksi lengkap. Gunakan hanya untuk pembelajaran di lingkungan lokal.

📥Downloads Files Disini