البرمجة في 7 أيام

التعامل مع قواعد البيانات

ستتعلم في هذا اليوم أساسيات التعامل مع قواعد البيانات مما يؤدي إلى تحويل موقعك الثابت إلى موقع تفاعلي

كيف أبدأ
قم بمشاهدة الفيديوهات مع متابعة الخطوات بالأسفل خطوة بخطوة
ابدأ من هنا

خطوة رقم 1

مقدمة إلى
قواعد البيانات mysql

خطوة رقم 2

مقدمة إلى
ajax

خطوة رقم 3

مقدمة إلى لغة
php

خطوة رقم 4

مقدمة إلى
json

خطوة رقم 5

التعريف بأوامر mysql الأساسية

أمر الإضافة إلى قاعدة البيانات
INSERT INTO table_name (column_name) VALUES (name)

أمر التعديل على قاعدة البيانات
UPDATE table_name SET column_name = name WHERE id = 3

أمر الحذف من قاعدة البيانات
DELETE FROM table_name WHERE id = 1

أمر جلب جميع البيانات من قاعدة البيانات
SELECT * FROM table_name

أمر جلب بيانات صف محدد من قاعدة البيانات
select * FROM table_name WHERE id = 6

أمر حذف جميع البيانات من قاعدة البيانات
truncate table table_name

خطوة رقم 6

تعديل بعض الإعدادات قبل إنشاء قاعدة البيانات

Sitting -> General -> PHP version -> Change PHP version -> PHP 5.5

File Manager -> upload files now -> .htaccess -> (edit)
أضف الكود التالي :
Header set Access-Control-Allow-Origin "*"

خطوة رقم 7

إنشاء قاعدة بيانات

اسم الجدول
Student
عدد الأعمدة = 4

اسم العمود الأول
id
النوع : INT
فهرسة : PRIMARY
A_I : صح

اسم العمود الثاني
s_name
النوع : VARCHAR
الطول : 255

اسم العمود الثالث
s_level
النوع : INT

اسم العمود الرابع
s_email
النوع : VARCHAR
الطول : 255

خطوة رقم 8

أنشئ مجلد جديد وقم بتسميته : اليوم السابع mysql

خطوة رقم 9

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته sql
وتكون صيغة الملف html. كما في المثال التالي

sql.html

خطوة رقم 10

انسخ الكود التالي وألصقه بداخل ملف sql.html

<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		
		<style>
			* {direction:rtl; text-align:center; font-size:25px;}
			body {background: #D8D8D8;}
			table {margin: auto;}
			table td {padding:10px; border:1px solid black;}
		</style>
	</head>
	
	<body>
		
		<br><br>
		رقم الطالب <input id= "num" type= "text" />
		<br><br>
		اسم الطالب <input id= "name" type= "text" />
		<br><br>
		 مستوى الطالب <input id= "level" type= "text" />
		<br><br>
		البريد الالكتروني <input id= "email" type= "text" />
		<br><br>
		
		<button onclick="AddData()"> أضف </button> 
		
		
		<br><br>
		
		<table id="showHere">
			
		</table>
		
		<script>
			
			
		</script>
	</body>
</html>

خطوة رقم 11

انسخ الكود التالي وألصقه في منطقة الـ script بداخل ملف sql.html

function AddData(){

	$.ajax({
		type: "POST",
		url: "أضف_رابط_موقعك_هنا/insert.php",
		data: {
			
			s_name: $("#name").val(),
			s_level: $("#level").val(),
			s_email: $("#email").val(),
			
		},
		
		success: function (data) {
			alert(data);
		},
		
		error: function () {
				alert("خطأ");
		}	
	});
	
}

خطوة رقم 12

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته insert
وتكون صيغة الملف php. كما في المثال التالي

insert.php

خطوة رقم 13

انسخ الكود التالي وألصقه بداخل ملف insert.php

<?php

$conn = mysqli_connect("localhost","اسم_المستخدم_لقاعدة_البيانات","12345678","اسم_قاعدة_البيانات");


$insert = "INSERT INTO Student (s_name, s_level, s_email)
			VALUES
		('".$_POST['s_name']."', '".$_POST['s_level']."', '".$_POST['s_email']."')";
	
	
    if (mysqli_query($conn, $insert))  { 

        echo "تمت الإضافة بنجاح DONE";
   
    } 


?>

خطوة رقم 14

رفع ملف php وتعديل رابط الإضافة في ملف sql.html

url: "أضف_رابط_موقعك_هنا/insert.php",

خطوة رقم 15

تنفيذ عملية الإضافة والتأكد من صحة الخطوات السابقة

خطوة رقم 16

طريقة تعديل البيانات
قم بنسخ الكود المطلوب وألصقه في ملف sql.html في مكانه الصحيح
مع بقاء الكود السابق كما كان


...
<button onclick="AddData()"> أضف </button> 
<button onclick="UpdateData()"> تعديل </button>
...

<script>
	
function UpdateData(){
	num = $("#num").val();
	$.ajax({
		type: "POST",
		url: "أضف_رابط_موقعك_هنا/update.php?id=" + num,
		data: {
			
			s_name: $("#name").val(),
			s_level: $("#level").val(),
			s_email: $("#email").val(),
			
		},
		
		success: function (data) {
			alert(data);
		},
		
		error: function () {
				alert("خطأ");
		}	
	});
}
	
	
		</script>
		...

خطوة رقم 17

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته update
وتكون صيغة الملف php. كما في المثال التالي

update.php

خطوة رقم 18

انسخ الكود التالي وألصقه بداخل ملف update.php

<?php

$conn = mysqli_connect("localhost","اسم_المستخدم_لقاعدة_البيانات","12345678","اسم_قاعدة_البيانات");


$update = "UPDATE Student SET 
	s_name = '".$_POST['s_name']."', 
	s_level = '".$_POST['s_level']."', 
	s_email = '".$_POST['s_email']."'
	WHERE id =" .$_GET['id'];
	
	
    if (mysqli_query($conn, $update))  { 

        echo "تم التعديل بنجاح DONE";
   
    } 


?>

خطوة رقم 19

رفع ملف update.php

خطوة رقم 20

تنفيذ عملية التعديل والتأكد من صحة الخطوات السابقة

خطوة رقم 21

طريقة حذف البيانات
قم بنسخ الكود المطلوب وألصقه في ملف sql.html في مكانه الصحيح
مع بقاء الكود السابق كما كان


...
<button onclick="UpdateData()"> تعديل </button>
<button onclick="DeleteData()"> حذف </button>
...

<script>
	
function DeleteData(){
	num = $("#num").val();
	$.ajax({
		type: "POST",
		url: "أضف_رابط_موقعك_هنا/delete.php?id=" + num,
		
		success: function (data) {
			alert(data);
		},
		
		error: function () {
				alert("خطأ");
		}	
	});
}
	
	
		</script>
		...

خطوة رقم 22

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته delete
وتكون صيغة الملف php. كما في المثال التالي

delete.php

خطوة رقم 23

انسخ الكود التالي وألصقه بداخل ملف delete.php

<?php

    $conn = mysqli_connect("localhost","اسم_المستخدم","12345678","اسم_قاعدة_البيانات");


    $delete = "DELETE FROM Student WHERE id =" .$_GET['id'];
	
	
    if (mysqli_query($conn, $delete))  { 

        echo "تم الحذف بنجاح DONE";
   
    } 


?>

خطوة رقم 24

رفع ملف delete.php

خطوة رقم 25

تنفيذ عملية الحذف والتأكد من صحة الخطوات السابقة

خطوة رقم 26

طريقة جلب البيانات
قم بنسخ الكود المطلوب وألصقه في ملف sql.html في مكانه الصحيح
مع بقاء الكود السابق كما كان


...
<button onclick="DeleteData()"> حذف </button>
<button onclick="Select()"> إظهار </button>
...

<script>
	
function Select(){
	num = $("#num").val();
	$.ajax({
		type: "GET",
		url: "أضف_رابط_موقعك_هنا/select.php?id=" + num,
		
		success: function (data) {
		
			obj = JSON.parse(data);
			document.getElementById("name").value = obj.s_name;
			document.getElementById("level").value = obj.s_level;
			
		},
		
		error: function () {
				alert("خطأ");
		}	
	});
}
	
	
		</script>
		...

خطوة رقم 27

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته select
وتكون صيغة الملف php. كما في المثال التالي

select.php

خطوة رقم 28

انسخ الكود التالي وألصقه بداخل ملف select.php

<?php

    $conn = mysqli_connect("localhost","اسم_المستخدم","12345678","اسم_قاعدة_البيانات");


	$select ="SELECT * FROM Student WHERE id =" .$_GET['id'];
	
	$result = mysqli_query($conn, $select);
	
	$row = mysqli_fetch_assoc($result);
	
	$data = json_encode($row);
	 
	echo $data;

?>

خطوة رقم 29

رفع ملف select.php

خطوة رقم 30

تنفيذ عملية جلب البيانات والتأكد من صحة الخطوات السابقة

خطوة رقم 31

طريقة جلب جميع البيانات
قم بنسخ الكود المطلوب وألصقه في ملف sql.html في مكانه الصحيح
مع بقاء الكود السابق كما كان


...
<button onclick="Select()"> إظهار </button>
<button onclick="SelectAll()"> إظهار الكل </button>
...

<script>
	
function SelectAll(){
	$.ajax({
		type: "GET",
		url: "أضف_رابط_موقعك_هنا/selectAll.php",
		success: function (data) {
			document.getElementById("showHere").innerHTML = data;
		},
		
		error: function () {
				alert("خطأ");
		}	
	});
}
	
	
		</script>
		...

خطوة رقم 32

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته selectAll
وتكون صيغة الملف php. كما في المثال التالي

selectAll.php

خطوة رقم 33

انسخ الكود التالي وألصقه بداخل ملف selectAll.php

<?php

$conn = mysqli_connect("localhost","اسم_المستخدم","12345678","اسم_قاعدة_البيانات");


$selectAll = "SELECT * FROM Student";
$result = mysqli_query($conn, $selectAll);

$data = $result -> num_rows;

if ($data > 0) {
    
     while($row = $result->fetch_assoc()) {
	 echo '<tr><td> ' . $row["id"] . ' </td><td> ' . $row["s_name"] . ' </td><td> ' . $row["s_level"] . ' </td></tr>';
     }
     
} else {
     echo 'لا توجد نتائج !';
}

?>

خطوة رقم 34

رفع ملف selectAll.php

خطوة رقم 35

تنفيذ عملية جلب جميع البيانات والتأكد من صحة الخطوات السابقة

خطوة رقم 36

طريقة حذف جميع البيانات
قم بنسخ الكود المطلوب وألصقه في ملف sql.html في مكانه الصحيح
مع بقاء الكود السابق كما كان


...
<button onclick="SelectAll()"> إظهار الكل </button>
<button onclick="DeleteAll()"> حذف الكل </button>
...

<script>
	
function DeleteAll(){
	$.ajax({
		type: "POST",
		url: "أضف_رابط_موقعك_هنا/deleteAll.php",
		
		success: function (data) {
			alert(data);
		},
		
		error: function () {
				alert("خطأ");
		}	
	});
}
	
	
		</script>
		...

خطوة رقم 37

بداخل مجلد اليوم السابع
أنشئ ملف جديد بواسطة برنامج ++notepad وقم بتسميته deleteAll
وتكون صيغة الملف php. كما في المثال التالي

deleteAll.php

خطوة رقم 38

انسخ الكود التالي وألصقه بداخل ملف deleteAll.php

<?php

    $conn = mysqli_connect("localhost","اسم_المستخدم","12345678","اسم_قاعدة_البيانات");


	$deleteAll = "truncate table Student";
	
	if (mysqli_query($conn, $deleteAll))  { 

        echo "تم الحذف بنجاح DONE";
   
    } 
	
?>

خطوة رقم 39

رفع ملف deleteAll.php

خطوة رقم 40

تنفيذ عملية حذف جميع البيانات والتأكد من صحة الخطوات السابقة

الخطوة الأخيرة

الاطلاع على المراجع المهمة
موقع stackoverflow
موقع w3schools
ضع سؤالك هنا في مجموعة : فون جاب - كوردوفا - آيونك