تطبيق Login Box باستخدام مكتبة Xajax

#13 يوليو 2009 في 04:30 صاحب الموضوع

السلام عليكم

اخوانى الكرام

اليوم ساتكلم عن مكتبة قوية فى عالم ال Ajax وهى مكتبة XAJAX

هذه المكتبة توفر لك انت كمستخدم ان تستطيع ان تنادى دوال ال PHP من خلال كود ال HTML او الجافا سكربت الذى لدى ال Client

صممت بها تطبيق بسيط وهو لعمل Login ولكن دون تطرق لموضوع ال Session (لانى لم اذاكرها حتى الان :D )

لتجربة المثال اضغط هنا

اولا ابدأ بقاعدة البيانات :

CREATE DATABASE userX;
USE userX;


CREATE TABLE users (
	userName char(50) NOT NULL,
	pass  CHAR(20)  NOT NULL,
	id  int(4) NOT NULL,
	PRIMARY KEY(id));

INSERT INTO `userX`.`users` (`userName`, `pass`, `id`) VALUES ('ahmed', '123', '1');

INSERT INTO `userX`.`users` (`userName`, `pass`, `id`) VALUES ('essam', '456', '2');

لاحظ معى كود ال Server Side

انسخ الكود

<?php
require_once ("../xajax_core/xajax.inc.php");
$xajax = new xajax("signup.server.php");
$xajax->register(XAJAX_FUNCTION,"LoginX");
function LoginX($user,$passy)
{
$objResponse = new xajaxResponse();
$db = mysql_connect("localhost","root","") or die("Can not Connect to MySql");
mysql_select_db("userX",$db);
/* Verify that user is in database */
$q = "SELECT pass FROM users WHERE userName ='$user'";
$qr1 = mysql_query($q);
$arr = mysql_fetch_array($qr1);
$TruePass = $arr["pass"];
$rets ="";
if($passy == $TruePass) {$rets .= "Login Successeded :)";}
else $rets .= "Login Failed :)";
mysql_close($db);
$objResponse->assign("update","innerHTML",$rets);
return $objResponse;
}
$xajax->processRequest();
?>

اتمنى ان يكون الكود شارح نفسه ولكن هناك نقطة فقط اريد توضيحها وهى انك لابد ان تقوم بتسجيل الدوال التى ستستخدمها (لا اعلم ماذا تعنى تسجيل بالظبط )ولكن نستخدم السطر الثالث لذلك

فقط تعطيه اسم الدالة وبهذا يمكنك استخدامها فى ال Client Side

ما بداخل الكود هو اننى عملت select على الباسورد الخاصة بالمستخدم الفلانى الذى ياتى لى اسمه فى المتغير $user

قارنت الباسورد الذى يخرج من الداتابيز مع الذى كتبه ثم حدد على حساب ذلك الرسالة التى سترجع له

ايضا لاحظ باننى استطعت ان اكلم الصفحة التى على ال Client Side بسهولة واتحكم بها وعلى سبيل المثال هذا السطر الذى يمكنك من ان تقوم بادخال محتوى ال DIV التى لها ال ID = "update"

لاحظ معى كود ال Client Side

انسخ الكود

<?php require_once ("../xajax_core/xajax.inc.php"); ?>
<?php
$xajax = new xajax("login_ServerSide.php");
//write the relative path of
$xajax->configure('javascript URI','../');
$xajax->register(XAJAX_FUNCTION,"LoginX");
?>
<?php $xajax->printJavascript(); ?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/xajax/pro1/login.css" />
&#60;script language="javascript">
function CheckValues()
{
var us = document.getElementById('UserNM').value;
var pas = document.getElementById('PassST').value;
if(us && pas) {
var dv = document.getElementById("update");
dv.innerHTML="";
xajax_LoginX(us,pas);
}
else alert("Fill All Fields");
}
</script>
</head>
<body>
<div class="LoginBox">
User:
<input type="text" id="UserNM" name="UserNM" />
Pass:
<input type="password" id="PassST" name="PassST" />
<input class="subBut" type="button" id="Subm" value="Login Using XAJAX" onclick="CheckValues()" />
<div id="update">&nbsp;</div>
</div>
</body>
</html>