Praktik: Membuat halaman login sederhana
Tujuan Pembelajaran:
- Memahami cara mengatur lingkungan pengembangan web menggunakan LAMP (Linux, Apache, MySQL, PHP) pada Ubuntu 24.04.
- Membuat halaman login sederhana dengan PHP dan MySQL.
- Mengimplementasikan dasar-dasar autentikasi pengguna.
Prasyarat:
- Komputer dengan sistem operasi Ubuntu 24.04.
- Akses ke terminal dengan hak akses sudo.
- Koneksi internet untuk mengunduh paket yang diperlukan.
Langkah 1: Instalasi LAMP Stack
LAMP adalah singkatan dari Linux, Apache, MySQL, dan PHP. Berikut adalah langkah-langkah untuk menginstalnya:
1. Perbarui daftar paket:
sudo apt update
2. Instal Apache:
sudo apt install apache2
Setelah instalasi, verifikasi bahwa Apache berjalan:
sudo systemctl status apache2
Jika berjalan dengan baik, Anda akan melihat status "active (running)".
3. Instal MySQL:
sudo apt install mysql-server
Setelah instalasi, amankan instalasi MySQL dengan:
sudo mysql_secure_installation
Ikuti petunjuk untuk mengatur kata sandi root dan opsi keamanan lainnya.
4. Instal PHP:
sudo apt install php libapache2-mod-php php-mysql
Verifikasi instalasi PHP dengan membuat file `info.php` di direktori root web:
echo "<?php phpinfo(); ?>" | sudo tee /var/www/html/info.php
Kemudian, buka `http://localhost/info.php` di browser Anda untuk melihat informasi PHP.
Langkah 2: Membuat Basis Data dan Tabel Pengguna
1. Masuk ke MySQL:
sudo mysql -u root -p
Masukkan kata sandi root yang telah Anda atur sebelumnya.
2. Buat basis data baru:
CREATE DATABASE login_system;
3. Gunakan basis data tersebut:
USE login_system;
4. Buat tabel `users`:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
Tabel ini akan menyimpan nama pengguna dan kata sandi yang telah di-hash.
Langkah 3: Membuat Formulir Login dengan PHP
1. Buat file `index.php` di direktori root web:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0 15px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<?php
if (isset($_SESSION['error'])) {
echo '<p class="error">' . $_SESSION['error'] . '</p>';
unset($_SESSION['error']);
}
?>
<form action="login.php" method="post">
<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">Login</button>
</form>
</div>
</body>
</html>
Kode di atas membuat formulir login dengan bidang untuk nama pengguna dan kata sandi.
2. Buat file `login.php` untuk memproses login:
<?php
session_start();
// Membuat koneksi ke database
$mysqli = new mysqli("localhost", "root", "", "login_system");
// Periksa koneksi
if ($mysqli->connect_error) {
die("Koneksi gagal: " . $mysqli->connect_error);
}
// Periksa apakah metode request adalah POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Mencegah SQL Injection dengan prepared statements
$stmt = $mysqli->prepare("SELECT id, username, password FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
// Ambil data dari form
$username = $_POST['username'];
$password = $_POST['password'];
// Eksekusi statement
$stmt->execute();
$result = $stmt->get_result();
// Periksa apakah username ditemukan
if ($result->num_rows == 1) {
$user = $result->fetch_assoc();
// Verifikasi password
if (password_verify($password, $user['password'])) {
// Password benar, buat session
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];
// Redirect ke halaman dashboard atau halaman lain yang diinginkan
header("Location: dashboard.php");
exit();
} else {
// Password salah
$error = "Password yang Anda masukkan salah.";
}
} else {
// Username tidak ditemukan
$error = "Username tidak ditemukan.";
}
// Tutup statement
$stmt->close();
}
// Tutup koneksi
$mysqli->close();
?>