Yayan Ahyani: Memebuat Halaman Login dan Proses Login

1. Buat Halaman Form Login dengan nama : login.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Login | SMK Bahtra Pandeglang</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: url("img/bg-smk.jpg") no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Overlay gelap */
        body::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 0;
        }

        .login-box {
            position: relative;
            z-index: 1;
            background: #ffffff;
            width: 360px;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .login-box img {
            width: 90px;
            display: block;
            margin: 0 auto 10px;
        }

        .login-box h2 {
            text-align: center;
            margin-bottom: 5px;
            color: #2c3e50;
        }

        .login-box p {
            text-align: center;
            margin-bottom: 25px;
            font-size: 14px;
            color: #555;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            margin-bottom: 5px;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid #ccc;
            outline: none;
        }

        .form-group input:focus {
            border-color: #007bff;
        }

        .btn-login {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 8px;
            background: #007bff;
            color: #fff;
            font-size: 15px;
            cursor: pointer;
        }

        .btn-login:hover {
            background: #0056b3;
        }

        .footer-text {
            text-align: center;
            font-size: 12px;
            margin-top: 15px;
            color: #777;
        }

        @media (max-width: 480px) {
            .login-box {
                width: 90%;
            }
        }
    </style>
</head>
<body>

    <div class="login-box">
        <!-- Ganti logo sekolah -->
        <img src="img/logo-smk.png" alt="Logo SMK">

        <h2>Login Sistem</h2>
        <p>Website Resmi SMK Bahtra Pandeglang</p>

        <!-- Nanti action bisa ke login.php -->
        <form action="proses_login.php" method="post">
            <div class="form-group">
                <label>Username</label>
                <input 
                    type="text" 
                    name="username" 
                    placeholder="Masukkan username" 
                    required>
            </div>

            <div class="form-group">
                <label>Password</label>
                <input 
                    type="password" 
                    name="password" 
                    placeholder="Masukkan password" 
                    required>
            </div>

            <button type="submit" class="btn-login">Masuk</button>
        </form>

        <div class="footer-text">
            © 2026 SMK Bahtra Pandeglang
        </div>
    </div>

</body>
</html>

Struktur Folder yang Disarankan


/login.html
/login.php
/img/
 ├─ bg-smk.jpg     (foto sekolah / siswa / gedung SMK)
 └─ logo-smk.png   (logo sekolah)

/proses_login.php /logout.php /koneksi.php /dashboard.php

Buat tabel user di CMD

CREATE DATABASE db_smk;
USE db_smk;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(255) NOT NULL,
    role ENUM('admin','guru','siswa') NOT NULL
);

ini skript untuk membuat enskripsi password : hash.php

<?php
echo password_hash("123", PASSWORD_DEFAULT);
?>

tambahkan data admin ke tabel users : ( ketik di CMD )

INSERT INTO users (username, password, role)
VALUES (
'admin', 
'$2y$10$daNDJq.oSJMABhWMA9cIjuoctvmgLP/9G8ivQhFTleWHhwFvrT4GK', 
'admin');

2. buat koneksi database dengan nama : koneksi.php

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "db_smk";

$koneksi = mysqli_connect($host, $user, $pass, $db);

if (!$koneksi) {
    die("Koneksi database gagal: " . mysqli_connect_error());
}



3. Buat Halaman Proses Login dengan nama  : proses_login.php

<?php
session_start();
include 'koneksi.php';

$username = mysqli_real_escape_string($koneksi, $_POST['username']);
$password = $_POST['password'];

$query = mysqli_query($koneksi, 
    "SELECT * FROM users WHERE username='$username'"
);

$user = mysqli_fetch_assoc($query);

if ($user) {
    // Cek password
    if (password_verify($password, $user['password'])) {

        // Simpan session
        $_SESSION['login'] = true;
        $_SESSION['id']    = $user['id'];
        $_SESSION['nama']  = $user['username'];
        $_SESSION['role']  = $user['role'];

        // Redirect sesuai role
        header("Location: index.php");
        exit;
    } else {
        echo "<script>
                alert('Password salah!');
                window.location='login.php';
              </script>";
    }
} else {
    echo "<script>
            alert('Username tidak ditemukan!');
            window.location='login.php';
          </script>";
}

?>




4. Buat Hamalan Session Start dengan nama : session_start.php
<?php
session_start();

if (!isset($_SESSION['login'])) {
    header("Location: login.php");
    exit;
}
?>


5. Buat Halaman logout dengan nama : logout.php

<?php
session_start();
session_destroy();
header("Location: login.html");
exit;

Yayan Ahyani

Selasa, 13 Januari 2026

Memebuat Halaman Login dan Proses Login

1. Buat Halaman Form Login dengan nama : login.php

Struktur Folder yang Disarankan

Buat tabel user di CMD

2. buat koneksi database dengan nama : koneksi.php

`3. Buat Halaman Proses Login dengan nama : proses_login.php`

`4. Buat Hamalan Session Start dengan nama : session_start.php`

`5. Buat Halaman logout dengan nama : logout.php`

Tidak ada komentar:

Posting Komentar

MANAJEMEN BASIS DATA (BACKUP)

Laporkan Penyalahgunaan