Setelah pada artikel sebelumnya kita membahas 10 contoh desain form login modern, sekarang saatnya kita melangkah ke tahap yang lebih penting: membuat sistem login yang benar-benar bekerja. Jika sebelumnya form login hanya berfungsi sebagai tampilan antarmuka, pada tutorial kali ini kita akan menghubungkannya dengan database sehingga proses login dapat memverifikasi data pengguna secara nyata.
📋 Daftar Isi
- Gambaran Sistem Login yang Akan Kita Buat
- Struktur File Project
- Langkah 1: Membuat Database MySQL
- 1. Windows (XAMPP / Laragon)
- 2. Linux (Terminal / phpMyAdmin)
- Cara menggunakan Terminal
- 3. macOS (MAMP / Terminal)
- Membuat Tabel Users
- Menambahkan Akun Testing
- Langkah 2: Membuat Koneksi Database
- Variabel Koneksi Database
- Fungsi mysqli_connect()
- Mengecek Apakah Koneksi Berhasil
- Langkah 3: Membuat Halaman Login
- Form Login
- Input Username
- Input Password
- Tombol Login
- Langkah 4: Membuat Proses Login
- Mengaktifkan Session
- Menghubungkan Database
- Mengambil Data dari Form Login
- Query untuk Mencari Data User
- Mengecek Apakah User Ditemukan
- Jika Login Berhasil
- Jika Login Gagal
- Langkah 5: Membuat Halaman Dashboard
- Mengecek Session Login
- Menampilkan Username Pengguna
- Tombol Logout
- Langkah 6: Membuat Fitur Logout
- Fungsi session_start()
- Fungsi session_destroy()
- Mengarahkan Pengguna ke Halaman Login
- Cara Menjalankan Project
- 1. Cara Menjalankan Project di Windows (XAMPP / Laragon)
- 2. Cara Menjalankan Project di Linux (Apache / LAMP)
- 3. Cara Menjalankan Project di macOS (MAMP)
- Login ke Sistem
Authemers! 👋
Dalam pengembangan aplikasi web, sistem login adalah salah satu fitur paling mendasar namun sangat penting. Fitur ini berfungsi sebagai gerbang keamanan yang memastikan hanya pengguna yang memiliki akun yang dapat mengakses halaman tertentu, seperti dashboard admin atau halaman khusus anggota.
Pada tutorial ini kita akan belajar membuat sistem login sederhana menggunakan HTML, PHP, dan MySQL. Kita akan mulai dari membuat form login, kemudian menghubungkannya dengan database, memeriksa data username dan password, hingga akhirnya mengarahkan pengguna yang berhasil login ke halaman dashboard.
Setelah mengikuti tutorial ini, Authemers akan memahami bagaimana cara:
- Membuat form login
- Menghubungkan website dengan database MySQL
- Memverifikasi username dan password
- Mengarahkan pengguna ke dashboard
- Membuat fitur logout
Tutorial ini disusun langkah demi langkah, sehingga sangat cocok untuk pemula yang ingin memahami bagaimana sistem login bekerja di dalam sebuah aplikasi web.
Gambaran Sistem Login yang Akan Kita Buat
Sebelum mulai menulis kode, ada baiknya kita memahami terlebih dahulu bagaimana alur kerja sistem login yang akan kita bangun. Dengan memahami alurnya, Authemers akan lebih mudah mengikuti setiap langkah pembuatan kode nantinya.
Secara sederhana, sistem login bekerja dengan cara mencocokkan data yang dimasukkan pengguna dengan data yang tersimpan di database. Ketika seseorang memasukkan username dan password, sistem akan memeriksa apakah data tersebut benar atau tidak. Jika data cocok, pengguna akan diberikan akses ke halaman tertentu, misalnya dashboard. Jika tidak cocok, pengguna akan diminta untuk mencoba login kembali.
Berikut gambaran prosesnya:
Pengguna membuka halaman login
↓
Pengguna memasukkan username dan password
↓
PHP memeriksa data tersebut di database MySQL
↓
Jika cocok → pengguna masuk ke dashboard
Jika salah → kembali ke halaman login
Jika disederhanakan alurnya akan seperti ini:
Login Page
↓
Cek Username & Password di Database
↓
Jika Benar → Dashboard
Jika Salah → Login Lagi
Agar sistem ini dapat berjalan dengan baik, kita akan membuat beberapa file penting yang saling terhubung. File-file inilah yang nantinya akan mengatur proses login, koneksi database, hingga pengelolaan sesi pengguna setelah berhasil masuk ke dalam sistem.
Struktur File Project
Dalam project ini kita akan membuat beberapa file penting yang saling terhubung untuk menjalankan sistem login.
Berikut penjelasan dari masing-masing file yang akan kita gunakan:
| 📄 File | ⚙️ Fungsi dalam Sistem Login |
|---|---|
| 🔌 koneksi.php | Menghubungkan aplikasi PHP dengan database MySQL agar data pengguna dapat diakses. |
| 🔐 login.php | Menampilkan halaman form login tempat pengguna memasukkan username dan password. |
| ⚙️ proses_login.php | Memeriksa data username dan password yang dikirim dari form login. |
| 📊 dashboard.php | Halaman utama yang hanya dapat diakses setelah pengguna berhasil login. |
| 🚪 logout.php | Menghapus session login dan mengeluarkan pengguna dari sistem. |
Dengan struktur seperti ini, kode akan lebih rapi, terorganisir, dan mudah dipahami, terutama bagi Authemers yang masih belajar membuat aplikasi web menggunakan PHP.
Sekarang kita akan mulai dari membuat database terlebih dahulu, karena sistem login membutuhkan tempat untuk menyimpan data username dan password pengguna.
Langkah 1: Membuat Database MySQL
Sebelum membuat sistem login dengan PHP, kita perlu menyiapkan database MySQL terlebih dahulu untuk menyimpan data pengguna seperti username dan password.
Berikut tiga cara membuat database tergantung sistem operasi yang digunakan.
1. Windows (XAMPP / Laragon)
Bagi pengguna Windows, cara paling mudah adalah menggunakan phpMyAdmin yang tersedia di XAMPP atau Laragon.
Langkah-langkahnya:
- Jalankan XAMPP atau Laragon.
- Aktifkan Apache dan MySQL.
- Buka browser lalu akses: http://localhost/phpmyadmin
- Klik New
- Buat database dengan nama:
db_login
2. Linux (Terminal / phpMyAdmin)
Di Linux, Anda bisa membuat database melalui terminal atau phpMyAdmin jika sudah terpasang.
Cara menggunakan Terminal
Buka terminal lalu jalankan perintah berikut:
mysql -u root -p
Masukkan password MySQL, lalu buat database:
CREATE DATABASE db_login;
Untuk memastikan database berhasil dibuat:
SHOW DATABASES;
3. macOS (MAMP / Terminal)
Bagi pengguna Mac, biasanya menggunakan MAMP atau Terminal.
Cara menggunakan MAMP
- Jalankan MAMP.
- Buka browser lalu akses:
http://localhost/phpMyAdmin
- Klik New.
- Buat database dengan nama:
db_login
Membuat Tabel Users
Setelah database dibuat, langkah berikutnya adalah membuat tabel users yang akan menyimpan data akun pengguna.
Jalankan query SQL berikut:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50),
password VARCHAR(255)
);
Mari kita pahami struktur tabel ini.
| Kolom | Fungsi |
|---|---|
| id | Nomor unik user |
| username | Nama pengguna |
| password | Password yang disimpan |
Menambahkan Akun Testing
Sekarang kita tambahkan satu akun untuk testing dengan query berikut:
INSERT INTO users (username,password)
VALUES ('admin', MD5('123456'));
Artinya kita membuat akun login dengan data berikut:
username : admin
password : 123456
Password disimpan menggunakan MD5 agar tidak tersimpan sebagai teks biasa di database. Ini membuat password sedikit lebih aman dibandingkan menyimpannya secara langsung dalam bentuk plain text.
Langkah 2: Membuat Koneksi Database
Setelah database dan tabel berhasil dibuat, langkah berikutnya adalah menghubungkan aplikasi PHP dengan database MySQL. Tanpa koneksi ini, website tidak akan dapat membaca atau menyimpan data pengguna yang ada di database.
Dalam pengembangan aplikasi web menggunakan PHP, biasanya koneksi database dibuat dalam satu file khusus. Tujuannya agar kode lebih rapi dan mudah digunakan kembali di berbagai halaman seperti login, dashboard, atau halaman lainnya. Pada tutorial ini kita akan membuat sebuah file bernama:
koneksi.php
File ini akan berisi kode yang bertugas membuka koneksi antara PHP dan database MySQL.
Berikut isi kodenya:
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "db_login";
$conn = mysqli_connect($host,$user,$pass,$db);
if(!$conn){
die("Koneksi gagal");
}
?>
Sekarang mari kita pahami setiap bagian kode tersebut secara lebih detail.
Variabel Koneksi Database
Pertama kita membuat beberapa variabel yang berisi informasi untuk mengakses database.
$host = "localhost";
$user = "root";
$pass = "";
$db = "db_login";
Keempat variabel ini digunakan sebagai konfigurasi koneksi database. Artinya, PHP membutuhkan informasi ini agar dapat mengetahui di mana database berada dan bagaimana cara mengaksesnya.
Berikut penjelasannya:
| Variabel | Fungsi |
|---|---|
| host | Alamat server database |
| user | Username untuk mengakses database |
| pass | Password database |
| db | Nama database yang digunakan |
Pada komputer lokal yang menggunakan XAMPP, biasanya konfigurasi default MySQL adalah:
- Host: localhost
- Username: root
- Password: kosong
Karena itu kita menuliskan password sebagai string kosong ("").
Fungsi mysqli_connect()
Setelah variabel koneksi dibuat, langkah berikutnya adalah menjalankan fungsi mysqli_connect().
$conn = mysqli_connect($host,$user,$pass,$db);
Fungsi ini digunakan untuk membuat koneksi antara PHP dan database MySQL menggunakan informasi yang sudah kita simpan di variabel sebelumnya.
Jika koneksi berhasil, maka PHP akan menyimpan koneksi tersebut ke dalam variabel:
$conn
Variabel inilah yang nantinya akan digunakan oleh file lain untuk menjalankan query SQL, seperti memeriksa username dan password saat proses login.
Mengecek Apakah Koneksi Berhasil
Langkah terakhir adalah memastikan bahwa koneksi database benar-benar berhasil.
if(!$conn){
die("Koneksi gagal");
}
Kode ini menggunakan kondisi if untuk memeriksa apakah koneksi gagal atau tidak.
Jika $conn bernilai false (artinya koneksi gagal), maka fungsi:
die()
akan dijalankan.
Fungsi die() berfungsi untuk menghentikan seluruh program PHP dan menampilkan pesan error. Dalam contoh ini, pesan yang ditampilkan adalah:
Koneksi gagal
Dengan cara ini, kita dapat mengetahui jika terjadi masalah pada koneksi database, misalnya karena:
- nama database salah
- username database salah
- password database salah
- server MySQL belum dijalankan
Dengan membuat file koneksi.php, kita telah menyiapkan fondasi penting dalam sistem login. File ini nantinya akan digunakan oleh halaman lain seperti proses_login.php untuk mengakses database dan memeriksa data pengguna yang mencoba login ke dalam sistem.
Langkah 3: Membuat Halaman Login
Setelah koneksi database selesai dibuat, langkah berikutnya adalah membuat halaman login yang akan digunakan oleh pengguna untuk memasukkan username dan password. Halaman ini berfungsi sebagai pintu masuk sebelum pengguna dapat mengakses sistem atau dashboard.
Pada tutorial ini kita akan membuat halaman login yang sederhana menggunakan HTML dan CSS, sehingga tampilannya tetap rapi dan mudah dipahami oleh pemula. Buat sebuah file baru dengan nama:
login.php
Kemudian isi file tersebut dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Login Sistem</title>
<style>
body{
font-family:Arial;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:300px;
border-radius:8px;
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
background:#3498db;
color:white;
border:none;
}
</style>
</head>
<body>
<div class="login">
<h2>Login Sistem</h2>
<form action="proses_login.php" method="POST">
<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>
Kode di atas akan menampilkan sebuah form login sederhana yang berada di tengah halaman dengan dua kolom input dan satu tombol login.
Untuk form login yang lebih keren anda bisa gunakan contoh dari 10 Contoh Form Login yang sudah saya buat.
Sekarang mari kita bahas beberapa bagian penting dari kode tersebut agar Authemers memahami bagaimana halaman login ini bekerja.
Form Login
Bagian ini merupakan inti dari halaman login karena di sinilah data pengguna dikirim ke server.
<form action="proses_login.php" method="POST">
Kode tersebut memiliki dua atribut penting:
action=”proses_login.php”
Menentukan file tujuan yang akan memproses data login.method=”POST”
Menentukan metode pengiriman data dari form ke server.
Artinya ketika pengguna menekan tombol Login, maka data username dan password akan dikirim ke file: proses_login.php.
File inilah yang nantinya akan memeriksa apakah username dan password cocok dengan data yang ada di database.
Input Username
Berikut kode input untuk username:
<input type="text" name="username" placeholder="Username" required>
Penjelasannya:
type="text"→ membuat kolom input teks biasaname="username"→ nama variabel yang akan dibaca oleh PHPplaceholder="Username"→ teks petunjuk di dalam kolom inputrequired→ membuat kolom wajib diisi sebelum form dikirim
Atribut name="username" sangat penting karena PHP akan menggunakan nama ini untuk mengambil data yang dikirim dari form.
Input Password
Selanjutnya adalah kolom password.
<input type="password" name="password" placeholder="Password" required>
Perbedaannya dengan input sebelumnya adalah pada bagian:
type="password"
Tipe ini membuat teks yang diketik oleh pengguna tidak terlihat secara langsung, melainkan ditampilkan sebagai titik atau simbol tertentu. Tujuannya adalah untuk menjaga kerahasiaan password saat pengguna mengetikkannya.
Tombol Login
Terakhir adalah tombol login yang akan mengirim data form.
<button type="submit">Login</button>
Ketika tombol ini ditekan, browser akan:
- Mengambil semua data dari form
- Mengirim data tersebut menggunakan metode POST
- Mengarahkannya ke file proses_login.php
File tersebut nantinya akan memeriksa apakah username dan password benar atau tidak.
Dengan selesainya langkah ini, kita sudah memiliki halaman login yang siap digunakan untuk mengirim data ke sistem backend PHP. Pada langkah berikutnya, kita akan membuat file proses_login.php yang bertugas memverifikasi data login dengan database MySQL.
Langkah 4: Membuat Proses Login
Setelah halaman login selesai dibuat, langkah berikutnya adalah membuat proses login yang bertugas memeriksa apakah username dan password yang dimasukkan pengguna benar atau tidak. Proses ini akan mengambil data dari form login, kemudian mencocokkannya dengan data yang ada di database MySQL.
Untuk melakukan hal tersebut, kita perlu membuat sebuah file baru bernama: proses_login.php.
File ini akan berfungsi sebagai mesin utama yang memverifikasi data login pengguna.
Silahkan isi file tersebut dengan kode berikut:
<?php
session_start();
include "koneksi.php";
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($conn,"SELECT * FROM users
WHERE username='$username' AND password='$password'");
$cek = mysqli_num_rows($query);
if($cek > 0){
$data = mysqli_fetch_assoc($query);
$_SESSION['username'] = $data['username'];
header("location:dashboard.php");
}else{
echo "<script>
alert('Username atau Password salah');
window.location='login.php';
</script>";
}
?>
Sekarang mari kita bahas setiap bagian kode agar Authemers memahami bagaimana proses login ini bekerja. Kode <?php merupakan tag pembuka dan harus ditutup dengan kode ?> pada akhir kode.
Mengaktifkan Session
session_start();
Fungsi session_start() digunakan untuk memulai sistem session di PHP. Session berfungsi untuk menyimpan data sementara selama pengguna masih berada di dalam sistem.
Dalam kasus login, session digunakan untuk menyimpan status bahwa pengguna sudah berhasil login. Dengan begitu, halaman lain seperti dashboard dapat mengetahui apakah pengguna memiliki akses atau tidak.
Tanpa session, sistem tidak akan bisa membedakan antara pengguna yang sudah login dan yang belum.
Menghubungkan Database
include "koneksi.php";
Baris kode ini digunakan untuk memanggil file koneksi database yang sudah kita buat sebelumnya.
File koneksi.php berisi kode untuk menghubungkan PHP dengan database MySQL. Dengan menggunakan include, kita tidak perlu menuliskan ulang kode koneksi di setiap file.
Ini membuat struktur project menjadi lebih rapi dan mudah dikelola.
Mengambil Data dari Form Login
$username = $_POST['username'];
$password = md5($_POST['password']);
Kode ini digunakan untuk mengambil data yang dikirim dari form login.
Data tersebut dikirim menggunakan metode POST, sehingga kita menggunakan:
$_POST
untuk membacanya.
- $_POST[‘username’] → mengambil username dari form
- $_POST[‘password’] → mengambil password dari form
Password kemudian diubah menggunakan fungsi:
md5()
Tujuannya agar password yang dimasukkan pengguna sesuai dengan password yang tersimpan di database, karena sebelumnya kita juga menyimpan password menggunakan MD5.
Query untuk Mencari Data User
Selanjutnya kita membuat query untuk mencari data pengguna di database.
SELECT * FROM users
WHERE username='$username' AND password='$password'
Query ini akan mencari data pada tabel users yang memiliki:
- username yang sama dengan input pengguna
- password yang sama dengan hasil enkripsi MD5
Jika data tersebut ditemukan, berarti login berhasil.
Mengecek Apakah User Ditemukan
$cek = mysqli_num_rows($query);
Fungsi mysqli_num_rows() digunakan untuk menghitung jumlah baris data yang ditemukan dari hasil query.
Jika nilai $cek lebih dari 0, artinya data pengguna ditemukan di database.
Jika Login Berhasil
$_SESSION['username'] = $data['username'];
Jika login berhasil, maka username pengguna akan disimpan dalam session.
Session ini nantinya digunakan untuk menandai bahwa pengguna sudah login dan memiliki akses ke halaman tertentu seperti dashboard.
Setelah itu pengguna akan diarahkan ke halaman dashboard dengan kode berikut:
header("location:dashboard.php");
Fungsi header() digunakan untuk melakukan redirect halaman secara otomatis.
Jika Login Gagal
Jika username atau password tidak ditemukan di database, maka bagian kode berikut akan dijalankan.
alert('Username atau Password salah');
Pesan ini akan muncul sebagai popup alert di browser untuk memberi tahu pengguna bahwa data login yang dimasukkan tidak benar.
Setelah itu pengguna akan diarahkan kembali ke halaman login:
login.php
Dengan cara ini, pengguna dapat mencoba memasukkan username dan password yang benar hingga berhasil masuk ke sistem.
Langkah 5: Membuat Halaman Dashboard
Setelah proses login berhasil dibuat, langkah berikutnya adalah membuat halaman dashboard. Halaman ini merupakan halaman yang hanya bisa diakses oleh pengguna yang telah berhasil login ke dalam sistem.
Dashboard biasanya digunakan sebagai halaman utama setelah login, misalnya untuk menampilkan informasi pengguna, menu administrasi, atau fitur lain yang hanya boleh diakses oleh pengguna tertentu.
Untuk membuatnya, buat sebuah file baru dengan nama:
dashboard.php
Kemudian isi file tersebut dengan kode berikut:
<?php
session_start();
if(!isset($_SESSION['username'])){
header("location:login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
</head>
<body>
<h2>Dashboard</h2>
<p>Selamat datang, <?php echo $_SESSION['username']; ?></p>
<p>
<a href="logout.php">Logout</a>
</p>
</body>
</html>
Kode di atas akan menampilkan halaman dashboard sederhana yang berisi judul halaman, pesan sambutan untuk pengguna, dan tombol logout.
Mengecek Session Login
Bagian paling penting dari halaman dashboard adalah kode berikut:
if(!isset($_SESSION['username'])){
header("location:login.php");
}
Kode ini berfungsi untuk memeriksa apakah pengguna sudah login atau belum.
Penjelasannya:
- $_SESSION[‘username’] berisi data username yang disimpan saat proses login berhasil.
- Jika session tersebut tidak ada, berarti pengguna belum login atau session sudah berakhir.
Fungsi:
isset()
digunakan untuk mengecek apakah sebuah variabel session tersedia atau tidak.
Jika session tidak ditemukan, maka kode berikut akan dijalankan:
header("location:login.php");
Artinya pengguna akan dialihkan kembali ke halaman login.
Dengan cara ini, halaman dashboard tidak bisa diakses secara langsung oleh orang yang belum login. Misalnya jika seseorang mencoba membuka:
http://localhost/login-project/dashboard.php
tanpa login terlebih dahulu, maka sistem akan otomatis mengarahkannya kembali ke login.php.
Menampilkan Username Pengguna
Bagian berikut digunakan untuk menampilkan nama pengguna yang sedang login.
<?php echo $_SESSION['username']; ?>
Kode tersebut mengambil data username yang disimpan di session lalu menampilkannya di halaman dashboard.
Hasilnya akan terlihat seperti ini di browser:
Selamat datang, admin
Dengan cara ini, dashboard bisa menampilkan informasi siapa pengguna yang sedang aktif login di sistem.
Tombol Logout
Terakhir kita menambahkan link logout.
<a href="logout.php">Logout</a>
Ketika link ini diklik, pengguna akan diarahkan ke file logout.php yang nantinya akan menghapus session login dan mengeluarkan pengguna dari sistem.
Dengan selesainya langkah ini, kita sudah memiliki halaman dashboard yang aman dan hanya dapat diakses oleh pengguna yang sudah login. Pada langkah berikutnya, kita akan membuat fitur logout agar pengguna dapat keluar dari sistem dengan aman.
Langkah 6: Membuat Fitur Logout
Langkah terakhir dalam pembuatan sistem login ini adalah membuat fitur logout. Fitur ini berfungsi untuk mengeluarkan pengguna dari sistem setelah mereka selesai menggunakan aplikasi.
Logout sangat penting dalam sebuah aplikasi web karena berkaitan dengan keamanan akun pengguna. Dengan adanya fitur logout, session login yang tersimpan di server dapat dihapus sehingga orang lain tidak dapat mengakses akun tersebut dari perangkat yang sama.
Untuk membuat fitur ini, buat sebuah file baru dengan nama: logout.php.
Kemudian isi file tersebut dengan kode berikut:
<?php
session_start();
session_destroy();
header("location:login.php");
?>
Kode di atas terlihat sederhana, tetapi memiliki fungsi yang sangat penting dalam sistem login.
Fungsi session_start()
session_start();
Baris ini digunakan untuk mengaktifkan session PHP. Session harus diaktifkan terlebih dahulu agar PHP dapat mengakses dan menghapus data session yang sedang digunakan.
Tanpa menjalankan session_start(), PHP tidak akan dapat membaca atau memanipulasi session yang tersimpan.
Fungsi session_destroy()
session_destroy();
Fungsi session_destroy() digunakan untuk menghapus semua data session yang sedang aktif.
Dalam sistem login yang kita buat, session digunakan untuk menyimpan informasi bahwa pengguna sudah berhasil login, misalnya:
$_SESSION['username']
Ketika fungsi session_destroy() dijalankan, seluruh data session tersebut akan dihapus. Artinya sistem tidak lagi mengenali pengguna sebagai pengguna yang sudah login.
Dengan kata lain, setelah logout dilakukan:
- status login pengguna akan hilang
- halaman yang membutuhkan login tidak bisa diakses lagi
- pengguna harus login kembali untuk masuk ke dashboard
Mengarahkan Pengguna ke Halaman Login
Setelah session dihapus, kita menggunakan kode berikut:
header("location:login.php");
Fungsi header() digunakan untuk melakukan redirect halaman. Dalam hal ini, pengguna akan diarahkan kembali ke halaman login.php.
Dengan begitu, setelah logout dilakukan, pengguna akan kembali ke halaman login dan harus memasukkan username serta password lagi jika ingin mengakses sistem.
Selain ke halaman login.php, kita juga bisa mengarahkan ke laman lain misalnya ke index.php. Kita akan buatkan nanti tutorialnya di lain waktu.
Dengan langkah ini, kita telah berhasil membuat fitur logout sederhana yang akan menghapus session login dan mengembalikan pengguna ke halaman login. Sistem login yang kita bangun kini sudah memiliki tiga komponen utama, yaitu login, dashboard, dan logout.
Cara Menjalankan Project
Setelah semua file selesai dibuat, sekarang kita akan menjalankan project sistem login PHP dan MySQL yang sudah kita bangun. Cara menjalankannya sedikit berbeda tergantung sistem operasi yang digunakan. Berikut tiga cara menjalankan project di Windows, Linux, dan macOS.
1. Cara Menjalankan Project di Windows (XAMPP / Laragon)
Bagi pengguna Windows, cara paling umum adalah menggunakan XAMPP atau Laragon.
Langkah-langkahnya:
- Jalankan XAMPP atau Laragon.
- Aktifkan Apache dan MySQL.
- Simpan folder project di dalam direktori server.
Contoh lokasi project:
htdocs/login-project
Jika menggunakan Laragon biasanya berada di folder:
www/login-project
Setelah itu buka browser lalu akses:
http://localhost/login-project/login.php
2. Cara Menjalankan Project di Linux (Apache / LAMP)
Bagi pengguna Linux, biasanya menggunakan LAMP Stack (Linux, Apache, MySQL, PHP).
Langkah-langkahnya:
- Pastikan Apache dan MySQL sudah berjalan.
Untuk menjalankan service bisa menggunakan perintah berikut di terminal:
sudo systemctl start apache2
sudo systemctl start mysql
- Simpan project di folder web server:
/var/www/html/login-project
- Buka browser lalu akses:
http://localhost/login-project/login.php
Jika semua sudah benar, halaman login akan muncul di browser.
3. Cara Menjalankan Project di macOS (MAMP)
Bagi pengguna Mac, biasanya menggunakan MAMP untuk menjalankan server lokal.
Langkah-langkahnya:
- Jalankan aplikasi MAMP.
- Klik Start Servers untuk menjalankan Apache dan MySQL.
- Simpan project di folder:
/Applications/MAMP/htdocs/login-project
Buka browser lalu akses:
http://localhost:8888/login-project/login.php
Port 8888 biasanya digunakan oleh MAMP secara default.
Login ke Sistem
Setelah halaman login terbuka, gunakan akun yang sebelumnya kita buat di database:
username : admin
password : 123456
Jika login berhasil, Anda akan diarahkan ke halaman dashboard. Jika username atau password salah, maka sistem akan menampilkan pesan error dan kembali ke halaman login.
Dengan langkah ini, project sistem login PHP dan MySQL sudah bisa dijalankan di berbagai sistem operasi seperti Windows, Linux, maupun macOS