نموذج تسجيل الدخول باستخدام HTML / CSS و PHP و MySQL

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

أربع خطوات لإنشاء نموذج تسجيل الدخول:

1- إنشاء ملف HTML يحتوي على بنية النموذج ؛
2- إنشاء ملف CSS لتحديد النمط ؛
3- قم بإنشاء ملف تسجيل دخول PHP يتحقق من حقول النموذج إذا كانت تتطابق مع قيم الجدول في قاعدة البيانات ؛
4- قم بإنشاء ملف PHP للصفحة الرئيسية وتسجيل الخروج.

الخطوة 1:

أولا ، سنقوم بإنشاء صفحة HTML login.php.

login.php:

 < فرع /> < رئيس> < فرع /> < مجموعة الأحرف الوصفية = "utf-8" > < ر / >  < فرع /> < link rel = "ورقة الأنماط" href = "style.css" الوسائط = "الشاشة" اكتب = "نص / css" / > < / > < / الرأس> < فرع /> < الجسم> < فرع /> < معرف div = "حاوية"> < ر / >  < / > < / > < شكل الإجراء = "verification.php" الطريقة = "POST"> < فرع /> < H1> تسجيل الدخول < / > < / > < التسمية> < ب> اسم المستخدم < فرع /> < نوع الإدخال = العنصر النائب "النص" = "أدخل اسم المستخدم" الاسم = "اسم المستخدم" مطلوب> < ب / >< / > < التسمية> < ب> شعار < فرع /> < نوع الإدخال = العنصر النائب "كلمة المرور" = "أدخل كلمة المرور" الاسم = "كلمة المرور" مطلوب> < ب / >< / > < نوع الإدخال = "إرسال" المعرف = قيمة "إرسال" = > "تسجيل الدخول" < / > <؟ php
 if(isset($_GET['error'])){
 $err = $_GET['error']; 
 if ($err == 1 || $err == 2) 
 صدى "< p النمط = "اللون: أحمر" > مستخدم أو كلمة مرور غير صحيحة"; 
 }
 ?> < / > < / شكل> < / > < / شعبة> < / > < / الجسم> < / >< / html> 
< / pre>
 الخطوة 2: < / h4 > سيضيف النمط التنسيق إلى نافذة تسجيل الدخول الخاصة بنا.

style.css:

body{
 الخلفية:  #67BE4B. 
}
#container{
 العرض: 400px; 
 الهامش: 0 تلقائي ؛ 
 الهامش الأعلى: 10٪ ؛ 
} 
 / * شكل حدود * / < br / > شكل {
 العرض: 100٪ ؛ حشوة 
: 30 بكسل ؛ 
 الحدود: 1px #f1f1f1 الصلبة ؛ 
 الخلفية: #fff; 
 مربع الظل: 0 0 20px 0 rgba (0 ، 0 ، 0 ، 0.2) ، 0 5px 5px 0 rgba (0 ، 0 ، 0 ، 0.24) ؛ 
} 
#container h1 {
 العرض: 38٪ ؛ هامش 
: 0 تلقائي ؛ 
 الحشو السفلي: 10 بكسل ؛ 
} 

 / * مدخلات العرض الكامل * / 
 الإدخال [النوع = النص] ، الإدخال [النوع = كلمة المرور] {
 العرض: 100٪ ؛ حشوة 
: 12 بكسل 20 بكسل ؛ 
 الهامش: 8px 0; شاشة 
: كتلة مضمنة ؛ 
 الحدود: 1 بكسل صلب #ccc ؛ < br / > حجم الصندوق: صندوق الحدود ؛ 
} 

 / * تعيين نمط لجميع الأزرار * / < br / > الإدخال [النوع = إرسال] {
 لون الخلفية: #53af57 ؛ 
 اللون: أبيض. حشوة 
: 14 بكسل 20 بكسل ؛ 
 الهامش: 8px 0; 
 الحدود: لا شيء ؛ مؤشر 
: مؤشر; 
 العرض: 100٪ ؛ 
}
input[type=submit]:hover {
 لون الخلفية: أبيض; 
 اللون: #53af57; 
 الحدود: 1 بكسل #53af57 صلبة ؛ 
} 
< / pre>Preview: 

الخطوة 3:
ثم للتحقق من صحة النموذج ، نحتاج إلى ملف للتحقق من حقول النموذج ، ولكن قبل ذلك ، لا تنس إنشاء جدول "المستخدم" في قاعدة البيانات: 

< / a>< / div>
verification.php: < / u>

< pre class = "prettyprint lang-php" ><؟ php
session_start(); 
if(isset($_POST['username']) & & isset($_POST['password']))
{
 // اتصال قاعدة البيانات
 $db_username = 'root'; 
 $db_password = 'mot_de_passe_bdd'; 
 $db_name = 'nom_bdd'; 
 $db_host = 'المضيف المحلي'; 
 $db = mysqli_connect ($db_host أو $db_username أو $db_password,$db_name)
 أو die ('تعذر الاتصال بقاعدة البيانات') ؛ 
 
 // نطبق الوظيفتين mysqli_real_escape_string و htmlspecialchars
 // للقضاء على أي هجمات حقن SQL و XSS
 $username = mysqli_real_escape_string ($db ، htmlspecialchars ($ _POST ['اسم المستخدم'])) ؛ 
 $password = mysqli_real_escape_string ($db ، htmlspecialchars ($ _POST ['password'])) ؛ 
 
 if ($username !== "" & & $password !== "")
 {
 $requete = "SELECT count(*) FROM user حيث 
 nom_utilisateur = '".$username."" و mot_de_passe = '".$password."' "; 
 $exec_query = mysqli_query ($db,$requete); 
 $reponse = mysqli_fetch_array($exec_request); 
 $count = $reponse['count(*)']; 
 if($count!=0) // اسم المستخدم وكلمة المرور الصحيحين
 {
 $_SESSION['اسم المستخدم'] = $username; 
 header ("الموقع: principale.php") ؛ 
 }
 else
 {
 header('الموقع: login.php?error=1'); // مستخدم أو كلمة مرور غير صحيحة
 }
 }
 else
 {
 header('الموقع: login.php?error=2'); // مستخدم فارغ أو كلمة مرور
 }
}
else
{
 header('الموقع:  login.php'); 
}
mysqli_close($db); اتصال وثيق
?> < / pre>
 الخطوة 4: < / h4 > الخطوة الأخيرة ، يتحقق الخادم مما إذا كانت المعلومات المقدمة صحيحة ، وإذا كان الأمر كذلك ، فإنه ينشئ جلسة في اسم المستخدم ويعيد التوجيه إلى الصفحة principale.php.

principale.php:

 < فرع /> < رئيس> < فرع /> < مجموعة الأحرف الوصفية = "utf-8" > < ر / >  < فرع /> < link rel = "ورقة الأنماط" href = "style.css" الوسائط = "الشاشة" اكتب = "نص / css" / > < / > < / الرأس> < فرع /> < نمط الجسم = "الخلفية: #fff ؛ " > < فرع /> < معرف div = "المحتوى"> < ر / >  < / > <؟ php
 session_start(); 
 if($_SESSION['username'] !== ""){
 $user = $_SESSION['اسم المستخدم']; 
 // عرض رسالة
 صدى "مرحبا $user ، أنت متصل" ؛ 
 }
 ?> < / > < / > < / شعبة> < / > < / الجسم> < / >< / html> 
< / pre>
< / a>< / div>
< / div>
المكافأة: < / h4>ستطرح السؤال: كيف يمكنني تسجيل الخروج؟ الأمر سهل ، يمكنك إضافة زر لتسجيل الخروج بالإضافة إلى جزء صغير من كود php الذي يدمر الجلسة الحالية.

 
 < فرع /> < رئيس> < فرع /> < مجموعة الأحرف الوصفية = "utf-8" > < ر / >  < فرع /> < link rel = "ورقة الأنماط" href = "style.css" الوسائط = "الشاشة" اكتب = "نص / css" / > < / > < / الرأس> < فرع /> < نمط الجسم = "الخلفية: #fff ؛ " > < فرع /> < معرف div = "المحتوى"> < / > < / > < a href='principale.php?logout=true'> < امتداد> تسجيل الخروج < ر / > < ر / >  < / > <؟ php
 session_start(); 
 if(isset($_GET['disconnect']))
 { 
 if($_GET['disconnect']==true)
 { 
 session_unset(); <رأس br / > ("location:login.php") ؛ 
 }
 }
 آخر إذا ($_SESSION['اسم المستخدم'] !== ""){
 $user = $_SESSION['اسم المستخدم']; 
 // رسالة العرض
 صدى "< ر> مرحبا $user ، أنت متصل "؛ 
 }
 ?> < / > < / > < / شعبة> < / > < / الجسم> < / >< / html> 
< / pre>
< / div >< div class = "فاصل" النمط = "واضح: كلاهما ؛ محاذاة النص: الوسط؛" >< / a>< / div>

< / div>
المشكلة التي تواجهها عند إرسال نموذج هي أنه يمكنك الحصول على عدة نقرات وبالتالي عدة عمليات تنفيذ لنفس عملية التحقق وإعادة التوجيه وما إلى ذلك. يمكن أن يتسبب في حدوث حالات شاذة ويلقي الخادم بالأخطاء ويتوقف.
الحل في هذا المقال:  كيف يمكنني تمكين / تعطيل زر إرسال باستخدام jQuery؟