بناء نظام تسجيل دخول متكامل PHP & MYSQL

#1
نظام التسجيل من الانظمة المهمة في المواقع الالكترونية التفاعلية لذلك قررت كتابة هذا الدرس وهو يعتبر من احد اهم دروس " تعلم الphp " التي سبق وانزلتها في المدونة و قررت تجزيئه لعدة نقاط اساسية في هذه التدوينه وبطريقة مبسطة باذن الله - ويرجى ملاحظة اني تخطيت شرح عدد من الاكواد لاختصار التدوينة بالاضافة لكوني شرحتها في عدة تدوينات سابقة - لنبدأ على بركة الله ..
في هذا الشرح سنتحاج الى :
  • قاعدة بيانات تحتوي على جدول لحفظ بيانات الاعضاء
  • ملف اتصال بقاعدة البيانات
  • صفحة تسجيل عضويات
  • صفحة تسجيل دخول
  • صفحة ترحيب بالعضو
  • صفحة تسجيل الخروج
أولا تصميم هيكلة قاعدة البيانات​
  • قم بالدخول الى مسار ادارة قواعد البيانات على موقعك او على السيرفر المحلي بجهازك
  • قم بأنشاء قاعدة بيانات جديدة وسمها باي اسم
  • قم بزراعة اكواد mysql التالية لإنشاء جدول البيانات login​
CREATE TABLE `login` (
`id` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


ALTER TABLE `login`
ADD PRIMARY KEY (`id`),
ADD UNIQUE KEY `username` (`username`),
ADD UNIQUE KEY `email` (`email`);

ALTER TABLE `login`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;


حيث ان login اسم الجدول ويحتوي على :
  • حقل id الطول 11 تلقائي ، تعيينه كمفتاح اساسي
  • حقل غير متكرر username لتزين معرف العضو طوله 255 ونوعه varchar
  • حقل غير متكرر email لتخزين بريد العضو طوله 255 ونوعه varchar
  • حقل password لتخزين الرقم السري للعضو نوعه varchar وطوله 255

نلاحظ انه تم انشاء الجدول بطريقة زراعة الاكواد​
ثانيا كتابة كود الاتصال بقاعدة البيانات​

  • قبل كتابة الاكواد التالية تاكد من انشاء مجلد للموقع وقم باضافة الاكواد بداخل ملف وقم بتسميته connect.php
<?php
$connection = mysqli_connect('localhost', 'root', '');
if(!$connection){
die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'fablogin');
if(!$select_db){
die("Database Selection Failed" . mysqli_error($connection));
}
?>
حيث ان :​
$connection = mysqli_connect('localhost', 'root', '');​
  • $connection = متغير الاتصال بالسيرفر " local host" اسم السيرفر "root" اسم المستخدم للسيرفر او قاعدة البيانات و"" يوضع بداخله الرقم السري للقاعدة او للسيرفر ان وجد
  • if(!$connection){ دالة شرطية في حالة حدوث خطأ الاتصال
  • $select_db متغير اختيار القاعدة التي اسميناها بـ "fablogin"
  • if(!$select_db){ دالة شرطية في حالة حدوث مشكلة في اختيار القاعدة
نقوم بحفظ الصفحة ونتأكد من صحة الاتصال عبر الدخول على مسار الملف على المتصفح وفي حال عدم ظهور اية رسالة يعني ان الاتصال ناجح :

نلاحظ هنا نجاح الاتصال بالقاعدة وعدم ظهور اي رسالة خطأ

ثالثا كتابة صفحة تسجيل العضويات​
نقوم بكتابة الأكواد التالية وهي خليط بين html , php واكواد الاتصال بقواعد البيانات mysql و تصميم الصفحة بتقنية bootstrap , js ونقوم بحفظها في ملف باسم register.php

<?php
require_once('connect.php');
if(isset($_POST) & !empty($_POST)){
$username = mysqli_real_escape_string($connection, $_POST['username']);
$email = mysqli_real_escape_string($connection, $_POST['email']);
$password = md5($_POST['password']);

$sql = "INSERT INTO `login` (username, email, password) VALUES ('$username', '$email', '$password')";
$result = mysqli_query($connection, $sql);
if($result){
$smsg = "User Registration successfull";
}else{
$fmsg = "User registration failed";
}
}


?>
<!DOCTYPE html>
<html>
<head>
<title>User Registration in PHP & MySQL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="login/styles.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="" ></script>

<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
<form class="form-signin" method="POST">
<h2 class="form-signin-heading">سجل معنا</h2>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" name="username" class="form-control" placeholder="Username" required>
</div>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">سجل!</button>
<a class="btn btn-lg btn-primary btn-block" href="login.php">دخول</a>
</form>
</div>
</body>
</html>
حيث أن :
  • require_once('connect.php'); كود تضمين ملف الاتصال بقاعدة البيانات في الصفحة
  • if(isset($_POST) & !empty($_POST)){} : في حالة الضغط على الزر من نوع post وفي حالة كانت الحقول غير فارغة نطلب من الصفحة عمل التالي :
  • التعريف بالحقول بما يقابلها في قاعدة البيانات مثل : $username = mysqli_real_escape_string($connection, $_POST['username']);
  • وقد طلبنا تشفير كلمة المرور عند ارسالها الى القاعدة بواسطة تشفير الهاش md5 وهو امر مهم جدا للحفاظ على خصوصية كلمة المرور عند تخزينها في القاعدة : $password = md5($_POST['password']);
  • كود الارسال الى قاعدة البيانات وتحديد تخزين القيم "المتغيرات" بما يقابلها في حقول جدول البيانات :$sql = "INSERT INTO `login` (username, email, password) VALUES ('$username', '$email', '$password')"; حيث ان login هو اسم الجدول
  • $result = mysqli_query($connection, $sql); كود التحقق من الاتصال والارسال الى القاعدة
  • if($result){
    $smsg = "User Registration successfull";
    }else{
    $fmsg = "User registration failed";
    } كود طباعة جمل في حالة نجاح او فشل التسجيل حيث ان smsg = لنجاح الارسال و fmsg = في حالة فشل التسجيل​
  • ويلي كود الphp كود الـ html المعتاد وهو عبارة عن فورم بسيط سبق شرحه في عدة دروس سابقة مع ملاحظة اختلاف انواع المدخلات .​

صورة تدل على نجاح التسجيل ورفع بيانات العضو الى قاعدة البيانات​


صورة لجدول البيانات ويتضح تشفير حقل كلمة المرور من نوع md5​
رابعا كتابة صفحة تسجيل الدخول

الصفحة مكونة من نفس تشكيلة اللغات المستخدمة في صفحة التسجيل السابقة مع اختلاف الاكواد لتتناسب مع الغرض المكتوبة لأجله وهي كالآتي :
<?php
session_start();
require_once('connect.php');
if(isset($_POST) & !empty($_POST)){
$username = mysqli_real_escape_string($connection, $_POST['username']);
$password = md5($_POST['password']);

$sql = "SELECT * FROM `login` WHERE username='$username' AND password='$password'";
$result = mysqli_query($connection, $sql);
$count = mysqli_num_rows($result);
if($count == 1){
$_SESSION['username'] = $username;
}else{

$fmsg = "<div class='fmsg fmg'>تم ضبط محاولة دخول فاشلة وغير مصرح بها </div>";

}
}
if(isset($_SESSION['username'])){
$smsg = "<div class='smsg'>دخول ناجح</div>";
echo "
<meta HTTP-EQUIV='REFRESH' content='0; url=login/welcome.php'/>";
}


?>
<!DOCTYPE html>
<html>
<head>
<title>User Login in PHP & MySQL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="styles.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="" ></script>

<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
<form class="form-signin" method="POST">
<h2 class="form-signin-heading">منطقة الادارة - تسجيل الدخول</h2>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" name="username" class="form-control" placeholder="Username" required>
</div>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">دخول</button>

</form>
</div>
</body>
</html>

حيث أن :
  • session_start(); كود بداية الجلسه وهو كود مهم حيث ان جميع انظمة تسجيل الدخول تعمل بهذه الالية​
  • $sql = "SELECT * FROM `login` WHERE username='$username' AND password='$password'"; كود التحقق من كلمة المرور والمعرف المدخلة ومقارنتها بالمخزن في قاعدة البيانات
  • if($count == 1){
    $_SESSION['username'] = $username; في حالة كانت النتيجة = 1 أي بمعنى تطابق البيانات المدخلة مع المخزنة نطلب من الصفحة انشاء الجلسة باسم المستخدم​
  • if(isset($_SESSION['username'])){ في حالة اكتشاف جلسه نطلب من الكود طباعة جملة دخول ناجح بالاضافة الى تحويل العضو الى صفحة الترحيب ويلي صفحة الphp كالمعتاد فورم كتابة البيانات ولن يتم شرحها راجع الدروس السابقة في حال احتجت الى معلومات اكثر​


نلاحظ نجاح الدخول وتحويلنا الى صفحة الترحيب بالعضو تلقائيا وسيتم شرح هذه الخطوه في القسم التالي​

خامسا كتابة صفحة الترحيب بالعضو​

صفحة الترحيب بالعضو هي اخر مراحل انظمة الدخول عادة ، قم بكتابة الاكواد التالية وحفظها في ملف welcome.php:
<?php
session_start();


if (isset($_SESSION['username'])) {
?>
<?php

$user = $_SESSION['username'];

echo"welcome $user";
echo"<a href='logout.php'>سجل خروج</a>";

?>



<?php

} else {
?>
Not logged in HTML and code here
<?php
}​
حيث أن :
  • <?php
    session_start();


    if (isset($_SESSION['username'])) {
    ?>
    <?php كود تشغيل الجلسة​
  • <?php

    $user = $_SESSION['username'];

    echo"welcome $user";


    ?> كود التعريف بصاحب الجلسة و طباعة جملة الترحيب​
  • echo"<a href='logout.php'>سجل خروج</a>"; طباعة جملة تسجيل الخروج و الارتباط بصفحة تسجيل الدخول​
  • <?php

    } else {
    ?>
    Not logged in HTML and code here
    <?php
    } كود حماية الصفحة من الزوار والغير مسجلين حيث لا تظهر الاعدادات السابقة الا عند اكتشاف جلسه باسم العضو​

سادسا واخيرا صفحة تسجيل الخروج​

قم بكتابة الكود التالي بداخل صفحة logout.php :
<?php
session_start();
session_destroy();
header('location: login.php');
?>
حيث ان :
session_destroy(); في حال العثور على جلسه نطلب منه انهائها او بالمعنى الحرفي للشفرة البرمجية " تدميرها " و وتحويل العضو الى صفحة تسجيل الدخول من جديد.​


تجربة