التطبيق الثالث :تسجيل عضويات باستخدام الأجاكس
نكمل سلسلة التطبيقات بهذا التطبيق البسيط و رح أعمله دون اي تنسيقات كبيرة و نشتغل عليه
وبالنسبة لإستخدام 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;
}
أي لو كان هناك أي خطأ فسوف نقوم بإظهار نموذج التسجيل مرة أخرى حتى نعرض الاخطاء فيه
وفي النهاية :
نغلق الشرط يلي بدأناه لو كانت البيانات مرسلة و نضع :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 حتى يتنسق الملف بشكل أفضل و تجتمع كل أكواد الجافا في مكان واحد
للأسف مافي إضافات كثيرة ولا شي جديد كليا في هذا التطبيق 
لكن أي إضافة جديد تخطر على بالي بضعها إن شاء الله و كمان لو في أي فكرة نضيفها لا تبخلوا علينا
-------------------------
التطبيق القادم : تسجيل دخول باستخدام الأجاكس
بعد ما عملنا كثير من الامثلة عن الاجاكس أتوقع أي واحد مركز رح يقدر يعمل التطبيق بنفسه لذلك أنا رح ادور على أي فكرة أو إضافة ما استخدمناه حتى الأن و بحطها في التطبيق حتى نكون جمعنا أغلب الأفكار يلي ممكن تستخدم مع الأجاكس
إن شاء الله قريباً...
[تطبيق أجاكس] تسجيل عضويات باستخدام الأجاكس
رد مع اقتباس
:deal:
المشاركة الأصلية كتبت بواسطة فاشل كل العاده 
