berikut adalah contoh struktur portal desa dengan HTML, lengkap dengan halaman login, logout, dan dashboard.
1. Halaman Login (login.html)
Halaman login akan meminta pengguna untuk memasukkan nama pengguna dan kata sandi.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Desa 2025 - Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Portal Desa 2025 - Login</h2>
<form action="dashboard.html" method="post">
<div class="form-group">
<label for="username">Nama Pengguna:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
2. Halaman Dashboard (dashboard.html)
Halaman dashboard yang akan muncul setelah login berhasil. Halaman ini hanya dapat diakses setelah login.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Portal Desa 2025</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dashboard-container">
<header>
<h1>Dashboard Portal Desa 2025</h1>
<a href="logout.html" class="logout">Logout</a>
</header>
<div class="dashboard-content">
<h2>Selamat datang di Dashboard Desa 2025</h2>
<p>Ini adalah area dashboard untuk mengelola berbagai informasi desa.</p>
<div class="menu">
<ul>
<li><a href="#">Data Penduduk</a></li>
<li><a href="#">Program Desa</a></li>
<li><a href="#">Keuangan Desa</a></li>
<li><a href="#">Berita Desa</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
3. Halaman Logout (logout.html)
Halaman logout hanya akan mengarahkan pengguna kembali ke halaman login setelah logout.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logout - Portal Desa 2025</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logout-container">
<h2>Anda telah berhasil logout.</h2>
<p><a href="login.html">Klik disini untuk login kembali</a></p>
</div>
</body>
</html>
4. File CSS (style.css)
File CSS ini akan mengatur tampilan untuk login, dashboard, dan logout.
css
/* Style untuk halaman login dan dashboard */
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 0;
}
h1, h2 {
color: #333;
}
a {
text-decoration: none;
color: #0066cc;
}
.login-container, .logout-container, .dashboard-container {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h2 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
.form-group {
margin-bottom: 15px;
}
label {
margin-bottom: 5px;
}
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #0066cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #005bb5;
}
.logout {
text-align: right;
font-size: 14px;
}
.dashboard-container {
padding: 20px;
background-color: #f9f9f9;
}
.dashboard-container header {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
margin: 10px 0;
}
.menu a {
color: #0066cc;
font-size: 16px;
}
.menu a:hover {
text-decoration: underline;
}Penjelasan
- Login Page: Halaman login ini menggunakan form yang mengirimkan data ke halaman dashboard menggunakan metode
POST. - Dashboard Page: Halaman ini hanya menampilkan menu dan informasi terkait desa. Anda bisa mengembangkan lebih lanjut dengan menambahkan interaksi menggunakan JavaScript atau server-side language seperti PHP.
- Logout Page: Setelah logout, pengguna akan diarahkan ke halaman yang memberi konfirmasi logout dan dapat mengakses kembali halaman login.
Jika Anda ingin menambahkan fungsionalitas login yang lebih dinamis dan aman (misalnya autentikasi), Anda bisa mempertimbangkan menggunakan server-side scripting seperti PHP atau Node.js untuk memproses login dan sesi pengguna.
Apakah Anda ingin saya menambahkan fungsionalitas lebih lanjut atau penyesuaian lainnya pada portal ini?
Selnjutnya Kita Membuarkan Database untuk mengkoneksikan ke Hlalamnanya:
Untuk menambahkan database dalam sistem Portal Desa 2025, Anda dapat menggunakan database seperti MySQL atau SQLite untuk menyimpan data pengguna dan data terkait lainnya (misalnya, data penduduk, program desa, dll.). Saya akan memberikan contoh sederhana menggunakan MySQL dan PHP sebagai backend untuk autentikasi login dan penyimpanan data pengguna.
1. Membuat Database MySQL
Pertama, kita perlu membuat sebuah database dan tabel untuk menyimpan data pengguna (username, password, dll.). Misalnya, kita akan membuat database bernama portal_desa dan tabel users.
sql:
CREATE DATABASE portal_desa;
USE portal_desa;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(100) NOT NULL,
password VARCHAR(255) NOT NULL
);
Tabel users ini menyimpan data pengguna yang terdiri dari kolom id, username, dan password. Catatan: Pastikan untuk menyimpan kata sandi yang telah dienkripsi dengan menggunakan algoritma seperti bcrypt atau Argon2 untuk keamanan.
2. Script PHP untuk Koneksi Database (db.php)
File ini akan menangani koneksi ke database MySQL.
php
<?php
$host = 'localhost'; // Atau IP server database Anda
$dbname = 'portal_desa';
$username = 'root'; // Ganti dengan username MySQL Anda
$password = ''; // Ganti dengan password MySQL Anda
try {
// Membuat koneksi ke database
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo 'Koneksi Gagal: ' . $e->getMessage();
}
?>
3. Script PHP untuk Proses Login (login.php)
Berikut adalah script PHP untuk memproses form login dan memeriksa kredensial pengguna.
phpCopy code
<?php
session_start();
include('db.php');
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// Mengambil data pengguna dari database
$stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username");
$stmt->execute(['username' => $username]);
$user = $stmt->fetch();
// Mengecek apakah password cocok
if ($user && password_verify($password, $user['password'])) {
// Menyimpan informasi pengguna dalam sesi
$_SESSION['username'] = $user['username'];
header("Location: dashboard.php"); // Arahkan ke dashboard
exit();
} else {
echo "Username atau password salah!";
}
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Portal Desa 2025</title>
</head>
<body>
<form action="login.php" method="POST">
<label for="username">Nama Pengguna:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>
</body>
</html>
4. Halaman Dashboard (dashboard.php)
Halaman dashboard hanya dapat diakses jika pengguna sudah login. Jadi, kita harus memeriksa sesi pengguna sebelum menampilkan halaman dashboard.
<?php
session_start();
// Mengecek apakah pengguna sudah login
if (!isset($_SESSION['username'])) {
header("Location: login.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Portal Desa 2025</title>
</head>
<body>
<h1>Selamat datang, <?php echo $_SESSION['username']; ?>!</h1>
<p>Ini adalah dashboard Portal Desa 2025.</p>
<a href="logout.php">Logout</a>
</body>
</html>
5. Halaman Logout (logout.php)
Halaman logout akan menghapus sesi dan mengarahkan pengguna kembali ke halaman login.
<?php
session_start();
session_unset(); // Menghapus semua data sesi
session_destroy(); // Menghancurkan sesi
header("Location: login.php"); // Arahkan kembali ke halaman login
exit();
?>
6. Menyimpan Password dengan Aman
Pada skrip login, kita menggunakan fungsi password_verify() untuk memeriksa kecocokan password yang dimasukkan dengan hash yang disimpan di database. Saat menyimpan password, pastikan Anda mengenkripsi password menggunakan password_hash().
Misalnya, saat menambahkan pengguna baru ke database, Anda harus mengenkripsi passwordnya.
<?php
include('db.php');
// Contoh untuk menambahkan pengguna baru ke database dengan password yang dienkripsi
$username = "new_user";
$password = "securepassword";
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$stmt = $pdo->prepare("INSERT INTO users (username, password) VALUES (:username, :password)");
$stmt->execute(['username' => $username, 'password' => $hashed_password]);
echo "Pengguna baru berhasil ditambahkan!";
?>
7. Keamanan dan Fitur Lanjutan
Beberapa fitur keamanan yang bisa ditambahkan lebih lanjut:
- Validasi input: Pastikan semua input dari pengguna tervalidasi dengan benar untuk menghindari serangan SQL Injection.
- Pengelolaan sesi: Pastikan sesi dijaga dengan aman dengan menggunakan
session_regenerate_id()saat login. - Penyimpanan lebih aman: Gunakan HTTPS untuk mengenkripsi data yang dikirimkan melalui jaringan.
Dengan menambahkan sistem login berbasis database seperti di atas, Anda dapat mengelola pengguna dengan lebih aman dan dinamis. Anda bisa menambahkan berbagai fitur lainnya di dashboard, seperti mengelola data desa, laporan, dan sebagainya.
Apakah Anda ingin menambahkan fitur lainnya atau penjelasan lebih lanjut mengenai penggunaan PHP dan MySQL ini?
