تسجيل عضويات باستخدام الأجاكس

سعد السيد احمد · 12:03 AM

التطبيق الثالث :تسجيل عضويات باستخدام الأجاكس

نكمل سلسلة التطبيقات بهذا التطبيق البسيط و رح أعمله دون اي تنسيقات كبيرة و نشتغل عليه
وبالنسبة لإستخدام niceforms فلن أضعه في الشرح الرئيسي بل سوف يكون ملف جاهز (أخر التطبيق التفاصيل )
بسم الله نبدأ يأساسيات السكربت:

نحتاج فقط إلى إنشاء الملفين :
1-display.php (الملف الرئيسية وسوف ترسل المعلومات منه و إليه )
2-display.js (ملف الجافا سكربت الخاص بdisplay.php)

أولا نحتاج إلى إنشاء الجدول في قاعدة البيانات :

كود:

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) إلى تضمين ملف الجافا سكربت و بعض أكواد الcss اللي وضعتها ورح تفيد في التنسيق :

كود بلغة HTML:

<?
session_start(); 
?> <!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>التسجيل</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <script src="display.js"> </script> <style type="text/css"> <!--
fieldset {padding:10px;width:550px;}
body{font-size:14px;}
dt {float:right; text-align:right;width:30%; }
dd {float:right; text-align:right;width:50%;}
span.err{color:#FF0000;font-size:11px;}
--> </style> </head>

وقبل أن اكتب الbody و الtags يلي داخله بحط أكواد الphp يلي رح تتحقق من البيانات المرسلة
أول شي :

كود PHP:

  <?
$send = $_POST['send'];
if($send){
$show==n;
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$gender = $_POST['gender'];
$dobMonth = $_POST['dobMonth'];
$dobDay = $_POST['dobDay'];
$dobYear = $_POST['dobYear'];
$ver = $_POST['ver'];
$accept = $_POST['accept'];
$bdate="$dobYear-$dobMonth-$dobDay";

فيه استقبال للمتغير send يلي رح يستقبل على شكل post بعدين الشرط إذا كان send موجود فعندها نعرف أن البيانات أرسلت فنقوم باستقبالهم و وضعهم في متغيرات مناسبة و المتغير bdate يلي في الأخير رح يجمع كل من يوم و شهر و سنة الميلاد حتى نحطها مع بعض
نضيف إتصال بقاعدة البيانات وطلب username من نفس الجدول حيث يكون مشابه للusernameالمسجل به يلي رح يفيدنا في التحقق إذا كان الاسم مستخدم (طبعا لا تنسى تعدل معلومات الاتصال بقاعدة البيانات ):

كود PHP:

  $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");
  $select=mysql_query("SELECT username FROM ajax_users where username='$username' ") or die("can't get ajax_users");
 $row1=mysql_fetch_array($select);
 $username2=$row1["username"];

باقي نضيف شروط التحقق بحيث رح نعطي متغيرات مرقمة بالترتيب إذا تحقق الشرط حتى نعرف إيش الخطأ يلي صار بالتسجيل :

كود PHP:

    if ( empty($username)){   
    $err1=y;
       }
  if ( empty($password)){
 
     $err2=y;
       }
     if ( empty($email)){
    $err3=y;
       }
    if (!eregi('^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.([a-zA-Z]{2,4})$', $email)){
    $err4=y;
    }   
     if ($username2=="$username"){
    $err5=y;
    }   
     if (!eregi('^[a-zA-Z]+[a-zA-Z0-9._-]+$', $password) || strlen($password)<4){
    $err6=y;
    } 
    if (!eregi('^[a-zA-Z]+[a-zA-Z0-9._-]+$', $username) || strlen($username)<4 ){
    $err7=y;
    } 
    if ($accept!=='true'){
    $err8=y;
    }  
        if ($ver!==$_SESSION["verify"]){
    $err9=y;
    }  
 
   if($err1==y || $err2==y || $err3==y || $err4==y || $err5==y || $err6==y || $err7==y  || $err8==y  || $err9==y){
   $show=y;
   }   
 
}else{$show=y;}
?>

أول ثلاث شروط هو التحقق إذا كان كل من اسم المستخدم و كلمة المرور و الإيميل فارغين و لاحظ كيف حطينا متغيرات إذا تحققت الشروط حتى نعرف إيش الخطأ
الشرط الرابع للتحقق أن الإيميل مدخل بطريقة صحيح باستخدام التعابير القياسية
الخامس للتحقق أن اسم المستخدم غير مستخدم
السادس و السابع شرطين للتحقق من كيفية اسم المستخدم و كلمة المرور حيث أني وضعت شرطين لكل منهما الاول أن الكلمة يجب ن تبدأ بأحرف إنكليزية و يجب أن تكون البقية إما أحرف أنكليزية أو ارقام و يسمح ب _-. و الشرط الذي يليه يجب ألا تكون عدد الأحرف أقل من أربعة (هذي الشروط حطيتها كدا طبعا أي واحد يعدل براحته لو يريد يستخدم هذا النموذج )
الشرط الثامن للتأكد من أن المستخدم وافق على الشروط
والتاسع للتأكد ان كود التأكد(captcha) الذي ادخله المستخدم صحيح

في النهاية تلاحظ الشرط :

كود PHP:

  if($err1==y || $err2==y || $err3==y || $err4==y || $err5==y || $err6==y || $err7==y  || $err8==y  || $err9==y){
   $show=y;
   }

أي لو كان هناك أي خطأ فسوف نقوم بإظهار نموذج التسجيل مرة أخرى حتى نعرض الاخطاء فيه
وفي النهاية :

كود PHP:

  }else{$show=y;}

نغلق الشرط يلي بدأناه لو كانت البيانات مرسلة و نضع :else{$show=y;} بحيث لو كان مافي بيانات مرسلة (أول مرة الزائر يدخل الصفحة ) فلازم نحقق شرط عرض نموذج التسجيل
نكمل الان الملف و نضع الbody مع بداية الdiv يلي رح يحوي نموذج التسجيل :

كود بلغة HTML:

<body> <div align="center" id="form" dir="rtl"  >

الان اضع شرط إظهار نموذج التسجيل :

كود PHP:

  <? 
if($show==y){
?>

لاحظوا أني أبدأ الphp و أنهيها بحيث ان أكواد الhtml تنكتب براحتها دون الحاجة ل echo وغيره

الأن أضيف أول حقل وهو اسم المستخدم و كذلك بضع نموذج التسجيل داخل fieldset :

كود بلغة HTML:

<fieldset> <dt >
اسم المستخدم:
</dt> <dd > <input name="username" id="username"  type="text" value="<?=$username ?>" size="15" /> <? if ($err1==y){ echo"<span dir=rtl class=err>لم تقم بإدخال اسم المستخدم</span>";}elseif($err5==y){echo"<span dir=rtl class=err>اسم المستخدم الذي اخترته غير متوفر</span>";}elseif($err7==y){echo"<span dir=rtl class=err>اسم المستخدم غير مقبول*</span>";} ?> </dd>

لوضعت value للحقل تساوي المتغير username بحيث لو كانت البيانات مرسلة وكان هناك خطأ فينطبع له داخل الحقل أخر شي كتبه فيه حتى يسهل التعديل عليه بسرعة
وبعد حقل كتابة الاسم هناك طباعة الأخطاء إن واجدت بحيث يتم تفحص الأخطاء وطباعة الرسالة الناسبة ومارح يطبع أكثر من خطأ في نفس الوقت لإستخدامي elseif
بنفس الطريقة نضيف حقل كلمة المرور و البريد الإلكتروني

كود بلغة HTML:

<dt >
كلمة المرور:
</dt> <dd > <input name="password" id="password"  type="password" value="<?=$password ?>"  size="15" /> <? if ($err2==y){echo"<span dir=rtl class=err>لم تقم بإدخال كلمة المرور</span>";}elseif($err6==y){echo"<span dir=rtl  class=err>كلمة المرور غير مقبولة*</span>";} ?> </dd> <dt >
البريد الإلكتروني:
</dt> <dd > <input name="email" id="email" type="text" value="<?=$email ?>" size="15" /> <? if ($err3==y) { echo"<span dir=rtl class=err>لم تقم بإدخال البريد الإلكتروني</span>";}elseif( $err4==y ){ echo"<span dir=rtl class=err>البريد الإلكتروني غير صحيح</span>";} ?> </dd>

و نضيف الان خانة إختيار لتحديد للجنس :

كود بلغة HTML:

<dt >
الجنس:
</dt> <dd > <select dir="rtl"  size="1" name="gender" id="gender"> <option <? if($gender=='m'){echo 'selected=selected'; } ?> value="m">ذكر</option> <option <? if($gender=='f'){echo 'selected=selected'; } ?> value="f">أنثى</option> </select> </dd>

وضعنا داخل كل خانة شرط تأكد إذا كانت هي الخيار المختار و كان هناك خطأ ما يحتاج المستخدم لتحديد الخيار مرة أخرى بل رح يتحدد تلقائيا بواسطة selected=selected
لاحظوا أن لا يوجد رسالة خطأ لأنه رح يكون محدد على خيار الذكر تلقائياً و المستخدم حر بتغييره لو كان غير ذلك
بنفس الطريقة نضيف تحديد تاريخ الميلاد :

كود بلغة HTML:

 <dt >
تاريخ الميلاد:
</dt> <dd > <select size="1" name="dobDay" id="dobDay"> <option <? if($dobDay=='01'){echo 'selected=selected'; } ?> value="01">01</option> <option <? if($dobDay=='02'){echo 'selected=selected'; } ?> value="02">02</option> <option <? if($dobDay=='03'){echo 'selected=selected'; } ?> value="03">03</option> <option <? if($dobDay=='04'){echo 'selected=selected'; } ?> value="04">04</option> <option <? if($dobDay=='05'){echo 'selected=selected'; } ?> value="05">05</option> <option <? if($dobDay=='06'){echo 'selected=selected'; } ?> value="06">06</option> <option <? if($dobDay=='07'){echo 'selected=selected'; } ?> value="07">07</option> <option <? if($dobDay=='08'){echo 'selected=selected'; } ?> value="08">08</option> <option <? if($dobDay=='09'){echo 'selected=selected'; } ?> value="09">09</option> <option <? if($dobDay=='10'){echo 'selected=selected'; } ?> value="10">10</option> <option <? if($dobDay=='11'){echo 'selected=selected'; } ?> value="11">11</option> <option <? if($dobDay=='12'){echo 'selected=selected'; } ?> value="12">12</option> <option <? if($dobDay=='13'){echo 'selected=selected'; } ?> value="13">13</option> <option <? if($dobDay=='14'){echo 'selected=selected'; } ?> value="14">14</option> <option <? if($dobDay=='15'){echo 'selected=selected'; } ?> value="15">15</option> <option <? if($dobDay=='16'){echo 'selected=selected'; } ?> value="16">16</option> <option <? if($dobDay=='17'){echo 'selected=selected'; } ?> value="17">17</option> <option <? if($dobDay=='18'){echo 'selected=selected'; } ?> value="18">18</option> <option <? if($dobDay=='19'){echo 'selected=selected'; } ?> value="19">19</option> <option <? if($dobDay=='20'){echo 'selected=selected'; } ?> value="20">20</option> <option <? if($dobDay=='21'){echo 'selected=selected'; } ?> value="21">21</option> <option <? if($dobDay=='22'){echo 'selected=selected'; } ?> value="22">22</option> <option <? if($dobDay=='23'){echo 'selected=selected'; } ?> value="23">23</option> <option <? if($dobDay=='24'){echo 'selected=selected'; } ?> value="24">24</option> <option <? if($dobDay=='25'){echo 'selected=selected'; } ?> value="25">25</option> <option <? if($dobDay=='26'){echo 'selected=selected'; } ?> value="26">26</option> <option <? if($dobDay=='27'){echo 'selected=selected'; } ?> value="27">27</option> <option <? if($dobDay=='28'){echo 'selected=selected'; } ?> value="28">28</option> <option <? if($dobDay=='29'){echo 'selected=selected'; } ?> value="29">29</option> <option <? if($dobDay=='30'){echo 'selected=selected'; } ?> value="30">30</option> <option <? if($dobDay=='31'){echo 'selected=selected'; } ?> value="31">31</option> </select> <select  size="1" name="dobMonth" id="dobMonth"> <option <? if($dobMonth=='1'){echo 'selected=selected'; } ?> value="1">Jan</option> <option <? if($dobMonth=='2'){echo 'selected=selected'; } ?> value="2">Feb</option> <option <? if($dobMonth=='3'){echo 'selected=selected'; } ?> value="3">Mar</option> <option <? if($dobMonth=='4'){echo 'selected=selected'; } ?> value="4">Apr</option> <option <? if($dobMonth=='5'){echo 'selected=selected'; } ?> value="5">May</option> <option <? if($dobMonth=='6'){echo 'selected=selected'; } ?> value="6">Jun</option> <option <? if($dobMonth=='7'){echo 'selected=selected'; } ?> value="7">Jul</option> <option <? if($dobMonth=='8'){echo 'selected=selected'; } ?> value="8">Aug</option> <option <? if($dobMonth=='9'){echo 'selected=selected'; } ?> value="9">Sep</option> <option <? if($dobMonth=='10'){echo 'selected=selected'; } ?> value="10">Oct</option> <option <? if($dobMonth=='11'){echo 'selected=selected'; } ?> value="11">Nov</option> <option <? if($dobMonth=='12'){echo 'selected=selected'; } ?> value="12">Dec</option> </select> <select  size="1" name="dobYear" id="dobYear"> <option <? if($dobYear=='2000'){echo 'selected=selected'; } ?> value="2000">2000</option> <option <? if($dobYear=='1999'){echo 'selected=selected'; } ?> value="1999">1999</option> <option <? if($dobYear=='1998'){echo 'selected=selected'; } ?> value="1998">1998</option> <option <? if($dobYear=='1997'){echo 'selected=selected'; } ?> value="1997">1997</option> <option <? if($dobYear=='1996'){echo 'selected=selected'; } ?> value="1996">1996</option> <option <? if($dobYear=='1995'){echo 'selected=selected'; } ?> value="1995">1995</option> <option <? if($dobYear=='1994'){echo 'selected=selected'; } ?> value="1994">1994</option> <option <? if($dobYear=='1993'){echo 'selected=selected'; } ?> value="1993">1993</option> <option <? if($dobYear=='1992'){echo 'selected=selected'; } ?> value="1992">1992</option> <option <? if($dobYear=='1991'){echo 'selected=selected'; } ?> value="1991">1991</option> <option <? if($dobYear=='1990'){echo 'selected=selected'; } ?> value="1990">1990</option> <option <? if($dobYear=='1989'){echo 'selected=selected'; } ?> value="1989">1989</option> <option <? if($dobYear=='1988'){echo 'selected=selected'; } ?> value="1988">1988</option> <option <? if($dobYear=='1987'){echo 'selected=selected'; } ?> value="1987">1987</option> <option <? if($dobYear=='1986'){echo 'selected=selected'; } ?> value="1986">1986</option> <option <? if($dobYear=='1985'){echo 'selected=selected'; } ?> value="1985">1985</option> <option <? if($dobYear=='1984'){echo 'selected=selected'; } ?> value="1984">1984</option> <option <? if($dobYear=='1983'){echo 'selected=selected'; } ?> value="1983">1983</option> <option <? if($dobYear=='1982'){echo 'selected=selected'; } ?> value="1982">1982</option> <option <? if($dobYear=='1981'){echo 'selected=selected'; } ?> value="1981">1981</option> <option <? if($dobYear=='1980'){echo 'selected=selected'; } ?> value="1980">1980</option> <option <? if($dobYear=='1979'){echo 'selected=selected'; } ?> value="1979">1979</option> <option <? if($dobYear=='1978'){echo 'selected=selected'; } ?> value="1978">1978</option> <option <? if($dobYear=='1977'){echo 'selected=selected'; } ?> value="1977">1977</option> <option <? if($dobYear=='1976'){echo 'selected=selected'; } ?> value="1976">1976</option> <option <? if($dobYear=='1975'){echo 'selected=selected'; } ?> value="1975">1975</option> <option <? if($dobYear=='1974'){echo 'selected=selected'; } ?> value="1974">1974</option> <option <? if($dobYear=='1973'){echo 'selected=selected'; } ?> value="1973">1973</option> <option <? if($dobYear=='1972'){echo 'selected=selected'; } ?> value="1972">1972</option> <option <? if($dobYear=='1971'){echo 'selected=selected'; } ?> value="1971">1971</option> <option <? if($dobYear=='1970'){echo 'selected=selected'; } ?> value="1970">1970</option> <option <? if($dobYear=='1969'){echo 'selected=selected'; } ?> value="1969">1969</option> <option <? if($dobYear=='1968'){echo 'selected=selected'; } ?> value="1968">1968</option> <option <? if($dobYear=='1967'){echo 'selected=selected'; } ?> value="1967">1967</option> <option <? if($dobYear=='1966'){echo 'selected=selected'; } ?> value="1966">1966</option> <option <? if($dobYear=='1965'){echo 'selected=selected'; } ?> value="1965">1965</option> <option <? if($dobYear=='1964'){echo 'selected=selected'; } ?> value="1964">1964</option> <option <? if($dobYear=='1963'){echo 'selected=selected'; } ?> value="1963">1963</option> <option <? if($dobYear=='1962'){echo 'selected=selected'; } ?> value="1962">1962</option> <option <? if($dobYear=='1961'){echo 'selected=selected'; } ?> value="1961">1961</option> <option <? if($dobYear=='1960'){echo 'selected=selected'; } ?> value="1960">1960</option> <option <? if($dobYear=='1959'){echo 'selected=selected'; } ?> value="1959">1959</option> <option <? if($dobYear=='1958'){echo 'selected=selected'; } ?> value="1958">1958</option> <option <? if($dobYear=='1957'){echo 'selected=selected'; } ?> value="1957">1957</option> <option <? if($dobYear=='1956'){echo 'selected=selected'; } ?> value="1956">1956</option> <option <? if($dobYear=='1955'){echo 'selected=selected'; } ?> value="1955">1955</option> <option <? if($dobYear=='1954'){echo 'selected=selected'; } ?> value="1954">1954</option> <option <? if($dobYear=='1953'){echo 'selected=selected'; } ?> value="1953">1953</option> <option <? if($dobYear=='1952'){echo 'selected=selected'; } ?> value="1952">1952</option> <option <? if($dobYear=='1951'){echo 'selected=selected'; } ?> value="1951">1951</option> <option <? if($dobYear=='1950'){echo 'selected=selected'; } ?> value="1950">1950</option> </select> </dd>

ننتقل لإضافة الcaptcha أو ماسوف نسميه كود التأكد :

كود بلغة HTML:

<dt>
كود التأكد:
</dt> <dd > <?
if($_SESSION["verify"] && $send ){
}else{
$im = ImageCreate(50, 30);    
$color1 = ImageColorAllocate($im, 255, 255, 255);  
$color2 = ImageColorAllocate($im, 0, 0, 0);  
$string = md5(rand(0,9999));   
$new_string = substr($string, rand(0,25), 5);
 
$_SESSION["verify"]=$new_string;
$new_string1 = substr($new_string, 0, 1);
$new_string2 = substr($new_string, 1, 1);  
$new_string3 = substr($new_string, 2, 1);
$new_string4 = substr($new_string, 3, 1);
$new_string5 = substr($new_string, 4, 1);
 
 ImageFill($im, 0, 0, $color1);  
 
 ImageString($im, 9, 1, rand(2,12), $new_string1, $color2);
 ImageString($im, 9, 10, rand(2,12), $new_string2, $color2);
 ImageString($im, 9, 20, rand(2,12), $new_string3, $color2);
 ImageString($im, 9, 30, rand(2,12), $new_string4, $color2);
 ImageString($im, 9, 40, rand(2,12), $new_string5, $color2); 
 
 Imagearc($im, 0, rand(0,30),rand(50,300), rand(20,50), 0, 360, $color2); 
 Imagearc($im, 0, rand(0,30),rand(50,300), rand(20,50), 0, 360, $color2); 
 
imagejpeg($im, "img/ver.jpeg", 10);  
ImageDestroy($im);  
 }
?> <img src="img/ver/<?=$pic ?>.jpeg" width="50"  height="30" > </dd><dt >
أعد كتابة الكود:
</dt> <dd > <input type="ver" name="ver" id="ver" dir="ltr" size="6" value="<?=$ver ?>" maxlength="5" /> <? if ($err9==y){ echo"<span dir=rtl class=err>الكود الذي أدخلته غير صحيح</span>";}?> </dd>

لاحظتوا وجود أوامر الphp لصنع صورة الcaptcha اعرف انه فيه كثير طرق أفضل وشروحات أفضل لصنع صورة من يلي حاطه لكن انا هذي الطريقة يلي عادةً استخدمها وبشرحها على السريع سطر سطر :
في البداية يوجد شرط تحقق إذا كانت البيانات مرسلة و يوجد جلسة الكود فإنه لن يتم صناعة كود جديد وتغير قيمة الجلسة جتى لا تحصل أية أخطاء
وعند عدم تحقق الشرط يتم صنع صورة جديدة 50 × 30 وثم نحدد لوننين (إخترنا هنا الأبيض و الأسود ) و نجعلهم في متغير
ثم نقوم بإستخدام الدالة rand(0,9999) حتى تعطي لنا رقما بين 0 و 9999 و نقوم بتشفيره لكي يصبح هناك أحرف في الكود
بعد ذلك نقوم باخذ 5 أحرف أو أرقام عشوائيا من الرقم بعد تشفريه ونضعها في متغير ويكون هذا الكود الذي يجب على من يريد التسجيل كتابته لذلك نخزنه في جلسة حتى يتيح لنا التأكد منه
وهذا الكود الذي حلصنا عليه نقوم بتقسيمه إلى 5 خانات كل خانة نضعها في متغير لوحده حتى نتحكم في مواقعهم في الصورة
بعد ذلك نقوم بتعبئة الصورة باللون الأول (الأبيض ) ثم نقوم بكتابة الكود الذي صنعناه وذلك بأن نكتب كل خانة قسمناها بمفردها حيث سوف يكون الإرتفاع متغير لكل خانة في حدود الصورة حتى تصير الصورة ملخبطة شوي

بعدين رح نعمل خطين متعرجين فوق الكود (أو ممكن يظهر أكثر لأنها عبارة عن دالة ترسم قطع ناقص لكن خليت كثير من قيمها غير ثابتة بحيث يظهر على الأغلب خطين)
في الأخير صناعة الصورة بإسم ver.jpeg داخل مجلد img وقم نفرغ الذاكرة من من قيم الصورة يلي عملناها
الان نحط الموافقة على الشروط وزر الإرسال و نقفل القوس تبع شرط ظهور نموذج التسجيل وكذلك الdiv

كود بلغة HTML:

<dt >
الموافقة:
</dt> <dd   > <input type="checkbox" name="accept" id="accept" value="y" <? if ($accept=='true'){ echo" checked=\"checked\" "; } ?> />
اوافق على الشروط
  <? if ($err8==y){ echo"<span dir=rtl class=err>لن يتم التسجيل حتى توافق على الشروط</span>";}?> </dd> </fieldset><br /> <input onclick="javascript:send()" type="submit" name="send" id="send" value=" تسجيل " /> <? } ?> </div>

طبعا انت ممكن تحط رابط عند كلمة "الشروط" تودي لصفحة الشروط يلي عندك
نضيف أخر شي الdiv الخاص بالرسائل التي سوف تظهر للمستخدم (يرجى الإنتظار , لم يتم التسجيل ... ) وفي داخله اوامر الphp للتحقق أن كل شي تمام و إدخال المعلومات إلى الجدول أو طباعة رسال هناك خطأ :

كود PHP:

 
<div id="msg" align="center"> 
 
<?
if($send){
  if($err1==y || $err2==y || $err3==y || $err4==y|| $err5==y || $err6==y || $err7==y || $err8==y || $err9==y){
    echo"<span dir=rtl class=err>لم يتم التسجيل راجع الاخطاء باللون الاحمر</span>";
    if($err7==y || $err6==y){echo"<br /><span dir=rtl class=err>* اسم المستخدم وكلمة المرور يجب أن يكونا أكثر من ثلاثة أحرف و يحتويا على حروف إنكليزية أو أرقام وبدايتهم حرف ويسمح ب: ._-</span>";}
    }else{
  $password=md5($password);
  $query = "INSERT INTO `ajax_users` ( `id` , `username` , `password` , `email` ,`gender` , `bdate`) 
   VALUES(NULL,'$username','$password','$email','$gender','$bdate');";
 
   $register = mysql_query($query);
 
    if(!$register){
    echo"لم يتم التسجيل هناك خطأ <br /><a href=display.php>اضغط هنا </a>للمحاولة مرة آخرى";
     }else{
    echo"تم التسجيل بنجاح<br /><a href=index.php>اضغط هنا </a>للإنتقال للصفحة الرئيسية"; 
     }
  }
}
?>
</div>
</body>
</html>

ننتقل الأن للملف display.js ويلي تابع التطبيقات السابقة مارح يشوف فيه أي شي جديد وهذا هو كامل :

كود:

 
 
var xmlHttp
function send()
{
 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Your browser do not support HTTP Request")
 return
 } 
var username = document.getElementById('username');
var password = document.getElementById('password');
var email = document.getElementById('email');
var gender = document.getElementById('gender');
var dobMonth = document.getElementById('dobMonth');
var dobDay = document.getElementById('dobDay');
var dobYear = document.getElementById('dobYear');
var ver = document.getElementById('ver');
var accept = document.getElementById('accept');
var url="display.php?"
 
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
postsvars="username="+username.value
postsvars=postsvars+"&password="+password.value
postsvars=postsvars+"&email="+email.value
postsvars=postsvars+"&gender="+gender.value
postsvars=postsvars+"&dobMonth="+dobMonth.value
postsvars=postsvars+"&dobDay="+dobDay.value
postsvars=postsvars+"&dobYear="+dobYear.value
postsvars=postsvars+"&ver="+ver.value
postsvars=postsvars+"&accept="+accept.checked
postsvars=postsvars+"&send="+Math.random()
xmlHttp.send(postsvars)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState!==4)
 { 
 var msg="loading...";
 document.getElementById("msg").innerHTML=msg;
 } 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
  var msg="";
 document.getElementById("msg").innerHTML=msg;
 document.getElementById("form").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;
}

مثل مو معروف الفنكشن GetXmlHttpObject() لتحديد المتصفح و طريقة إستخدام الأجاكس و الفنكشن stateChanged() لطباعة النص الجديد الذي سوف يستقبل و طباعة رسائل الإنتظار
و send() لإرسال البيانات و اخذنا البيانات من الحقول كالعادة عن طريق الid وحددنا طريقة الإرسال post وبعدين وضعنا البيانات في متغير ثم في xmlHttp.send(postsvars) لترسل عن طريق send
و أهم شي لاحظوا في المتغير الخاص بالموافقة على الشروط accept ما ناخذ القيمة (value) بل ناخذ إذا كان مختار (checked)
الان إنتهينا من السكربت باقي إضافة بسيطة فقط و هي أني ما أخلي & تأثر على الحقول لأنه إذا واحد كتبها رح تعمل فصل للبيانات و ممكن تسبب مشكلة فأفضل حل هو تشفير اللنص و عند إستقباله إزالة التشفير والتشفير يلي رح نستخدمه هو : escape
يعني يصير في ملف display.js :

كود:

 
 
postsvars="username="+escape (username.value)
postsvars=postsvars+"&password="+escape (password.value)
postsvars=postsvars+"&email="+escape (email.value)
postsvars=postsvars+"&gender="+escape (gender.value)
postsvars=postsvars+"&dobMonth="+escape (dobMonth.value)
postsvars=postsvars+"&dobDay="+escape (dobDay.value)
postsvars=postsvars+"&dobYear="+escape (dobYear.value)
postsvars=postsvars+"&ver="+escape (ver.value)
postsvars=postsvars+"&accept="+accept.checked
postsvars=postsvars+"&send="+Math.random()

وعند إستقبال البيانات لازم نفك التشفير حتى لا تأثر على الكلمات العربية :

كود:

 document.getElementById("form").innerHTML=unescape(xmlHttp.responseText);

هذا كل شيء حتى الأن و في المرفقات الصفحة مع الإضافة + صفحة ثانية تحتوي نفس الاوامر لكن مع أحد أشكال niceforms يلي عدلتها حتى تصير مناسبة للغة العربية وهذه ملفاتها :
register.php
niceforms.js
niceforms-default.css
مجلد Img ويحتوي على الصور الخاصة فيهم
ولم أضع ملف خاص للجافا سكربت االلي رح يعمل الاجاكس لصفحة register.php لأنه من الضروري تشغيل الامر NFInit(); يلي هو موجود أصلا في niceforms.js حتى تطلع كثير من الصور لانه بعد إستقبال البيانات الجديدة نحتاج لتشغيل هذا الأمر مرة ثانية لذلك وضعت أكواد الجافاسكربت في نفس الصفحة ومن الممكن وضع الأوامر مع niceforms.js حتى يتنسق الملف بشكل أفضل و تجتمع كل أكواد الجافا في مكان واحد

للأسف مافي إضافات كثيرة ولا شي جديد كليا في هذا التطبيق

لكن أي إضافة جديد تخطر على بالي بضعها إن شاء الله و كمان لو في أي فكرة نضيفها لا تبخلوا علينا
-------------------------
التطبيق القادم : تسجيل دخول باستخدام الأجاكس
بعد ما عملنا كثير من الامثلة عن الاجاكس أتوقع أي واحد مركز رح يقدر يعمل التطبيق بنفسه لذلك أنا رح ادور على أي فكرة أو إضافة ما استخدمناه حتى الأن و بحطها في التطبيق حتى نكون جمعنا أغلب الأفكار يلي ممكن تستخدم مع الأجاكس
إن شاء الله قريباً...

فاشل كل العاده · 16-10-2008, 06:26 AM

موفق اخ سـعد الى الامام

ياريت نسـمع عن عمل اسكربت جديد منك قريب

ياريت بوابه مثل انفينتى مع حذف الاشياء التافهه الى فيها

الى الامام

سعد السيد احمد · 16-10-2008, 01:10 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة فاشل كل العاده

موفق اخ سـعد الى الامام
ياريت نسـمع عن عمل اسكربت جديد منك قريب
ياريت بوابه مثل انفينتى مع حذف الاشياء التافهه الى فيها
الى الامام

إن شاء الله
لكن الأن اشتغل على لعبة شطرنج اون لاين بالمتصفح

إن شاء الله لما تصير جاهزة للعرض بحطها في منتدى فكرة

فاشل كل العاده · 16-10-2008, 01:22 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة سعد السيد احمد

إن شاء الله
لكن الأن اشتغل على لعبة شطرنج اون لاين بالمتصفح
إن شاء الله لما تصير جاهزة للعرض بحطها في منتدى فكرة

اون لاين يعني اتنين يلعبو مع بعض ؟؟ من جهات مختلفه
معقول ؟

أبو فيصلz · 16-10-2008, 01:31 PM

الله يوفقك وإلى الآمام

سعد السيد احمد · 16-10-2008, 01:32 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة فاشل كل العاده

اون لاين يعني اتنين يلعبو مع بعض ؟؟ من جهات مختلفه
معقول ؟

إيه
مثل موقع :www.gamezer.com
هو يستخدم الفلاش لكن أنا بستخدم الاجاكس

اقتباس:

الله يوفقك وإلى الآمام

وجميع المسلمين إن شاء الله

عمرو درويش · 20-10-2008, 10:50 AM

السلام عليكم

الف شكر اخى العزيز

يوجد طلب اخى العزيز

>>>>>>>>>>>>>>>>>>

احتاج عمل محرك بحث لموقعى مثل هذا المحرك >>>>>>> ewaseet

سعد السيد احمد · 20-10-2008, 04:36 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة عمرو درويش

السلام عليكم

الف شكر اخى العزيز

يوجد طلب اخى العزيز

>>>>>>>>>>>>>>>>>>

احتاج عمل محرك بحث لموقعى مثل هذا المحرك >>>>>>> ewaseet

العفو
لكن أخوي انا غير فاضي لأي طلب حالياً
أسف

ليوناردو دافينشي · 20-10-2008, 10:48 PM

أكمل شرحك ممتع

سعد السيد احمد · 21-10-2008, 12:52 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة ليوناردو دافينشي

أكمل شرحك ممتع

إن شاء الله رح استمر
وصراحة ما كنت اعرف أنو شرحي ممتع

كنت خايف يكون العكس
شكرا لك

فيصل الغامدي · 01-11-2008, 05:09 PM

ابداااااااااااع

صدقني انت فتحت لي افكار جديدة موضوعك الى المفضلة واول ما ارجع من العمل

راح اشتغل عليه مضبوووووووووووط الين ادخله في سكربت المستقبل حقي

احلم اني اخليه اجاكس في اجاكس ما ابغى المتصفح يشوف جاري التحميل في شريط المتصفح

ابغاه يشوفها صورة لودنج بس

وااااااصل الله يجزاك خير على هذي الدروس المميزة والنااااااادرة

apitos · 18-11-2008, 08:02 PM

السلام عليكم،

ان شاء الله نستفيد من الدرس.

دمت طيبا استاتذنا الفاضل.

سعد السيد احمد · 18-11-2008, 10:05 PM

اقتباس:

ابداااااااااااع

صدقني انت فتحت لي افكار جديدة موضوعك الى المفضلة واول ما ارجع من العمل

راح اشتغل عليه مضبوووووووووووط الين ادخله في سكربت المستقبل حقي

احلم اني اخليه اجاكس في اجاكس ما ابغى المتصفح يشوف جاري التحميل في شريط المتصفح

ابغاه يشوفها صورة لودنج بس

وااااااصل الله يجزاك خير على هذي الدروس المميزة والنااااااادرة

العفو و ان شاء الله نشوف إبداعاتك قريبا

اقتباس:

السلام عليكم،

ان شاء الله نستفيد من الدرس.

دمت طيبا استاتذنا الفاضل.

إن شاء الله

ولا تنسوا أنا نزلت التطبيق يلي بعده تبع تسجيل الدخول

apitos

اقتباس:

ولا تنسوا أنا نزلت التطبيق يلي بعده تبع تسجيل الدخول

أي تطبيق تقصد ؟

هل من الممكن المساعدة في هذا الطلب ؟

http://www.swalif.net/softs/swalif45/softs247415/

شكراً وبارك الله فيك