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

Latest revision as of 06:00, 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>
      <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();
 ?>

Pranala Menarik

Web Programming

@@ Line 77: / Line 77: @@
 . '''Buat file `index.php` di direktori root web:'''
+<pre>
   <?php
   session_start();
@@ Line 142: / Line 143: @@
   </body>
   </html>
+</pre>
 Kode di atas membuat formulir login dengan bidang untuk nama pengguna dan kata sandi.
@@ Line 201: / Line 203: @@
   ?>
 </pre>
 ==Pranala Menarik==
 * [[Web Programming]]