المشروع الثاني: موقع لعرض المقالات
في الدرس ده، هنتعلم إزاي نعمل موقع بسيط لعرض المقالات باستخدام PHP وMySQL. الموقع ده هيساعدك تفهم إزاي تعمل CRUD (إنشاء، قراءة، تحديث، وحذف) للمقالات.
1. إعداد قاعدة البيانات
أول حاجة، هنعمل قاعدة بيانات جديدة اسمها blog وهنعمل فيها جدول articles. ممكن تستخدم الكود ده لإنشاء قاعدة البيانات والجدول:
CREATE DATABASE blog;
USE blog;
CREATE TABLE articles (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
2. إعداد اتصال قاعدة البيانات
بعد ما عملنا قاعدة البيانات، نحتاج نعمل ملف للاتصال بقاعدة البيانات. هنسمي الملف db.php ومحتواه هيكون كالتالي:
<?php
$host = 'localhost';
$db_name = 'blog';
$username = 'your_username'; // هنا حط اسم المستخدم بتاع قاعدة البيانات
$password = 'your_password'; // هنا حط كلمة السر بتاعتك
try {
$conn = new PDO("mysql:host=$host;dbname=$db_name", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>
3. واجهة عرض المقالات
دلوقتي هنبدأ نعمل واجهة لعرض المقالات. هنسمي الملف index.php ومحتواه هيكون كالتالي:
<?php
include 'db.php';
// جلب المقالات من قاعدة البيانات
$stmt = $conn->prepare("SELECT * FROM articles");
$stmt->execute();
$articles = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>موقع عرض المقالات</title>
</head>
<body>
<h1>موقع عرض المقالات</h1>
<h2>المقالات</h2>
<table border="1">
<tr>
<th>ID</th>
<th>العنوان</th>
<th>المحتوى</th>
<th>تاريخ الإنشاء</th>
</tr>
<?php foreach ($articles as $article): ?>
<tr>
<td><?php echo $article['id']; ?></td>
<td><?php echo $article['title']; ?></td>
<td><?php echo $article['content']; ?></td>
<td><?php echo $article['created_at']; ?></td>
</tr>
<?php endforeach; ?>
</table>
<a href="create_article.php">إضافة مقال جديد</a>
</body>
</html>
4. إضافة مقال جديد
عشان نضيف مقال جديد، هنعمل ملف جديد اسمه create_article.php ومحتواه هيكون كالتالي:
<?php
include 'db.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$title = $_POST['title'];
$content = $_POST['content'];
$stmt = $conn->prepare("INSERT INTO articles (title, content) VALUES (?, ?)");
$stmt->execute([$title, $content]);
header("Location: index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إضافة مقال جديد</title>
</head>
<body>
<h1>إضافة مقال جديد</h1>
<form method="POST" action="">
<label for="title">العنوان:</label><br>
<input type="text" id="title" name="title" required><br>
<label for="content">المحتوى:</label><br>
<textarea id="content" name="content" required></textarea><br><br>
<input type="submit" value="إضافة">
</form>
</body>
</html>
5. تحديث مقال
عشان نحدث مقال، هنعمل ملف اسمه edit_article.php ومحتواه هيكون كالتالي:
<?php
include 'db.php';
if (isset($_GET['id'])) {
$id = $_GET['id'];
$stmt = $conn->prepare("SELECT * FROM articles WHERE id = ?");
$stmt->execute([$id]);
$article = $stmt->fetch();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$title = $_POST['title'];
$content = $_POST['content'];
$stmt = $conn->prepare("UPDATE articles SET title = ?, content = ? WHERE id = ?");
$stmt->execute([$title, $content, $id]);
header("Location: index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديث مقال</title>
</head>
<body>
<h1>تحديث مقال</h1>
<form method="POST" action="">
<label for="title">العنوان:</label><br>
<input type="text" id="title" name="title" value="<?php echo $article['title']; ?>" required><br>
<label for="content">المحتوى:</label><br>
<textarea id="content" name="content" required><?php echo $article['content']; ?></textarea><br><br>
<input type="submit" value="تحديث">
</form>
</body>
</html>
6. حذف مقال
عشان نحذف مقال، هنستخدم ملف اسمه delete_article.php. محتواه هيكون كالتالي:
<?php
include 'db.php';
if (isset($_GET['id'])) {
$id = $_GET['id'];
// تنفيذ عملية الحذف
$stmt = $conn->prepare("DELETE FROM articles WHERE id = ?");
$stmt->execute([$id]);
header("Location: index.php");
exit();
}
?>
دلوقتي، لما نكون عايزين نحذف مقال، هنستخدم الرابط delete_article.php?id=مُعرّف_المقال عشان نحذف المقال بناءً على مُعرّفه.
7. تحسين واجهة المستخدم
ممكن نضيف CSS عشان نحسن شكل الموقع. هنضيف ملف CSS جديد باسم style.css ومحتواه هيكون كالتالي:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
بعد كده، هنضيف الملف CSS ده في صفحة index.php عن طريق إضافة السطر التالي في القسم <head>:
<link rel="stylesheet" href="style.css">
8. الخاتمة
دلوقتي، إحنا عملنا موقع بسيط لعرض المقالات باستخدام PHP وMySQL. الموقع ده بيسمح لنا بإضافة، عرض، تحديث، وحذف المقالات. حاول تضيف ميزات جديدة أو تحسن التصميم عشان تبني على المشروع ده.
