شرح برمجة نظام تسجيل الدخول بسيط بلغة php و mysql و html

في هدا المقال سنتعلم كيفية إنشاء أو برمجة نظام تسجيل الدخول بسيط بلغة php و mysql و html , و من المعروف أن نظام تسجيل الدخول تستخدم فيه لغة Javscript و CSS , لكن نحن لن نستخدمها أو سنستخدم قليل من CSS ولكن لا تهتم بها الأن الهدف من هدا الشرح هو معرفة أساسيات إنشاء نظام تسجيل الدخول بلغة php و mysql و html أو الطريقة أو الأصل التي يتم بها برمجة نظام تسجيل الدخول , و لغة CSS هي لغة تستخدم لتزيين نظام تسجيل الدخول لا أكتر و نحن هدفنا معرفة الأساس , أما لغة Javascript فتستخدم للتحقق من المدخلات إدا كانت صحيحة أم لا أو ناقصة و نحن لن نحتاجها بالضرورة في شرحنا هدا.

نظام تسجيل الدخول يتم بناء أساسه بلغة php عن طريق الدالة التي تسمى session و بالعربية تعني الجلسة , و هده الدالة تنقسم إلى 3 أجزاء , الجزء 1 هو الإنشاء الجلسة أو بدء الجلسة , الجزء 2 هو محتويات الجلسة ويكون عبار عن متغير يأخد قيمة و هدا المتغير يسمى SESSION_$ وهدا متال كيف يكتب :

$_SESSION["email"] = "[email protected]";

email هو إسم متغير الجلسة و [email protected] هو قيمة المتغير , و قيمة المتغير يمكن أن تكون أيضا POST أو GET , و الجزء 3 هو تدمير الجلسة أو إنهاء الجلسة.

ما هي session داخل لغة php؟ , حسناً لنفترض لديك موقع إلكتروني لتحميل الأفلام و لديك متلا جدول الأعضاء يسمى memebers داخل phpmyadmin والجدول به إميل الشخص و الباسورد , و أنشئت form وهدا الفورم به حقلين <input> واحدة مخصصة الإدخال الإميل و التانية للباسورد , و هدا الفورم للتأكد من المعلومات من داخل الجدول بphpmuadmin إدا كانوا مسجيل أم لا , متلا شخص ما أراد تحميل فيلم معين من موقعك , إداً هدا الشخص عليه تسجيل الدخول , و لنفترض أنه أدخل معلوماته في form و هي صحيحة أي متطابقة مع ماهو موجود في الجدول members أي أن شخص مسجل بموقعك سابقا , و بعد التأكد من معلومات أنها صحيحة يتم تحميل الفيلم بنجاح ,  و لكن مادا لو أراد هدا الشخص تحميل فيلم أخر أو أكتر من فيلم على موقعك , هل عليه كل مرة أن يسجل دخوله , لا طبعا فهده العملية متعبة و مملة و مزعجة و لن يقبلها أي زائر , و الحل هنا هو الدالة session , وهده الدالة تسمح للشخص بعد تسجيل الدخول مرة واحدة أن تبقى تلك المعلومات التي ادخلها محفوظة مدة طويلة أي لن يطلب منه تسجيل الدخول مرة أخرى إلا إدا وضعت أنت شرطة معين (وضعت وقت محدد للجلسة) أو قام بإعادة تشغيل جهازه أو غير المتصفح , فالدالة session تحفظ المعلومات في متصفح الشخص لمدة معينة فور خروجه من المتصفح و إعادة دخوله يمسح تلك المعلومات , وهناك طرق للإحتفاظ بالجلسة مدة طويل حتى و لو خرجت من المتصفح و أعدت الدخول , لكنها تحتاج لوقت و سنتطرق لها فيما بعد.

لأن لنعرف كيف تشتغل الدالة session , لنأخد متال : لديك موقع إلكتروني لمشاهدة الأفلام أونلاين , أنت تريد فقط الأشخاص المسجلين بموقعك أو أعضاء موقعك هم من يشاهدون الأفلام الخاص بموقعك , في هده الحالة بعد أن يقوم أعضاء موقعك بتسجيل دخولهم يتم إنشاء جلسة لكل واحد منهم , و الجلسة يتم إنشائها عن طريق متغير أو الجلسة تقبل المتغيرات فقط و يرمز لها ب SESSION_$ وهده المتغيرات تكون لها إسم و قيمة كما شاهدنا سابقا , متلا شخص أراد إنشاء حساب بموقعك تم إنشاء الحساب بنجاح و أدخل معلومات تسجيل الدخول صحيحة و أنت أردت إنشاء جلسة له , في هده الحالة ستحتاج أول شيء وهو بدء الجلسة عن طريقة كود بدأ الجلسة التالي :

session_start();

وبعد دلك ستكتب محتويات الجلسة , و على سبيل المتال سنأخد متغير واحد إسمه متلا email_user و به قيمة نصية وهي  [email protected] , الكود سيكون كالتالي :

$_SESSION["email_user"] = "[email protected]";

إدا أردت إستدعاء أي متغير من الجلسة (نحن لدينا واحد فقط وهو email_user) في أي ملف php داخل موقعك من ضروري أن تضع في بداية الكود ;()session_start

ولكي ندمر الجلسة ضع هدا الكود فقط :

session_destroy();

شرح تطبيقي لكيفية إنشاء نظام تسجيل الدخول بسيط بلغة php و mysql و html

لأن سنأخد متال حي و نطبق ما شرحناه سابقا , وسنستخدم جلسة بها متغير واحد بإسم email_user و سنضغ له قيمة من form html بإرسال أو متغير POST و متغير POST يحمل إسم email.

الأن إدهب إلى phpmyadmin و أول شيئ سنقوم بإنشاء قاعدة بيانات جديدة بإسم elar9am_db_test و سننشئ جدول بإسم members و به 4 أعمدة و سنضع فيه التالي (id , name , email , password) , أو يمكنك بكل بساطة أن تنسخ الكود التالي و تضعه في الخانة SQL بأداة phpmyadmin :

CREATE TABLE IF NOT EXISTS `members` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` text NOT NULL,
  `email` text NOT NULL,
  `password` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

الأن سنبدأ مع php , سننشئ صفحة للإتصال بقاعدة البيانات , قم بإنشاء صفحة إسمها db_connet.php و ضع فيها الكود التالي , مع التغيير بما يناسبك (إسم المستخدم و كلمة المرور و إسم قاعدة البيانات و التي أخدنا كمتال بإسم elar9am_db_test) :

<?php
date_default_timezone_set("Africa/casablanca");
$link = mysqli_connect("localhost","elar9am_user","elar9am_password","elar9am_db_test"); 
/// localhost = إفتراضيا localhost إسم السيرفر أو أيبي السيرفر , و لكن لا تغيره فمعظم الإستضافات تستخدم
/// elar9am_user = إسم المستخدم
/// elar9am_password = كلمة المرور
/// elar9am_db_test = إسم قاعدة البيانات
if(mysqli_connect_errno()){
echo "<div style='background:#d71212;text-align:center;font-family:system-ui;font-weight:bold;color:white;padding:25px;'>";
echo "(".mysqli_connect_error().") لقد فشل الإتصال بقاعدة البيانات , السبب هو";
echo "</div>";
exit();
}
?>

لأن قم بإنشاء صفحة لتسجيل عضوية جديدة و إسم الصفحة هو new_member.php , و ضع فيها الكود التالي :

<?php include("db_connet.php");?>
<!DOCTYPE html>
<html>
<head>
<title>تسجيل عضوية جديدة</title>
<style>
.grn{background:#009688;text-align:center;font-family:system-ui;font-weight:bold;color:white;padding:25px;}
.form{display:grid;direction:rtl;padding:10px;text-align:right;background:#3f51b5;color:white;font-family:system-ui;font-weight:bold;}
.form label{padding:10px;}
.form button{font-family:system-ui;font-weight:bold;margin-top:15px;padding:15px;cursor:pointer;}
.form input{padding:7px;font-family:system-ui;font-weight:bold;margin-bottom:10px;}
.divo{width:30%;font-family:system-ui;font-weight:bold;}
.btn_log{font-family:system-ui;font-weight:bold;margin-top:15px;padding:15px;cursor:pointer;width:354.2px;background:#795548;border:none;}
.btn_log a{text-decoration:none;color:white;}
.btn_log:hover{background:#3f51b5;}
</style>
</head>
<body>
<center>
<?php 
if(isset($_POST["signup_member"])){
mysqli_query($link,"INSERT INTO members(name,email,password) VALUES('".$_POST["name_user"]."','".$_POST["email"]."','".$_POST["pass"]."')");
echo"<div class='grn'>تم تسجيل عضوية جديدة بنجاح , إدهب و قم بتسجيل الدخول (<a href='login_member.php'>إضغط هنا</a>)</div>";
}
?>
<div class="divo">
<h1>عضوية جديدة</h1>
<form class="form" method="POST" action="">
<label>الإسم :</label>
<input required type="text" name="name_user">
<label>الإميل :</label>
<input required type="email" name="email">
<label>كلمة المرور :</label>
<input type="password" name="pass">
<button type="submit" name="signup_member">تسجيل عضوية جديدة</button>
</form>
<button class="btn_log" type="button"><a href="login_member.php">صفحة تسجيل الدخول</a></button>
</div>
</center>
</body>
</html>

بعد دلك قم بإنشاء صفحة لتسجيل الدخول و إسم الصفحة هو login_member.php , و ضع فيها الكود التالي :

وهنا سنبدأ الجلسة و ركز في الكود على دالة بدأ الجلسة ;()session_start و محتوى الجلسة و هو المتغير email_user و الدي سيأخد قيمة متغيرة من نوع POST وهي إميل المستخدم

<?php include("db_connet.php");?>
<!DOCTYPE html>
<html>
<head>
<title>تسجيل الدخول</title>
<style>
.grn{background:#009688;text-align:center;font-family:system-ui;font-weight:bold;color:white;padding:25px;}
.form{display:grid;direction:rtl;padding:10px;text-align:right;background:#795548;color:white;font-family:system-ui;font-weight:bold;}
.form label{padding:10px;}
.form button{font-family:system-ui;font-weight:bold;margin-top:15px;padding:15px;cursor:pointer;}
.form input{padding:7px;font-family:system-ui;font-weight:bold;margin-bottom:10px;}
.divo{width:30%;font-family:system-ui;font-weight:bold;}
.btn_log{font-family:system-ui;font-weight:bold;margin-top:15px;padding:15px;cursor:pointer;width:354.2px;background:#3f51b5;border:none;}
.btn_log a{text-decoration:none;color:white;}
.btn_log:hover{background:#795548;}
</style>
</head>
<body style="direction:rtl;">
<center>
<?php 
if(isset($_POST["login_member"])){
$check = mysqli_query($link,"SELECT * FROM members WHERE email = '".$_POST["email"]."' AND password = '".$_POST["pass"]."'");
if(mysqli_num_rows($check) == 0){
echo"<div class='grn' style='background:#d71212;'>المعدرة , معلومات تسجيل الدخول خاطئة</div>";
}else{
session_start();
$_SESSION["email_user"] = $_POST["email"];
echo"<div class='grn'>تم تسجيل الدخول بنجاح , و لقد بدأت الجلسة</div>";
echo"<div class='grn' style='background:#4caf50;'>محتوى الجلسة هو : ".$_SESSION["email_user"]."</div>";
echo"<div class='grn' style='background:#ff9800;'>يمكنك الإنتقال إلى الصفحة (<a href='my_account.php'>my_account.php</a>) , للتأكد من أن الجلسة تشتغل هناك أيضا</div>";
}
}
?>
<div class="divo">
<h1>تسجيل الدخول</h1>
<form class="form" method="POST" action="">
<label>الإميل :</label>
<input required type="email" name="email">
<label>كلمة المرور :</label>
<input type="password" name="pass">
<button required type="submit" name="login_member">الدخول</button>
</form>
<button class="btn_log" type="button"><a href="new_member.php">صفحة إنشاء عضوية جديدة</a></button>
</div>
</center>
</body>
</html>

و الأن قم بإنشاء صفحة إسمها my_account.php و ضع فيها الكود التالي :

وهده الصفحة للتأكد من أن الجلسة متزال تشتغل و أيضا للتدمير الجلسة أو تسجيل الخروج

<!DOCTYPE html>
<html>
<head>
<title>إختبار الجلسة</title>
<style>
.grn{background:#009688;text-align:center;font-family:system-ui;font-weight:bold;color:white;padding:25px;}
.form{display:grid;direction:rtl;padding:10px;text-align:right;background:#795548;color:white;font-family:system-ui;font-weight:bold;}
.form label{padding:10px;}
.form button{font-family:system-ui;font-weight:bold;margin-top:15px;padding:15px;cursor:pointer;}
.form input{padding:7px;font-family:system-ui;font-weight:bold;margin-bottom:10px;}
.divo{width:30%;font-family:system-ui;font-weight:bold;}
.btn_log{border-radius:60px;font-family:system-ui;font-weight:bold;margin-top:15px;padding:17px;cursor:pointer;width:200px;
background:#f44336;border:none;}
.btn_log a{text-decoration:none;color:white;}
.btn_log:hover{background:white;}.btn_log:hover a{color:#f44336;text-decoration:underline;}
.btn{font-family:system-ui;font-weight:bold;margin-top:15px;padding:15px;cursor:pointer;width:354.2px;background:#795548;border:none;}
.btn a{text-decoration:none;color:white;}
.btn:hover{background:#3f51b5;}
</style>
</head>
<body style="direction:rtl;">
<center>
<?php 
if(isset($_GET["log_out"]) AND $_GET["log_out"] == "start"){
session_start();
if(session_destroy()){
echo"<div class='grn' style='background:#ff9800;'>تم تدمير الجلسة و تسجيل الخروج بنجاح</div>";
echo"<meta http-equiv='refresh' content='2; url=login_member.php'/>";
}
}else{
session_start();
if(empty($_SESSION["email_user"])){
echo"<div class='grn' style='background:#d71212;'>لا توجد جلسة , قم بتسجيل الدخول أو أنشئ عضوية جديدة</div>";
echo'<button class="btn" type="button"><a href="login_member.php">صفحة تسجيل الدخول</a></button><br>';
echo'<button class="btn" type="button"><a href="new_member.php">صفحة إنشاء عضوية جديدة</a></button>';
}else{
echo"<div class='grn'>الجلسة متزال تشتغل</div>";
echo"<div class='grn' style='background:#4caf50;'>محتوى الجلسة هو : ".$_SESSION["email_user"]."</div>";
echo"<div class='grn' style='background:#ff9800;'>يمكنك تدمير الجلسة أو تسجيل الخروج بالضغط على الزر التالي :
<button class='btn_log'><a href='?log_out=start'>تسجيل الخروج</a></button></div>";
}
}
?>
</center>
</body>
</html>

قبل النهاية قم بإنشاء صفحة بإسم index.php , و ضع فيها الكود التالي :

هده الصفحة الإعادة توجيه من الصفحة الرئيسية إلى صفحة login_member.php فقط لا أكتر

<?php header("location: login_member.php"); ?>

الأن يمكنك تجربة السكربت أو نظام تسجيل الدخول البسيط بلغة php و mysql و html , لأنه أصبح لأن جاهز للإختبار

تحميل جميل الملفات المدكورة فوق أو نظام تسجيل الدخول جاهز

ستقوم بتحميل نظام تسجيل الدخول البسيط بلغة php و mysql و html كملف مضغوط zip بإسم simple_login_signup_system , بعد فتح الملفات ستجد ملف txt بإسم install يشرح تشغيل السكربت أو النظام بكل سهولة

  إضغط هنا لتحميل الملف