Abdulaziz Al Rashdi

بسم الله الرحمن الرحيم

درس بسيط حول إنشاء نموذج تسجيل لعضو جديد، ونموذج لتسجيل الدخول للوحة تحكم العضو

بدايةً، نقوم بإنشاء قاعدة بيانات لتخزين بيانات الأعضاء بها، لنفترض ان بنية قاعدة البيانات هي كالتالي:

CREATE TABLE `user` (
`uid` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 20 ) NOT NULL ,
`password` VARCHAR( 40 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL
) ENGINE = MYISAM ;

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

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

<?PHP
$database = array();
$database['server'] = 'localhost';
$database['username'] = 'root';
$database['password'] = 'root';
$database['name'] = 'login_lesson';

// الاتصال بخادم قواعد البيانات:
mysql_connect($database['server'], $database['username'], $database['password']);
// تحديد قاعدة البيانات:
mysql_select_db($database['name']) or die(mysql_error());
?>

للملاحظة، قمت بتخزين معلومات الاتصال بقاعدة البيانات في مصفوفة، للمزيد حول المصفوفات يمكنك الرجوع للدرس السابق:
[PHP] المتغيرات والمصفوفات.

الآن سنقوم بإنشاء بقية الصفحات، حسب الطريقة التي استخدمتها، قمت بوضع كافة الصفحات في ملف واحد باستخدام switch، شرح تطبيقي بسيط لها:
رابط الصفحة الرئيسية: index.php
رابط صفحة التسجيل: index.php?do=register
رابط صفحة الدخول: index.php?do=login
رابط صفحة تسجيل الخروج: index.php?do=logout
لاحظ استخدامي للمتغير “do” في كافة الصفحات السابقة، التطبيق:

<?PHP
switch($_GET['do'])
{
default:
//الصفحة الرئيسية
break;
case 'register':
//صفحة التسجيل
break;
case 'login':
// صفحة تسجيل الدخول
break;
case 'logout':
// صفحة تسجيل الخروج
break;
?>

ملاحظة: default يقصد بها أي متغير لـ”do” إن لم يكن من ضمن المتغيرات المعرفة.

الآن لنعد لمحور الدرس، الملف index.php كاملا مع الشرح بين السطور:

<?PHP
ob_start(); ## لتفادي مشاكل رأس الصفحة مع بعض المتصفحات
include('config.php'); ## استيراد ملف الإعدادات
echo '<title>Test Login Page</title>'."\n";
header('Content-type: text/html; charset=utf-8'); ## تحديد الترميز إلى الترميز الموحد
echo '<script language="JavaScript" src="javascript.js"></script>'; ## جلب ملف جافاسكربت لبعض الأشياء الغير ضرورية
switch ($_GET['do'])
{
default: ## الصفحة الرئيسية

/*
* نموذج تسجيل الدخول
* يمكنك عمل التالي عبر أي محرر html
* لكن تأكد من أسماء الحقول هنا وفي الشطر الثاني من الملف عند تنفيذ تسجيل الدخول
*/
echo '<b>Login Form:</b><br /><br />'."\n";
echo '<form action="'.$_SERVER['PHP_SELF'].'?do=login" method="POST">'."\n";
echo  '<label for="username"><b>Username:</b>&nbsp;<input type="text" name="username" id="username" /></label> <br />'."\n";
echo  '<label for="password"><b>Password:</b>&nbsp;&nbsp;<input type="password" name="password" id="password" /></label> <br />'."\n";
echo  '<input type="submit" name="s1" value="Login" /><br />'."\n";
echo '</form>'."\n";
echo '<br /><br />'."\n";

/*
* نموذج تسجيل عضوية جديدة
* لقد تم ربط الحقل بشفرة جافا سكربت للتاكد من عدم ترك الحقول فارغة وأيضًا للتأكد من تطابق حقول كلمة المرور
*/
echo '<b>Register Form:</b><br /><br />'."\n";
echo '<form action="'.$_SERVER['PHP_SELF'].'?do=register" method="POST" onsubmit="return check_fields();">'."\n";
echo  '<label for="rg_username"><b>Username:</b>&nbsp;<input type="text" name="username" id="rg_username" /></label> <br />'."\n";
echo  '<label for="rg_password"><b>Password:</b>&nbsp;&nbsp;<input type="password" name="password" id="rg_password" /></label> <br />'."\n";
echo  '<label for="repassword"><b>Re-password:</b>&nbsp;&nbsp;<input type="password" name="repassword" id="repassword" onblur="check_passwords(\'rg_password\', \'repassword\');" /></label> <br />'."\n";
echo  '<label for="email"><b>Email:</b>&nbsp;&nbsp;<input type="text" name="email" id="email" /></label> <br />'."\n";
echo  '<input type="submit" name="s2" value="Register" /><br />'."\n";
echo '</form>'."\n";

break;
case 'login': ## صفحة التحقق من تسجيل الحقول
/*
* الاستعلام في قاعدة البيانات عن اسم العضو وكلمة المرور المطابقة لما ادخل المستخدم في حقلي الدخول
* لاحظ ان هناك تشفير لقاعدة البيانات أثناء البحث، تفسير ذلك اننا سنقوم بتشفيرها أيضًا عند تسجيل عضو جديد لأمان أكثر
*/
$query = mysql_query("select * from user where username='".$_POST['username']."' and password='".md5($_POST['password'])."'");
/*
* السطر الآتي
* mysql_num_rows($query)
* هو لحساب عدد التسجيلات في قاعدة البيانات حسب الاستعلام اعلاه
* فمنطقيًا، إن كان الناتج يساوي صفرًا فهذا يعني أن هناك خطأ في بيانات الدخول وعدم توافق البيانات
*/
if (mysql_num_rows($query) == 0) ## في حالة عدم العثور على أي نتيجة حسب الاستعلام
{
echo '<script>
window.alert(\'Incorrect login information!\');
history.back(-1);
</script>'; ## يمكنك استخدام اي طريقة، وضعت شفرات جافا سكربت لتسريع العملية لي
}
else ## إن كان هناك نتائج
{
/*
* تخزين اسم العضو في ملف استرجاع
* المتغير الأول في الدالة هو اسم ملف الاسترجاع
* المتغير الثاني هو قيمة ملف الاسترجاع
* المتغير الثالث هو  تاريخ انتهاء ملف الاسترجاع، بالتالي قمت بإضافة 900 ثانية إلى الوقت الحالي
*/
setcookie('username',$_POST['username'],time()+900);
echo '<script>
window.alert(\'Thank you ['.$_POST['username'].'], \n Welcome to my script!\');
window.location = \'index.php?do=usercp\';
</script>'; ## رسالة تفيد تسجيل الدخول وإعادة توجيه للوحة تحكم العضو
}

break;
case 'logout': ## صفحة تسجيل الخروج
/*
* في تسجيل الخروج، استخدمت نفس الدالة، لكن قمت بوضع قيمة فارغة وأيضًا تاريخ انتهاء قديم
* توجد أكثر من طريقة لتسجيل الخروج ومسح ملف الاسترجاع
*/
setcookie('username','',time()-900);
echo '<script>
window.alert(\':)!\');
window.location = \'index.php\';
</script>';
break;
case 'register': ## صفحة تنفيذ التسجيل
/*
* ادراج البيانات في قاعدة البيانات
* يجب أن يكون ترتيب الحقول في قاعدة البيانات هو ذات الترتيب عند الادخال
* لاحظ تشفير كلمة المرور
*/
mysql_query("insert into user (username, password, email) values ('".$_POST['username']."', '".md5($_POST['password'])."', '".$_POST['email']."')") or die(mysql_error());
echo "<script>
window.alert('تمت إضافة العضوية بنجاح والحمد لله');
window.location = 'index.php';
</script>"; ## رسالة تمام التسجيل
break;

case 'usercp': ## صفحة لوحة تحكم العضو
if (!empty($_COOKIE['username'])) ## هذا السطر للتأكد من أن المتصفح عضو فعلًا
{
/*
* محتوى لوحة تحكم العضو بعد التأكد
*/
echo '<h2>Welcome ['.$_COOKIE['username'].']</h2>';
echo 'Text1 <br /> Text2 <br /> Text3 </br>';
echo '<a href="index.php?do=logout">Logout</a>';
}
else ## إن كان المتصفح ليس عضوًا
{
echo '<script>
window.alert(\'You should login first!\');
window.location = \'index.php\';
</script>'; ## رسالة تنبيه وإعادة توجيه
}
break;
}
?>

التطبيق يعمل الآن، لكن لم نقم بوضع ملف الـ”javascript” للتأكد من اكمال الحقول حسبما ذُكر في الشرح أعلاه، التالي ليس مهمًا ويمكن استبداله بشفرات PHP في ذات التطبيق:

function check_passwords(field1, field2)
{
if (document.getElementById(field1).value != document.getElementById(field2).value)
{
window.alert('Password fields are not same');
document.getElementById(field1).focus();
}
}

function check_fields()
{
if (!document.getElementById('rg_username').value || !document.getElementById('rg_password').value || !document.getElementById('repassword').value || !document.getElementById('email').value)
{
window.alert('There are missing fields!');
return false;
}
else
return true;
}

تنزيل ملفات التطبيق لمن أراد التجربة مباشرة