Kulinda App kwa Login (Dashboard Login Example) | HATUA YA 6
Baada ya website yako kuwa PWA/app, ni muhimu kudhibiti access. Hii inamaanisha baadhi ya sehemu (kama dashboard, user data, au settings) lazima ziwe accessible kwa watumiaji waliyo login tu. Hapa tutaonyesha mfano rahisi wa login system kwa PHP, inayoweza ku-handle dashboard kwa user.
1️⃣ HTML Login Form
<?php
session_start();
$error = "";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
// Example: hardcoded admin credentials (replace with DB for real app)
$admin_user = "admin";
$admin_pass = "password2026";
if ($username === $admin_user && $password === $admin_pass) {
$_SESSION['logged_in'] = true;
$_SESSION['username'] = $username;
header("Location: dashboard.php");
exit;
} else {
$error = "Username au password sio sahihi!";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container d-flex justify-content-center align-items-center" style="height:100vh;">
<div class="card p-4 shadow" style="max-width:400px; width:100%;">
<h3 class="text-center mb-3">Login Dashboard</h3>
<?php if($error) echo "<div class='alert alert-danger'>$error</div>"; ?>
<form method="POST">
<div class="mb-3">
<label>Username</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="mb-3">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<button class="btn btn-primary w-100">Login</button>
</form>
</div>
</div>
</body>
</html>
2️⃣ Dashboard (Protected Page)
<?php
session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
header("Location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dashboard</a>
<div class="d-flex">
<a href="logout.php" class="btn btn-outline-light">Logout</a>
</div>
</div>
</nav>
<div class="container py-4">
<h2>Welcome, <?= htmlspecialchars($_SESSION['username']) ?></h2>
<p>Hii ni dashboard ya app yako. Hapa unaweza kudhibiti watumiaji, content, na settings.</p>
</div>
</body>
</html>
3️⃣ Logout
<?php
session_start();
session_destroy();
header("Location: login.php");
exit;
4️⃣ Tips
Badilisha hardcoded username/password na database users ili iwe secure
Passwords hash ili zisiwe plain text (password_hash + password_verify)
PWA inaweza kutumia localStorage / sessionStorage kwa token-based auth, lakini server-side PHP login ndio safest
Protect all pages (dashboard, settings, admin) with session check
🔗 Links Za Kujifunza Zaidi
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming:
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.