درس التحقق من اسم المستخدم باستخدام الاجاكس

Egypt-IT.com · #1 04 - 07 - 2008, 20:20

ان شاء الله فى الدرس دا
هنعمل سكربت بسيط يقوم بالتحقق من user name متاح للتسجيل او غير متاح باستخدام الاجاكس
اولا كود html

رمز Code:

<div align='center' >  User Name : <input name="username" type="text" id="username" value="" maxlength="15" />  
<span id="msgbox" style="display:none"></span> </div>

فى السطر الاول عملنا مربع نص اسمة username والقيمة بتاعتة فارغة لاننا فى المربع هنكتب الاسم المراد التاكد من صلاحيتة
فى السطر التانى استخدمنا العنصر المحياد span ولة id=msgbox لعمل تاثير باستخدام الاجاكس
وبين تاجى <head> <head/>
هنكتب جملة الاتصال بمكتبة الاجاكس

رمز Code:

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

والوقتى هنعمل خاصية focus out من مربع النص هنقوم باستدعاء الملفuser_availability.php
واستخدام الاجاكس فى اظهار الرسالة وذلك باستخدام كودا javascript التالى

رمز Code:

<script language="javascript">

$(document).ready(function()
{
    $("#username").blur(function()
    {
    
        $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
        // التحقق من اسم المستخدم باستخدام الاجاكس
        $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
        {
          if(data=='no') //فى حالة اليوزر غير متاح
          {
              $("#msgbox").fadeTo(200,0.1,function() 
            { 
              $(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
            });        
          }
          else
          {
              $("#msgbox").fadeTo(200,0.1,function() 
            { 
              $(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);    
            });
          }
                
        });
 
    });
});
</script>

والان مع ملف index.php مع بعض لمسات ال css البسيطة

رمز Code:

<html>
<head>
<title>التحقق من اسم التسجيل بالاجكس</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">

$(document).ready(function()
{
    $("#username").blur(function()
    {
    
        $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
        // التحقق من اسم المستخدم باستخدام الاجاكس
        $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
        {
          if(data=='no') //فى حالة اليوزر غير متاح
          {
              $("#msgbox").fadeTo(200,0.1,function() 
            { 
              $(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
            });        
          }
          else
          {
              $("#msgbox").fadeTo(200,0.1,function() 
            { 
              $(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);    
            });
          }
                
        });
 
    });
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
    position:absolute;
    width:100px;
    margin-left:30px;
    border:1px solid #c93;
    background:#ffc;
    padding:3px;
}
.messageboxok{
    position:absolute;
    width:auto;
    margin-left:30px;
    border:1px solid #349534;
    background:#C9FFCA;
    padding:3px;
    font-weight:bold;
    color:#008000;
    
}
.messageboxerror{
    position:absolute;
    width:auto;
    margin-left:30px;
    border:1px solid #CC0000;
    background:#F7CBCA;
    padding:3px;
    font-weight:bold;
    color:#CC0000;
}

</style>
</head>
<body>

 
<br>
<br>
<div align="center">
<div class="top" > التحقق من  user name بالستخدام الاجاكس - <strong>username &quot;traidnt&quot;, &quot;egypt-it&quot; ,&quot;ayman&quot; </strong><br>
  من فضلك حرك مؤشر الماوس خارج المربع للتحقق من الاسم
</div>
<div >
   user name  : <input name="username" type="text" id="username" value="" maxlength="15" />
   <span id="msgbox" style="display:none"></span>
</div>

</div>
</body>
</html>

_____________________________
ملف user_availability.php

فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا

رمز Code:

<?php
//هذا المتغير يحتوى على مصفوفة باسماء المستخدمين الغير متاحين
$existing_users=array('traidnt','egypt-it','ayman'); 
$user_name=$_POST['user_name'];
//فحص الاسماء والتاكد من خلوها من المصفوفة السابقة
if (in_array($user_name, $existing_users))
{
    //اسم المستخدم غير متاح للتسجيل
    echo "no";
} 
else
{
    //اسم المستخدم متاخ للتسجيل
    echo "yes";
}
?>

فى السطر الثالث قمنا بعمل مصفوفة تحتوى على الاسماء الغير متاحىة للتسجيل
لتجربة الاسكربت اضغط هنا
الاسكربت مرفق كامل

Arab4Des · 04 - 07 - 2008, 20:49

مشكور يا غالى ، طريقه حلوة ومميزة

Mr.Ajax · 04 - 07 - 2008, 22:06

مشكور يا غالى
شرح جميل جدا و الى المفضله
ولك منى أحلى ++

تحياتى
Mr.Ajax

science20012003 · 05 - 07 - 2008, 03:26

مشكور اخى طريقة جميلة بجد
++

][ دحمــي ][ · 05 - 07 - 2008, 03:55

يعطيك العافيه اخوي
المثال موب بشغال
ولاهنت .

محمد الكاشف · 05 - 07 - 2008, 03:58

شرح مميز جزاك الله كل خير ...

Egypt-IT.com · 05 - 07 - 2008, 11:37

شِكرا للجميع وان شاء الله يكون الدرس مفيد

Egypt-IT.com · 05 - 07 - 2008, 11:39

اقتباس

المشاركة الأصلية أضيفت بواسطة : ][ دحمــي ][


	يعطيك العافيه اخوي المثال موب بشغال ولاهنت .

كيف مش شغال
؟؟؟؟؟؟؟؟؟؟؟؟؟؟

][ دحمــي ][ · 05 - 07 - 2008, 13:23

يعني
لا يمكن عرض الصفحة

من أمس بالليل !!!!

عربي و افتخر · 05 - 07 - 2008, 15:24

جميل يا غالى
و ننتظر دروسك الجميلة
هل فى طريقة مثلها لتتاكد من الايميل و الرقم السرى ان يكون متتطابق
و تم التقيم

Egypt-IT.com · 05 - 07 - 2008, 23:03

اقتباس

المشاركة الأصلية أضيفت بواسطة : عربى و افتخر


	جميل يا غالى و ننتظر دروسك الجميلة هل فى طريقة مثلها لتتاكد من الايميل و الرقم السرى ان يكون متتطابق و تم التقيم

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

عربي و افتخر · 06 - 07 - 2008, 00:27

اقتباس

المشاركة الأصلية أضيفت بواسطة : Egypt-IT.com


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

بانتظارك يا غالى

axplus.net · 07 - 07 - 2008, 18:49

رائع والله

راح استخدمها الحين فى احد المشاريع :D

05 - 07 - 2008, 03:55	#5
][ دحمــي ][ .:: عضو متألق ::.	يعطيك العافيه اخوي المثال موب بشغال ولاهنت .
][ دحمــي ][ .:: عضو متألق ::.	توقيع ][ دحمــي ][ تعلمت الشر لا للشر ..! بل لتوقيـــه .. من لايعرف الشر من الـخيــر ..} يقع فيــه ..!! .

05 - 07 - 2008, 13:23	#9
][ دحمــي ][ .:: عضو متألق ::.	يعني لا يمكن عرض الصفحة من أمس بالليل !!!!
][ دحمــي ][ .:: عضو متألق ::.	توقيع ][ دحمــي ][ تعلمت الشر لا للشر ..! بل لتوقيـــه .. من لايعرف الشر من الـخيــر ..} يقع فيــه ..!! .

أدوات الموضوع
عرض صفحة طباعة الموضوع ارسال الصفحة الى صديق
طرق العرض
العرض العادي الانتقال الى العرض المتطور الانتقال الى العرض الشجري

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع : 1 (0 عضو و 1 ضيف)