الخميس، فبراير 17، 2011

التحقق من اسم المستخدم - Live Username Availability Checking using jQuery Ajax

مرسلة بواسطة
المكتبة العربية لتطبيقات الأجاكس » تطبيقات الجي كويري


التحقق من اسم المستخدم - Live Username Availability Checking using jQuery Ajax

قاسمي محمد   - بتاريخ : 12 جويلية 2010
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

نتناول في موضوعنا اليوم لفكرة التحقق من اسم المستخدم هل هو متاح لتسجيل أم لا طبعا بنكهة الجي كواري
Live Username Availability Checking using jQuery Ajax and PHP
و كالعادة خلينا نشوف مثال حي للعملية و ايضا رابط تحميل ملفات التطبيق

مشاهدة المثال
تحميل الملفات

بعد تحميلنا لملفات التطبيق و تصفح الملف demo.php نجد اننا كالعادة استدعينا ملف المكتبة في الاول بهذا الكود
كود java script
��� ����� ������������ �����?
1<script type="text/javascript" src="jquery.js"></script>

و بعدها اضفنا الدالة المسؤولة عن جلب نتيجة عملية التفحص و كودها :
كود java script
��� ����� ������������ �����?
01<script type="text/javascript">
02function check_username(){
03    var username = $("#username").val();
04    if(username.length > 3){
05        $.post("check_username_availablity.php", {
06          username: $('#username').val(),
07       }, function(response){
08          $('#Info').fadeOut();
09          $("#Info").fadeIn(1500).html("<img src='loader.gif'/>");
10          setTimeout("finishAjax('Info', '" escape(response) "')", 450);
11       });
12       return false;
13    }
14}
15function finishAjax(id, response){
16  $('#' id).html(unescape(response));
17  $('#' id).fadeIn(1000);
18}
19</script>

و اهما ما فيها :
1-
كود java script

حيث ان username هو المتغير الذي يحمل القيمة التي نريد تنفيذ العملية عليها
و #username هو الاي دي الذي راح يجلب تلك القيمة من حقل الادخال
2-
كود java script

هي عدد الحروف الادنى لكي تنفذ العملية و في حالتنا العدد الادنى هو 3 حروف - ان كان اقل من ذالك لن تنفذ العملية .
3-
كود java script

صفحة تنفيذ كود التفحص
4-
كود xhtml

الديف - المنطقة التي تظهر فيها النتائج
و بعدها اضفنا بعض اللمسات التنسيقية للمظهر عبر الانماط الانسيابية - css - و تحديدا :
كود css
��� ����� ������������ �����?
01<style>
02BODY {
03    FONT-SIZE: 13px;
04    COLOR: #003399;
05    FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif;
06}
07A {
08    COLOR: #003399; TEXT-DECORATION: none;
09    text-align: right;
10}
11.box {
12
13    margin: 2px 0px 2px 0px;
14    padding: 5px;
15    border: 1px solid #87CEFA;
16    width: 500px;
17}
18#customForm input{
19    width: 220px;
20    padding: 3px;
21    float:right;
22    margin-bottom:0px;
23    height:20px;
24    color: #000000;
25    font-size: 12px;
26    border: 1px solid #cecece;
27    text-align: center;
28}
29#customForm div{
30    margin-left: 10px;
31    font-size: 11px;
32    float:right;
33}
34#customForm div span{
35    margin-left: 10px;
36    color: #000000;
37    font-size: 11px;
38    float:right;
39}
40</style>

و بعدها اصنا لحقل النص الاي دي الخاص بالعملية و اضفنا الحدث onBlur : اي عندما يضغط خارج الحقل يتم تنفيذ العملية - بالمجمل كود حقل الادخال هو
كود xhtml
��� ����� ������������ �����?
1<input  id="username" name="username" type="text" value="" onblur="return check_username();" /

و كود الفورم كامل :
كود xhtml
��� ����� ������������ �����?
1<form  action="#" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
2<div class="box">
3<h4 style="text-align: right">admin و root : الأسماء اغير متوفرة هي  </h4>
4<div>
5<input  id="username" name="username" type="text" value="" onblur="return check_username();" />
6<div id="Info"></div>
7</div>
8</div>
9</form>

خلاصة كود الصفحة هو :
كود xhtml
��� ����� ������������ �����?
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05<title>Demo: Live Username Availability Checking using jQuery Ajax and PHP</title>
06<script type="text/javascript" src="jquery.js"></script>
07<script type="text/javascript">
08function check_username(){
09    var username = $("#username").val();
10    if(username.length > 3){
11        $.post("check_username_availablity.php", {
12          username: $('#username').val(),
13       }, function(response){
14          $('#Info').fadeOut();
15          $("#Info").fadeIn(1500).html("<img src='loader.gif'/>");
16          setTimeout("finishAjax('Info', '" escape(response) "')", 450);
17       });
18       return false;
19    }
20}
21function finishAjax(id, response){
22  $('#' id).html(unescape(response));
23  $('#' id).fadeIn(1000);
24}
25</script>
26<style>
27BODY {
28    FONT-SIZE: 13px;
29    COLOR: #003399;
30    FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif;
31}
32A {
33    COLOR: #003399; TEXT-DECORATION: none;
34    text-align: right;
35}
36.box {
37
38    margin: 2px 0px 2px 0px;
39    padding: 5px;
40    border: 1px solid #87CEFA;
41    width: 500px;
42}
43#customForm input{
44    width: 220px;
45    padding: 3px;
46    float:right;
47    margin-bottom:0px;
48    height:20px;
49    color: #000000;
50    font-size: 12px;
51    border: 1px solid #cecece;
52    text-align: center;
53}
54#customForm div{
55    margin-left: 10px;
56    font-size: 11px;
57    float:right;
58}
59#customForm div span{
60    margin-left: 10px;
61    color: #000000;
62    font-size: 11px;
63    float:right;
64}
65</style>
66</head>
67<body >
68<form  action="#" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
69<div class="box">
70<h4 style="text-align: right">admin و root : الأسماء اغير متوفرة هي  </h4>
71<div>
72<input  id="username" name="username" type="text" value="" onblur="return check_username();" />
73<div id="Info"></div>
74</div>
75</div>
76</form>
77</body>
78</html>

و الان نمر لصفحة تنفيذ كود التفحص و هي check_username_availablity.php و محتواها :
كود php
��� ����� ������������ �����?
01if($_REQUEST)
02{
03    $username   = $_REQUEST['username'];
04
05    if($username =="admin" OR $username =="root") // not available
06    {
07       echo '<div >غير متوفر <img src="no.jpg" alt="" /></div>';
08    }
09    else
10    {
11       echo '<div >متوفر <img src="yes.jpg" alt="" /></div>';
12    }
13
14}

في اولها تاكدنا من انه حدث ارسال لصفحة بهذا السطر :
كود php

و بعدها عملنا شرط انه ان كانت قيمة المتغير $username مساوية للاسماء المحجوزة سلفا يظهر رسالة خطأ و هي
كود php
��� ����� ������������ �����?
1echo '<div >غير متوفر <img src="no.jpg" alt="" /></div>';

مع اضافة صورة تجميلية عبارة عن علامة خطأ
و ان كانت قيمة ذالك المتغير غير مساوية لتلك الاسماء المحجوزة يظهر رسالة صح شبيهة لسابقتها :
كود php
��� ����� ������������ �����?
1echo '<div >متوفر <img src="yes.jpg" alt="" /></div>';

اجمالا الكود كامل :
كود php
��� ����� ������������ �����?
01if($_REQUEST)
02{
03    $username   = $_REQUEST['username'];
04
05    if($username =="admin" OR $username =="root") // not available
06    {
07       echo '<div >غير متوفر <img src="no.jpg" alt="" /></div>';
08    }
09    else
10    {
11       echo '<div >متوفر <img src="yes.jpg" alt="" /></div>';
12    }
13
14}


مع ملاحظة اننا لم نتعامل مع قواعد بيانات مع ان الفرق من حيث المبدأ نفسه
الى هنا نكون قد طبقنا الفكرة الاساسية لهذه العملية - ملتقانا في درس جديد باذن الله
و السلام عليكم و رحمة الله و بركاته    

مواضيع ذات صلة
-» أقتصاص النصوص بنكهة jquery | -» تكبير / تصغير خطوط النصوص - jQuery Font Resizer |
-» إنشاء محرك بحث رهيب - Ajax Search Using PHP jQuery and MYSQL | -» سكريبت إضافة التعليقات بطعم الأجاكس - Comments with jQuery and php |
-» الكابتشا و لا احلى مع الجي كواري - Ajax Captcha Plugin |


أضف تعليقك
في

هناك تعليق واحد:

  1. غير معرف25 فبراير 2011 في 4:35 ص

    عمل كاونت ر

    http://www.flagcounter.com/index.html?

    ردحذف

الاشتراك في: تعليقات الرسالة (Atom)

ضع اقتراحك او اي ملاحظات او استفسارات هنا

الاسم

بريد إلكتروني *

رسالة *