تصميم موقع الويب الخاص بك مع PHP و MySQL


الدرس: TP : موقع مصغَّر للدردشة


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

تعليمات للعمل العملي


لإعداد هذا التمرين ، سنرى النقاط التالية:
  • المتطلبات الأساسية
  • الأهداف؛
  • هيكل الجدول MySQL
  • هيكل صفحات PHP ؛
  • تذكير على تعليمات السلامة.
المتطلبات الأساسية
يمكنك اتباع TP هذا دون مشكلة إذا كنت قد قرأت جميع الفصول السابقة. بشكل أكثر تحديدًا ، سوف نستخدم المفاهيم التالية:
  • نقل المتغيرات عبر نموذج ؛
  • قراءة في جدول.
  • الكتابة في جدول
  • استخدام PDO والاستعلامات المعدة.
الأهداف
ما الذي يجب عليك فعله قبل البدء في كتابة كود PHP الخاص بنا؟ مسودة !
نعم ، البرنامج النصي الخاص بك لن يكتب بنفسه ، كما لو كان بالسحر ، لذلك سيكون من الضروري التفكير قليلاً قبل البدء. يجب أن نسأل أنفسنا بشكل خاص ما الذي نريد فعله بالضبط .
ماذا ستكون ميزات صفحات الدردشة؟
سيكون من الأمور الأساسية أن نبدأ به ، ولكن لن يمنعك أي شيء من تحسينه حتى تصل إلى ما نريد.
نريد أن يكون لدينا ، في نفس الصفحة وفي الجزء العلوي ، منطقتان نصيتان: واحدة لكتابة اسمك المستعار ، وآخر لكتابة رسالتك الصغيرة. بعد ذلك ، سيرسل زر "إرسال" البيانات إلى MySQL بحيث يحفظها في جدول.
أدناه ، يجب أن يعرض البرنامج النصي آخر 10 رسائل تم تسجيلها ، بدءًا من الأحدث إلى الأقدم.
هل هو غامض بعض الشيء؟ حسنا ، انظر في الشكل التالي كيف يجب أن تبدو صفحة PHP الخاصة بك عند الانتهاء.
بمجرد أن نعرف ما نريد ، سيكون من الأسهل علينا تحقيقه! ولا تضحك ، فهناك الكثير من الناس يدخلون في البرنامج النصي دون أن يعرفوا حقًا ما يريدون القيام به ، مما يؤدي بهم غالبًا إلى الحائط.
web dynamique php
هيكل الجدول MySQL
كما في كل مرة نستخدم فيها قاعدة بيانات ، سنبدأ بدراسة شكلها ، أي قائمة الحقول التي تحتوي عليها. إليكم لوحة صغيرة صنعتها خلال دقيقة على ورقة خدش:
1
idالرسالةالاسم
1Tomاليوم مشمس ، ألا تعتقد؟
2Jeanنعم ، لقد مر بعض الوقت منذ أن رأينا أشعة الشمس!
3Patriceهل تميل إلى الذهاب إلى الشاطئ اليوم؟ هناك موجات كبيرة!
4Tom بارد ، فكرة جيدة! أنا أحضر مجلس بلدي!
5Jeanاعتمدوا علي !
الحقول التالية مميزة:
  • ID ( النوع INT ) : سيتيح لنا ذلك معرفة ترتيب نشر الرسائل. سيكون من الضروري إدخالها auto_increment بحيث تتم كتابة الأرقام بمفردها ، ولا تنس تحديد ""PRIMARY )هذا يخبر MySQL أنه الحقل الذي يرقم الإدخالات ( ؛
  • pseudo (النوع VARCHAR) : تذكر الإشارة إلى الحد الأقصى لحجم الحقل (أنصحك بتعيين الحد الأقصى ، "255") ؛
  • Message (النوع VARCHAR ) : وبالمثل ، سنشير إلى الحد الأقصى لحجم 255 حرفًا. إذا كنت تعتقد أن رسائلك ستكون أطول ، فاستخدم TEXT النوع الأقل تقييدًا.
لذلك ابدأ بإنشاء هذا الجدول في قاعدة البيانات الخاصة بك باستخدام phpMyAdmin . نسميها ما تريد ، اخترت minichat .
هيكل صفحات PHP
بالنسبة إلى TP "صفحة محمية بكلمة مرور" ، سوف نستخدم ملفين PHP:
  • minichat.php  : يحتوي على نموذج لإضافة رسالة ويسرد آخر 10 رسائل ؛
  • minichat_post.php  : أدخل الرسالة المستلمة $_POST في قاعدة البيانات ثم أعد توجيهها إلى minichat.php .
كان من الممكن القيام بكل شيء على صفحة PHP واحدة ، ولكن لفصل الكود بشكل صحيح ، من الأفضل استخدام ملفين ، كما في الشكل التالي.
web dynamique php
تنظيم صفحات الدردشة المصغرة
لديك كل المعرفة اللازمة لتنفيذ محادثة مصغرة استنادًا إلى هيكل المخطط السابق ... باستثناء إعادة التوجيه. في الواقع ، هناك عدة طرق لإعادة توجيه الزائر إلى صفحة أخرى (عبر علامة على سبيل المثال) ، ولكن الطريقة الأنظف والأسرع هي إعادة توجيه HTTP  . إليك كيفية القيام بذلك على الصفحة minichat_post.php  :

<?php
// قم بتنفيذ الطلب هنا الذي يدرج الرسالة
// ثم إعادة التوجيه إلى minichat.php مثل هذا:
header('Location: minichat.php');
?>
لن يرى الزائر الصفحة minichat_post.php . هذا لا يعرض أي شيء ، ولكن بدلاً من ذلك يأمر متصفح الزائر بالعودة إلى minichat.php .
تتيح لك الوظيفة header() إرسال ما يسمى بـ "رؤوس HTTP " . هذا هو البروتوكول الذي يستخدمه الخادم والعميل لتبادل صفحات الويب. هنا ، نستخدم أحد إمكانيات HTTP التي تتطلب إعادة توجيه عبر الأمر Location .
بالمقارنة مع الأنواع الأخرى من إعادة التوجيه (مثل العلامة  ) ، تتمتع هذه التقنية بميزة كونها فورية وشفافة للمستخدم. بالإضافة إلى ذلك ، إذا قام بتحديث الصفحة minichat.php ، فليس من المحتمل أن يكون لديه رسالة مزعجة ومربكة في الغالب: "لعرض هذه الصفحة ، يجب إعادة المعلومات المرسلة مسبقًا. هل أنت متأكد أنك تريد القيام بذلك؟ ".
تذكير بتعليمات السلامة
تذكير قليل لا يمكن أن يضر: لا تثق في بيانات المستخدم  ! يجب معاملة كل ما يأتي من المستخدم بأقصى درجة من عدم الثقة.
هنا ، لدينا صفحة minichat_post.php بسيطة إلى حد ما تستقبل حقلين: الاسم المستعار والرسالة. في البداية ، لا يوجد التحقق الإضافي الذي يجب القيام به ، إلا أنه يجب توخي الحذر عند عرضه لحماية سلاسل الأحرف ضد ثغرة XSS (تلك التي تسمح لك بإدراج HTML وجافا سكريبت في الصفحة) . لذلك كن حذرا و قم بالاتصال بـ htmlspecialchars() لحماية السلاسل.
دوركم الآن !
هيا ، لقد قلت بما فيه الكفاية. الآن حان دورك للتفكير. مع العناصر التي أعطيتها لك ، ومع ما تعلمته في الفصول السابقة ، يجب أن تكون قادرًا على صنع الدردشة المُصغرة!
إذا كنت تواجه مشكلة صغيرة ، وإذا لم يعمل البرنامج النصي ، فلا تقم بحذفه في لحظة غضب (يجب ألا تغضب أبدًا). تأخذ استراحة والعودة إليها في وقت لاحق.
إذا واجهتك مشكلة بالفعل ، يمكنك طلب المساعدة في المنتديات أو مشاهدة الإصلاح للمساعدة. بذل الجهد في أي حال للعمل في هذا البرنامج النصي ؛ سيكون تكوينيا جدا ، سترى!

الاصلاح


هوب ، هوب ، هوب! سنجمع الأوراق !
سترى الآن ما كنت أتوقعه منك. إذا كنت قد نجحت في القيام بشيء ناجح ، فقد فعلت!
وإذا لم تنجح ، فلا تقلق كثيرًا: الشيء الرئيسي هو أنك بذلت جهدًا للتفكير. من خلال رؤية الاصلاح ، سوف تتعلم الكثير!
كان هناك ملفان ؛ لنبدأ مع minichat.php .
minichat.php : نموذج وقائمة بأحدث الرسائل
تحتوي هذه الصفحة على نموذج لإضافة رسالة وكذلك قائمة الرسائل الحديثة.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mini-chat</title>
    </head>
    <style>
    form
    {
        text-align:center;
    }
    </style>
    <body dir="rtl">
    
    <form action="minichat_post.php" method="post">
        <p>
        <label for="pseudo">الاسم</label> : <input type="text" name="pseudo" id="pseudo" /><br />
        <label for="message">الرسالة</label> :  <input type="text" name="message" id="message" /><br />

        <input type="submit" value="إرسال" />
    </p>
    </form>

<?php
// الاتصال بقاعدة البيانات
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}

// استرجاع آخر 10 رسائل
$reponse = $bdd->query('SELECT pseudo, message FROM minichat ORDER BY ID DESC LIMIT 0, 10');

// عرض كل رسالة (جميع البيانات محمية بواسطة htmlspecialchars)
while ($donnees = $reponse->fetch())
{
    echo '<p><strong>' . htmlspecialchars($donnees['pseudo']) . '</strong> : ' . htmlspecialchars($donnees['message']) . '</p>';
}

$reponse->closeCursor();

?>
    </body>
</html>
يتم فصل الكود الموجود في هذه الصفحة إلى قسمين:
  • النموذج ( بـ HTML ) ؛
  • قائمة الرسائل ( المعروضة في PHP باستخدام استعلام SQL ) .
لم يكن هناك فخ معين ، باستثناء htmlspecialchars() عدم نسيانه على الرسالة وعلى الاسم. يجب حماية جميع البيانات الواردة في النموذج لتجنب ثغرة XSS الذي تحدثنا عنه في فصل سابق.
minichat_post.php : التسجيل وإعادة التوجيه
تتلقى الصفحة minichat_post.php بيانات النموذج وتحفظ الرسالة ثم تعيد توجيه الزائر إلى قائمة الرسائل الحديثة.

<?php
// الاتصال بقاعدة البيانات
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}

// إدراج الرسالة باستخدام طلب معد
$req = $bdd->prepare('INSERT INTO minichat (pseudo, message) VALUES(?, ?)');
$req->execute(array($_POST['pseudo'], $_POST['message']));

// إعادة توجيه الزائر إلى صفحة minichat
header('Location: minichat.php');
?>
هذا الكود قصير نسبيا وليس مستغربا. نحن نتصل بقاعدة البيانات ، ونقوم بإدراج البيانات ونعيد توجيه الزائر إلى الصفحة minichat.php كما تعلمنا للتو.
في الواقع ، يمكن تحسين هذا الكود (سأتحدث عنه لاحقًا). في الواقع ، نحن لا نختبر ما إذا كان اللقب والرسالة موجودين ، أو إذا كانا فارغين أم لا ، إلخ. لذلك من الممكن نظريًا تسجيل الرسائل الفارغة ، والتي من الأفضل عدم السماح بها.

اذهب أبعد من ذلك


من المؤسف أن تتوقف عند هذا الحد ... سيناريو الدردشة الذي أعددته أنت بالتأكيد أمر ممتع ، لكنني متأكد من رغبتك في تحسينه!
ومع ذلك ، يمكنني فقط أن أعطيك الأفكار . لا أستطيع أن أقدم لكم تصحيحًا لكل فكرة من هذه الأفكار لأنها ستكون طويلة جدًا.
ولكن لا تقلق: إذا اقترحت عليك إجراء تحسينات ، فذلك لأنك قادر على ذلك. ثم ، لا تنس أن تطلب المساعدة من المنتديات !
فيما يلي بعض الأفكار لتحسين البرنامج النصي.
  • ذكر الاسم . يجب إعادة إدخال اسم الشهرة الخاص بك حاليًا لكل رسالة جديدة. كما تعلم ، من الممكن في HTML ملء حقل مسبقًا بالسمة value . مثلا :
    
        <input type="text" name="pseudo" value="Tom" />
    
    استبدل Tom اسم المستخدم الخاص بالزائر. يمكن أن يأتي هذا الاسم المستعار من ملف تعريف ارتباط: على سبيل المثال: عندما ينشر رسالة ، فأنت تدخل اسمه في ملف تعريف الارتباط ، مما يتيح لك ملء الحقل مسبقًا.
  • عرض لتحديث الدردشة المصغرة . لا يتم تحديث الدردشة المصغرة تلقائيًا في حالة وجود رسائل جديدة. هذا أمر طبيعي ، سيكون من الصعب القيام به على مستوانا. بشكل أساسي ، لم يكن الويب مخصصًا لهذه الأنواع من التطبيقات. من ناحية أخرى ، ما يمكنك القيام به بسهولة هو تقديم رابط "تحديث" يقوم بتحميل الصفحة مرة أخرى minichat.php . وبالتالي ، إذا كانت هناك رسائل جديدة ، فستظهر بعد النقر على الرابط.
  • عرض الرسائل القديمة . نشاهد حاليًا آخر 10 رسائل فقط. هل يمكنك إيجاد طريقة لعرض الرسائل القديمة؟ بالطبع ، عرضهم جميعًا مرة واحدة على نفس الصفحة ليس فكرة جيدة. يمكنك تخيل مُدخلا $_GET['page'] تسمح باختيار رقم صفحة الرسائل المراد عرضها.
إلى العمل!