تسجيل الدخول ب jquery

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

أهلا وسهلا بكم في أول تدوينة وأول شرح من شروحات موقع أنت المحترف .

إن شاء الله في هذا الدرس ، سوف نريكم كيفية تسجيل الدخول لموقعكم دون اعادة تحميل الصفحة  بواسطة Jquery.

الملفات التي سوف نحتاجها :

• Index.html   وهي الصفحة الأساسية التي ستكون بها عمليات الجيكوري .
• Login.php  صفح الاتصال بقاعدة البيانات والتحقق من البيانات
• Jquery.js  وهي مكتبية الجكيويري .
• Net-prof.sql
•    لانشاء قاعدة البيانات 

لنبدأ على بركة الله ولنشرح بعض الشيئ   : 

نفتح ملف  index.html

أولا قمنا باستدعاء مكتبة Jquery .

<script src="jquery.js" type="text/javascript" language="javascript"></script>

كما ترون أنشانا فورم لتسجيل الدخول ، حيت ID الفورم هو login ، ووضعنا حقل لاسم المتسخدم username وحقل لكلمة المرور password  .

<div >
 اسم المستخدم : <input name="username" type="text" id="username"  maxlength="25" />

</div>
<div style="margin-top:5px" >
  كلمة المرور :
    
    <input name="password" type="password" id="password"  maxlength="25" />
   
</div>
<div class="divb">
    <input name="Submit" type="submit" id="submit" value="ادخل" style="margin-right:-10px; height:23px"  /> <span id="mssg" style="display:none"></span>
   
</div>

الان سوف نضع كود الجيكوري Jquery

<script language="javascript">
$(document).ready(function()
{
	$("#login").submit(function()
	{
		// عند الظغط على زر الارسال سوف تبدأ الدالة
		$("#mssg").removeClass().addClass('msg').text('تسجيل الدخول....').fadeIn(1000);
		// التحقق من البيانات المدخلة بواسطة الأجاكس
		$.post("login.php",{ username:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
		  if(data=='yes') //ادا كانت البيانات متاطبقة
		  {
		  	$("#mssg").fadeTo(200,0.1,function()  
			{ 
			  
			  $(this).html('تم الدخول ...').addClass('loginok').fadeTo(900,1);
			  
			});
		  }
		  else 
		  {
		  	$("#mssg").fadeTo(200,0.1,function() 
			{ 
			  
			  $(this).html('لم يتم الدخول...').addClass('loginerror').fadeTo(900,1);
			});		
          }
				
        });
 		return false; 
	});
	
	$("#password").blur(function()
	{
		$("#login").trigger('submit');
	});
});
</script> 

هناك شرح للاكواد في تعليقات .
الأن سوف ننتقل لملف login.php والدي يتضمن هو الأخر تعليقات تشرح كل سطر

<?php 
session_start();

// يجب التعديل على هذه المتغيرات الأربع
$server="localhost";
$user="root";
$pass="";
$db="net-prof";
mysql_connect($server,$user,$pass); // الاتصال بالسيرفر
mysql_select_db($db); //الاتصال بقاعد البيانات


// الان سوف ننتقل لاستقبال البيانات

$user_name=trim(mysql_real_escape_string($_POST['username']));
$pass=md5($_POST['password']);

//التحقق من البيانات

$sql=mysql_query("SELECT username, password FROM users WHERE username='".$user_name."'");
$row=mysql_fetch_array($sql);

// التحقق من وجود العضو في قاعدة البيانات
if(mysql_num_rows($sql)>0){
$password=$row['password'];
	
	if($pass==$password)// ادا كانت كلمة المرور متاطبقة
	{
		echo "yes";
		//انشاء السيشن
		$_SESSION['username']=$username; 
	}
	else {echo "no"; }
}
else {echo "no"; } // لم يتمكن من الدخول


?>

في هذا الملف ننشا اتصال بقاعدة البيانات لدلك عليكم تغير المتغيرات الأربعة الأولى ، تم نقوم بمقارنة البيانات المدخلة بواسطة الزائر مع توفير بعض الحماية في المدخلات ، لنرجع القيمة النهائية لصفحة index.html ، فادا كانت القيمة هي yes سوف يقوم بعرض رسالة مفادها هو أنه تم الدخول ، اما العكس فسيظهر الخطأ .
لمن لديه خبرة يمكن اظافة بعض الأشياء ، أما للمبتتدئين فأنصحهم الأ يعبتو بالأكواد حتى يتشغل السكريبت على أحسن ما يرام .
الى هنا أكون قد انتهيت من الشرح ، بالنسبة لمن لديه اسفسار يمكنه وضعه هنا أو مراسلتنا على الخاص .

كتب في: تطبيقات Jquery