لائحة الطعام
مجاني
تحقق في
الرئيسي  /  التثبيت والتكوين/ استمارات التسجيل وتسجيل الدخول. التسجيل خطوة بخطوة مع jQuery

استمارات التسجيل والتفويض Jquery. التسجيل خطوة بخطوة مع jQuery

في هذه المقالة سوف تتعلم كيفية إنشاء استمارة التسجيل والتفويضباستخدام HTML و JavaScript و PHP و MySql. يتم استخدام هذه النماذج في كل موقع تقريبًا ، بغض النظر عن نوعه. تم إنشاؤها لكل من المنتدى والمتجر عبر الإنترنت والشبكات الاجتماعية (مثل ، على سبيل المثال ، Facebook و Twiter و Odnoklassniki) والعديد من أنواع المواقع الأخرى.

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

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

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

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

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

لذلك ، فكرنا في تخيل الحقول التي سيحتويها النموذج الخاص بنا وإنشاء جدول المستخدمينمع حقول مثل هذا:

  • هوية شخصية- المعرف. مجال هوية شخصيةيجب أن يحتوي كل جدول من قاعدة البيانات.
  • الاسم الأول- لحفظ الاسم.
  • الكنية- لحفظ الألقاب.
  • البريد الإلكتروني- لحفظ العنوان البريدي. سنستخدم البريد الإلكتروني لتسجيل الدخول ، لذلك يجب أن يكون هذا الحقل فريدًا ، أي يجب أن يحتوي على فهرس فريد.
  • البريد الإلكتروني- حقل للإشارة إلى ما إذا كان البريد مؤكدًا أم لا. إذا تم تأكيد البريد ، فسيكون له القيمة 1 ، وإلا فإن القيمة 0. بشكل افتراضي ، سيكون لهذا الحقل القيمة 0.
  • كلمه السر- لحفظ كلمة المرور.

يجب أن تحتوي جميع الحقول من النوع "VARCHAR" على قيمة افتراضية هي NULL.


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

كل شيء ، طاولتنا المستخدمينجاهز. دعنا ننتقل إلى الخطوة التالية.

اتصال قاعدة البيانات

لقد أنشأنا قاعدة البيانات ، والآن نحتاج إلى الاتصال بها. سنتصل باستخدام امتداد PHP MySQLi.

في مجلد موقعنا ، قم بإنشاء ملف باسم dbconnect.phpوفيه نكتب النص التالي:

خطأ في اتصال قاعدة البيانات... وصف الخطأ: ".mysqli_connect_error ()."

"؛ exit ()؛) // تعيين ترميز الاتصال $ mysqli-> set_charset (" utf8 ")؛ // للراحة ، دعنا نضيف متغيرًا هنا يحتوي على اسم موقعنا $ address_site =" http: // testite.local "؛؟>

هذا الملف dbconnect.phpسوف تحتاج إلى أن تكون متصلاً مع معالجات الشكل.

انتبه إلى المتغير $ address_site، هنا أشرت إلى اسم موقع الاختبار الخاص بي الذي سأعمل عليه. يجب عليك الإشارة إلى اسم موقعك وفقًا لذلك.

هيكل الموقع

الآن دعنا نلقي نظرة على بنية HTML لموقعنا.

سننقل رأس وتذييل الموقع إلى ملفات منفصلة ، header.phpو تذييل. php... سنقوم بتضمينها في جميع الصفحات. وهي الرئيسية (ملف index.php) ، إلى الصفحة التي تحتوي على نموذج التسجيل (ملف form_register.php) والصفحة التي تحتوي على نموذج التفويض (ملف form_auth.php).

حظر مع روابطنا ، تحقق فيو تفويض، أضف إلى رأس الموقع بحيث يتم عرضها في جميع الصفحات. سوف يدخل رابط واحد في صفحة استمارة التسجيل(ملف form_register.php) والآخر على الصفحة التي بها نمو ذج تفويض(ملف form_auth.php).

محتوى ملف header.php:

اسم موقعنا

نتيجة لذلك ، تبدو الصفحة الرئيسية كما يلي:


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

الآن دعنا ننتقل إلى نموذج التسجيل. كما فهمت بالفعل ، لدينا في الملف form_register.php.

انتقل إلى قاعدة البيانات (في phpMyAdmin) ، وافتح هيكل الجدول المستخدمينونرى ما هي المجالات التي نحتاجها. لذلك ، نحتاج إلى حقول لإدخال الاسم الأول والأخير ، وحقل لإدخال العنوان البريدي (البريد الإلكتروني) وحقل لإدخال كلمة المرور. ولأغراض أمنية ، سنضيف حقلاً لإدخال حروف التحقق.

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

قبل عرض النموذج ، أضف كتلة لعرض رسائل الخطأ من الجلسة.

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

بشكل عام ، رمز الملف form_register.phpلقد حصلنا عليه مثل هذا:

انت مسجل مسبقا

في المتصفح ، تبدو صفحة نموذج التسجيل كما يلي:


عبر السمة المطلوبة، لقد جعلنا جميع الحقول المطلوبة.

انتبه إلى رمز نموذج التسجيل حيث يتم عرض كلمة التحقق:


حددنا مسار الملف بقيمة السمة src للصورة كلمة التحقق. phpالذي يولد هذا الكابتشا.

لنلق نظرة على كود الملف كلمة التحقق. php:

تم التعليق على الكود جيدًا ، لذلك سأركز على نقطة واحدة فقط.

داخل الوظيفة imageTtfText ()، يتم تحديد مسار الخط verdana.ttf... لذلك لكي يعمل اختبار captcha بشكل صحيح ، يجب علينا إنشاء مجلد الخطوط، ووضع ملف الخط هناك verdana.ttf... يمكنك العثور عليه وتنزيله من الإنترنت ، أو أخذه من الأرشيف مع مواد هذه المقالة.

لقد انتهينا من بنية HTML ، حان الوقت للمضي قدمًا.

التحقق من صحة البريد الإلكتروني مع jQuery

يحتاج أي نموذج إلى التحقق من صحة البيانات المدخلة ، سواء من جانب العميل (باستخدام JavaScript ، و jQuery) وعلى جانب الخادم.

يجب أن نولي اهتمامًا خاصًا لحقل البريد الإلكتروني. من المهم جدًا أن يكون العنوان البريدي المدخل صالحًا.

بالنسبة لحقل الإدخال هذا ، قمنا بتعيين نوع البريد الإلكتروني (type = "email") ، وهذا يحذرنا قليلاً من التنسيقات غير الصحيحة. لكن هذا لا يكفي ، لأنه من خلال فاحص الكود الذي يوفره لنا المتصفح ، يمكنك بسهولة تغيير قيمة السمة يكتبمن عند البريد الإلكترونيعلى ال نص، وهذا كل شيء ، لن يكون الشيك الخاص بنا صالحًا.


وفي هذه الحالة ، نحتاج إلى إجراء فحص أكثر موثوقية. لهذا ، سوف نستخدم مكتبة jQuery من JavaScript.

لتوصيل مكتبة jQuery ، في الملف header.phpبين العلامات ، قبل علامة الإغلاق ، أضف هذا السطر:

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

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

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

تسجيل المستخدم

نرسل النموذج للمعالجة إلى الملف register.php، عبر طريقة POST. اسم ملف المعالج هذا المحدد في قيمة السمة عمل... ويتم تحديد طريقة الإرسال في قيمة السمة طريقة.

فتح هذا الملف register.phpوأول شيء يتعين علينا القيام به هو كتابة دالة لبدء جلسة وتوصيل الملف الذي أنشأناه سابقًا dbconnect.php(في هذا الملف ، قمنا بالاتصال بقاعدة البيانات). ومع ذلك ، دعنا نعلن على الفور عن الخلايا رسائل خاطئةو رسائل_النجاحفي المجموعة العالمية للجلسة. في سمات_الخطأسنقوم بتسجيل جميع رسائل الخطأ التي تحدث أثناء معالجة النموذج وفي succes_messages، سوف نسجل رسائل بهيجة.

قبل المتابعة ، يجب أن نتحقق كان النموذج المقدم على الإطلاق... يمكن للمهاجم النظر في قيمة السمة عملمن النموذج ، واكتشف الملف الذي يعالج هذا النموذج. وقد تكون لديه فكرة الانتقال مباشرة إلى هذا الملف عن طريق كتابة العنوان التالي في شريط العنوان في المتصفح: http: //arees_site/register.php

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

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

خطأ!الصفحة الرئيسية.

"); } ?>

تمت إضافة قيمة captcha في الجلسة عند إنشائها في الملف كلمة التحقق. php... للتذكير ، سأعرض لك هذا الجزء من الرمز من الملف مرة أخرى. كلمة التحقق. phpحيث يتم إضافة قيمة captcha إلى الجلسة:

الآن دعنا ننتقل إلى التحقق نفسه. في ملف register.php، داخل كتلة if ، حيث نتحقق مما إذا كان الزر "تسجيل" قد تم النقر عليه ، أو بالأحرى ، حيث يتم تحديد التعليق " // (1) ضع الجزء التالي من الكود"نحن نكتب:

// تحقق من كلمة التحقق الناتجة // قم بقص المسافات من بداية ونهاية السطر $ captcha = trim ($ _ POST ["captcha"]) ؛ if (isset ($ _ POST ["captcha"]) &&! blank ($ captcha)) (// قارن القيمة المستلمة بالقيمة من الجلسة. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// إذا كانت كلمة التحقق غير صحيحة ، فإننا نعيد المستخدم إلى صفحة التسجيل ، وهناك سنعرض رسالة خطأ بأنه أدخل رمز التحقق الخاطئ . $ error_message = "

خطأ!لقد أدخلت كلمة التحقق الخاطئة

"؛ // احفظ رسالة الخطأ في الجلسة. $ _SESSION [" error_messages "] = $ error_message؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" HTTP / 1.1 301 Moved Permanent ") ؛ العنوان (" الموقع: " . $ Address_site. "/ form_register.php") ؛ // Stop the script exit () ؛) // (2) ضع الجزء التالي من الكود) else (// إذا لم يتم تمرير captcha أو كان خروجًا فارغًا ( "

خطأ!لا يوجد رمز تحقق ، أي رمز captcha. يمكنك الذهاب إلى الصفحة الرئيسية.

"); }

بعد ذلك ، نحتاج إلى معالجة البيانات المستلمة من صفيف POST. بادئ ذي بدء ، نحتاج إلى التحقق من محتويات مصفوفة POST العالمية ، أي أن هناك خلايا تتطابق أسماؤها مع أسماء حقول الإدخال من نموذجنا.

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

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

الصق هذا الرمز في الموقع المحدد " // (2) ضع الجزء التالي من الكود".

/ * تحقق مما إذا كانت المصفوفة العالمية $ _POST تحتوي على البيانات المرسلة من النموذج وقم بإرفاق البيانات المقدمة في المتغيرات العادية. * / If (isset ($ _ POST ["first_name"])) (// قم بقص المسافات من البداية ومن نهاية السلسلة $ first_name = trim ($ _ POST ["first_name"]) ؛ // تحقق من المتغير من أجل الفراغ إذا (! فارغ ($ first_name)) (// للأمان ، قم بتحويل الأحرف الخاصة إلى كيانات HTML $ first_name = htmlspecialchars ($ first_name، ENT_QUOTES)؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

أدخل أسمك

حقل الاسم مفقود

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) if (isset ($ _ POST ["last_name"])) (// قطع المسافات من بداية ونهاية السلسلة $ last_name = trim ($ _ POST ["last_name"]) ؛ إذا (! فارغ ($ last_name )) (// للأمان ، قم بتحويل الأحرف الخاصة إلى كيانات HTML $ last_name = htmlspecialchars ($ last_name، ENT_QUOTES)؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

أدخل اسمك الأخير

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

حقل الاسم الأخير مفقود

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) if (isset ($ _ POST ["email"])) (// اقتطاع المسافات من بداية ونهاية السطر $ email = trim ($ _ POST ["email"]) ؛ إذا (! فارغ ($ email )) ($ email = htmlspecialchars ($ email، ENT_QUOTES)؛ // (3) مكان الكود للتحقق من تنسيق عنوان البريد الإلكتروني وتفرده) else (// حفظ رسالة الخطأ في الجلسة. $ _SESSION [ "رسائل خطأ"]. = "

أدخل بريدك الإلكتروني

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) if (isset ($ _ POST ["password"])) (// اقتطع المسافات من بداية ونهاية السلسلة $ password = trim ($ _ POST ["password"]) ؛ إذا (! فارغ ($ password)) ($ password = htmlspecialchars ($ password ، ENT_QUOTES) ؛ // تشفير paprol $ password = md5 ($ password. "top_secret") ؛) else (// حفظ رسالة الخطأ في الجلسة. $ _SESSION [" رسائل خطأ "]. ="

ادخل رقمك السري

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) // (4) ضع رمز إضافة مستخدم إلى قاعدة البيانات

أهمية خاصة هو المجال البريد الإلكتروني... علينا التحقق من تنسيق العنوان البريدي المستلم وتفرده في قاعدة البيانات. أي هل هناك أي مستخدم مسجل بالفعل بنفس العنوان البريدي؟

في الموقع المحدد " // (3) مكان الرمز للتحقق من تنسيق العنوان البريدي وتفردهأضف الكود التالي:

// تحقق من تنسيق عنوان البريد الإلكتروني المستلم باستخدام التعبير العادي $ reg_email = "/ ^**@(+(*+)*\.)++/i" ؛ // إذا كان تنسيق عنوان البريد الإلكتروني المستلم لا يتطابق مع التعبير العادي إذا (! Preg_match ($ reg_email ، $ email)) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

لقد أدخلت بريدًا إلكترونيًا غير صالح

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) // نتحقق مما إذا كان هناك بالفعل مثل هذا العنوان في قاعدة البيانات. $ Result_query = $ mysqli-> query ("SELECT` email` FROM` users` WHERE` email` = "". $ Email. "" ")؛ // إذا كان عدد الصفوف المستلمة واحدًا تمامًا ، لذلك تم تسجيل مستخدم بعنوان البريد الإلكتروني هذا بالفعل إذا ($ result_query-> num_rows == 1) (// إذا كانت النتيجة غير خاطئة إذا (($ row = $ result_query -> fetch_assoc ())! = false) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

تم تسجيل مستخدم بهذا العنوان البريدي بالفعل

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / Form_register.php ") ؛) else (// حفظ رسالة الخطأ إلى الجلسة. $ _SESSION ["error_messages"]. = "

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

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / Form_register.php ") ؛) / * أغلق التحديد * / $ result_query-> close () ؛ // إيقاف خروج البرنامج النصي () ؛) / * إغلاق التحديد * / $ result_query-> close () ؛

وهكذا ، انتهينا من جميع عمليات التحقق ، حان الوقت لإضافة المستخدم إلى قاعدة البيانات. في الموقع المحدد " // (4) ضع رمز إضافة مستخدم إلى قاعدة البياناتأضف الكود التالي:

// طلب إضافة مستخدم إلى قاعدة البيانات $ result_query_insert = $ mysqli-> query ("INSERT INTO` users` (First_name، last_name، email، password) VALUES (" ". $ First_name." "،" ". $ Last_name . ""، "". $ email. ""، "". $ password. "") ")؛ if (! $ result_query_insert) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

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

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) else ($ _SESSION ["Success_messages"] = "

تم التسجيل بنجاح !!!
يمكنك الآن تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور الخاصين بك.

"؛ // أرسل المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / Form_auth.php ") ؛) / * إكمال الطلب * / $ result_query_insert-> close () ؛ // أغلق اتصال قاعدة البيانات $ mysqli-> close () ؛

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

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

البرنامج النصي للتحقق من تنسيق عنوان البريد الإلكتروني وطول كلمة المرور موجود في الملف header.php، لذلك سيعمل في الحقول من هذا النموذج أيضًا.

تبدأ الجلسة أيضًا في الملف header.php، لذلك في الملف form_auth.phpلا تحتاج إلى بدء الجلسة ، لأننا سنحصل على خطأ.


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

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

إذن المستخدم

لإحالة القيمة عملعائق التفويض لديه ملف المصادقة، هذا يعني أنه ستتم معالجة النموذج في هذا الملف.

وهكذا ، افتح الملف المصادقةوكتابة الكود لمعالجة نموذج التفويض. أول شيء يجب فعله هو بدء الجلسة وتوصيل الملف dbconnect.phpللاتصال بقاعدة البيانات.

// قم بتعريف خلية لإضافة الأخطاء التي قد تحدث أثناء معالجة النموذج. $ _SESSION ["error_messages"] = ""؛ // قم بتعريف الخلية لإضافة الرسائل الناجحة $ _SESSION ["Success_messages"] = ""؛

/ * تحقق مما إذا كان النموذج قد تم تقديمه ، أي إذا تم النقر فوق الزر تسجيل الدخول. إذا كانت الإجابة بنعم ، فانتقل ، إذا لم يكن كذلك ، فقم بعرض رسالة خطأ للمستخدم تفيد بأنه انتقل إلى هذه الصفحة مباشرة. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! فارغ ($ _ POST ["btn_submit_auth"])) (// (1) مسافة للجزء التالي من الكود) else (خروج ("

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

"); }

// تحقق من captcha الناتج إذا (isset ($ _ POST ["captcha"])) (// اقتطع المسافات من بداية ونهاية السطر $ captcha = trim ($ _ POST ["captcha"]) ؛ إذا (! Empty ($ captcha)) (// قارن القيمة المستلمة بالقيمة من الجلسة. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// إذا كانت كلمة التحقق غير صحيحة ، فسنقوم بإعادة المستخدم إلى صفحة التفويض ، وهناك سنعرض رسالة خطأ بأنه أدخل رمز التحقق الخاطئ.

خطأ!لقد أدخلت كلمة التحقق الخاطئة

"؛ // احفظ رسالة الخطأ إلى الجلسة. $ _SESSION [" error_messages "] = $ error_message؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 Moved Permanent ") ؛ العنوان (" الموقع: " . Address_site. "/ form_auth.php") ؛ // إيقاف خروج البرنامج النصي () ؛)) else ($ error_message = "

خطأ!يجب ألا يكون حقل إدخال captcha فارغًا.

"؛ // احفظ رسالة الخطأ إلى الجلسة. $ _SESSION [" error_messages "] = $ error_message؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 Moved Permanent ") ؛ العنوان (" الموقع: " . $ Address_site. "/ form_auth.php") ؛ // Stop the script exit () ؛) // (2) مكان لمعالجة عنوان البريد // (3) مكان لمعالجة كلمة المرور // (4) مكان لـ إجراء استعلام إلى قاعدة البيانات) else (// إذا لم يتم تمرير captcha للخروج ("

خطأ!لا يوجد رمز تحقق ، أي رمز captcha. يمكنك الذهاب إلى الصفحة الرئيسية.

"); }

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

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

// تقليم المسافات من البداية ومن نهاية السطر $ email = trim ($ _ POST ["email"]) ؛ if (isset ($ _ POST ["email"])) (if (! blank ($ email)) ($ email = htmlspecialchars ($ email ، ENT_QUOTES) ؛ // تحقق من تنسيق عنوان البريد الإلكتروني المستلم باستخدام التعبير العادي $ reg_email = "/ ^**@(+(*+)*\.)++/i"؛ // إذا كان تنسيق عنوان البريد الإلكتروني المستلم لا يتطابق مع التعبير العادي إذا (! preg_match ($ reg_email، $ email)) (// حفظ في رسالة خطأ الجلسة. $ _SESSION ["error_messages"]. = "

لقد أدخلت بريدًا إلكترونيًا غير صحيح

"؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

يجب ألا يكون حقل إدخال العنوان البريدي (البريد الإلكتروني) فارغًا.

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

حقل البريد الإلكتروني مفقود

"؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ ) // (3) مساحة لمعالجة كلمة المرور

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

التحقق من كلمة المرور

الحقل التالي المراد معالجته هو حقل كلمة المرور. إلى الموقع المحدد " // (3) مكان لمعالجة كلمة المرور"، نحن نكتب:

If (isset ($ _ POST ["password"])) (// قم بقص المسافات من بداية ونهاية السلسلة $ password = trim ($ _ POST ["password"]) ؛ if (! Empty ($ password )) ($ password = htmlspecialchars ($ password، ENT_QUOTES)؛ // تشفير كلمة المرور $ password = md5 ($ password. "top_secret")؛) else (// حفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages "]. ="

ادخل رقمك السري

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

لا يوجد حقل لإدخال كلمة المرور

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ )

هنا ، باستخدام وظيفة md5 () ، نقوم بتشفير كلمة المرور المستلمة ، لأنه في قاعدة البيانات لدينا كلمات مرور في شكل مشفر. كلمة سرية إضافية في التشفير ، في حالتنا " top_secretيجب أن يكون "هو الذي تم استخدامه عند تسجيل المستخدم.

أنت الآن بحاجة إلى إجراء استعلام لقاعدة البيانات على عينة من مستخدم عنوانه البريدي يساوي العنوان البريدي المستلم وكلمة المرور تساوي كلمة المرور المستلمة.

// الاستعلام في قاعدة البيانات عن اختيار المستخدم. $ result_query_select = $ mysqli-> استعلام ("SELECT * FROM` users` WHERE email =" ". $ email." "AND password =". $ password. "" ")؛ if (! $ result_query_select) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "

طلب خطأ في جلب المستخدم من قاعدة البيانات

"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ ) else (// نتحقق مما إذا لم يكن هناك مستخدم بهذه البيانات في قاعدة البيانات ، ثم نعرض رسالة خطأ إذا ($ result_query_select-> num_rows == 1) (// إذا كانت البيانات المدخلة تتطابق مع البيانات من قاعدة البيانات ، ثم نقوم بحفظ تسجيل الدخول وكلمة المرور إلى مصفوفة الجلسة. $ _SESSION ["email"] = $ email؛ $ _SESSION ["password"] = $ password ؛ // إعادة المستخدم إلى رأس الصفحة الرئيسية ("HTTP / 1.1 301 تم النقل بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / index.php ") ؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION [" error_messages "]. ="

اسم المستخدم و / أو كلمة المرور غير صحيح

"؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ ))

تسجيل الخروج من الموقع

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

في رأس الموقع (ملف header.php) ، باستخدام الجلسة نتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول بالفعل. إذا لم يكن الأمر كذلك ، فإننا نعرض روابط التسجيل والترخيص ، وإلا (إذا كان مصرحًا به) ، فبدلاً من روابط التسجيل والتفويض ، نعرض الرابط انتاج |.

جزء معدل من التعليمات البرمجية من ملف header.php:

تحقق في

انتاج |

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

كود الملف تسجيل الخروج. php:

هذا كل شئ. الآن أنت تعرف كيف تنفيذ ومعالجة نماذج التسجيل والتفويضمستخدم على موقعك. توجد هذه النماذج في كل موقع تقريبًا ، لذلك يجب أن يعرف كل مبرمج كيفية إنشائها.

تعلمنا أيضًا كيفية التحقق من صحة بيانات الإدخال ، سواء من جانب العميل (في المتصفح ، باستخدام JavaScript ، و jQuery) وعلى جانب الخادم (باستخدام لغة PHP). تعلمنا أيضا تنفيذ إجراءات مغادرة الموقع.

يتم اختبار جميع البرامج النصية وتعمل. يمكنك تنزيل الأرشيف بملفات هذا الموقع الصغير على هذا الرابط.

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

إذا كانت لديك أي أسئلة ، فيرجى أيضًا ، إذا لاحظت أي خطأ في المقالة ، فيرجى إبلاغي بذلك.

خطة الدرس (الجزء 5):

  1. إنشاء هيكل HTML لنموذج تسجيل الدخول
  2. نقوم بمعالجة البيانات الواردة
  3. نعرض تحية المستخدم في رأس الموقع

هل أعجبك المقال؟

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

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

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

لذلك ، نحتاج إلى الملفات التالية:

  • اتصال مع DBMS ؛
  • وظائف مخصصة
  • تفويض؛
  • تحقق في؛
  • صفحة محمية
  • البرنامج النصي لإغلاق المستخدم ؛
  • برنامج نصي يتحقق من حالة ترخيص المستخدم ؛
  • ورقة أنماط لأبسط تصميم لصفحاتنا.

سيكون كل هذا بلا معنى إذا لم يكن لديك جدول مقابل في قاعدة البيانات الخاصة بك. قم بتشغيل أداة إدارة DBMS (PhpMyAdmin أو سطر الأوامر ، أيهما أكثر ملاءمة) وقم بتشغيل الاستعلام التالي فيها:

إنشاء جدول "المستخدمين" (`id` int (11) NOT NULL AUTO_INCREMENT،` تسجيل الدخول` char (16) NOT NULL، `password` char (40) NOT NULL ،` reg_date` الطابع الزمني NOT NULL DEFAULT CURRENT_TIMESTAMP ، PRIMARY KEY (` id`)) ENGINE = MyISAM DEFAULT CHARSET = utf8 AUTO_INCREMENT = 1 ؛

سأقوم بتسمية ملفات البرامج النصية الخاصة بنا بهذا الشكل (ستكون جميعها في نفس الدليل):

  • قاعدة بيانات.
  • وظائف.
  • login.php؛
  • registration.php؛
  • index.php ؛
  • تسجيل الخروج.
  • checkAuth.php ؛
  • style.css.

أنا متأكد من أن الغرض من كل واحد منهم واضح لك. لنبدأ بنص اتصال DBMS. لقد رأيته من قبل. ما عليك سوى حفظ الكود الخاص بهذا البرنامج النصي في ملف يسمى database.php. سنعلن عن وظائف مخصصة في ملف function.php. كيف سيعمل كل هذا؟ يحاول مستخدم غير مصرح له الوصول إلى index.php المستند المحمي ، ويتحقق النظام مما إذا كان المستخدم مصرحًا له ، وإذا كان المستخدم غير مصرح به ، يتم إعادة توجيهه إلى صفحة الترخيص. في صفحة التفويض ، يجب أن يرى المستخدم نموذج التفويض. لنفعلها.

إذن المستخدم

تسجيل.

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

/ * style.css file * / .row (margin-bottom: 10px؛ width: 220px؛) .row label (display: block؛ font-weight: bold؛) .row input.text (font-size: 1.2em؛). المساحة المتروكة: 2 بكسل 5 بكسل ؛) .to_reg (حجم الخط: 0.9em ؛). التعليمات (حجم الخط: 0.8em ؛ اللون: #aaaaaa ؛ الهامش الأيسر: 2 بكسل ؛ المؤشر: افتراضي ؛). خطأ (اللون: أحمر ؛ الهامش الأيسر: 3 بكسل ؛)

إذا تم كل شيء بشكل صحيح ، فيجب أن يكون لديك ما يلي في متصفحك:

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

تسجيل المستخدم

" />

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

تسجيل المستخدم

" />
يمكن أن يحتوي اسم المستخدم على أحرف وأرقام ورموز لاتينية فقط "_" ، "-" ، ".". يجب ألا يقل طول اسم المستخدم عن 4 أحرف ولا يزيد عن 16 حرفًا
في كلمة المرور ، يمكنك فقط استخدام الأحرف اللاتينية والأرقام والرموز "_" ، "!" ، "(" ، ")". يجب ألا تقل كلمة المرور عن 6 أحرف ولا تزيد عن 16 حرفًا
كرر كلمة المرور التي تم إدخالها مسبقًا

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

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

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

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

/ ** * function.php * ملف مع وظائف مخصصة * / // قم بتضمين ملف مع معلمات للاتصال بنظام DBMS need_once ("database.php") ؛ // التحقق من وظيفة اسم المستخدم checkLogin ($ str) (// تهيئة المتغير برسالة خطأ محتملة $ error = ""؛ // إذا لم يكن هناك سلسلة تسجيل دخول ، قم بإرجاع رسالة الخطأ إذا (! $ Str) ($ error = "لم تقم بإدخال اسم مستخدم" ؛ إرجاع خطأ $ ؛) / ** * تحقق من اسم المستخدم باستخدام التعبيرات العادية * يجب أن يكون تسجيل الدخول 4 على الأقل ، ولا يزيد عن 16 حرفًا * يجب أن يحتوي على أحرف وأرقام لاتينية ، * يمكن تكون رموزًا "_"، "-"، "." * / $ pattern = "/ ^ [-_. az \ d] (4،16) $ / i"؛ $ result = preg_match ($ pattern، $ str) ؛ // إذا فشل التحقق ، قم بإرجاع رسالة خطأ إذا (! $ Result) ($ error = "الأحرف غير الصالحة في اسم المستخدم أو اسم المستخدم قصير جدًا (طويل)" ؛ إرجاع خطأ $ ؛) // إذا كان كل شيء على ما يرام ، return true return true ؛) // تحقق من وظيفة كلمة مرور المستخدم checkPassword ($ str) (// تهيئة المتغير برسالة خطأ محتملة $ error = "" ؛ // إذا لم يكن هناك تظهر سلسلة مع تسجيل دخول ، قم بإرجاع رسالة خطأ إذا (! $ str) ($ error = "لم تقم بإدخال كلمة مرور"؛ إرجاع خطأ $؛ ) / ** * تحقق من كلمة مرور المستخدم باستخدام التعبيرات العادية * يجب ألا تقل كلمة المرور عن 6 ، ولا تزيد عن 16 حرفًا * يجب أن تحتوي على أحرف وأرقام لاتينية ، * يمكن أن تحتوي على رموز "_" ، "!" ، "( "،") "* / $ pattern =" / ^ [_!) (. az \ d "(6،16) $ / i" ؛ $ result = preg_match ($ pattern، $ str)؛ // إذا كان الشيك فشل ، قم بإرجاع رسالة خطأ إذا (! $ result) ($ error = "الأحرف غير الصالحة في كلمة مرور المستخدم أو كلمة المرور قصيرة جدًا (طويلة)" ؛ قم بإرجاع $ error ؛) // إذا كان كل شيء على ما يرام ، فارجع إلى true وإرجاع صحيح ؛)

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

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

"؛ header (" Refresh: 5؛ URL = login.php ")؛) // وإلا أبلغ المستخدم بالخطأ الآخر ($ errors [" full_error "] = $ reg؛)))؟> تسجيل المستخدم
" />
يمكن أن يحتوي اسم المستخدم على أحرف وأرقام ورموز لاتينية فقط "_" ، "-" ، ".". يجب ألا يقل طول اسم المستخدم عن 4 أحرف ولا يزيد عن 16 حرفًا
في كلمة المرور ، يمكنك فقط استخدام الأحرف اللاتينية والأرقام والرموز "_" ، "!" ، "(" ، ")". يجب ألا تقل كلمة المرور عن 6 أحرف ولا تزيد عن 16 حرفًا
كرر كلمة المرور التي تم إدخالها مسبقًا

يجب أن تكون قد لاحظت وظيفة جديدة أخرى في البرنامج النصي - التسجيل (). ونحن لم نعلن ذلك بعد. لنفعل ذلك.

// تسجيل وظيفة تسجيل المستخدم ($ login، $ password) (// تهيئة متغير برسالة خطأ محتملة $ error = ""؛ // إذا لم يكن هناك سلسلة تسجيل دخول ، قم بإرجاع رسالة خطأ إذا (! $ Login) ($ error = "تسجيل الدخول غير محدد"؛ إرجاع $ error؛) elseif (! $ password) ($ error = "Password not selected"؛ إرجاع $ error؛) // تحقق مما إذا كان المستخدم مسجلا بالفعل // Connect to the DBMS connect () ؛ // اكتب سلسلة استعلام $ sql = "SELECT` id` من` المستخدمين` WHERE` login` = "". $ Login. "" "؛ // عمل استعلام لقاعدة البيانات $ query = mysql_query ($ sql) أو die ("") ؛ // انظر إلى عدد المستخدمين الذين لديهم معلومات تسجيل الدخول هذه ، إذا كان هناك مستخدم واحد على الأقل ، // قم بإرجاع رسالة خطأ إذا (mysql_num_rows ($ query)> 0) ($ error = "المستخدم الذي لديه تسجيل الدخول المحدد مسجل بالفعل" ؛ إرجاع $ error؛) // إذا لم يكن هناك مثل هذا المستخدم ، قم بتسجيله // اكتب سلسلة استعلام $ sql = "INSERT INTO` users` (` id`، `login `،` password`) VALUES (NULL، "". $ login. " "،". كلمة المرور $. "") "؛ // قم بعمل استعلام لقاعدة البيانات $ query = mysql_query ($ sql) أو die ("

غير قادر على إضافة المستخدم: ". Mysql_error ().". حدث خطأ في السطر ". __LINE__."

")؛ // لا تنس قطع الاتصال بـ mysql_close () DBMS ؛ // إرجاع صحيح ، يشير إلى أن تسجيل المستخدم الناجح يعود صحيحًا ؛)

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

إذن المستخدم

;">

إذا لم تكن مسجلاً في النظام ، فقم بالتسجيل.

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

/ ** * وظيفة ترخيص المستخدم. * سيتم تفويض المستخدمين معنا * باستخدام جلسات PHP. * / تخويل الوظيفة ($ login، $ password) (// تهيئة متغير برسالة خطأ محتملة $ error = ""؛ // إذا لم يكن هناك سطر تسجيل دخول ، قم بإرجاع رسالة خطأ إذا (! $ login) ($ error = "تسجيل الدخول غير محدد" ؛ إرجاع خطأ $ ؛) elseif (! $ Password) ($ error = "كلمة المرور غير محددة" ؛ إرجاع $ error ؛) // تحقق مما إذا كان المستخدم مسجل بالفعل // Connect to the DBMS connect ( )؛ // نحن بحاجة إلى التحقق مما إذا كان هناك مثل هذا المستخدم بين المستخدمين المسجلين // تكوين سلسلة استعلام $ sql = "SELECT` id` FROM` users` WHERE` login` = "". $ Login. "" AND ` password` = "". $ Password. "" "؛ // قم بتشغيل الاستعلام $ query = mysql_query ($ sql) أو die ("

تعذر تنفيذ الاستعلام: ". Mysql_error ().". حدث خطأ في السطر ". __LINE__."

") ؛ // إذا لم يكن هناك مستخدم بهذه البيانات ، فقم بإرجاع رسالة خطأ إذا (mysql_num_rows ($ query) == 0) ($ error =" المستخدم الذي لديه البيانات المحددة غير مسجل "؛ إرجاع $ error؛) // إذا كان المستخدم موجودًا ، ابدأ الجلسة session_start () ؛ // واكتب اسم المستخدم وكلمة المرور فيه // لهذا نستخدم المصفوفة العالمية الفائقة $ _SESSION $ _SESSION ["login"] = $ login؛ $ _SESSION [" password "] = $ password ؛ / / لا تنس إغلاق اتصال قاعدة البيانات mysql_close () ؛ // إرجاع صحيح للرسالة حول تفويض المستخدم الناجح ؛)

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

وظيفة checkAuth ($ login، $ password) (// إذا لم يكن هناك تسجيل دخول أو كلمة مرور ، فقم بإرجاع خطأ إذا (! $ Login ||! $ Password) أرجع خطأ ؛ // تحقق مما إذا كان هذا المستخدم مسجلاً // Connect to the DBMS connect () ؛ // إنشاء سلسلة استعلام $ sql = "SELECT` id` من` المستخدمين` WHERE` login` = "". $ Login. "" AND `password` =" ". $ Password." "" ؛ // تنفيذ الاستعلام $ query = mysql_query ($ sql) أو die ("

تعذر تنفيذ الاستعلام: ". Mysql_error ().". حدث خطأ في السطر ". __LINE__."

") ؛ // إذا لم يكن هناك مستخدم بهذه البيانات ، فقم بإرجاع خطأ ؛ إذا (mysql_num_rows ($ query) == 0) (إرجاع خطأ ؛) // لا تنس إغلاق اتصال قاعدة البيانات mysql_close () ؛ // وإلا ، إرجاع صحيح عودة صحيح ؛)

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

/ ** * البرنامج النصي للتحقق من ترخيص المستخدم * / // ابدأ جلسة ، سنستخرج منها تسجيل الدخول وكلمة المرور // الخاصة بالمستخدمين المسجلين في جلسة_start () ؛ // تضمين ملف به وظائف مخصصة تتطلب _once ("وظائف .php") ؛ / ** * لتحديد ما إذا كان المستخدم قد قام بتسجيل الدخول ، نحتاج إلى * التحقق مما إذا كانت هناك سجلات في قاعدة البيانات لتسجيل الدخول * وكلمة المرور الخاصة به. للقيام بذلك ، سنستخدم الوظيفة المخصصة * للتحقق من صحة بيانات المستخدم المسجلة. * إذا عرضت هذه الوظيفة خطأً ، فلا يوجد إذن. * في حالة عدم وجود إذن ، نقوم ببساطة بإعادة توجيه * المستخدم إلى صفحة التفويض. * / // إذا كانت الجلسة تحتوي على كلٍ من بيانات تسجيل الدخول وكلمة المرور ، // تحقق منها إذا (isset ($ _ SESSION ["login"]) && $ _SESSION ["login"] && isset ($ _ SESSION ["password"] ) && $ _SESSION ["password"]) (// إذا فشل التحقق من صحة البيانات الموجودة إذا (! CheckAuth ($ _ SESSION ["login"] ، $ _SESSION ["password"])) (// إعادة توجيه المستخدم إلى رأس صفحة الترخيص ("location: login.php") ؛ // إيقاف خروج تنفيذ البرنامج النصي ؛)) // إذا لم تكن هناك بيانات حول تسجيل الدخول أو كلمة مرور المستخدم ، // ضع في اعتبارك أنه لا يوجد ترخيص ، أعد توجيه user // إلى صفحة الترخيص else (header ("location: login.php") ؛ // إحباط خروج البرنامج النصي ؛)

لنقم الآن بإنشاء رمز لصفحتنا الآمنة. سيكون بسيطا جدا.

ترخيص المستخدم والتسجيل

تفويض ناجح.

لقد وصلت إلى صفحة آمنة. يمكنك تسجيل الخروج من النظام.

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

/ ** * البرنامج النصي لتسجيل خروج المستخدم. نظرًا لأن المستخدمين * مخولون من خلال الجلسات ، يتم تخزين اسم المستخدم وكلمة المرور * في مصفوفة supergloban $ _SESSION. لتسجيل الخروج من النظام ، ما عليك سوى إتلاف القيم * الخاصة بمصفوفة $ _SESSION ["login"] و $ _SESSION ["password"] ، وبعد ذلك * نقوم بإعادة توجيه المستخدم إلى صفحة التفويض * / // تأكد لبدء الجلسة session_start () ؛ unset ($ _ SESSION ["تسجيل الدخول"]) ؛ unset ($ _ SESSION ["password"]) ؛ header ("location: login.php") ؛

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

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

كل شيء يحدث تحت سيطرة PHP ، ويتم تخزين البيانات في قاعدة بيانات MySQL.

يستخدم النظام لوحة انزلاقية ممتازة تم تطويرها بواسطة Web-kreation.

الخطوة 1 - MySQL

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

الجدول

--
- هيكل الجدول "tz_members"
--
إنشاء جدول "tz_members" (
`id` int (11) NOT NULL auto_increment،
`usr` varchar (32) collate utf8_unicode_ci NOT NULL default" "،
`pass` varchar (32) collate utf8_unicode_ci NOT NULL default" "،
"البريد الإلكتروني" varchar (255) جمع utf8_unicode_ci NOT NULL افتراضي "" ،
"regIP` varchar (15) جمع utf8_unicode_ci NOT NULL افتراضي" "،
`dt` datetime NOT NULL افتراضي" 0000-00-00 00:00:00 "،
المفتاح الأساسي (`id`) ،
مفتاح فريد "usr" ("usr")
) المحرك = مجموعة MyISAM الافتراضية = utf8 COLLATE = utf8_unicode_ci ؛

نحدد المعرف على أنه عدد صحيح مع خيار زيادة تلقائية- سيتم تخصيصه تلقائيًا لكل مستخدم مسجل جديد. أيضا usrمعرف ك مفتاح فريد- لا يسمح الجدول بوجود سجلين بنفس اسم المستخدم.

لاحقًا ، سوف نستخدم الخصائص المحددة أثناء عملية التسجيل عند إدخال اسم المستخدم.

بعد إنشاء الجدول ، تحتاج إلى ملء المتغيرات الخاصة بالاتصال بقاعدة البيانات الخاصة بك في الملف connect.phpبحيث يمكن تشغيل الكود على الخادم الخاص بك.

الخطوة 2 - XHTML

أولاً ، نحتاج إلى تضمين نموذج إنشاء الويب في صفحتنا.

demo.php






شريط انزلاق JQuery


حل لتسجيل / تسجيل دخول المستخدمين إلى الموقع



إذا (! $ _ SESSION ["id"]):
// إذا لم تكن مسجلاً بعد
?>



تسجيل الدخول للمستخدمين المسجلين


إذا ($ _ SESSION ["msg"] ["login-err"])
{
صدى صوت "
". $ _ SESSION [" msg "] [" login-err "]."
";
unset ($ _ SESSION ["msg"] ["login-err"])؛
// سيؤدي ذلك إلى ظهور أخطاء تسجيل الدخول ، إن وجدت
}
?>












لم يتم تسجيلة بعد؟ أدخل بياناتك!


إذا ($ _ SESSION ["msg"] ["reg-err"])
{
صدى صوت "
". $ _ SESSION [" msg "] [" reg-err "]."
";
unset ($ _ SESSION ["msg"] ["reg-err"])؛
// هنا نعرض خطأ التسجيل ، إن وجد
}
إذا ($ _ SESSION ["msg"] ["reg-Success"])
{
صدى صوت "
". $ _ SESSION [" msg "] [" reg-Success "]."
";
unset ($ _ SESSION ["msg"] ["reg-Success"])؛
// هنا نعرض رسالة حول التسجيل الناجح
}
?>








آخر:
// إذا قمت بتسجيل الدخول
?>

للمستخدمين المسجلين


بيانات العينة


انتقل إلى صفحة المستخدم

تسجيل خروج



إنهاء إذا؛
// إغلاق بناء IF-ELSE
?>






توجد جمل PHP في عدة أماكن في الكود تتحقق مما إذا كان $ _SESSION ["usr"]أو $ _SESSION ["id"]... إنها صحيحة فقط إذا كان زائر الصفحة مستخدمًا مسجلاً ، مما يسمح لنا بإظهار المحتوى المخفي للزوار المسجلين.

بعد النموذج ، نضع باقي محتوى الصفحة.




شريط انزلاق JQuery


إدارة تسجيل بسيطة باستخدام PHP و jQuery




بعض النصوص ...




لا يوجد شيء مميز في الكود.

الخطوة 3 - PHP

سنقوم الآن بتحويل النموذج إلى نظام تسجيل وتسجيل دخول كامل. لحل المشكلة ، ستحتاج إلى شيء ما بجانب كود PHP المعتاد. يتم تقسيم كل التعليمات البرمجية إلى جزأين.

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

هذه هي الطريقة التي يتم تنفيذها هنا.

demo.php

تعريف ("INCLUDE_CHECK" ، صحيح) ؛
تتطلب "connect.php" ؛
تتطلب "jobs.php" ؛
// لا يمكن تضمين هذين الملفين إلا إذا تم تعريف INCLUDE_CHECK
اسم الجلسة ("tzLogin") ؛
// بدء الجلسة
session_set_cookie_params (2 * 7 * 24 * 60 * 60) ؛
// يحدد عمر ملف تعريف الارتباط لمدة أسبوعين
جلسة_ستارت () ،
if ($ _ SESSION ["id"] &&! isset ($ _ COOKIE ["tzRemember"]) &&! $ _ SESSION ["RememberMe"])
{
// إذا قمت بتسجيل الدخول ، ولكن ليس لديك ملفات تعريف الارتباط tzRemember (إعادة تشغيل المتصفح)
// ولم تحدد خانة الاختيار تذكرني:
$ _SESSION = مجموعة () ؛
session_destroy () ،
// حذف الجلسة
}
إذا (isset ($ _ GET ["تسجيل الخروج"]))
{
$ _SESSION = مجموعة () ؛
session_destroy () ،
header ("الموقع: demo.php") ؛
خروج؛
}
إذا ($ _ POST ["submit"] == "تسجيل الدخول")
{
// تحقق من أن الطلب جاء من نموذج تسجيل الدخول
$ err = مجموعة () ؛
// احفظ الخطأ
إذا (! $ _ POST ["اسم المستخدم"] ||! $ _ POST ["كلمة المرور"])
$ Err = "يجب ملء جميع الحقول!"؛
إذا (! count ($ err))
{

$ _POST ["password"] = mysql_real_escape_string ($ _ POST ["password"]) ؛
$ _POST ["RememberMe"] = (int) $ _ POST ["RememberMe"]؛
// تحضير جميع البيانات
$ row = mysql_fetch_assoc (mysql_query ("SELECT id، usr from tz_members WHERE usr =" ($ _ POST ["username"]) "AND pass =" ". md5 ($ _ POST [" password "])." "" )) ؛
إذا ($ row ["usr"])
{
// إذا كان كل شيء على ما يرام ، فقم بتسجيل الدخول
$ _SESSION ["usr"] = $ row ["usr"]؛
$ _SESSION ["id"] = $ row ["id"] ؛
$ _SESSION ["RememberMe"] = $ _POST ["RememberMe"]؛
// حفظ بعض البيانات في الجلسة
setcookie ("tzRemember"، $ _ POST ["RememberMe"])؛
// إنشاء ملفات تعريف الارتباط tzRemember
}
else $ err = "اسم مستخدم أو كلمة مرور خاطئة!" ؛
}
إذا (يخطئ $)
$ _SESSION ["msg"] ["login-err"] = ينفجر ("
"، يخطئ) ؛
// احفظ رسالة الخطأ في الجلسة
header ("الموقع: demo.php") ؛
خروج؛
}

هنا ملفات تعريف الارتباط tz تذكريعمل كعنصر تحكم لتحديد أنه من الضروري توفير تسجيل خروج لمستخدم لم يحدد مربع الاختيار "تذكرني". إذا لم يكن هناك ملف تعريف ارتباط (بسبب إعادة تشغيل المتصفح) ولم يحدد الزائر خيار "تذكرني" ، فإننا نحذف الجلسة.

ستظل الجلسة نفسها نشطة لمدة أسبوعين (كما هو محدد في المعلمة session_set_cookie_params).

وها هو الجزء الثاني demo.php.

عدا ذلك إذا ($ _ POST ["submit"] == "Register")
{
// إذا تم إرسال الطلب من استمارة التسجيل
$ err = مجموعة () ؛
إذا (strlen ($ _ POST ["اسم المستخدم"])<4 || strlen($_POST["username"])>32)
{
$ err = "اسم المستخدم يجب أن يكون بين 3 و 32 حرفًا!"؛
}
if (preg_match ("/ [^ a-z0-9 \ - \ _ \.] + / i"، $ _ POST ["username"]))
{
$ err = "اسم المستخدم يحتوي على أحرف غير صالحة!"؛
}
إذا (! checkEmail ($ _ POST ["البريد الإلكتروني"]))
{
$ Error = "عنوان بريدك الإلكتروني غير صحيح!" ؛
}
إذا (! count ($ err))
{
// إذا لم تكن هناك أخطاء
$ pass = substr (md5 ($ _ SERVER ["REMOTE_ADDR"]. microtime (). rand (1،100000))، 0.6)؛
// إنشاء كلمة مرور عشوائية
$ _POST ["email"] = mysql_real_escape_string ($ _ POST ["email"]) ؛
$ _POST ["اسم المستخدم"] = mysql_real_escape_string ($ _ POST ["اسم المستخدم"]) ؛
// تحضير البيانات
mysql_query ("INSERT INTO tz_members (usr، pass، email، regIP، dt)
القيم (
"". $ _ POST ["اسم المستخدم"]. ""،
"" .md5 ($ pass). ""،
"". $ _ POST ["بريد إلكتروني"]. ""،
"". $ _ SERVER ["REMOTE_ADDR"]. ""،
الآن ()
)");
إذا (mysql_affected_rows ($ link) == 1)
{
ارسل بريد (" [البريد الإلكتروني محمي]موقع الكتروني"،
$ _POST ["بريد إلكتروني"]،
"عرض لنظام التسجيل - إنشاء كلمة المرور"،
"كلمة المرور الخاصة بك:". $ Pass) ؛
$ _SESSION ["msg"] ["reg-success"] = "لقد أرسلنا إليك بريدًا إلكترونيًا بكلمة المرور الجديدة!"؛
}
else $ err = "اسم المستخدم هذا مستخدم بالفعل!"؛
}
إذا (عدد (يخطئ))
{
$ _SESSION ["msg"] ["reg-err"] = ينفجر داخليًا ("
"، يخطئ) ؛
}
header ("الموقع: demo.php") ؛
خروج؛
}
$ script = ""؛
إذا ($ _ SESSION ["msg"])
{
// يعرض البرنامج النصي شريطًا منبثقًا في صفحة التحميل
$ script = "
";
}

تخزين جميع الأخطاء المحددة في مصفوفة $ يخطئوالتي تم تعيينها لاحقًا إلى متغير _SESSION دولار... وبالتالي ، يتم الاحتفاظ بالوصول إليها بعد إعادة توجيه المتصفح.

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

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

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

يتم أيضًا استخدام برنامج نصي إضافي يعرض لوحة على صفحة التنزيل بحيث تكون الرسالة مرئية للمستخدم.


الخطوة 4 - CSS

تستخدم اللوحة المنزلقة ملف النمط الخاص بها. وبالتالي ، علينا فقط إنشاء نمط لصفحتنا.

demo.css

جسم ، h1 ، h2 ، h3 ، p ، اقتباس ، صغير ، نموذج ، إدخال ، ul ، li ، ol ، label (
/ * إعادة تعيين القواعد * /
الهامش: 0 بكسل ؛
الحشو: 0 بكسل ؛
}
الجسم (
اللون: # 555555 ؛
حجم الخط: 13 بكسل ؛
الخلفية: #eeeeee ؛
عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
العرض: 100٪؛
}
h1 (
حجم الخط: 28 بكسل ؛
وزن الخط: عريض ؛
عائلة الخطوط: "Trebuchet MS" ، Arial ، Helvetica ، sans-serif ؛
تباعد الحروف: 1 بكسل ؛
}
h2 (
عائلة الخطوط: "Arial Narrow" ، Arial ، Helvetica ، sans-serif ؛
حجم الخط: 10 بكسل ؛
وزن الخط: عادي ؛
تباعد الحروف: 1 بكسل ؛
المساحة المتروكة: 2 بكسل ؛
تحويل النص: الأحرف الكبيرة ؛
مساحة بيضاء: التفاف.
أعلى الهامش: 4 بكسل ؛
اللون: # 888888 ؛
}
#main p (
الحشو السفلي: 8 بكسل ؛
}
.صافي (
واضحة على حد سواء؛
}
#رئيسي (
العرض: 800 بكسل ؛
/ * توسيط في منتصف الصفحة * /
الهامش: 60 بكسل تلقائي ؛
}
.وعاء (
أعلى الهامش: 20 بكسل ؛
الخلفية: #FFFFFF ؛
الحد: 1 بكسل صلب # E0E0E0 ؛
الحشو: 15 بكسل ؛
/ * زوايا مدورة * /
-موز حدود نصف قطرها: 20 بكسل ؛
-khtml-border-radius: 20px ؛
-webkit-border-radius: 20px؛
نصف قطر الحدود: 20 بكسل ؛
}
.err (
لون احمر؛
}
.نجاح (
اللون: # 00CC00 ؛
}
أ ، أ: تمت زيارتها (
اللون: # 00BBFF ؛
زخرفة النص: لا شيء ؛
المخطط التفصيلي: لا شيء ؛
}
أ: تحوم (
زخرفة النص: تسطير ؛
}
.tutorial-info (
محاذاة النص: مركز ؛
الحشو: 10 بكسل ؛
}

الخطوة 5 - مسج

تحتوي اللوحة المنزلقة على مسج خاص بها.

demo.php








يتضمن السطر الأول مكتبة jQuery من Google CDN. ويتبع ذلك تصحيح PNG IE6 لعناصر الشفافية. ثم يتم تضمين لوحة البرنامج النصي

يُظهر المتغير النصي $ لوحة على صفحة التنزيل عند الحاجة.

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

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

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

من المنطقي أيضًا تقسيم التسجيل إلى كتل منطقية - معلومات الاتصال والعنوان والبيانات الشخصية وما إلى ذلك.

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

بالإضافة إلى المنطق ، يجب ألا يغيب عن البال أنه في البداية يكون الرابط فقط مرئيًا "إلى الأمام"/"الخطوة التالية"، ولكن في الخطوة الأخيرة لم يكن مرئيًا ولكنه مرئي "عودة"و "تحقق في".

لنلقِ نظرة على المثال نفسه:

صفحة

الخطوة 1

تسجيل الدخول:

بريد إلكتروني:

كلمة المرور:

الخطوة 2

اسم:

اسم العائلة:

سن:

الخطوه 3

دولة:

مدينة:

شارع:

رجوع الخطوة التالية

body (margin: 0؛) / * الأنماط العامة أكثر من * / النموذج (العرض: 30٪ ؛ الهامش: 0 تلقائي ؛) شكل div.step (عرض: لا شيء ؛) نموذج div.step p.step (محاذاة النص: center؛ font-size: 28px؛) شكل div.step p () نموذج div.step p input (float: right؛) a.back (display: none؛) إدخال النموذج (display: none؛) a (color: # 006600 ؛ زخرفة النص: لا شيء ؛) شكل p.talign (محاذاة النص: مركز ؛)

سنضع البرنامج النصي مسؤولاً عن تبديل الخطوات في js / steps_registration.js ، لا تنسَ تضمين مكتبة jQuery أيضًا:

$ (document) .ready (function () (// انتظر حتى يتم تحميل الصفحة var steps = $ ("form"). children (". step")؛ // اعثر على كل خطوات النموذج $ (الخطوات) .show ()؛ / / اعرض الخطوة الأولى var current_step = 0 ؛ // اضبط الخطوة الحالية $ ("a.next"). انقر (function () (// حدث النقر على رابط "الخطوة التالية" إذا (current_step == steps.length-2) (// تحقق مما إذا كانت الخطوة التالية ستكون الأخيرة $ (this) .hide () ؛ // إخفاء رابط "الخطوة التالية" $ ("إدخال النموذج"). إظهار () ؛ // إظهار الزر "تسجيل") $ ("a.back"). show () ؛ // إظهار رابط "الرجوع" current_step ++ ؛ // زيادة عداد تغيير الشريحة الحالية الخطوة (current_step) ؛ // قم بتغيير الخطوة))؛ $ ("a.back"). انقر فوق (function () (// حدث النقر على صورة صغيرة إذا (current_step == 1) (// تحقق مما إذا كانت الخطوة السابقة ستكون أول $ (هذا) .hide () ؛ // إخفاء الرابط "رجوع") $ ("إدخال النموذج") .hide () ؛ // إخفاء زر "تسجيل" $ ("a.next"). إظهار () ؛ // إظهار رابط "الخطوة التالية" current_step-- ؛ // تقليل عداد الشريحة الحالية changeStep (current_step) ؛ // قم بتغيير الخطوة)) ؛ وظيفة changeStep (i) (// وظيفة تغيير الخطوة $ (الخطوات) .hide () ؛ // إخفاء كل الخطوات $ (الخطوات [i]). show () ؛ // إظهار الخطوة الحالية))) ؛

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