بسم الله الرحمن الرحيم
طلب احد الزملاء مني في موضوعي عن شروحات الجافا سكريبت script والبي إتش بي و .. . . ..
شرح طريقة كيفية عمل تسجيل دخول بالأجاكس ولكني خفت ان يكون هو او من سيأتي من بعده ليس لديه خلفية عن فكرة عمل الأجاكس وبالتالي يكون الكود code نسخ ولصق واكون قتلت الإبداع لديه
ففضلت ان اقوم بعمل موضوع عن كيفية سير طلبات الأجاكس وكيفية إستلامها ومعالجتها وإرسال الرد بدون عمل اي تحديث update للصفحة . . .
--------------------------------------
ماهو الأجاكس ؟؟
الأجاكس ليست لغة برمجة قائمة بذاتها وإنما هي إستغلال متقدم لإضافات جديدة في لغة الجافا سكريبت script
ولا يحتاج إلي اي برمجيات لتركيب installها علي سيرفر SERVER الموقع حيث انه من المعروف ان الجافا سكريبت script تعمل علي جهاز المستخدم وليس السيرفر SERVER . . .
الأجاكس هو بكل بساطة إعتماد بيانات معينة ومعالجتها وعمل بعض العمليات عليها ثم إرجاعها بدون تحديث update الصفحة مرة أخري . . .
كمثال :
في المنتديات الفي بي كلنا يعرف حركة الأجاكس الي ظهرت في الجيل 3.5 وما بعده وهو عند ضغط علي زر إعتماد الرد
يظهر لك جملة joomla + صورة للتحميل يقول لك جاري إعتماد المشاركة وفجأة تظهر المشاركة الجديدة
هل تم عمل تحديث update للصفحة ؟؟؟
بالطبع لا
إذا ماذا حدث ؟؟ دعونا نتعرف علي ألية عمل الأجاكس الان كفكرة ومن ثم نتعرض لها كتطبيق . . . أتمني ان أحوذ علي كامل إنتباهكم الفكرة سهله ولكن تحتاج لتركيز
-------------------------
بكل بساطة سيكون لدينا 5 عناصر أساسية في الأجاكس
خلونا ناخدهم واحده واحده ونطبق كلامنا علي نظام تسجيل الدخول في هذا السكريبت script :
http://www.yazeedalrajhi.com
أول عنصر : مكان إدخال البيانات وفي مثالنا هنا ستكون هذه البيانات هي إسم المستخدم وكلمة المرور وسيكون الكود code الخاص بها كالتالي :
رمز PHP:
<code style="white-space:nowrap"> <code> <input name="meuser" id="meuser" size="15" maxlength="32" class="brdr" type="text">
<input name="password" id="password" size="15" maxlength="20" class="brdr" type="password">
</code> </code>
نلاحظ أننا خلال هذه الكود code قمنا بعمل التالي :
قمنا بعمل مكانين لإدخال البيانات عن طريق التاج input قمنا بإعطاء لكل مكان إسم و id والباقي لا يهم ويمكنك حذفه بالكامل .
ثاني عنصر : زر إعتماد البيانات و تشغيل دالة الجافا سكريبت script المسئولة عن إرسال البيانات وكما نسميها نحن بالإنجليزي Event Handler .
وستكون عبارة عن الكود code التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> <input class="btn" onclick="getPage();" value="دخول" name="B2" type="button">
</code> </code>
قمنا في هذا الكود code بعمل رز وعملنا Event Handler وهو onclick="getPage();" بحيث إذا تم الضغط علي هذا الزر يقوم بتشغيل دالة getpage() وسنعرف فيما بعد مكان وجود هذه الدالة .
ثالث عنصر : المكان الذي سيوجد فيه هذا الكود code والذي سيتم إختفائه عقب عمل إعتماد وسيظهر مكانه نتيجة تسجيل الدخول وسكون هذا المكان عبارة عن وسم div سنضع كل ماذكر أعلاه داخل وسم div ونعطي هذا الوسم id لنستطيع التعامل معه من خلال الجافا سكريبت script وذلك عن طريق الكود code التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="Login">ضع هنا كود code المذكور في العنصر الأول والثاني</div>
</code> </code>
رابع عنصر : دالة إحضار القيمة من الحقول وإرسالها لصفحة العمليات وسنعرف ماهي صفحة العمليات فيما بعد .
وكود code الدالة سيكون كالتالي وسنضعه في اول السكريبت script في تاج الـHead :
رمز PHP:
<code style="white-space:nowrap"> <code> function getPage(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
var meuser = document.getElementById("meuser").value;
var password = document.getElementById("password").value;
xmlhttp.open('GET','login-check.php?do=check&meuser=' + meuser + '&password=' + password + '&remember_me=' + remember_me , true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
document.getElementById('Login').innerHTML = '<p align="center"><img border="0" src="loading.gif"></p>';
if (xmlhttp.readyState==4) {
var content = xmlhttp.responseText;
if( content ){
document.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
return;
}
</code> </code>
هنا ستبدأ كل الصعوبة ولكن ليست صعوبة بالشكل المتخيل فأعتقد ان الأمر حتي الان سهل صح ؟؟
هذا الكود code سنقوم بتجزئته لعدة أجزاء وشرح طريقةه
أولا :
رمز PHP:
<code style="white-space:nowrap"> <code> var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
</code> </code>
هذا الكود code ستقوم بوضعه في كل مره ستقوم فيها بإستخدام تقنية الأجاكس بدون تعديل اي حرف فيه وهو بإختصار يقوم بعمل أوبجكت من الكلاس الخاصة بإرسال وتلقي البيانات في الجافا سكريبت script <<< لو مافهمت شيء من هالكلام ماعليك طنشه ماله لازمه الحين
الجزء الثاني :
رمز PHP:
<code style="white-space:nowrap"> <code> var meuser = document.getElementById("meuser").value;
var password = document.getElementById("password").value;
</code> </code>
من خلال هذا الكود code قمنا بجلب البيانات من الإنبوت عن طريق الـid الخاص به ووضعناه في متغيرات ليسهل التعامل معهم خلال الكود code الخاص بنا
الجزء الثالث :
رمز PHP:
<code style="white-space:nowrap"> <code> xmlhttp.open('GET','login-check.php?do=check&meuser=' + meuser + '&password=' + password + '&remember_me=' + remember_me , true);
</code> </code>
من خلال هذا الكود code قمنا بإرسال قيم المتغيرات إلي صفحة إسمها login-check.php للتأكد منها ومن خلال هذه الصفحة سيتم الرد علينا بتسجيل الدخول الصحيح ام لا . . .
ولنتخيل مثلا أننا أدخلنا إسم مستخدم :
TH3 C0D3R
وكذلك كلمة المرور :
TH3 C0D3R
سيكون شكل الرابط كالتالي :
رمز PHP:
<code style="white-space:nowrap"> <code> login.php?do=check&meuser=TH3C0D3r&password=TH3C0D3R
</code> </code>
الجزء الرابع من كود code الدالة :
وهو الخاص من تأكد وجود رد من الملف الذي تم إرسال المعلومات له من عدمه
ففي حال عدم وجود رد سيتم إظهار صورة التحميل اما في حال وجود رد سيتم إظهار نتيجة هذا الرد
ملحوظة : ده شرح طريقة عام للكود code ولن تحتاج لتغيير هذا الكود code إلا في حال تغيير إسم الـ div (العنصر الثالث) فكل ماعليك فعله هو تغيير إسم الديف في الكود code التالي من Login إلي إسم الديف الجديد
وإذا كنت في حاجه لفهم كيفية عمل الكود code ده أستطيع شرح طريقةه بالتفصيل خلال احد ردودي القادمة .
رمز PHP:
<code style="white-space:nowrap"> <code> xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
document.getElementById('Login').innerHTML = '<p align="center"><img border="0" src="templates/deafult/images/loading.gif"></p>';
if (xmlhttp.readyState==4) {
var content = xmlhttp.responseText;
if( content ){
document.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
</code> </code>
يتبقي الأن العنصر الخامس في الية عمل الأجاكس وهو صفحة login-check.php
الصفحة بكل بساطة ستستلم المتغيرات عن طريق المصفوفة $_GET وسيتم عمل التأمين اللازم للبيانات علشان ما يحصل SQL INJECTION او FILE INCLUDE عن طريق الدوال الموضحه هنا في القسم
ومن ثم نقوم بعمل إستعلام في قاعدة البيانات عن أسم المستخدم وكلمة المرور ونقارن بينهم وبين المعلومات التي تم إرسالها في هذه الصفحة ونستخدم الدالة echo لإخراج رسالة بنجاح تسجيل الدخول من عدمه مع فتح سيشن جديدة او عمل كوكيز جديد
الخطوة الخامسة هي خطوه سهله قمت بالتعليق عليها سريعا ولم اقم بشرح طريقةها لإن لها شروحات كثيره في القسم هنا
أتمني ان تكون وضحت الفكرة وان يكون هناك تطبيق عليها وان توريني كيف راح تسوون تسجيل خروج أجاكس برضه
أي أسئلة او إستفسارات انا حاضر . . .
ط§ظ„ط£ط¬ط§ظƒط³ ظ„ظ„ظ…ط¨طھط¯ط¦ظٹظ† ظپظٹ ظ‡ط°ظ‡ ط§ظ„طھظ‚ظ†ظٹط© . . . طھظپط¶ظ„ظˆط§ ظˆطھط¹ط±ظپظˆط§ ط¹ظ„ظٹ ظپظƒط±ط© ط§ظ„ط¹ظ…ظ„ . . . .
رد مع اقتباس
