—͟͞͞★ᴶ𝗈ʰ𝕒®ì—͟͞͞★: Membuat Halaman Login Dan Proses Login

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

<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Login SMK</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            height: 100vh;
            background: url('bg-smk.jpg') no-repeat center center fixed;
            background-size: cover;
        }

        .overlay {
            background: rgba(0, 0, 0, 0.65);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-box {
            background: #ffffff;
            padding: 30px;
            width: 360px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            text-align: center;
        }

        .login-box img {
            width: 90px;
            margin-bottom: 10px;
        }

        .login-box h2 {
            margin: 10px 0 5px;
            color: #333;
        }

        .login-box p {
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }

        .login-box input {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
        }

        .login-box button {
            width: 100%;
            padding: 12px;
            background: #0d6efd;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 10px;
        }

        .login-box button:hover {
            background: #084298;
        }

        .footer {
            margin-top: 15px;
            font-size: 12px;
            color: #888;
        }
    </style>
</head>
<body>

<div class="overlay">
    <div class="login-box">

        <!-- LOGO SEKOLAH -->
        <img src="logo-smk.png" alt="logo-smk">

        <h2>Login SMK Bahtra</h2>
        <p>Sistem Informasi Sekolah</p>

         <form action="proses_login.php" method="post">
             <input 
                    type="text" 
                    name="username" 
                    placeholder="Masukkan username" 
                    required>
            <input 
                    type="password" 
                    name="password" 
                    placeholder="Masukkan password" 
                    required>
            <button type="submit">Login</button>
        </form>

        <div class="footer">
            © 2026 SMK Bahtra
        </div>
    </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

[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;

—͟͞͞★ᴶ𝗈ʰ𝕒®ì—͟͞͞★

Senin, 12 Januari 2026

Membuat 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

tambahkan cmd

Laporkan Penyalahgunaan