Jinsi ya Kuunganisha PHP, MySQL Database na HTML Hatua kwa Hatua
Katika somo hili tutajifunza jinsi HTML, PHP na MySQL zinavyofanya kazi pamoja kwa kutengeneza mfumo mdogo wa kusajili wanafunzi.
Mfumo wetu utaweza:
- Kupokea taarifa kupitia HTML form
- Kuhifadhi taarifa kwenye MySQL
- Kuonyesha taarifa kwa kutumia PHP
- Kuhariri taarifa
- Kufuta taarifa
- Kutafuta mwanafunzi
- Kulinda database kwa prepared statements
PHP, MySQL na HTML zinafanya kazi gani?
HTML
HTML hutengeneza sehemu zinazoonekana kwenye browser, kama:
- Form
- Input
- Button
- Table
- Navigation menu
PHP
PHP hupokea na kuchakata taarifa kutoka kwenye HTML form. Pia huunganisha website na database.
MySQL
MySQL huhifadhi taarifa kwenye tables za database.
Mtiririko wake ni huu:
Mtumiaji anajaza HTML form
↓
PHP inapokea taarifa
↓
PHP inatuma taarifa MySQL
↓
MySQL inahifadhi taarifa
↓
PHP inasoma taarifa
↓
HTML table inaonyesha taarifaHatua ya 1: Sakinisha XAMPP
Pakua na usakinishe XAMPP. Baada ya kusakinisha:
- Fungua XAMPP Control Panel.
- Washa
Apache. - Washa
MySQL.
Apache inaendesha PHP, wakati MySQL inasimamia database.
Hatua ya 2: Tengeneza project
Fungua folder:
C:\xampp\htdocsTengeneza folder jipya:
student_systemNdani yake tengeneza faili:
index.phpProject itafunguliwa kupitia:
http://localhost/student_system/Hatua ya 3: Tengeneza database
Fungua:
http://localhost/phpmyadminBonyeza sehemu ya SQL, kisha weka code hii:
CREATE DATABASE student_system
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
USE student_system;
CREATE TABLE students (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
student_name VARCHAR(150) NOT NULL,
gender ENUM('Male', 'Female') NOT NULL,
class_name VARCHAR(100) NOT NULL,
phone_number VARCHAR(20) DEFAULT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);Bonyeza Go kuendesha SQL.
Kuelewa table yetu
id— namba ya kipekee ya mwanafunzistudent_name— jina kamiligender— jinsiaclass_name— darasaphone_number— namba ya simucreated_at— tarehe ya kusajiliwa
Hatua ya 4: Full code ya PHP, MySQL na HTML
Weka code hii yote ndani ya index.php:
<?php
declare(strict_types=1);
session_start();
/*
|--------------------------------------------------------------------------
| DATABASE CONNECTION
|--------------------------------------------------------------------------
*/
$host = 'localhost';
$database = 'student_system';
$username = 'root';
$password = '';
try {
$pdo = new PDO(
"mysql:host={$host};dbname={$database};charset=utf8mb4",
$username,
$password,
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false
]
);
} catch (PDOException $exception) {
error_log($exception->getMessage());
exit('Imeshindikana kuunganisha database.');
}
/*
|--------------------------------------------------------------------------
| HELPER FUNCTION
|--------------------------------------------------------------------------
*/
function escape($value): string
{
return htmlspecialchars(
(string)$value,
ENT_QUOTES,
'UTF-8'
);
}
/*
|--------------------------------------------------------------------------
| CSRF SECURITY
|--------------------------------------------------------------------------
*/
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrfToken = $_SESSION['csrf_token'];
$error = '';
$success = '';
/*
|--------------------------------------------------------------------------
| ADD STUDENT
|--------------------------------------------------------------------------
*/
if (
$_SERVER['REQUEST_METHOD'] === 'POST' &&
isset($_POST['add_student'])
) {
$submittedToken = (string)($_POST['csrf_token'] ?? '');
if (!hash_equals($csrfToken, $submittedToken)) {
$error = 'Ombi limekataliwa kwa sababu za kiusalama.';
} else {
$studentName = trim(
(string)($_POST['student_name'] ?? '')
);
$gender = trim(
(string)($_POST['gender'] ?? '')
);
$className = trim(
(string)($_POST['class_name'] ?? '')
);
$phoneNumber = trim(
(string)($_POST['phone_number'] ?? '')
);
if (
$studentName === '' ||
$gender === '' ||
$className === ''
) {
$error = 'Tafadhali jaza sehemu zote muhimu.';
} elseif (!in_array($gender, ['Male', 'Female'], true)) {
$error = 'Jinsia iliyochaguliwa si sahihi.';
} else {
$checkStatement = $pdo->prepare(
'SELECT id
FROM students
WHERE student_name = ?
AND class_name = ?
LIMIT 1'
);
$checkStatement->execute([
$studentName,
$className
]);
if ($checkStatement->fetch()) {
$error = 'Mwanafunzi huyu tayari yupo kwenye darasa hilo.';
} else {
$insertStatement = $pdo->prepare(
'INSERT INTO students
(
student_name,
gender,
class_name,
phone_number
)
VALUES (?, ?, ?, ?)'
);
$insertStatement->execute([
$studentName,
$gender,
$className,
$phoneNumber !== '' ? $phoneNumber : null
]);
header('Location: index.php?message=added');
exit;
}
}
}
}
/*
|--------------------------------------------------------------------------
| UPDATE STUDENT
|--------------------------------------------------------------------------
*/
if (
$_SERVER['REQUEST_METHOD'] === 'POST' &&
isset($_POST['update_student'])
) {
$submittedToken = (string)($_POST['csrf_token'] ?? '');
if (!hash_equals($csrfToken, $submittedToken)) {
$error = 'Ombi limekataliwa kwa sababu za kiusalama.';
} else {
$studentId = (int)($_POST['student_id'] ?? 0);
$studentName = trim((string)($_POST['student_name'] ?? ''));
$gender = trim((string)($_POST['gender'] ?? ''));
$className = trim((string)($_POST['class_name'] ?? ''));
$phoneNumber = trim((string)($_POST['phone_number'] ?? ''));
if (
$studentId <= 0 ||
$studentName === '' ||
$gender === '' ||
$className === ''
) {
$error = 'Tafadhali jaza taarifa zote muhimu.';
} elseif (!in_array($gender, ['Male', 'Female'], true)) {
$error = 'Jinsia iliyochaguliwa si sahihi.';
} else {
$updateStatement = $pdo->prepare(
'UPDATE students
SET student_name = ?,
gender = ?,
class_name = ?,
phone_number = ?
WHERE id = ?'
);
$updateStatement->execute([
$studentName,
$gender,
$className,
$phoneNumber !== '' ? $phoneNumber : null,
$studentId
]);
header('Location: index.php?message=updated');
exit;
}
}
}
/*
|--------------------------------------------------------------------------
| DELETE STUDENT
|--------------------------------------------------------------------------
*/
if (
$_SERVER['REQUEST_METHOD'] === 'POST' &&
isset($_POST['delete_student'])
) {
$submittedToken = (string)($_POST['csrf_token'] ?? '');
if (!hash_equals($csrfToken, $submittedToken)) {
$error = 'Ombi limekataliwa kwa sababu za kiusalama.';
} else {
$studentId = (int)($_POST['student_id'] ?? 0);
if ($studentId > 0) {
$deleteStatement = $pdo->prepare(
'DELETE FROM students WHERE id = ?'
);
$deleteStatement->execute([$studentId]);
header('Location: index.php?message=deleted');
exit;
}
}
}
/*
|--------------------------------------------------------------------------
| SUCCESS MESSAGES
|--------------------------------------------------------------------------
*/
$message = (string)($_GET['message'] ?? '');
if ($message === 'added') {
$success = 'Mwanafunzi amesajiliwa vizuri.';
} elseif ($message === 'updated') {
$success = 'Taarifa zimebadilishwa vizuri.';
} elseif ($message === 'deleted') {
$success = 'Mwanafunzi amefutwa.';
}
/*
|--------------------------------------------------------------------------
| GET STUDENT FOR EDITING
|--------------------------------------------------------------------------
*/
$editStudent = null;
$editId = (int)($_GET['edit'] ?? 0);
if ($editId > 0) {
$editStatement = $pdo->prepare(
'SELECT *
FROM students
WHERE id = ?
LIMIT 1'
);
$editStatement->execute([$editId]);
$editStudent = $editStatement->fetch() ?: null;
}
/*
|--------------------------------------------------------------------------
| SEARCH AND DISPLAY STUDENTS
|--------------------------------------------------------------------------
*/
$search = trim((string)($_GET['search'] ?? ''));
if ($search !== '') {
$searchStatement = $pdo->prepare(
'SELECT *
FROM students
WHERE student_name LIKE ?
OR class_name LIKE ?
OR phone_number LIKE ?
ORDER BY id DESC'
);
$searchValue = '%' . $search . '%';
$searchStatement->execute([
$searchValue,
$searchValue,
$searchValue
]);
$students = $searchStatement->fetchAll();
} else {
$students = $pdo
->query('SELECT * FROM students ORDER BY id DESC')
->fetchAll();
}
?>
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>Mfumo wa Kusajili Wanafunzi</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
rel="stylesheet"
>
<style>
:root {
--primary: #1d4ed8;
--dark: #0f172a;
--background: #f1f5f9;
--white: #ffffff;
--border: #e2e8f0;
}
body {
min-height: 100vh;
background:
radial-gradient(
circle at top left,
rgba(37, 99, 235, 0.15),
transparent 35%
),
var(--background);
color: var(--dark);
}
.navbar {
background: linear-gradient(
135deg,
#07152f,
var(--primary)
);
}
.page-header,
.content-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}
.page-header {
padding: 25px;
}
.content-card {
overflow: hidden;
}
.form-control,
.form-select {
min-height: 48px;
border-radius: 12px;
}
.btn {
border-radius: 11px;
font-weight: 700;
}
.table thead th {
background: #0f274f;
color: var(--white);
border: 0;
white-space: nowrap;
}
.table tbody td {
vertical-align: middle;
}
.student-number {
display: inline-grid;
min-width: 36px;
height: 32px;
place-items: center;
border-radius: 9px;
background: #dbeafe;
color: var(--primary);
font-weight: 800;
}
.empty-state {
padding: 45px 20px;
color: #64748b;
text-align: center;
}
footer {
color: #64748b;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark">
<div class="container py-2">
<a href="index.php" class="navbar-brand fw-bold">
<i class="bi bi-mortarboard-fill me-2"></i>
Mfumo wa Wanafunzi
</a>
</div>
</nav>
<main class="container py-5">
<section class="page-header mb-4">
<h1 class="fw-bold mb-2">
Usajili wa Wanafunzi
</h1>
<p class="text-muted mb-0">
Mfano wa kuunganisha HTML, PHP na MySQL.
</p>
</section>
<?php if ($error !== ''): ?>
<div class="alert alert-danger">
<i class="bi bi-exclamation-triangle me-1"></i>
<?= escape($error) ?>
</div>
<?php endif; ?>
<?php if ($success !== ''): ?>
<div class="alert alert-success">
<i class="bi bi-check-circle me-1"></i>
<?= escape($success) ?>
</div>
<?php endif; ?>
<div class="row g-4">
<div class="col-lg-4">
<section class="content-card">
<div class="p-4 border-bottom">
<h4 class="fw-bold mb-1">
<?php if ($editStudent): ?>
Hariri Mwanafunzi
<?php else: ?>
Sajili Mwanafunzi
<?php endif; ?>
</h4>
<small class="text-muted">
Jaza taarifa zinazohitajika.
</small>
</div>
<form method="post" class="p-4">
<input
type="hidden"
name="csrf_token"
value="<?= escape($csrfToken) ?>"
>
<?php if ($editStudent): ?>
<input
type="hidden"
name="student_id"
value="<?= (int)$editStudent['id'] ?>"
>
<?php endif; ?>
<div class="mb-3">
<label class="form-label fw-semibold">
Jina kamili
</label>
<input
type="text"
name="student_name"
class="form-control"
value="<?= escape(
$editStudent['student_name'] ?? ''
) ?>"
placeholder="Mfano: Asha Ally"
required
>
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
Jinsia
</label>
<select
name="gender"
class="form-select"
required
>
<option value="">Chagua jinsia</option>
<option
value="Male"
<?= ($editStudent['gender'] ?? '') === 'Male'
? 'selected'
: '' ?>
>
Mvulana
</option>
<option
value="Female"
<?= ($editStudent['gender'] ?? '') === 'Female'
? 'selected'
: '' ?>
>
Msichana
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
Darasa
</label>
<input
type="text"
name="class_name"
class="form-control"
value="<?= escape(
$editStudent['class_name'] ?? ''
) ?>"
placeholder="Mfano: Form One"
required
>
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
Namba ya simu
</label>
<input
type="tel"
name="phone_number"
class="form-control"
value="<?= escape(
$editStudent['phone_number'] ?? ''
) ?>"
placeholder="Mfano: 0712345678"
>
</div>
<div class="d-grid gap-2">
<?php if ($editStudent): ?>
<button
type="submit"
name="update_student"
class="btn btn-warning"
>
<i class="bi bi-check-circle me-1"></i>
Hifadhi Mabadiliko
</button>
<a
href="index.php"
class="btn btn-outline-secondary"
>
Acha Kuhariri
</a>
<?php else: ?>
<button
type="submit"
name="add_student"
class="btn btn-primary"
>
<i class="bi bi-person-plus me-1"></i>
Sajili Mwanafunzi
</button>
<?php endif; ?>
</div>
</form>
</section>
</div>
<div class="col-lg-8">
<section class="content-card">
<div class="p-4 border-bottom">
<div class="d-flex flex-column flex-md-row
justify-content-between
align-items-md-center gap-3">
<div>
<h4 class="fw-bold mb-1">
Orodha ya Wanafunzi
</h4>
<small class="text-muted">
Jumla: <?= count($students) ?>
</small>
</div>
<form method="get" class="d-flex gap-2">
<input
type="search"
name="search"
value="<?= escape($search) ?>"
class="form-control"
placeholder="Tafuta mwanafunzi"
>
<button
type="submit"
class="btn btn-primary"
>
<i class="bi bi-search"></i>
</button>
</form>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Namba</th>
<th>Jina</th>
<th>Jinsia</th>
<th>Darasa</th>
<th>Simu</th>
<th>Vitendo</th>
</tr>
</thead>
<tbody>
<?php if (!$students): ?>
<tr>
<td colspan="6">
<div class="empty-state">
Hakuna mwanafunzi aliyepatikana.
</div>
</td>
</tr>
<?php endif; ?>
<?php foreach ($students as $index => $student): ?>
<tr>
<td>
<span class="student-number">
<?= $index + 1 ?>
</span>
</td>
<td class="fw-semibold">
<?= escape(
$student['student_name']
) ?>
</td>
<td>
<?= escape($student['gender']) ?>
</td>
<td>
<?= escape($student['class_name']) ?>
</td>
<td>
<?= escape(
$student['phone_number'] ?? '-'
) ?>
</td>
<td class="text-nowrap">
<a
href="?edit=<?= (int)$student['id'] ?>"
class="btn btn-sm btn-warning"
>
<i class="bi bi-pencil"></i>
Hariri
</a>
<form
method="post"
class="d-inline"
onsubmit="return confirm(
'Una uhakika unataka kufuta mwanafunzi huyu?'
);"
>
<input
type="hidden"
name="csrf_token"
value="<?= escape($csrfToken) ?>"
>
<input
type="hidden"
name="student_id"
value="<?= (int)$student['id'] ?>"
>
<button
type="submit"
name="delete_student"
class="btn btn-sm btn-danger"
>
<i class="bi bi-trash"></i>
Futa
</button>
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
</div>
</div>
</main>
<footer class="container pb-4">
<small>
© <?= date('Y') ?> Mfumo wa Wanafunzi
</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Hatua ya 5: Kuelewa connection ya database
Sehemu hii inaunganisha PHP na MySQL:
$pdo = new PDO(
"mysql:host={$host};dbname={$database};charset=utf8mb4",
$username,
$password
);Kwa XAMPP settings huwa:
$host = 'localhost';
$database = 'student_system';
$username = 'root';
$password = '';Ukiweka mfumo kwenye hosting, utabadilisha:
$database = 'jina_la_database';
$username = 'database_username';
$password = 'database_password';Hatua ya 6: Jinsi HTML form inavyotuma taarifa PHP
Form inaanza hivi:
<form method="post">Input ina jina:
<input type="text" name="student_name">PHP inapokea taarifa kupitia jina hilo:
$studentName = $_POST['student_name'];Button inaonyesha operation inayotakiwa:
<button type="submit" name="add_student">
Sajili
</button>PHP inatambua button iliyobonyezwa:
if (isset($_POST['add_student'])) {
// Hifadhi mwanafunzi
}Hatua ya 7: Kuingiza taarifa MySQL
$statement = $pdo->prepare(
'INSERT INTO students
(student_name, gender, class_name, phone_number)
VALUES (?, ?, ?, ?)'
);
$statement->execute([
$studentName,
$gender,
$className,
$phoneNumber
]);Alama za ? zinawakilisha taarifa zitakazoingizwa.
Prepared statements ni salama zaidi kuliko kuweka taarifa za mtumiaji moja kwa moja ndani ya SQL.
Hatua ya 8: Kuchukua taarifa MySQL
$students = $pdo
->query('SELECT * FROM students ORDER BY id DESC')
->fetchAll();PHP inachukua records zote kutoka table ya students.
HTML inazizungusha kwa kutumia foreach:
<?php foreach ($students as $student): ?>
<p>
<?= escape($student['student_name']) ?>
</p>
<?php endforeach; ?>Hatua ya 9: Kuhariri taarifa
Tunachukua record kwa id:
$statement = $pdo->prepare(
'SELECT * FROM students WHERE id = ?'
);
$statement->execute([$studentId]);Baada ya mtumiaji kubadilisha taarifa, tunatumia:
UPDATE students
SET student_name = ?,
gender = ?,
class_name = ?,
phone_number = ?
WHERE id = ?Hatua ya 10: Kufuta taarifa
$statement = $pdo->prepare(
'DELETE FROM students WHERE id = ?'
);
$statement->execute([$studentId]);Button ya kufuta hutumia POST badala ya link ya kawaida. Hii ni salama zaidi kuliko kutumia GET.
Hatua ya 11: Kulinda mfumo
Prepared statements
Prepared statements husaidia kuzuia SQL injection.
htmlspecialchars()
htmlspecialchars($value, ENT_QUOTES, 'UTF-8');Huzuia code hatari kuendeshwa wakati taarifa zinaonyeshwa.
CSRF token
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));CSRF token husaidia kuhakikisha form imetumwa kutoka kwenye mfumo wako.
Validation
if ($studentName === '') {
$error = 'Jina linahitajika.';
}Usiamini taarifa zinazotumwa na mtumiaji bila kuzikagua.
Hatua ya 12: Kuendesha project
- Washa Apache na MySQL kwenye XAMPP.
- Hakikisha database
student_systemimetengenezwa. - Hifadhi code kwenye:
C:\xampp\htdocs\student_system\index.php- Fungua browser.
- Tembelea:
http://localhost/student_system/Makosa ya kawaida
Database connection failed
Angalia:
- MySQL imewashwa?
- Jina la database ni sahihi?
- Username na password ni sahihi?
- Database imetengenezwa?
Table students doesn't exist
Hakikisha umeendesha SQL ya kutengeneza table.
PHP code inaonekana kama maandishi
Usifungue index.php moja kwa moja kwa double-click. Tumia:
http://localhost/student_system/Pia hakikisha Apache imewashwa.
404 Not Found
Hakikisha folder lipo ndani ya:
C:\xampp\htdocsData haiingii kwenye database
Angalia:
- Form inatumia
method="post" - Input zina
name - Button ina
name="add_student" - Database connection inafanya kazi
- Columns za table zinafanana na SQL
Hitimisho
Sasa umejifunza jinsi ya:
- Kutengeneza HTML form
- Kutuma taarifa kwa PHP
- Kuunganisha PHP na MySQL
- Kuhifadhi taarifa
- Kuonyesha taarifa
- Kutafuta taarifa
- Kuhariri taarifa
- Kufuta taarifa
- Kutumia prepared statements
- Kutumia CSRF protection
Huu ndio msingi wa kutengeneza mifumo mikubwa kama:
- Mfumo wa matokeo
- Mfumo wa shule
- Mfumo wa uhasibu
- Mfumo wa mauzo
- Mfumo wa michango
- Mfumo wa usimamizi wa watumiaji
SEO Title: Jinsi ya Kuunganisha PHP, MySQL Database na HTML Hatua kwa Hatua
Meta Description: Jifunze kuunganisha PHP, MySQL na HTML kwa Kiswahili. Tengeneza mfumo kamili wa kusajili, kuonyesha, kuhariri na kufuta wanafunzi.
Keywords: kuunganisha PHP na MySQL, PHP MySQL HTML, PHP database connection, PHP CRUD system, kujifunza PHP Kiswahili, MySQL tutorial Tanzania, HTML form PHP
🚀 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.