Praktik: Membuat halaman login sederhana
Berikut adalah modul praktik untuk membuat halaman login sederhana menggunakan PHP pada Ubuntu 24.04, tanpa menggunakan alat dari Microsoft. Modul ini dirancang sebagai bagian dari kuliah pemrograman web untuk pengenalan backend dengan PHP.
- 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:**
```bash sudo apt update ```
2. **Instal Apache:**
```bash sudo apt install apache2 ```
Setelah instalasi, verifikasi bahwa Apache berjalan: ```bash sudo systemctl status apache2 ```
Jika berjalan dengan baik, Anda akan melihat status "active (running)".
3. **Instal MySQL:**
```bash sudo apt install mysql-server ```
Setelah instalasi, amankan instalasi MySQL dengan: ```bash sudo mysql_secure_installation ```
Ikuti petunjuk untuk mengatur kata sandi root dan opsi keamanan lainnya.
4. **Instal PHP:**
```bash sudo apt install php libapache2-mod-php php-mysql ```
Verifikasi instalasi PHP dengan membuat file `info.php` di direktori root web: ```bash 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:**
```bash sudo mysql -u root -p ```
Masukkan kata sandi root yang telah Anda atur sebelumnya.
2. **Buat basis data baru:**
```sql CREATE DATABASE login_system; ```
3. **Gunakan basis data tersebut:**
```sql USE login_system; ```
4. **Buat tabel `users`:**
```sql
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
<?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>
Login
<?php
if (isset($_SESSION['error'])) {
echo '' . $_SESSION['error'] . '
'; 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>
</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
<?php
session_start();
$mysqli = new mysqli("localhost", "root", "", "login_system");
if ($mysqli->connect_error) {
die("Koneksi gagal: " . $mysqli->connect_error);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $mysqli->real_escape_string($_POST['username']);
$password = $_POST['password'];
$result = $mysqli->query("SELECT * FROM users WHERE username='$username'");
if ($result->num_rows == 1) {
$user = $result->fetch_assoc();
if (password_verify($password, $user['password']))