Praktik: Membuat halaman login sederhana: Difference between revisions

From OnnoCenterWiki
Jump to navigationJump to search
Newer edit →
Unknown user (talk)
Created page with "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..."
 
No edit summary
Line 1: Line 1:
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.


**Tujuan Pembelajaran:**
==Prasyarat:==
- Memahami cara mengatur lingkungan pengembangan web menggunakan LAMP (Linux, Apache, MySQL, PHP) pada Ubuntu 24.04.
* Komputer dengan sistem operasi Ubuntu 24.04.
- Membuat halaman login sederhana dengan PHP dan MySQL.
* Akses ke terminal dengan hak akses sudo.
- Mengimplementasikan dasar-dasar autentikasi pengguna.
* Koneksi internet untuk mengunduh paket yang diperlukan.


**Prasyarat:**
==Langkah 1: Instalasi LAMP Stack==
- 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:


LAMP adalah singkatan dari Linux, Apache, MySQL, dan PHP. Berikut adalah langkah-langkah untuk menginstalnya:
1. '''Perbarui daftar paket:'''
 
sudo apt update


1. **Perbarui daftar paket:**
2. '''Instal Apache:'''
   ```bash
    
  sudo apt update
sudo apt install apache2
  ```


2. **Instal Apache:**
Setelah instalasi, verifikasi bahwa Apache berjalan:
  ```bash
    
  sudo apt install apache2
sudo systemctl status 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:**
Jika berjalan dengan baik, Anda akan melihat status "active (running)".
  ```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:**
3. '''Instal MySQL:'''
   ```bash
    
  sudo apt install php libapache2-mod-php php-mysql
sudo apt install mysql-server
  ```
  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**
Setelah instalasi, amankan instalasi MySQL dengan:
 
sudo mysql_secure_installation


1. **Masuk ke MySQL:**
Ikuti petunjuk untuk mengatur kata sandi root dan opsi keamanan lainnya.
  ```bash
  sudo mysql -u root -p
  ```
  Masukkan kata sandi root yang telah Anda atur sebelumnya.


2. **Buat basis data baru:**
4. '''Instal PHP:'''
   ```sql
    
  CREATE DATABASE login_system;
sudo apt install php libapache2-mod-php php-mysql
  ```


3. **Gunakan basis data tersebut:**
Verifikasi instalasi PHP dengan membuat file `info.php` di direktori root web:
   ```sql
    
  USE login_system;
echo "<?php phpinfo(); ?>" | sudo tee /var/www/html/info.php
  ```


4. **Buat tabel `users`:**
Kemudian, buka `http://localhost/info.php` di browser Anda untuk melihat informasi PHP.
  ```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**
==Langkah 2: Membuat Basis Data dan Tabel Pengguna==


1. **Buat file `index.php` di direktori root web:**
1. '''Masuk ke MySQL:'''
  ```php
 
  <?php
sudo mysql -u root -p
  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>
Masukkan kata sandi root yang telah Anda atur sebelumnya.
              <input type="password" id="password" name="password" required>


              <button type="submit">Login</button>
2. '''Buat basis data baru:'''
          </form>
      </div>
CREATE DATABASE login_system;
  </body>
  </html>
  ```
  Kode di atas membuat formulir login dengan bidang untuk nama pengguna dan kata sandi.


2. **Buat file `login.php` untuk memproses login:**
3. '''Gunakan basis data tersebut:'''
  ```php
    
  <?php
USE login_system;
   session_start();
  $mysqli = new mysqli("localhost", "root", "", "login_system");


  if ($mysqli->connect_error) {
      die("Koneksi gagal: " . $mysqli->connect_error);
  }


   if ($_SERVER["REQUEST_METHOD"] == "POST") {
4. '''Buat tabel `users`:'''
      $username = $mysqli->real_escape_string($_POST['username']);
    
      $password = $_POST['password'];
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);


      $result = $mysqli->query("SELECT * FROM users WHERE username='$username'");
Tabel ini akan menyimpan nama pengguna dan kata sandi yang telah di-hash.
      if ($result->num_rows == 1) {
 
          $user = $result->fetch_assoc();
==Langkah 3: Membuat Formulir Login dengan PHP==
          if (password_verify($password, $user['password']))
 
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:'''
 
<pre>
<?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();
?>
</pre>
 
 
==Pranala Menarik==
 
* [[Web Programming]]

Revision as of 22:59, 6 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

Retrieved from "https://lms.onnocenter.or.id/wiki/index.php?title=Praktik:_Membuat_halaman_login_sederhana&oldid=72382"