التطبيق الرابع :تسجيل دخول باستخدام الأجاكس
السلام عليكم و رحمة الله و بركاته
أنا متأسف جداً للتأخير اللي حصل لهذا التطبيق الجامعة أشغلتني و غيرها من المشاغل عن كتابته لكن الحمد لله هذا الأسبوع فاضي شوي و رح استغله في كتابة التطبيق
طبعا يلي يريد يتابع هذا التطبيق يفضل أنه يكون قرأ التطبيقات السابقة يلي عملتها لأني رح اكون مختصر في شرح الأوامر يلي مرت علينا (في التوقيع روابط لكل التطبيقات)
في هذا التطبيق رح نعمل صفحة نعتبرها كصفحة رئيسية لموقع و فيه div يحتوي على تسجيل الدخول يلي رح يكون عن طريق الأجاكس و لما يتم تسجيل الدخول بنجاح رح تتغير محتويات الموقع (الdiv الثاني) و أيضاً تسجيل الخروج رح يتم عن طريق الأجاكس وتتغير محتويات الموقع عند تسجيل الخروج
الملفات اللتي نحتاج الى انشائها:
1-display.php (الملف الرئيسية والذي يتضمن الملفات الأساسية الأخرى)
2-login.js(ملف الجافا سكربت الخاص بdisplay.php)
3-login.php (هذا الملف هو الذي سوف يقوم بجميع العمليات من تسجيل الدخول أو الخروج)
4-0.gif(صورة فارغة سوف نحتاج لها في بعض الأوامر ( يلي تابع التطبيقات السابقة و خاصةً مناقشة تشغيل أكواد جافا بعد طلب الأجاكس رح يعرف ليش 
))
بالنسبة للجدول في قواعد البيانات رح نعتمد على الجدول يلي كانت في التطبيق السابق لتسجيل العضويات
كود:
CREATE TABLE `ajax_users` (
`id` int(10) NOT NULL auto_increment,
`username` varchar(255) collate latin1_general_ci NOT NULL default '',
`password` varchar(255) collate latin1_general_ci NOT NULL default '',
`email` varchar(255) collate latin1_general_ci NOT NULL default '',
`gender` varchar(10) collate latin1_general_ci NOT NULL,
`bdate` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM;
بسم الله نبدأ بالملف الأول display.php :
نضيف في أول الملف بداية جلسة (session) و شروط لعرض محتويات الموقع عند تسجيل الدخول و الخروج :
كود PHP:
<?
session_start();
if($_GET['getleft']=='yes' && $_SESSION['username'] && $_SESSION['password']){
echo '<p>[after login] </p>';
die();
}elseif($_GET['getleft']=='no'){
echo '<p>[before login] </p>';
die();
} ?>
يمكن رح تستغرب شوي من الشروط لكن لما نوصل لملف الجافا سكربت رح تعرف كيف الموضوع شغال
و طبعا نحنة رح نعتبر أن [before login] هوا محتويات الموقع دون تسجيل دخول يعني ممكن بعض الناس يقفل الموقع كامل للزوار و [after login] هوا محتويات الموقع للأعضاء و أكيد محتويات الموقع ما رح يكفي لها سطر أو أثنين لذلك يفضل أنك تعمل أمر تضمين (include) لصفحة يكون فيها محتويات الموقع بدل كتابة السطرين يلي اعتبرناهم محتويات الموقع حتى لا تتلخبط الأكاود ببعض
نكمل بإضافة بعض الأكواد الأساسية و أكواد تضمين ملف الجافا سكربت و تنسيق CSS
كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src="login.js"></script>
<style type="text/css">
<!--
div.main{border:1px solid;border-color:#000000;text-align:center; direction:rtl; }
div#login{text-align:center; direction:rtl;text-align:center;}
div#top { width:auto; border-bottom:0px; }
div#right {float:right;width:28%;height:auto;background-color:#FFFFFF; position: absolute; right:10px}
div#left {width:auto; height:auto;position:static; text-align:left;}
p{ margin:5px; text-align:center; }
dt {float:right; text-align:right;width:30%; margin-right:5%;font-size:94%}
dd {float:right; text-align:right;width:40%;}
//-->
</style>
</head>
و أنهي الملف بإضافة الbody :
كود PHP:
<body>
<div id="top" class="main">
[top]
</div>
<div id="right" class="main">
<div id="login">
<?
if($_SESSION['username'] && $_SESSION['password']){
?>
<p> أهلا بك يا <?=$_SESSION['username'] ?></p>
<p><a href="javascript:logout()"> تسجيل الخروج </a></p>
<?
}else{
?>
<p><dt> اسم المستخدم : </dt><dd><input name="username" onkeydown="keyDown(event,'login')" type="text" id="username" value="<?=$_COOKIE['username'] ?>" size="15" /></dd></p>
<p><dt> كلمة المرور : </dt><dd><input name="password" onKeyDown="keyDown(event,'login')" id="password" type="password" size="15" /></dd></p>
<p><input name="login" value=" دخول " onClick="login()" id="loginb" type="button" /></p>
<? } ?>
</div>
<div id="msg" style="clear:right" >
</div>
</div>
<div id="left" class="main" >
<?
if($_SESSION['username'] && $_SESSION['password']){
echo '<p>[after login] </p>';
}else{
echo '<p>[before login] </p>';
}
?>
</div>
</body>
</html>
بالنسبة للdiv الأول فهو سوف يكون العلوي و ممكن أن تضع فيه روابط و ما إلى أخره من أشياء خاصة بالموقع
ثم ياتي الdiv الثاني و سوف يكون بالجهة اليمنى و هو المسؤول عن عرض حقول تسجيل الدخول أو رسالة ترحيب إذا كان العضو مسجل دخول من قبل
ثم الdiv الأخير وهو الذي نعتبره يحتوي على محتويات الموقع و تلاحظوا شرط عرض المحتويات [after login] أو [before login] و ذلك على حسب الsession
الأن نتوجه لملف الجافاسكربت login.js
لا شيء جديد كلياً عن باقي الأكواد في التطبيقات السابقة للأجاكس وهذا هو كامل
كود:
function keyDown(e,func) {
evt = e || window.event;
var k = evt.which || evt.keyCode;
if(k==13){
if(func=="login"){
login();
}
}
}
function login()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var username = document.getElementById('username');
var password = document.getElementById('password');
if (username.value==null || username.value=='')
{
alert ("لم تقم بكتابة اسم المستخدم!")
username.focus();
return
}
if (password.value==null || password.value=='')
{
alert ("لم تقم بكتابة كلمة المرور!")
password.focus();
return
}
var url="login.php?"
xmlHttp.onreadystatechange=stateChanged1
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
text="username="+encodeURIComponent(username.value)
text=text+"&password="+encodeURIComponent(password.value)
xmlHttp.send(text)
}
function logout()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="login.php?logout=yes"
xmlHttp.onreadystatechange=stateChanged1
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function getleft(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="display.php?getleft="
url=url+str
xmlHttp.onreadystatechange=stateChanged2
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged1()
{
if (xmlHttp.readyState!==4 )
{
document.documentElement.style.cursor = "wait";
document.getElementById("loginb").disabled="disabled";
var msg="جاري تسجيل الدخول...";
document.getElementById("msg").innerHTML=msg;
}
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.documentElement.style.cursor = "default";
document.getElementById("login").innerHTML=xmlHttp.responseText;
var msg="";
document.getElementById("msg").innerHTML=msg;
}
}
function stateChanged2()
{
if (xmlHttp.readyState!==4 )
{
document.documentElement.style.cursor = "wait";
}
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.documentElement.style.cursor = "default";
document.getElementById("left").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
أول شي العملية (function) keyDown لتفعيل تسجيل الدخول عند ضغطenter بدل النقر على دخول وتم استخدامها من قبل
و العملية login لتسجيل الدخول عن طريق الأجاكس بتلاحظوا شروط التأكد ان حقلي اسم المستخدم و كلمة المرور ليسوا فارغين ثم عملية الإرسال للمعلومات بالأجاكس و لكن قبل الإرسال شفرتهم باستخدام ال encodeURIComponent حتى نقدر نرسل علامة & لو واحد كتبها و يفضل إستخدامها دائما مع الأجاكس حتى تعطي بعض الحماية
العملية logout لتسجيل الخروج و مافيها أي شي جديد
العملية getleft حتى نغير محتوى الموقع و هذه العملية رح يتم تشغيل من ملف login.php بعد تسجيل الدخول أو الخروج
طبعا أكيد لاحظتوا وجود عمليتين منفصلتين لل stateChanged واحدة لتسجيل الخروج و الدخول و الثانية لتغيير محتويات الموقع لأنه كل واحدة تغيير في div معين
و الشي الجديد يلي استخدمناه لأول مرة هو تغيير مؤشر الفأرة (mouce) عند التحميل بالأجاكس
كود:
document.documentElement.style.cursor = "wait";
أكيد رح يعطي إنطباع قوي للمستخدم أن الصفحة تقوم بالتحميل مثل رسائل الإنتظار
الأن إلى الملف الأخير login.php
نضيف بداية الجلسة و الإتصال بقاعدة البيانات
كود PHP:
session_start();
$ckusername=$_COOKIE['username'];
$host="localhost";
$dbname="ajax";
$dbuser="almaster";
$dbpass="";
$con=mysql_connect($host,$dbuser,$dbpass)
or die("CONNECTION FAILED");
mysql_select_db($dbname,$con)
or die("can't connect to DB");
بالنسبة للمتغير ckusername فهو لكووكيز اسم المستخدم الذي سوف يحفظ إذا تم تسجيل الدخول بنجاح
ثم نضيف شرط إذا كانت معلومات مرسلة عن طريق Post لكي نقوم بتسجيل الدخول :
كود PHP:
if ($_POST['username'] && $_POST['password']){
$username=urldecode($_POST['username']);
$password=md5(urldecode($_POST['password']));
$select=mysql_query("SELECT * FROM ajax_users where username='$username' and password='$password' ") or die("can't get ajax_users");
$row = mysql_fetch_array($select);
$usernamec=$row["username"];
$passwordc=$row["password"];
طبعا بتلاحظوا أنه تم فك التشفير بواسطة urldecode لأننا شفرنا الحقلين قبل الإرسال بالجافا و بالنسبة لكلمة المرور شفرناها بالmd5 حتى نقارنها بكلمة المرور المشفرة في قاعدة البيانات
بعدين عملنا إحضار لاسم المستخدم و كلمة المرور المطابقين و حطيناهم في متغيرين
بعدها نضيف شرط التحقق من اسم المستخدم و كلمة المرور :
كود PHP:
if($usernamec!==$username || $passwordc!==$password ){
$msg='
اسم المستخدم أو كلمة المرور غير صحيح!!
<p><dt> اسم المستخدم : </dt><dd><input name="username" onkeydown="keyDown(event,\'login\')" id="username" type="text" size="15" /></dd></p>
<p><dt> كلمة المرور: </dt><dd><input name="password" onkeydown="keyDown(event,\'login\')" id="password" type="password" size="15" /></dd></p>
<br />
<p><input name="login" value=" دخول " id="loginb" onclick="login()" type="button" /></p>
';
}else{
$time=time();
$_SESSION['username']=$username;
$_SESSION['password']=$password;
setcookie('username',$username,time()+3600*720);
$msg="<p> أهلا بك يا $username </p>
<p><a href=\"javascript:logout()\"> تسجيل الخروج </a></p>
<img onload=\"getleft('yes')\" src=\"0.gif\" width=\"0\" height=\"0\" />
";
}
إذا كانا غير صحيحين فرح تطبع رسالة بذلك و تعرض حقول تسجيل الدخول مرة آخرى
أما غير ذلك فرح يسجل session باسم المستخدم و كلمة المرور و أيضاً كووكيز بالاسم حتى إذا خرج المستخدم لما يرجع للموقع يشوف ان الاسم جاهز و ماعليه إلا إدخال كلمة المرور
بعدين طباعة عبارة الترحيب و رابط تسجيل الخروج
وفي الأخر الصورة السحرية يلي رح تشغل الأمر getleft لتغيير محتوى الموقع لاحظوا كيف إننا قدرنا نشغل الأمر عن طريق ال onload (هذه أفضل طريقة وجدتها لتشغيل أكواد جافا عند إستدعائها عن طريق أجاكس و تمت مناقشة الموضوع مسبقا في احد المواضيع هنا )
نضيف الان شروط تسجيل الخروج :
كود PHP:
}elseif($_GET['logout']){
$username=$_SESSION['username'];
session_unset();
session_destroy();
$msg="
<p><dt> اسم المستخدم : </dt><dd><input name=\"username\" onkeydown=\"keyDown(event,'login')\" value=\"$ckusername\" id=\"username\" type=\"text\" size=\"15\" /></dd></p>
<p><dt> كلمة المرور: </dt><dd><input name=\"password\" onkeydown=\"keyDown(event,'login')\" id=\"password\" type=\"password\" size=\"15\" /></dd></p>
<br />
<p><input name=\"login\" value=\" دخول \" onclick=\"login()\" id=\"loginb\" type=\"button\" /></p>
<img onload=\"getleft('no')\" src=\"0.gif\" width=\"0\" height=\"0\" />
";
}else{
$msg="
<p><dt> اسم المستخدم : </dt><dd><input name=\"username\" onkeydown=\"keyDown(event,'login')\" value=\"$ckusername\" id=\"username\" type=\"text\" size=\"15\" /></dd></p>
<p><dt> كلمة المرور: </dt><dd><input name=\"password\" onkeydown=\"keyDown(event,'login')\" id=\"password\" type=\"password\" size=\"15\" /></dd></p>
<br />
<p><input name=\"login\" value=\" دخول \" onclick=\"login()\" id=\"loginb\" type=\"button\" /></p>
";
}
نفس الشي نستخدم الصورة السحرية لتغيير محتوى الموقع بعد تسجيل الخروج
و في النهاية إذا لم يتحقف أحد الشروط تعرض حقول تسجيل الخروج
طبعا كل شي يطبع أنا خزنته في متغير و رح نعرضه الان و نضيف أكواد الhtml بحيث يكون فيه إمكانية استخدام هذه الصفحة لتسجيل الدخول لوحدها :
كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>login</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<?=$msg ?>
</body>
</html>
الحمد لله تم الإنتهاء من التطبيق كامل و بالنسبة للإضافات رح أضيفها في رد بعدين لما أكتبها
و أنا متأسف عن أي خطأ إملائي أو برمجي في التطبيق لأني كتبته بسرعة
و إن شاء الله هذا ما رح يكون نهاية تطبيقاتي لاني الان ببحث في كيفية عمل تحميل ملف عن طريق ال(drag & drop) لكن ما اقدر أوعد قريباً
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة apitos 
