Cara Membuat Login PHP dengan XAMPP

Diposting Dylan Daniswara Santosa, S.Kom.

Sistem login adalah elemen penting dalam pengembangan aplikasi web yang memerlukan perlindungan akses. Dalam kesempatan ini, kita akan membahas langkah-langkah untuk membuat sistem login sederhana menggunakan PHP dan XAMPP, sebuah paket pengembangan populer untuk server web lokal.

Persiapan Awal

Sebelum memulai, pastikan Anda telah memasang XAMPP di komputer Anda. XAMPP adalah paket pengembangan yang terdiri dari Apache, MySQL, PHP, dan Perl. Anda dapat mengunduhnya dari situs resmi XAMPP dan mengikuti panduan instalasinya. Setelah XAMPP terpasang, ikuti langkah-langkah berikut untuk membuat sistem login dengan PHP.

Langkah 1: Buat Struktur Proyek

Buka folder "htdocs" di direktori instalasi XAMPP (biasanya di C:\xampp\htdocs untuk Windows atau /opt/lampp/htdocs untuk Linux).
Buat folder baru dengan nama misalnya "sistem-login".
Dalam folder "sistem-login", buat sub folder "css" yang nantinya akan berisi file-file stylesheet.

Langkah 2: Buat Database

Akses http://localhost/phpmyadmin/index.php?route=/server/databases melalui web browser.
Buat database baru dengan nama, misalnya, "sistem_login".
Di dalam database "sistem_login", buat tabel baru dengan nama "users" yang memiliki kolom-kolom berikut: id (Primary Key, Auto Increment), username (Varchar), dan password (Varchar)

Langkah 3: Membuat Halaman Login

Buat file baru dengan nama "login.php" di dalam folder "sistem-login".
Isi file "login.php" dengan kode berikut:

<!DOCTYPE html>
<html>

<head>
    <title>Sistem Login</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="container">
        <h2>Silakan Login</h2>
        <form action="process_login.php" method="POST">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required><br><br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required><br><br>
            <button type="submit">Login</button>
        </form>
    </div>
</body>

</html>

Buat file "style.css" di dalam folder "css" untuk mengatur tampilan halaman login.

.container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    text-align: center;
}

Langkah 4: Proses Login

Buat file baru dengan nama "process_login.php" di dalam folder "sistem-login".

Isi file "process_login.php" dengan kode berikut:

<?php
// Koneksi ke database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sistem_login";

$conn = new mysqli($servername, $username, $password, $dbname);

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

// Mengambil data dari form login
$user = $_POST['username'];
$pass = $_POST['password'];

// Query untuk mencari user dalam database
$sql = "SELECT * FROM users WHERE username='$user' AND password='$pass'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "Login berhasil!";
} else {
    echo "Login gagal!";
}

$conn->close();
?>

Langkah 5: Pengujian

Buka web browser dan akses http://localhost/sistem-login/login.php.
Coba masukkan username dan password yang telah Anda tambahkan ke dalam tabel "users" pada database.
Jika login berhasil, Anda akan melihat pesan "Login berhasil!".

Simpulan

Dalam kesempatan ini, kita telah mempelajari cara membuat sistem login sederhana menggunakan PHP dan XAMPP. Meskipun contoh di atas hanya merupakan implementasi dasar, Anda dapat mengembangkan sistem ini lebih lanjut dengan fitur-fitur seperti enkripsi password, pengaturan sesi, dan halaman dashboard setelah login.

Pastikan Anda selalu menjaga keamanan aplikasi Anda dengan menerapkan praktik-praktik terbaik dalam pengembangan web, seperti mencegah serangan SQL injection dan melindungi data sensitif.

Widget HTML #1