U3F1ZWV6ZTE4Njk5NTM2MjU3MDQwX0ZyZWUxMTc5NzI4NDQzNTgwOQ==

تصميم موقع ويب من الصفر


هذا برنامج تعليمي مفصل عن تطوير الويب الخلفي في PHP. سأقوم بتدريس وظائف CRUD الأساسية والمصادقة والأمن وليس نظام العضوية. أشياء مثل ، إعداد الخادم الخاص بك ، وإنشاء صفحات HTML العامة ، وإنشاء قاعدة البيانات والجداول الخاصة بها ، وإضافة المستخدمين إلى قاعدة البيانات.

مقدمة

هل أنت مهتم بإنشاء موقع الويب الخاص بك؟ هل تساءلت يومًا كم هو رائع أن يكون لديك موقع ويب به وظيفة تسجيل الدخول / تسجيل الخروج؟ هل تريد معرفة كيفية إنشاء سجلات (CRUD) أو قراءتها أو تحديثها أو حذفها في قاعدة بيانات؟ هل فقدت المسار في دروسك السابقة؟ حسنًا ، سأعلمك كيفية إنشاء واحد من البداية حيث ستعرف كل تفاصيل حول كيفية عمل الكود. إذا كنت جديدًا في تطوير الويب الخلفي ، فهذا البرنامج التعليمي يناسبك. سأشرح كل شيء بالتفصيل حتى لا تضطر إلى البحث عن بعض الأساليب المعينة المستخدمة. لن نستخدم أي أطر عمل لتبسيط الأمور. أيضًا ، لن أركز على تصميم مواقع الويب لأنه بعد الوظائف ، من السهل تنفيذ التصميم. ما سيتم القيام به هو بسيط قائمة العناصر عندما يقوم المستخدمون بتسجيل الدخول.

المتطلبات المسبقة

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

  1. HTML / CSS - بالطبع لن يخرج هذا من القائمة عندما يتعلق الأمر بتطوير الويب. لماذا حتى عناء وضع هذا؟ الضحك بصوت مرتفع.
  2. جافا سكريبت - لسيناريو إعادة التوجيه. لا حاجة إلى مسج في الوقت الحالي
  3. mySQL - اللغة الأساسية للاستعلام. سنستخدم هذا في وظائف CRUD (إنشاء ، قراءة ، تحديث ، حذف).

بالنسبة للبرنامج ، سوف تحتاج إلى ما يلي:

  1. محرر النصوص - سيفعل Sublime Text / Notepad ++ . سيكون هذا بمثابة بيئة الترميز لدينا.
  2. XAMPP - سيكون هذا خادم الويب الخاص بنا. هذا هو المكان الذي سنحفظ فيه ملفات موقعنا على الويب ونحفظ بياناتنا في قاعدة البيانات.
  3. مستعرض الويب - يمكنك استخدام أي متصفح طالما أنه لا يستهلك الكثير من ذاكرة الوصول العشوائي الخاصة بك.

تأكد من تثبيت هؤلاء الثلاثة. لا تتابع إذا لم تكن قد انتهيت من تثبيتها. لقد قدمت بالفعل ارتباطًا تشعبيًا لجعل الأمور أسرع.

لجدول أعمالنا في هذا الموضوع:

  1. استخدام عبارات CRUD في SQL - إنشاء وقراءة وتحديث وحذف السجلات في قاعدة بيانات.
  2. المصادقة والأمان البسيطان - تسجيل الدخول والخروج ، والتعامل مع المستخدمين غير المصرح لهم وتقييد الوصول.
  3. التلاعب البسيط في الوقت والتاريخ - عرض منشورات الوقت والتاريخ ومراقبة منشوراتك.
  4. عرض البيانات العامة والخاصة - ما عليك سوى عرض المعلومات للمستخدمين الذين قاموا بتسجيل الدخول فقط وللعامة.
  5. De-Briefing and Summary - الإخراج النهائي وبعض الملاحظات. أسئلة وأجوبة أيضا مكان هنا.

محتويات الموضوع

ملاحظة : في حال توقفت عن جزء معين أو كنت تريد البحث بسرعة ، يمكنك ببساطة الاستئناف بالضغط على Ctrl + f والبحث عن الرقم الذي توقفت عنده آخر مرة.

  1. إعداد الخادم الخاص بك
  2. إنشاء صفحات HTML العامة
  3. إنشاء قاعدة البيانات والجداول الخاصة بها
  4. إضافة المستخدمين إلى قاعدة البيانات
  5. تسجيل دخول المستخدم: المصادقة
  6. إعداد الصفحة الرئيسية للمستخدمين الذين قاموا بتسجيل الدخول وتسجيل الخروج
  7. اختبار أمان الصفحة
  8. إضافة البيانات إلى القائمة - وصول المستخدم فقط
  9. عرض البيانات في الصفحة الرئيسية
  10. تعديل بيانات
  11. حذف البيانات
  12. عرض البيانات العامة
  13. إحاطة وملخص

تأكد من اتباعك ترتيبًا زمنيًا. لا تتابع دون إكمال الجزء السابق ، إلا إذا كنت تعرف الرمز.

بعض التذكيرات قبل أن نبدأ

ملاحظة : إذا بدت الصورة غير واضحة / ضبابية ، يمكنك النقر فوقها لعرضها بحجمها الأكبر. أيضًا ، اعذرني عن استخدام الصور لعرض الرموز بدلاً من إظهار نص خام لأنه لا يمكن تنسيقه بشكل صحيح في اشتراك WordPress الخاص بي ولكن لا تقلق ، سأقوم بتحميل المنتج النهائي في نهاية هذا البرنامج التعليمي إلى تحقق مرة أخرى من عملك.

1) إعداد الخادم الخاص بك

الآن بعد أن أصبحت جاهزًا وتذهب ، كما هو الحال في أساسيات البرمجة ، فلنبدأ بإنشاء صيحة بسيطة من "hello world" في خادمنا.

أولاً ، انتقل إلى الدليل حيث قمت بتثبيت XAMPP (عادةً في C: \ xampp ). من هناك ، انتقل إلى مجلد htdocs (عادةً في C: \ xampp \ htdocs ) وأنشئ مجلدًا باسم " MyFirstWebsite ".




من هذا الجزء ، قمت الآن بإنشاء عنوان URL محلي لموقع الويب الخاص بك. سيتم استخدام هذا المجلد لتوفير جميع ملفات مواقع الويب ( .html ، .php ، .css ، .js ، وما إلى ذلك). افتح محرر النصوص الخاص بك ودعنا نبدأ!

أستخدم نصًا ساميًا كمحرر نصي. إذا كنت تستخدم Notepad ++ أو أي شيء آخر ، فلا بأس بذلك. إنه ليس عاملًا كبيرًا حقًا ولكنه مجرد تفضيل للعامل الذي ترغب في استخدامه.

ما سنفعله هو صفحة HTML أساسية ونعرض "hello world" من الخادم باستخدام بنية PHP أساسية. نكتب بعد ذلك بناء الجملة التالي:

<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<?php
echo "<p>Hello World!</p>";
?>
</body>
</html>

احفظ الملف في المجلد " MyFirstWebSite " وقم بتسميته باسم " index.php ". (الدليل كما يظهر في الجزء العلوي من الصورة.)

الآن بعد أن أصبح لديك الملف. لنفتح الآن لوحة تحكم XAMPP. في حالة عدم ظهوره على سطح المكتب ، فهو موجود في مجلد XAMPP كما هو موضح في الصورة:






الآن بعد أن أصبح هناك ، قم بتشغيل Apache و mySQL بالنقر فوق الزر " ابدأ " في عمود الإجراءات. يجب أن تشاهد معرف (معرفات) معرف عشوائي ورقم المنفذ الافتراضي. Apache هو اسم خادم الويب الخاص بنا حيث سيتعامل مع جميع الملفات بالإضافة إلى الاتصال بمتصفح الويب و MySQL هي قاعدة بياناتنا التي ستخزن جميع معلوماتنا.

افتح متصفح الويب الخاص بك وفي شريط العناوين ، اكتب localhost . يجب أن تشاهد قائمة XAMPP الخاص بك.

إذا كانت هذه هي المرة الأولى التي تقوم فيها بتشغيله ، فسوف يسأل عن اللغة التي تفضلها ، ما عليك سوى اختياره وسيقودك إلى القائمة. إذا لاحظت أن الدليل هو localhost / xampp ، فهو المكان الذي تقودك فيه الصفحة الافتراضية حتى إذا قمت بكتابة localhost.





إذا ظهر ذلك ، فهذا يعني أن خادم XAMPP يعمل الآن. لنحاول الآن تشغيل موقع الويب الذي قمت بوضعه للتو. حاول كتابة localhost / MyFirstWebsite . يجب أن تكون نفس الصورة أدناه.



إذا لاحظت أن عنوان URL هو MyFirstWebsite ، فهو مشتق من مجلد htdocs ويقرأ تلقائيًا الملفات التي تحمل اسم " index " (سواء كان index.html أو index.aspx وما إلى ذلك) ، والتي تعمل كصفحة افتراضية. إن كتابة localhost / MyfirstWebsite / index.php هو نفسه. يمكنك أيضًا إنشاء اسم مخصص لعنوان URL ببساطة عن طريق إعادة تسمية المجلد ولكن دعنا نتمسك بـ MyFirstWebsite .

ملاحظة : إذا لم يكن لديك ملف باسم index وقمت بإدخال عنوان URL ، فستتلقى خطأ 404 لعدم وجود الملف على الخادم. إذا كان لديك ملفات مختلفة لم يتم تسميتها index. <extention> ، يجب عليك تحديد اسم الملف المحدد. مثال: localhost / MyfirstWebsite / page.php.

2) إنشاء صفحات HTML العامة

بعد ذلك ، دعنا نعيد تعديل موقعنا الإلكتروني ونضيف رابط تسجيل حيث يمكن لمستخدمينا التسجيل بالإضافة إلى صفحة تسجيل الدخول مباشرة بعد التسجيل. دعنا نعدل صفحتنا الرئيسية بالكود التالي:

index.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<?php
echo "<p>Hello World!</p>";
?>
<a href="login.php"> Click here to login
<a href="register.php"> Click here to register
</body>
</html>

كما ترى ، أضفنا رابطين فقط لتسجيل الدخول والتسجيل. لنقم بإنشاء صفحة التسجيل أولاً.

register.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<h2>Registration Page</h2>
<a href="index.php">Click here to go back<br/><br/>
<form action="register.php" method="POST">
Enter Username: <input type="text"
name="username" required="required" /> <br/>
Enter password: <input type="password"
name="password" required="required" /> <br/>
<input type="submit" value="Register"/>
</form>
</body>
</html>

كما ترى ، إنه مجرد نموذج أساسي حيث يمكن للمستخدم إدخال بيانات اعتماده. الآن لصفحة تسجيل الدخول:

تلميح : فقط انسخ والصق نفس الكود لتسريع الأمور.

login.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<h2>Login Page</h2>
<a href="index.php">Click here to go back<br/><br/>
<form action="checklogin.php" method="POST">
Enter Username: <input type="text"
name="username" required="required" /> <br/>
Enter password: <input type="password"
name="password" required="required" /> <br/>
<input type="submit" value="Login"/>
</form>
</body>
</html>

في الأساس ، هو نفس الكود الموجود في register.php ولكن التغييرات التي تم إجراؤها هي التي تم وضع خط تحتها.

انقر هنا للحصول على رمز login.php الكامل.

حاول تشغيل localhost / MyFirstWebsite مرة أخرى ويجب أن تبدو صفحاتك كما يلي:

index.php



register.php



3) إنشاء قاعدة البيانات وجداولها

الآن بعد أن أصبح لدينا صفحتنا الأساسية للجمهور. دعنا ننتقل إلى قاعدة البيانات. أولاً ، اكتب localhost / phpmyadmin . سيقودك هذا إلى صفحة phpmyadmin الرئيسية:

localhost / phpmyadmin



من هناك ، انتقل إلى علامة التبويب "قواعد البيانات" الموجودة في الأعلى ، ثم من مربع النص في المنتصف ، اكتب first_db ثم انقر فوق إنشاء. فقط اترك الترتيب كما هو.



لقد قمت للتو بإنشاء قاعدة بياناتك الأولى بنجاح. الآن من هناك ، لنقم بإنشاء جدول حيث يمكننا تسجيل مستخدمينا وعرض المعلومات. أولاً ، انقر فوق الموجود على الجانب الأيسر وقم بإنشاء جدول باسم 3 أعمدة ، ثم انقر فوق " انتقال" . first_dbusers



بالنسبة لهيكل الجدول ، تأكد من وجود الحقول التالية ، ثم انقر فوق حفظ:

  • Format: اسم العمود - النوع - الطول - خاصية خالية - خصائص أخرى
  • id - INT - N / A - Not Null - زيادة تلقائية
  • username - varchar - 50 - ليس فارغًا
  • password - varchar - 50 - ليس فارغًا

اترك كل شيء بشكل افتراضي إذا لم يتم تحديده.



ملاحظة : أنت بحاجة إلى التمرير لليمين لملف auto_incrementلقد قمت للتو بتحرير الصورة لتناسب A_Iالمجال.

بعد ذلك ، قم بإنشاء جدول آخر مسمى listبـ 7 أعمدة ولهيكل الجدول:

  • id- INT - N / A - غير Null- زيادة تلقائية
  • details - نص - لا null
  • date_postedvarchar- 30 - لاnull
  • time_postedTime- لاnull
  • date_editedvarchar- 30 - لاnull
  • time_editedTime- لاnull
  • publicvarchar- 5 - لاnull



4) إضافة مستخدمين إلى قاعدة البيانات

الآن بعد أن لدينا طاولاتنا. دعنا ننتقل إلى الجزء الممتع ، ونبدأ صفحة التسجيل الخاصة بك. من موقع Registration.php الخاص بك ، أضف ما يلي أدناه أكواد html:

register.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<h2>Registration Page</h2>
<a href="index.php">Click here to go back<br/><br/>
<form action="checklogin.php" method="POST">
Enter Username: <input type="text"
name="username" required="required" /> <br/>
Enter password: <input type="password"
name="password" required="required" /> <br/>
<input type="submit" value="Register"/>
</form>
</body>
</html>
<?php
if($_SERVER["REQUEST METHOD"] == "POST"){
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
echo "Username entered is: ". $username . "<br />";
echo "Password entered is: ". $password;
}
?>

إليك شرح الكود:

  • $_SERVER["REQUEST_METHOD"] == "POST"- يتحقق مما إذا كان النموذج قد تلقى POSTطريقة عند النقر فوق زر الإرسال. و POSTيتم إنشاء الأسلوب في HTML من method="POST"انقر هنا للحصول على مرجع طريقة النموذج.
  • $_POST['']- يحصل على الاسم من POSTطريقة. هذا ببساطة يحصل على المدخلات بناءً على الاسم من النموذج. في حالتنا ، هو اسم المستخدم وكلمة المرور.
  • mysql_real_escape_string()- يغلف المدخلات في a stringلمنع المدخلات من حقن SQL. هذا يضمن لك stringعدم الهروب من الشخصيات غير الضرورية. انقر هنا لمعرفة المزيد حول حقن SQL.

حاول الآن الانتقال إلى register.php وحاول إدخال أي شيء ثم انقر فوق " Register." في حالتي ، أدخلت اسم المستخدم xtian وكلمة المرور كـ 123456 . يجب أن تعرض المدخلات أدناه. هذه هي عينتي:



في هذا الجزء ، يجب أن تكون قد فهمت كيفية الحصول على مدخلات من النموذج. الآن لإضافته إلى قاعدة البيانات. في register.php الخاص بك ، أضف الكود التالي:

register.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<h2>Registration Page</h2>
<a href="index.php">Click here to go back<br/><br/>
<form action="register.php" method="post">
Enter Username: <input type="text"
name="username" required="required" /> <br/>
Enter Password: <input type="password"
name="password" required="required" /> <br/>
<input type="submit" value="Register"/>
</form>
</body>
</html>
<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$bool = true;
mysql_connect("localhost", "root","") or die(mysql_error()); //Connect to server
mysql_select_db("first_db") or due("Cannot connect to database"); //Connect to database
$query = mysql_query("Select * from users"); //Query the users table
while($row = mysql_fetch_array($query)) //display all rows from query
{
$table_users == $row['username']; // the first username row
// is passed on to $table_users,
// and so on until the query is finished
if($username == $table_users) // checks if there are any matching fields
{
$bool = false; // sets bool to false
Print '<script>alert("Username has been taken!");</script>'; //Prompts the user
Print '<script>window.location.assign("register.php");</script>";//redirects to
//register.php
} } if($bool) // checks if bool is true {
VALUES ('$username', 'password')"); // inserts value into table users
mysql_query("INSERT INTO users (username, password) _
Print '<script>alert("Successfully Registered!");</script>'; // Prompts the user
Print '<script>window.location.assign("register.php");</script>'; // redirects to
// register.php
} }
?>

انقر هنا للحصول على ملف register.php الكامل

فيما يلي شرح للكود:

  • mysql_connect("Server name","Server Username","Server Password")- الصيغة المستخدمة للاتصال بخادم XAMPP الخاص بنا. localhost أو 127.0.0.1 هو اسم الخادم. اسم المستخدم الافتراضي هو الجذر وليس كلمة المرور الافتراضية.
  • mysql_select_db("database name") - يحدد قاعدة البيانات المراد استخدامها.
  • or die('Message') - يعرض رسالة الخطأ في حالة عدم تلبية الشرط.
  • mysql_query('sql query')- هل استعلامات SQL. انقر هنا للحصول على بعض نماذج استعلام SQL. مرة أخرى ، لست هنا لمناقشة mySQL.
  • mysql_fetch_array('query')- يجلب جميع الاستعلامات في الجدول لعرض البيانات أو معالجتها. يتم وضعها في whileحلقة بحيث يتم الاستعلام عن جميع الصفوف. لاحظ أنه يتم الاستعلام عن صف واحد فقط لكل حلقة وهذا هو سبب ضرورة وجود حلقة while.
  • $row['row name'] - قيمة العمود في الاستعلام الحالي. يتم تمثيله كمصفوفة. في حالتنا ، $rowهو اسم المتغير لصفنا في الحلقة.

جرب المدخلات التي قدمتها سابقًا وانظر ماذا سيحدث. يجب أن يطلب منك التسجيل بنجاح. حاول الذهاب phpmyadminلرؤية usersطاولتك:



تهانينا! أنت الآن تعرف كيفية إضافة البيانات إلى قاعدة البيانات باستخدام عمليات التحقق من صحة البيانات.

5) تسجيل دخول المستخدم: المصادقة

الآن لصفحة تسجيل الدخول. لنقم بإنشاء ملف جديد يسمى checklogin.php. يعود السبب إلى login.php الخاص بنا ، نموذجنا يحتوي على إجراء يسمى "checklogin.php" ، على وجه الخصوص إذا كنت ستلاحظ في register.php ، أنه موجود أيضًا في register.php لأن النهاية الخلفية تتم على نفس الملف أيضًا.<form action = "checklogin.php" method= "POST">

دعنا الآن نبرمج checklogin.php بالصيغة التالية:

checklogin.php



<?php
session_start();
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$bool = true;
mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
$query = mysql_query("Select * from users WHERE username='$username'"); // Query the
// users table
$exists = mysql_num_rows($query); //Checks if username exists
$table_users = "":
$table_password = "";
if($exists > 0) //IF there are no returning rows or no existing username
{
while($row = mysql_fetch_assoc($query)) // display all rows from query
{
$table_users = $row['username']; // the first username row is
// passed on to $table_users,
// and so on until the query is finished
$table_password = $row['password']; // the first password row is passed on
// to $table_password, and so on
// until the query is finished
}
if(($username == $table_users) && ($password == $table_password)) // checks if there
// are any matching fields
{
if($password == $table_password)
{
$_SESSION['user'] = $username; // set the username in a session.
// This serves as a global variable
header("location: home.php"); // redirects the user to the authenticated
// home page
}
}
else
{
Print '<script>alert("Incorrect Password!");</script>'; // Prompts the user
Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
}
}
else
{
Print '<script>alert("Incorrect username!");</script>'; // Prompts the user
Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
}
?>

ها هو شرح الكود. (تم شرح بعضها مسبقًا لذا لا داعي للتكرار):

  • session_start()- يبدأ الجلسة. يتم ذلك عادة على الصفحات المصادق عليها. سبب استخدامنا هذا لأن هذا مطلوب لـ $_SESSION[''].
  • mysql_num_rows()- هذا يعيد عددًا صحيحًا. يقوم هذا بحساب جميع الصفوف بناءً على الاستعلام.
  • $_SESSION['name']- بمثابة اسم الجلسة للجلسة بأكملها. هذا مشابه نسبيًا publicللمتغيرات في البرمجة الشيئية. سنستخدم هذا للتحقق مما إذا كان المستخدم قد تمت مصادقته أم لا.

حاول الآن اختبار إدخالك باستخدام اسم مستخدم وكلمة مرور خاطئين. يجب أن تعيد المطالبة المطلوبة. بعد الاختبار ، حاول إدخال القيم الصحيحة. يجب أن يقودك إلى home.php .

ملاحظة : home.php غير موجود حتى الآن ، لذلك سينتج الخطأ 404.

6) إعداد الصفحة الرئيسية للمستخدمين الذين قاموا بتسجيل الدخول وتسجيل الخروج

الآن بعد أن تمت المصادقة عليها ، دعنا الآن ننشئ صفحتنا الرئيسية ( home.php ) بالصيغة التالية:

home.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<?php
session_start(); //starts the session
if($_SESSION['user']){ // checks if the user is logged in
}
else{
header("location: index.php"); // redirects if user is not logged in
}
$user = $_SESSION['user']; //assigns user value
?>
<body>
<h2>Home Page</h2>
<p>Hello <?php Print "$user"?>!</p> <!--Displays user's name-->
<a href="logout.php">Click here to go logout</a><br/><br/>
<form action="add.php" method="POST">
Add more to list: <input type="text" name="details" /> <br/>
Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
<input type="submit" value="Add to list"/>
</form>
<h2 align="center">My list</h2>
<table border="1px" width="100%">
<tr>
<th>Id</th>
<th>Details</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</table>
</body>
</html>

إليك شرح الكود:

  • session_start()- يبدأ الجلسة بشكل أساسي. مطلوب لـ $_SESSION[''].
  • header() - يعيد توجيه المستخدم.

حاول تحديث المتصفح الخاص بك ويجب أن يبدو كالتالي:



الآن بعد أن أصبح لدينا منزلنا ، دعنا نحاول إنشاء logout.php الخاص بنا واختبار ما إذا كانت جلسة المستخدم متوقفة. ما سنفعله هو أنه إذا تم تسجيل خروج المستخدم ، فلا يجب على المستخدم الوصول إلى home.php. إذن ، هذه هي الصيغة البسيطة لتسجيل الخروج :

logout.php



<?php
session_start();
session_destroy();
header("location:index.php");
?>

بناء الجملة بسيط. session_destroy()ببساطة يزيل كل معنى الجلسة ، $_SESSION['']ستتم إزالة قيمة header()وستقوم ببساطة بإعادة توجيهها إلى الصفحة الرئيسية.

7) اختبار أمان الصفحة

حاول الآن تحديث home.php وانقر على تسجيل الخروج . حاول الآن النقر فوق الزر "رجوع" في متصفحك وشاهد ما يحدث:



كما ترى ، لا يوجهك إلى home.php لأنك قمت بتسجيل الخروج. الآن للاختبار الثاني ، حاول إدخال العنوان localhost / MyFirstWebsite / home.php يدويًا . يجب أن تحدث نفس الحالة أيضًا. منذ أن تم تسجيل الخروج ، حتى الإدخال اليدوي للعنوان لا يصل إلى صفحة معتمدة. ما قمنا به هو آلية أمان بسيطة حيث نقوم بإعادة توجيه المستخدمين غير المصرح لهم إلى صفحة عامة.

حاول الآن تسجيل الدخول مرة أخرى ودعنا نعود إلى home.php .

8) إضافة البيانات إلى القائمة - وصول المستخدم فقط

في خطوتنا التالية ، لنقم بإنشاء إضافة عناصر إلى القائمة. كما ستلاحظ من النموذج ، تمت كتابته على هذا النحو ، مما يعني أن طلب مشاركة http يذهب إلى add.php وبهذا ، نقوم بإنشاء add.php الخاص بنا بالصيغة التالية:<form action="add.php" method="POST">

<?php
session_start();
if($_SESSION['user']){
}
else{
header("location:index.php");
}
$details = mysql_real_escape_string($_POST['details']);
$time = strftime("%X"); //time
$date = strftime("%B %d, %Y"); //date
Print "$time - $date - $details";
?>

لاحظ أن هذا ليس بناء جملة add.php الرسمي لدينا حتى الآن ، سأقوم فقط بشرح صيغة الوقت والتاريخ والحصول على مدخلاتك .

عد الآن إلى home.php وحاول إضافة عنصر ، ثم انقر فوق " إضافة إلى القائمة ".



يجب أن يكون هذا هو الناتج التالي في add.php :



كما ترى ، لدينا الوقت الحالي والتاريخ والمدخلات الخاصة بك. إليك شرح الكود:

  • strftime() - يحصل على الوقت بناءً على الشكل الذي وضعته
  • %X - وقت النظام الحالي
  • %B - شهر النظام الحالي
  • %d - يوم النظام الحالي
  • %Y - سنة النظام الحالية

الآن دعنا نعدل add.php الخاص بنا ونضيف البيانات التالية إلى قاعدة البيانات مع البيانات من خانة الاختيار.

add.php



<?php
session_start();
if($_SESSION['user']){
}
else{
header("location:index.php");
}
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$details = mysql_real_escape_string($_POST['details']);
$time = strftime("%X"); //time
$date = strftime("%B %d, %Y"); //date
$decision = "no";
mysql_connect("localhost","root","") or die(mysql_error()); //Connect to server
mysql_select_db("first_db") or die("Cannot connect to database"); //Connect to database
foreach($_POST['public'] in $each_check) //gets the data from
//the checkbox
{
if($each_check != null){ //checks if checkbox is checked
$decision = "yes"; // sets the value
}
}
mysql_query("INSERT INTO list(details, date_posted, time_posted, public) _
VALUES ('$details','$date','$time','$decision')"); //SQL query
header("location:home.php");
}
else
{
header("location:home.php"); //redirects back to home
}
?>

انقر هنا للحصول على كود add.php الكامل

إليك شرح بسيط:

  • foreach()- يحصل على قيمة خانة الاختيار. كما ستلاحظ ، تنسيق مربع الاختيار في النموذج هو name = "checkbox []" . للحصول على البيانات من خانة الاختيار ، يجب إنشاء مثيل لها كمصفوفة. سيؤدي القيام بذلك إلى إتاحة الحصول على البيانات من مربعات اختيار متعددة.

حاول الآن إدخال بعض البيانات وانقر فوق " إضافة إلى القائمة ". في حالتي ، سأستخدم إنهاء مرة أخرى. دعنا نذهب إلى phpmyadmin الخاص بنا ونرى ما إذا تمت إضافة البيانات. ها هي نتيجة حالتي:

localhost / phpmyadmin



9) عرض البيانات في الصفحة الرئيسية

الآن وقد رأينا أنه تمت إضافة البيانات بنجاح ، فلنعرض الآن البيانات في صفحتنا الرئيسية. لنعدّل home.php الخاص بنا ودعنا نضيف بعض الأعمدة للتاريخ:

home.php



<html>
<head>
<title>My first PHP Website</title>
</head>
<?php
session_start(); //starts the session
if($_SESSION['user']){ // checks if the user is logged in
}
else{
header("location: index.php"); // redirects if user is not logged in
}
$user = $_SESSION['user']; //assigns user value
?>
<body>
<h2>Home Page</h2>
<p>Hello <?php Print "$user"?>!</p>
<a href="logout.php">Click here to go logout</a><br/><br/>
<form action="add.php" method="POST">
Add more to list: <input type="text" name="details" /> <br/>
Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
<input type="submit" value="Add to list"/>
</form>
<h2 align="center">My list</h2>
<table border="1px" width="100%">
<tr>
<th>Id</th>
<th>Details</th>
<th>Post Time</th>
<th>Edit Time</th>
<th>Edit</th>
<th>Delete</th>
<th>Public Post</th>
</tr>
<?php
mysql_connect("localhose", "root","") or die(mysql_error()); //Connect to server
mysql_select_db("first_db") or die("Cannot connect to database");//connect to
//database
$query = mysql_query("Select * from list"); // SQL Query
while($row = mysql_fetch_array($query))
{
Print "<tr>";
Print '<td align="center">'. $row['id'] . "</td>";
Print '<td align="center">'. $row['details'] . "</td>";
Print '<td align="center">'. $row['date_posted'] .
" - " . $row['time_posted'] . "</td>";
Print '<td align="center">'. $row['date_edited'] .
" - " . $row['time_edited'] ."</td>";
Print '<td align="center"><a href="edit.php">edit</a> </td>';
Print '<td align="center"><a href="delete.php">delete</a> </td>';
Print '<td align="center">'. $row['public'] . "</td>";
Print "</tr>";
}
?>
</table>
</body>
</html>

شرح الكود المضاف بسيط للغاية. يعرض فقط البيانات القادمة من whileالحلقة. تم شرحه مسبقًا في برنامجنا التعليمي ، لذا أعتقد أنه بحلول هذه المرحلة ، يجب أن تكون قد فهمت عملية الحصول على البيانات في الاستعلام. بالعودة إلى المتصفح ، حاول تحديث home.php الخاص بك وشاهد ما سيحدث:





يجب أن يعرض الآن تلك البيانات. من قائمة مراجعة CRUD الخاصة بنا ، لقد أنجزنا الآن Createو Readالتالي هو تحديث (تحرير) وحذف المعلومات. إذا لاحظت أننا قمنا بتعديل وحذف الروابط المعروضة في العمود. سأضيف بيانات أخرى إلى القائمة المسماة " tuna" للحصول على مثال آخر وهذه المرة ، خصوصية لا :





10) تحرير البيانات

دعنا الآن نحاول تعديل بياناتنا ولكي نفعل ذلك سنستخدم وظيفة جديدة تسمى " GET". باستخدام طرقنا السابقة ، كنا نستخدم POST طلب http ولكن هذه المرة ، دعنا نستخدمها GET لتحرير السجلات وحذفها. للبدء ، دعنا نعدل home.php الخاص بنا ونضيف رمزًا صغيرًا إلى عمودين.

home.php





<html>
<head>
<title>My first PHP Website</title>
</head>
<?php
session_start(); //starts the session
if($_SESSION['user']){ // checks if the user is logged in
}
else{
header("location: index.php"); // redirects if user is not logged in
}
$user = $_SESSION['user']; //assigns user value
?>
<body>
<h2>Home Page</h2>
<p>Hello <?php Print "$user"?>!</p> <!--Displays user's name-->
<a href="logout.php">Click here to go logout</a><br/><br/>
<form action="add.php" method="POST">
Add more to list: <input type="text" name="details" /> <br/>
Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
<input type="submit" value="Add to list"/>
</form>
<h2 align="center">My list</h2>
<table border="1px" width="100%">
<tr>
<th>Id</th>
<th>Details</th>
<th>Post Time</th>
<th>Edit Time</th>
<th>Edit</th>
<th>Delete</th>
<th>Public Post</th>
</tr>
<?php
mysql_connect("localhost", "root","") or
die(mysql_error()): //Connect to server
mysql_select_db("first_db") or
die("Cannot connect to databse"); //Connect to database
$query = mysql_query("Select * from list"); // SQL Query
while($row = mysql_fetch_array($query))
{
Print "<tr>";
Print '<td align="center">'. $row['id'] . "</td>";
Print '<td align="center">'. $row['details'] . "</td>";
Print '<td align="center">'. $row['date_posted'] .
" - " . $row['time_posted'] . "</td>";
Print '<td align="center">'. $row['date_edited'] .
" - " . $row['time_edited'] ."</td>";
Print '<td align="center"><a href="edit.php?id='.
$row['id'] .'">edit</a></td>';
Print '<td align="center"><a href="delete.php?id='.
$row['id'] .'">delete</a></td>';
Print '<td align="center">'. $row['public'] . '</td>';
Print "</tr>";
}
?>
</table>
</body>
</html>

إذا لاحظت ، فقد أضفنا معلمة URL فقط لتعديل الروابط وحذفها وهي idسنستخدم هذا لاحقًا للتعامل مع بياناتك. سبب استخدامنا id هو أنه معرّف فريد. من الممكن أن يكون الشخص قد أدخل نفس البيانات لذلك لا يوصى باستخدامها details كوسيلة للتلاعب لاحقًا.

جرب وضع المؤشر في رابط التعديل وسترى قيمة المعرف في أسفل اليسار:



الآن بعد أن حصلنا على ذلك ، دعنا نحاول إنشاء ملف edit.php الخاص بنا ودعنا نحاول الحصول على البيانات من هناك:

تحرير. php

الأسطر 1 - 42:



<html>
<head>
<title>My first PHP Website</title>
</head>
<?php
session_start(); //starts the session
if($_SESSION['user']){ // checks if the user is logged in
}
else{
header("location: index.php"); // redirects if user is not logged in
}
$user = $_SESSION['user']; //assigns user value
?>
<body>
<h2>Home Page</h2>
<p>Hello <?php Print "$user"?>!</p> <!--Display's user name-->
<a href="logout.php">Click here to go logout</a><br/><br/>
<a href="home.php">Return to home page</a>
<h2 align="center">Currently Selected</h2>
<table border="1px" width="100%">
<tr>
<th>Id</th>
<th>Details</th>
<th>Post Time</th>
<th>Edit Time</th>
<th>Public Post</th>
</tr>
<?php
if(!empty($def['id']))
{
$id = $_GET['id'];
$_SESSION['id'] = $id;
$id_exists = true;
mysql_connect("localhost", "root","")
or die(mysql_error()): //Connect to server
mysql_select_db("first_db")
or die("Cannot connect to databse"); //Connect to database
$query = mysql_query("Select * from list"); // SQL Query
$count = mysql_num_rows($query);
if($count > 0)
{
while($row = mysql_fetch_array($query))
{

بعض التفسيرات للكود:

  • !empty()- طريقة للتحقق مما إذا كانت القيمة ليست فارغة. يمكن عكس بناء الجملة إذا كنت تريد التحقق مما إذا كانت فارغة عن طريق إزالة نقطة التفسير (!) ، لذلك سيكون بناء الجملة empty().
  • $_GET['']- تستخدم للحصول على القيمة من المعلمة. في حالتنا ، نستخدم id معلمة URL الخاصة بنا بحيث تكون البنية $_GET['id'].
  • $id_exists- المتغير الذي يتحقق من idوجود المعطى .
  • $_SESSION['id']- نضع قيمة idفي جلسة لاستخدامها في ملف آخر.

الخطوط 42 - 76



​$query = mysql_query("Select * from list"); // SQL Query
​$count = mysql_num_rows($query);
​if($count > 0)
​{
​while($row = mysql_fetch_array($query))
​{
​Print "<tr>";
Print '<td align="center">' . $row['id'] . "</td>";
​Print '<td align="center">' . $row['details'] . "</td>";
Print '<td align="center">' . $row['date_posted'] .
" - " . $row['time_posted']."</td>";
Print '<td align="center">' . $row['date_edited'] .
" - " . $row['time_edited']."</td>";
Print '<td align="center">' . $row['public'] . "</td>";
Print "</tr>";
​}
​}
​else
​{
​$id_exists = false;
​}
​}
​?>
</table>
<br/>
​<?php
​if($id_exists)
​{
​Print '
​<form action="edit.php" method="post">
​Enter new detail: <input type="text" name="details"/><br/>
​public post? <input type="checkbox name="public[]" value="yes"/><br/>
​<input type="submit" value="Update List"/> ​</form>
';
​}
​else
​{
​Print '<h2 align="center">There is not data to be edited.</h2>';
​}
​?>
</body>
</html

السبب وراء وضعنا المتغير $id_exists هو أنه في حالة قيام المستخدم بتعديل معلمة URL إلى رقم غير موجود (في حالتنا لدينا فقط صفان / معرفات) ، يمكننا عرض مطالبة لا توجد فيها البيانات .

حاول الآن النقر فوق رابط التحرير في الصف الأول ويجب أن يظهر على النحو التالي:



دعنا نحاول تعديل معلمة URL عن طريق الإزالة ?id=1 والآن يجب أن ينتج عن localhost / MyFirstWebsite / edit.php ويجب أن ينتج مثل هذا:



حاول الآن وضع قيمة أكبر من idالرقم ، في حالتنا هذه ، لنجرب 5 ويجب أن تكون النتيجة كما يلي:

localhost / MyFirstWebsite / edit.php؟ id = 5



الآن بعد أن قمنا بتأمين معلمات URL الخاصة بنا ، دعنا الآن نضع صيغة التعديل. دعنا نعود إلى edit.php ونضيف بعض التعليمات البرمجية التالية لتحديث المعلومات إلى قاعدة البيانات:

تحرير. php



<?php
if($_SERVER['REQUEST_METHOD'] == "POST")
{
mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
mysql_select_db("first_db") or die ("Cannot connect to database");//Connect to database
$details = mysql_real_escape_string($_POST['details']);
$public = "no";
$id = $_SESSION['id'];
$time = strftime("%X"); //time
$date = strftime("%B %D, %Y"); //date
foreach($_POST['public'] as $list)
{
if($list != null)
{
$public = "yes";
}
}
mysql_query("UPDATE list SET details='$details',
public='$public', date_edited='$date', time_edited='$time' WHERE id='$id'");
header("location:home.php");
}
?>

حاول الآن التحديث والعودة إلى صفحة التحرير. لنجرب بيانات مختلفة. في حالتي ، سأستخدم " Salmon" وأغيّرها إلى غير public:

edit.php؟ id = 1



تابع وانقر على قائمة التحديث ويجب إعادة توجيهك إلى home.php والاطلاع على القائمة المحدثة.



الآن ، لدينا وقت وتاريخ التعديل المعروضين في عمود تحرير الوقت . تم تعيين خصوصيتنا الآن على غير الجمهور وتغيرت القيمة إلى Salmon .

تهانينا! لقد انتهينا الآن من وظيفة التحرير!

11) حذف البيانات

إذا نظرنا إلى الوراء إلى CRUD ، فقد انتهينا الآن من إنشاء (إضافة) وقراءة (عرض) وتحديث (تحرير) التسجيلات. الآن بالنسبة للجزء الأخير ، حذف السجلات. بالنسبة لهذا الجزء ، فهو مماثل نسبيًا لما فعلناه في التحرير ولكن ما يختلف هو مجرد عبارة SQL. بدلاً من الاستخدام UPDATE، DELETEسنستخدم بناء الجملة. عند حذف السجلات ، يتعين علينا مطالبة الأشخاص بالتأكد من رغبتهم حقًا في حذف السجل ، لذلك سنضيف القليل من JavaScript في home.php. للقيام بذلك ، دعنا نعدل الكود الخاص بنا ونضيف البعض في home.php .

home.php



<script>
function myFunction(id)
{
var r = confirm("Are you sure you want to delete this record?");
if(r == true)
{
window.location.assign("delete.php?id=" + id);
}
}
</script>

كما لاحظت ، قمنا بتحرير رابط الحذف. لقد غيرنا hrefإلى " #" وأضفنا onclickوظيفة JavaScript لأسلوب myFunction وداخل المعلمة معرف الصف. يوجد أسفل الجدول المكتوب بناء جملة JavaScript حيث يطالب المستخدم إذا كان يريد حذف السجل. إذا أكد المستخدم ، فإن الصفحة توجه بعد ذلك إلى delete.php مع تضمين قيمة المعرف . الآن لنقم بإنشاء delete.php وإليك الصيغة التالية.

delete.php



<?php
session_start(); //starts the session
if($_SESSION['user']){ //checks if user is logged in
}
else {
header("location:index.php"); //redirects if user is not logged in.
}
if($_SERVER['REQUEST_METHOD'] == "GET")
{
mysql_connect("localhost", "root", "") or die(mysql_error()); //connect to server
mysql_select_db("first_db") or die("cannot connect to database"); //Connect to database
$id = $_GET['id'];
mysql_query("DELETE FROM list WHERE id='$id'");
header("location:home.php");
}
?>

الكود بسيط فقط والصياغة هي أيضًا تلك التي استخدمناها من قبل ولكننا لاحظنا أننا قمنا بتغيير طريقة الطلب إلى GETنحن نستخدم GETالطلب الآن نظرًا لأن لدينا معلمة URL. حاول الآن تحديث home.php ودعنا نحاول حذف السجل الأول. يجب أن تكون هذه هي النتيجة:

موجه



النتيجة النهائية



تهانينا! الآن أكملنا رسميًا بيانات CRUD الخاصة بنا!

12) عرض البيانات العامة

الآن بالنسبة للجزء الأخير ، عرض البيانات العامة. سنعرض البيانات التي تم ضبطها على نعم في index.php الخاص بنا ، وهي صفحة للمستخدمين غير المصادق عليهم. انها بسيطة جدا. علينا فقط تحرير index.php الخاص بنا وإضافة بعض كود php والجدول. إليك index.php المحدث :

index.php



الآن قم بتسجيل الخروج وشاهد الصفحة الافتراضية الخاصة بك. يجب أن يبدو مثل هذا:



ملاحظة : لن ترى البيانات بعد لأننا لم نقم بتعيين أي معلومات للجمهور.

الآن دعنا نسجل الدخول مرة أخرى وهذه المرة ، دعنا نضيف المزيد من البيانات. في حالتي ، أضفت ما يلي:

  • Salad - public
  • Corn - عدم-public
  • Pasta - public
  • Chicken - عامة
  • Spaghetti - عدم-public

بإجمالي 6 بيانات مع 3 من كل إعداد خصوصية:

home.php



الآن دعنا نسجل الخروج ونرى صفحتنا الافتراضية ( index.php ). يجب أن يبدو الآن كما يلي:

index.php



كما ترى ، يعرض فقط بيانات الشاشة التي تم تعيينها على public.

تهانينا! لقد انتهينا أخيرًا من الدروس لهذه الجلسة!

13) دي إيجاز وملخص

في النهاية ، يجب أن يكون لديك الملفات التالية:



كما ذكرت سابقًا ، سأقوم بتحميل المنتج النهائي. انقر هنا .

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

الأسئلة المتوقعة

ها هي الأسئلة التي أعتقد أنك ستطرحها. حاولت توقع ذلك لتجنب الالتباس:

  • كلما قمت بتسجيل مستخدم جديد ، تظهر نفس القائمة. كنت أتوقع لكل مستخدم مختلف ، سيكون هناك قائمة منفصلة لهم. هل فعلت شيئا خطأ؟

هذا في الواقع سؤال جيد. كما ترون ، أنا أقوم فقط بتدريس وظائف BASIC CRUD والمصادقة والأمان وليس نظام عضوية. يتطلب إنشاء قائمة منفصلة لكل مستخدم جدولاً منفصلاً لكل منهم. لذا فإن المنطق وراء ذلك هو أنه في كل مرة تقوم فيها بإدخال البيانات ، ستقوم بإدراجها في جدول آخر وتربطها ببعضها البعض. يمكنك استخدام CREATEبناء الجملة لإنشاء جدول منفصل للمستخدم والذي يذهب إلى شيء مثل هذا:

Create table $username (column1 int auto_increment, column2 varchar(50), etc...)

يمكنك النقر هنا للحصول على بناء جملة إنشاء الجدول.

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

  • هل سيكون من الأسهل استخدام الصفحات الرئيسية؟ لأنني لاحظت أنه كان عليك إعادة كتابة اتصال الخادم وقاعدة البيانات مرة أخرى لكل صفحة

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

  • لماذا لا تستخدم الإطار؟ أراهن أن ذلك سيبدو أنيقًا وسهلاً.

ثم مرة أخرى ، ذكرت في العنوان إنشاء برنامج PHP الأول الخاص بك من SCRATCH. من الجيد أن تبدأ من "قالب" حتى يعرف القارئ الشفرة عن ظهر قلب.

  • أعلم أن هذه قد تكون طريقة قديمة لتطوير PHP. لقد سمعت أن هناك ميزات جديدة تم إصدارها.

لقد قدمت فقط بناءً على إتقاني. لقد كنت أعمل مع PHP لفترة طويلة الآن وربما لم أسمع عن الميزات الجديدة. إذا كنت تعتقد أن الجهاز الجديد يجعله يبدو جيدًا ، فجربه بعد ذلك.

  • لماذا لا تنشئ ملفًا منفصلاً لـ CSS و JavaScript؟

بسيط ، أنا فقط أوضح لك الوظائف. كانت أكثر في الكود الخلفي بدلاً من الواجهة الأمامية. لم أركز حقًا على التصميم. إذا سألت عن كيفية تصميم الكود الخاص بك باستخدام PHP ، فسيكون ذلك سهلاً مثل تصميم ملف HTML عادي.

حسنًا ، أعتقد أن هذا يختتم كل شيء. شكرا يا شباب! أتمنى أن تكون قد تعلمت شيئًا من هذا الموضوع.


***********************


***********************

تعليقات
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة