Difference between revisions of "Praktik: Membuat halaman login sederhana"

Revision as of 05:59, 7 April 2025

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>

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
 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();
 ?>

Pranala Menarik

Web Programming