بناء قائمة المهام باستخدام php و قاعدة بيانات MySQL

 

سنقوم في هذا البرنامج التعليمي php بتنفيذ جزء صغير جدًا منه يُستخدم للاستخدام الشخصي في مشروعات الويب.

اذهب إلى البرنامج التعليمي لإنشاء قائمة مهام باستخدام ملف php .


نقوم بإنشاء تطبيق قائمة مهام بسيط يتلقى المهام التي يتم إرسالها في نموذج HTML ويخزنها في قاعدة بيانات MySQL.

يمكن أيضًا استدعاء هذه المهام من قاعدة البيانات وعرضها داخل صفحة ويب مع وجود زر حذف لكل منها، والذي يمكن حذفه من قاعدة البيانات بالنقر فوق الزر.


بناء جداول قاعدة البيانات

عادة، نقوم بإنشاء قاعدة البيانات الخاصة بنا عن طريق إدخال phpmyadmin وتسميتها todo. ثم نقوم بإنشاء جدول tasks لتخزين المهام.


نقوم بإنشاء حقلين لهذا الجدول:


(10) id  - int

 (255) task - varchar 


الآن نقوم بإنشاء ملفين:


index.php

style.css

افتح كلاهما في محرر نصوص بسيط مثل المفكرة index.php وضع الكود التالي للملف.

<!DOCTYPE html>
<html>
<head>
	<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
	<div class="heading">
		<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
	</div>
	<form method="post" action="index.php" class="input_form">
		<input type="text" name="task" class="task_input">
		<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
	</form>
</body>
</html>


هذه الرموز هي نفس بنية HTML وشكلها لتسجيل مهمة جديدة.

إذا فتحت هذا الملف في المتصفح، فسترى شيئًا كالتالي:


بناء قائمة المهام باستخدام php

الآن لجعل النموذج أكثر جمالًا، نضيف العلامة التالية <title> لهذا السطر لإضافة ملف css:


<link rel="stylesheet" type="text/css" href="style.css">


افتح الملف  style.css الذي أنشأناه سابقًا وقم بوضع الكود التالي:


.heading{
	width: 50%;
	margin: 30px auto;
	text-align: center;
	color: 	#6B8E23;
	background: #FFF8DC;
	border: 2px solid #6B8E23;
	border-radius: 20px;
}
form {
	width: 50%; 
	margin: 30px auto; 
	border-radius: 5px; 
	padding: 10px;
	background: #FFF8DC;
	border: 1px solid #6B8E23;
}
form p {
	color: red;
	margin: 0px;
}
.task_input {
	width: 75%;
	height: 15px; 
	padding: 10px;
	border: 2px solid #6B8E23;
}
.add_btn {
	height: 39px;
	background: #FFF8DC;
	color: 	#6B8E23;
	border: 2px solid #6B8E23;
	border-radius: 5px; 
	padding: 5px 20px;
}

table {
    width: 50%;
    margin: 30px auto;
    border-collapse: collapse;
}

tr {
	border-bottom: 1px solid #cbcbcb;
}

th {
	font-size: 19px;
	color: #6B8E23;
}

th, td{
	border: none;
    height: 30px;
    padding: 2px;
}

tr:hover {
	background: #E9E9E9;
}

.task {
	text-align: left;
}

.delete{
	text-align: center;
}
.delete a{
	color: white;
	background: #a52a2a;
	padding: 1px 6px;
	border-radius: 3px;
	text-decoration: none;
}


إذا فعلت الشيء الصحيح وقمت بحفظ الصفحة وتحديثها، فسترى:


بناء قائمة المهام باستخدام php


الاتصال بقاعدة بيانات MySQL باستخدام PHP

نحتاج الآن إلى كتابة كود php للاتصال بقاعدة البيانات.


أضف الكود أعلى الملف index.php في السطر الأول قبل <html> هذا الرمز:


<?php 
    // initialize errors variable
	$errors = "";

	// connect to database
	$db = mysqli_connect("localhost", "root", "", "todo");

	// insert a quote if submit button is clicked
	if (isset($_POST['submit'])) {
		if (empty($_POST['task'])) {
			$errors = "You must fill in the task";
		}else{
			$task = $_POST['task'];
			$sql = "INSERT INTO tasks (task) VALUES ('$task')";
			mysqli_query($db, $sql);
			header('location: index.php');
		}
	}	

	// ...


إذا أجريت هذه العملية داخل المضيف المحلي، فلا داعي لتغيير أي شيء في الكود، وإلا تأكد من تغيير معلومات تسجيل الدخول إلى قاعدة البيانات في السطر 6.


إذا قام المستخدم بالنقر فوق الزر إرسال، يتم تخزين المهمة في قاعدة البيانات.


ومع ذلك، إذا كان حقل المهمة فارغًا، $errors فسيتم تعيين المتغير الذي يحتوي على نص الخطأ الخاص بنا، ولكن لن يتم عرض قيمته.


لذلك علينا أن نظهر الخطأ للمستخدم.


للقيام بذلك، نضع الكود التالي بالضبط تحت العلامة <form>:

<?php if (isset($errors)) { ?>
	<p><?php echo $errors; ?></p>
<?php } ?>


إذا حاول المستخدم إرسال قيمة فارغة، فسيتم عرض هذا الخطأ:


بناء قائمة المهام باستخدام php

عرض المهام المحفوظة

حتى الآن، تم إنشاء قائمة المهام باستخدام php، لكننا لم نعرض أي شيء.


لذلك، نحتاج إلى استدعاء المعلومات من قاعدة البيانات وعرضها.


index.php افتح الملف وضع الكود التالي قبل العلامة مباشرة </form>:


//...
// </form>

<table>
	<thead>
		<tr>
			<th>N</th>
			<th>Tasks</th>
			<th style="width: 60px;">Action</th>
		</tr>
	</thead>

	<tbody>
		<?php 
		// select all tasks if page is visited or refreshed
		$tasks = mysqli_query($db, "SELECT * FROM tasks");

		$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
			<tr>
				<td> <?php echo $i; ?> </td>
				<td class="task"> <?php echo $row['task']; ?> </td>
				<td class="delete"> 
					<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a> 
				</td>
			</tr>
		<?php $i++; } ?>	
	</tbody>
</table>


إذا أدخلت مهمة في النموذج ونقرت على زر الإرسال " إضافة مهمة "، فسيكون الناتج:


بناء قائمة المهام باستخدام php

الآن بالنسبة للخطوة الأخيرة من البرنامج التعليمي لإنشاء قائمة مهام باستخدام php، فلنقم بترميز زر الحذف.

في الجزء العلوي من الصفحة، بعد كتلة if التي تخزن المهمة في قاعدة البيانات، أضف هذا الرمز:


// delete task
if (isset($_GET['del_task'])) {
	$id = $_GET['del_task'];

	mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
	header('location: index.php');
}

?>


كان هذا هو، لقد انتهى. الآن إذا ضغطت على الزر "x"، فسيتم حذف الصف المطلوب من قاعدة البيانات.


ملخص البرنامج التعليمي لبناء قائمة المهام باستخدام ملف php

آمل أن تكون قد استفدت بشكل كامل من البرنامج التعليمي لقائمة المهام باستخدام php.


للممارسة، إحدى الميزات التي أوصي بإضافتها إلى هذا الرمز هي تمكين التحرير بحيث يمكن للمستخدم تغيير نص المهمة.


كل ما عليك فعله هو استخدام الأمر Update في عملية mysql: CRUD في MySQL



كلمات مفتاحية: