Contoh Form login page HTML minimalis (CSS + DataBase)

hallo semuanya

kali ini gegandek akan berbagi bagaimana cara membuat login page, yang tampilannya minimalis dan mudah dibuat, dibawah ini kita sertakan sourcode dan cara penerapannya,

Berikut adalah contoh form login HTML dengan tampilan minimalis menggunakan CSS untuk styling:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalist Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="/login" method="post">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

CSS (styles.css)

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.login-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

h2 {
    margin-bottom: 20px;
    text-align: center;
}

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

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

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

Penjelasan:

HTML:
- Membuat struktur dasar form login dengan elemen input untuk username dan password serta tombol submit.
CSS:
- Mengatur tampilan dasar seperti margin, padding, dan font.
- Mengatur layout body agar form login berada di tengah halaman.
- Menambahkan gaya pada kontainer form login, termasuk warna latar belakang, padding, border-radius, dan bayangan.
- Mengatur gaya untuk label dan input agar tampilan lebih bersih dan rapi.
- Menambahkan efek hover pada tombol login untuk interaksi pengguna.

Form login ini dirancang agar tampil minimalis namun tetap fungsional dan estetis. Anda dapat menyesuaikan lebih lanjut sesuai kebutuhan.

cara membuat koneksi ke database menggunakan PHP dan MySQL. Kode ini akan menunjukkan cara menghubungkan form login HTML yang telah kita buat sebelumnya dengan database MySQL untuk memverifikasi username dan password.

Buat database dan tabel untuk menyimpan data pengguna.

Struktur Database

CREATE DATABASE login_db;

USE login_db;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

INSERT INTO users (username, password) VALUES ('user1', MD5('password1')), ('user2', MD5('password2'));

Buat file db.php untuk mengatur koneksi ke database.

Koneksi PHP ke Database

<?php
$servername = "localhost";
$username = "root"; // ganti dengan username database Anda
$password = ""; // ganti dengan password database Anda
$dbname = "login_db";

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

// Memeriksa koneksi
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

Buat file login.php untuk memproses form login dan memverifikasi kredensial pengguna.

Verifikasi Login

<?php
include 'db.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = md5($_POST['password']); // Menggunakan MD5 untuk mencocokkan dengan database

    $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // Login berhasil
        echo "Login successful!";
    } else {
        // Login gagal
        echo "Invalid username or password.";
    }
}

$conn->close();
?>

Ubah form login HTML agar mengarah ke "login.php".

Memodifikasi Form Login HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalist Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="login.php" method="post">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Penjelasan:

Database:
- Membuat database login_db dan tabel users untuk menyimpan data pengguna.
- Memasukkan beberapa data pengguna untuk pengujian.
Koneksi PHP ke Database:
- db.php mengatur koneksi ke database menggunakan mysqli.
Verifikasi Login:
- login.php memproses data dari form login dan memverifikasi kredensial pengguna dengan mencocokkannya di database.
Form Login HTML:
- Form login HTML mengarah ke login.php untuk memproses login.

Dengan mengikuti langkah-langkah ini, Anda dapat membuat sistem login sederhana yang terhubung dengan database MySQL menggunakan PHP. Pastikan untuk menjaga keamanan data pengguna dan mempertimbangkan penggunaan hashing yang lebih kuat seperti bcrypt untuk kata sandi.