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


الدرس: TP: إنشاء مساحة الأعضاء


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

تصميم منطقة الأعضاء


ما هي ميزات منطقة الأعضاء؟
هذا هو السؤال الأول الذي يجب أن نسأله لأنفسنا: ما الذي نريد أن نفعله بشكل ملموس؟ سيسمح لنا ذلك أيضًا بتحديد ما نريد تجنب الاضطرار إلى تصميمه ، على الأقل في البداية.
ربما تكون معتادًا على مناطق الأعضاء في مواقع أخرى. من لم ينشئ حسابًا على موقع ويب؟ على تويتر أو فيسبوك؟ يجب أن تكون قد شاهدت بالفعل منطقة للأعضاء ، حتى إذا كان الموقع لا يسميها هكذا بالضبط. لذلك يجب أن تعلم أن منطقة الأعضاء تتطلب ما يلي على الأقل:
  • صفحة تسجيل
  • صفحة تسجيل الدخول
  • صفحة الخروج.
يمكنك بعد ذلك إضافة صفحات أخرى ، على سبيل المثال لعرض وتعديل ملف تعريف العضو الخاص بك. ومع ذلك ، يجب عليك على الأقل إنشاء الصفحات التي ذكرتها للتو. يجب أن يتيح لك الشكل التالي الحصول على نظرة عامة جيدة على مراحل حياة العضو ، من التسجيل إلى الاتصال والمشاركة في الموقع.
web dynamique php
مراحل حياة العضو
بمجرد أن تصبح قاعدة البيانات جاهزة ، سيكون من الممكن بعد ذلك إنشاء كل المساحة التشاركية على موقعك والتي ستستند إلى الأعضاء: المنتديات ، التعليقات على الأخبار ، إلخ. يتم عرضها في خطوط منقطة في الشكل التالي. سنستخدم رقم العضو ("id") لربط رسائلهم بحسابهم ، باستخدام روابط SQL التي تعرفها جيدًا الآن.
للبدء ، سننشئ جدول MySQL الذي سيخزن أعضاء موقعنا. هذه هي الخطوة الأولى التي ستمكننا بعد ذلك من المضي قدمًا ودراسة إنشاء الصفحات الرئيسية التي تحدثنا عنها: التسجيل والاتصال وانقطاع الاتصال.
جدول الأعضاء
ما الذي يميز العضو؟ دعونا نحاول أن نرى ما نحتاج إلى تخزينه كحد أدنى لإنشاء الجدول:
  • اسم مستعار
  • كلمة السر ؛
  • عنوان بريد الكتروني
  • تاريخ التسجيل.
بالطبع ، يمكننا إضافة حقول أخرى ، مثل توقيعه أو تاريخ ميلاده أو عنوان المراسلة الفورية. ومع ذلك ، سنجعل من السهل البدء ، مع العلم أنه من الممكن دائمًا إضافة حقول إلى الجدول بعد ذلك كما تعلمنا.
لذلك أقترح أن تقوم بإنشاء جدول مسمى  membres مع الحقول التالية:
  • id (int, primary, auto_increment)  .
  • pseudo (varchar 255)  .
  • pass (varchar 255)  .
  • email (varchar 255)  .
  • date_inscription (date) .
يتم تلخيص هذه الحقول في الشكل التالي الذي يعرض الجدول بمجرد إنشائه في phpMyAdmin .
web dynamique php
حقول جدول الأعضاء
إذا كنت تريد أن ينتمي أعضاؤك إلى مجموعات مختلفة ، فقد يكون من المثير للاهتمام إنشاء جدول groupes يسرد كل المجموعات (عضو ، مسؤول ، مشرف ، إلخ). يمكنك إضافة حقل مسمى إلى جدول العضوية  id_groupeالذي يخزن رقم المجموعة ، مما سيتيح لك الانضمام إلى الجدولين كما فعلنا مع ألعاب الفيديو ومالكيها في وقت سابق من الدورة التدريبية.
مشكلة كلمة المرور
يستحق أحد هذه الحقول اهتمامًا خاصًا: الحقل الذي يخزن كلمة المرور. في الواقع ، عند تسجيلهم ، سيرسل زوار موقعك بكلمة مرور كلمة مرور إلى موقعك. من المحتمل جدًا أن يستخدموا كلمة المرور نفسها في العديد من المواقع الأخرى. على الرغم من أن هذه عادة أمان سيئة للغاية (من الناحية المثالية ، يجب استخدام كلمة مرور مختلفة لكل موقع) ، إلا أنها للأسف شائعة جدًا.
مع العلم بذلك ، لديك التزام أخلاقي وأخلاقي معين كمشرفين على الويب: يجب ألا تخزن كلمات المرور الخاصة بزائرك في قاعدة البيانات. إذا وقعت في الأيادي الخطأ (قد يجعلك هذا في حالة حرجة ، مثل اختراق موقعك ، والذي لا أتمنى لك) ، فسيتمكن الشخص من الوصول إلى جميع كلمات المرور الخاصة بأعضائك ويمكن استخدامها لسرقة حساباتهم على المواقع الأخرى!
ومع ذلك ، يجب عليّ تخزين كلمة المرور الخاصة بأعضائي إذا كنت أريد أن أكون قادرًا على التأكد من أنهم الأشخاص المناسبون! هذه مشكلة مستحيلة حلها!
هذا ما تعتقده ، والحل موجود: إنه يسمى التجزئة . إنها وظيفة تحول أي نص إلى رقم سداسي عشري يمثل كلمة المرور ولكنه غير مقروء ، كما هو موضح في الشكل التالي.
web dynamique php
وظيفة التجزئة تجعل كلمة المرور غير قابلة للقراءة
لتجزئة كلمة المرور ، هناك العديد من الوظائف التي تستند إلى خوارزميات مختلفة. الوظيفة المناسبة للاستخدام هي    password_hash التي ستختار أفضل خوارزمية لك.
sha1  ،   md5  ،   sha256  ،   sha512  ... لم تعد تعتبر وظائف تجزئة آمنة اليوم. حتى إذا رأيتها في بعض الرموز (القديمة) ،  لا تستخدمها . استخدم من   password_hash  يختار أفضل الخوارزمية لك.
إن خصوصية التجزئة هي أنها تعمل فقط في اتجاه واحد: من المستحيل العثور على كلمة المرور الأصلية بمجرد تجزئتها. بالإضافة إلى ذلك ، تعد التجزئة (الاسم الممنوح لإصدار تجزئة كلمة المرور) فريدة: فهي تقابل كلمة مرور واحدة وكلمة مرور واحدة فقط.
ستقوم بتخزين النسخة المجزأة من كلمة المرور ، وبالتالي سيتم تمريرها من خلال الوظيفة password_hash . عندما يريد الزائر الاتصال ، سوف يرسل لك كلمة المرور الخاصة به والتي ستقوم بتجميعها مرة أخرى والتي ستقوم بمقارنتها بكلمة المرور المخزنة في قاعدة البيانات. إذا كانت كلمات المرور المجزأة متطابقة ، فهذا يعني أن الزائر قد أدخل نفس كلمة المرور عند التسجيل.

إنشاء الصفحات الرئيسية لمنطقة الأعضاء


لقد حددنا قبل قليل قائمة الصفحات التي نحتاجها على الأقل لإدارة أعضائنا:
  • التسجيل؛
  • اتصال.
  • انقطاع.
لن نكتب كود هذه الصفحات ، لكننا سنراجع ما تحتاج إلى معرفته لجعله صحيحًا.
صفحة التسجيل
تتكون صفحة التسجيل عمومًا من أربعة حقول:
  • اسم مستعار مطلوب ؛
  • كلمة السر ؛
  • تأكيد كلمة المرور (لتجنب أخطاء الكتابة) ؛
  • البريد الإلكتروني.
يوصى بالحد من كمية المعلومات المطلوبة قدر الإمكان. يرغب الزائر في أن يكون قادرًا على التسجيل بسرعة كبيرة. إذا كانت موجودة على صفحة بها العديد من الحقول المراد ملؤها ، فمن المحتمل أن تسقطها. دعه يملأ الحقول الأخرى (مثل توقيعه ورسالته الفورية وتاريخ ميلاده) في وقت لاحق عندما يتم تسجيله.
بعض المواقع لا تسأل عن اسم مستعار وتستخدم عنوان البريد الإلكتروني كمعرّف. إنها إمكانية ، لا سيما على مواقع التجارة الإلكترونية ، ولكن إذا كان على أعضائك نشر رسائل على المنتديات ، فمن الأفضل أن يسجلوا باسم مستعار.
يوضح الشكل التالي نموذج التسجيل الأساسي.
web dynamique php
نموذج التسجيل
حقل كلمة المرور من النوع password لمنع قراءة كلمة المرور على الشاشة من قبل شخص آخر. هذا هو السبب في أنه يوصى بشدة بطلب إعادة إدخال كلمة المرور في حالة قيام الزائر بخطأ مطبعي لا يمكنه رؤيته.
قبل تسجيل المستخدم في قاعدة البيانات ، سيكون من الضروري التفكير في إجراء عدد معين من الاختبارات.
  • هل الاسم المستعار مطلوب من قبل الزائر موجود مسبقا؟ إذا كان موجودا بالفعل في قاعدة البيانات ، فسوف يتعين عليك أن تطلب من الزائر اختيار واحد آخر.
  • هل تم إدخال كلمتي المرور متطابقتين؟ إذا كان هناك خطأ ، يجب عليك دعوة الزائر لإعادة إدخال كلمة المرور.
  • هل يحتوي عنوان البريد الإلكتروني على نموذج صالح؟ يمكنك استخدام تعبير منتظم للتحقق من ذلك.
إذا تم استيفاء جميع هذه الشروط ، يمكن إدراج المستخدم في قاعدة البيانات. كما أخبرتك سابقًا ، يُنصح بشدة بتجزئة كلمة المرور قبل تخزينها ، بحيث لم تعد "قابلة للقراءة".
فيما يلي مخطط لما قد يبدو عليه الرمز الذي يدرج عضوًا جديدًا في قاعدة البيانات:

    <?php
    // التحقق من صحة المعلومات
    
    // تجزئة كلمة المرور
    $pass_hache = password_hash($_POST['pass'], PASSWORD_DEFAULT);
    
    // Insertion
    $req = $bdd->prepare('INSERT INTO membres(pseudo, pass, email, date_inscription) VALUES(:pseudo, :pass, :email, CURDATE())');
    $req->execute(array(
        'pseudo' => $pseudo,
        'pass' => $pass_hache,
        'email' => $email));
هذا الكود هو مخطط بسيط يوضح الخطوات الرئيسية في إنشاء عضو. الأمر متروك لك لإكماله. بالإضافة إلى ذلك ، أدعوك إلى احترام بنية MVC : ستستخدم وحدة التحكم للتحقق من صحة المعلومات وتجزئة كلمة المرور ، في حين سيتولى النموذج ببساطة تنفيذ الطلب.
نتحقق أولاً من صحة المعلومات كما قلت لك أعلاه ، ثم نمتلك كلمة المرور وأخيراً يمكننا إدراج العضو في قاعدة البيانات. تحت phpMyAdmin ، لذلك نرى العضو يظهر كما في الشكل التالي.
web dynamique php
عضو تمت إضافته إلى قاعدة البيانات
كلمة المرور المجزأة غير مقروءة ، وهذا يؤكد لنا أننا لا نستطيع "سرقة" ذلك.
حسنًا ، ولكن فجأة كيف يمكننا التحقق مما إذا كان الشخص الذي قام بتسجيل الدخول لديه كلمة المرور الصحيحة؟!
آه آه! هل يبدو مستحيلاً؟ ومع ذلك ، هناك طريقة غبية للغاية عند التفكير في الأمر. سنرى خلال خطوة الاتصال كيفية التحقق مما إذا كان العضو قد أدخل كلمة المرور الصحيحة. في غضون ذلك ، سوف أتركك على نار خفيفة. 
يمكن إضافة خطوات أخرى لتعزيز أمن التسجيل. على وجه الخصوص ، تعرف على أنظمة Captcha التي تطلب من الزوار نسخ كلمة من صورة للتحقق من أنها ليست روبوتًا. من ناحية أخرى ، يمكنك طلب التأكيد عبر البريد الإلكتروني للتحقق من صحة العنوان.
صفحة تسجيل الدخول
الآن بعد إنشاء العضو ، يجب أن يكون قادرًا على الاتصال بموقعك. لهذا الغرض ، سوف نستخدم نظام الجلساتsessions الذي يتم توفيره لنا بواسطة PHP والذي تعلمنا استخدامه في وقت سابق في هذه الدورة.
عادةً ما يتم طلب اسم المستخدم المستعار (أو تسجيل الدخول  ) وكلمة المرور على الأقل . لتسهيل حياته ، يمكننا أن نقدم له خيار الاتصال التلقائي الذي سيوفر له من الحاجة إلى تسجيل الدخول مرة أخرى في كل مرة يزور فيها الموقع (الشكل التالي).
web dynamique php
نموذج تسجيل الدخول
يجب أن تتحقق الصفحة التي تتلقى البيانات من نموذج الاتصال من كلمة المرور من خلال مقارنتها بالكلمة المخزنة في قاعدة البيانات مع الوظيفة   password_verify  . ستعمل هذه الوظيفة بالفعل على تجزئة كلمة مرور المستخدمة التي قام بادخالها ومقارنتها بكلمة المرور التي تم تخزينها في قاعدة البيانات.
إذا كان هناك عضو له نفس اسم المستخدم وكلمة مرور المجزئة نفسها ، فنحن نسمح بالدخول ويمكننا إنشاء متغيرات الجلسة. خلاف ذلك ، يتم إرجاع خطأ يشير إلى أن اسم المستخدم أو كلمة المرور غير صالحة.

    <?php
    
    //  استعادة المستخدم وكلمة المرور المجزأة
    $req = $bdd->prepare('SELECT id, pass FROM membres WHERE pseudo = :pseudo');
    $req->execute(array(
        'pseudo' => $pseudo));
    $resultat = $req->fetch();
    
    // مقارنة كلمة المرور المرسلة عبر النموذج مع قاعدة البيانات
    $isPasswordCorrect = password_verify($_POST['pass'], $resultat['pass']);
    
    if (!$resultat)
    {
        echo 'اسم مستخدم أو كلمة مرور خاطئة !';
    }
    else
    {
        if ($isPasswordCorrect) {
            session_start();
            $_SESSION['id'] = $resultat['id'];
            $_SESSION['pseudo'] = $pseudo;
            echo 'لقد تم تسجيل دخولك  !';
        }
        else {
            echo 'اسم المستخدم أو كلمة المرور خاطئة ';
        }
    }
نقوم باستعادة كلمة المرور في قاعدة البيانات ومقارنتها مع تلك المنقولة بواسطة نموذج الاتصال بفضل   password_verify ، والتي تُرجع TRUE أو FALSE .
إذا كان كل شيء جيدًا ، فيمكننا إنشاء متغيرات الجلسة وتخزينها على سبيل المثال معرف العضو واسمه المستعار.
إذا كان هناك خطأ ، فمن الأفضل عرض رسالة عامة مثل رسالتي بدلاً من القول على وجه التحديد "إنه معرف سيء" أو "إنها كلمة مرور سيئة" . إذا حاول شخص ما سرقة الوصول من مستخدم ، فكلما قل معرفته ، كان ذلك أفضل!
من الآن فصاعدًا ، في جميع صفحات الموقع ، يمكننا أن نوضح للعضو أنه مرتبط بفضل وجود المتغيرات $_SESSION .

    <?php
    if (isset($_SESSION['id']) AND isset($_SESSION['pseudo']))
    {
        echo 'مرحبا ' . $_SESSION['pseudo'];
    }
إذا رغب العضو في إعادة الاتصال تلقائيًا (وهو ما يُنصح به فقط على جهاز كمبيوتر شخصي ، وليس على جهاز كمبيوتر مشترك مع أشخاص آخرين!) ، أدعوك إلى إنشاء ملفي تعريف ارتباط سيخزنان على التوالي:
  • الاسم المستعار
  • كلمة المرور المجزأة .
وبالتالي ، إذا ظهر زائر غير مرتبط به هذان الملفان ، فسيتعين عليك فقط التحقق مما إذا كان العضو يتوافق مع هذه المعلومات في قاعدة البيانات ويمكنك الاتصال بها تلقائيًا ، دون الحاجة إلى استخدام نموذج تسجيل الدخول. مرة أخرى ، نأخذ قدرًا معينًا من الأمان من خلال تخزين كلمة مرور التجزئة في ملف تعريف ارتباط وليس كلمة المرور الحقيقية.
لاحظ أيضًا ظهور طرق اتصال مركزية جديدة لبعض الوقت. أسمائهم هي OpenID ، Facebook Connect ، معرف Windows Live ، إلخ. من خلال إجراء بعض المعالجات الإضافية ، يمكنك السماح لزائريك بالاتصال بموقعك عن طريق إدخال معرفاتهم على Facebook أو Windows Live أو Twitter أو حتى Google ، مما يحفظهم من الحاجة إلى توفير كلمة مرور خاصة بموقعك.
صفحة الخروج
بعد فترة معينة من عدم النشاط ، يتم إتلاف جلسة العضو تلقائيًا ويجد نفسه غير متصل. إذا قام بتحميل صفحة من الموقع مرة أخرى ، فسوف يبدو غير متصل ، إلا إذا قام بتنشيط الاتصال التلقائي الذي سيكون له تأثير على إعادة توصيله على الفور وبشفافية بفضل ملفات تعريف الارتباط الخاصة به.
إذا كان قطع الاتصال تلقائيًا بعد وقت معين ( المهلة الشهيرة ) ، فلا يزال عليك تقديم رابط قطع الاتصال. يجب أن تقوم صفحة الخروج بحذف محتوى $_SESSION نظام الجلسة (إنهاء الاتصال session_destroy()) وإنهائه وحذف ملفات تعريف الارتباط لتسجيل الدخول التلقائي إن وجدت.

    <?php
    session_start();
    
    // حذف جلسة و متغيرات الجلسة
    $_SESSION = array();
    session_destroy();
    
    // حذف ملفات تعريف الارتباط لتسجيل الدخول التلقائي
    setcookie('login', '');
    setcookie('pass_hache', '');

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


لقد رأينا معا كيفية إعداد أسس نظام إدارة الأعضاء. بالطبع ، لقد قمنا بالحد الأدنى والآن حان دورك لتحسين هذا البرنامج النصي كما تراه مناسبًا.
فيما يلي بعض الطرق لإكمال منطقة الأعضاء.
  • قدم العضو لإرسال صورة رمزية . لقد تعلمت كيفية إرسال الملفات عبر النماذج وكيفية تغيير حجم الصور باستخدام مكتبة GD ، بحيث تكون قادرًا تمامًا! على الرغم من أن هناك العديد من الطرق، وأبسط هذه الطرق هي إنشاء مجلد avatars هناك ونقل الملفات وفقا لهوية(id) الأعضاء: 1.png ، 2.png ، 3.png الخ
  • قم بإعداد صفحة ملف تعريف للعضو . يمكنك عرض جميع أنواع المعلومات هناك ، مثل البريد الإلكتروني الخاص به (ولكن من الأفضل أن تطلب موافقته مسبقًا) ، وعنوان المراسلة الفورية ، وتاريخ ميلاده ، وشغفه ، ووظيفته ، واسم المدينة حيث هو يعيش وما شابه يمكن تخزين كل هذه المعلومات في حقول جديدة من الجدول membres .
  • اقترح على العضو إذا كان يرغب في تغيير معرفاته : اسم مستعار وكلمة مروره. من الشائع أن يرغب أحد الأعضاء في تغيير اسم مستعار لبعض الوقت بعد التسجيل ، ولكن قبل كل شيء من الضروري أن يتمكنوا من تغيير كلمة المرور الخاصة بهم في أي وقت في حالة تعرضها للخطر! حتى إذا كان العضو متصلاً بالفعل ، فإنني أنصحك أن تطلب منه مرة أخرى كلمة المرور الحالية قبل السماح له بتغييرها ، لأسباب أمنية.
  • امنح العضو الخيار للاختيار من بين العديد من خيارات التنقل . ليس كل شخص يستخدم موقع الويب الخاص بك بالطريقة نفسها ، ربما يرغب البعض في الحصول على قائمة أعلى الصفحات بدلاً من أخرى ، وربما يفضل البعض الآخر التنقل باستخدام تصميم غامق ، إلخ.
يجب أن تبدأ منطقة عضويتك في أن تكون ممتلئة من هذه الأشياء!
الآن لماذا لا تبدأ في إنشاء المنتديات الخاصة بك على موقع الويب الخاص بك؟ سيتم ربط كل رسالة من المنتديات بمعرف العضو: ستكون كافية لإنشاء حقل id_membre في جدول الرسائل. يمكنك بعد ذلك استخدام الصلات لاسترداد اسم مستعار العضو وتوقيعه تلقائيًا على كل رسالة منشورة!