تابع موضوعات المنتدى الانتساب تعليمات س - ج المفكرة بحث مواضيع اليوم إشارة الأقسام مقروءة

مواقع صديقة: تعلم البي اتش بي - تصميم نت - أفضل استضافة


عودة   منتدى بي اتش بي PHP > قسم لغة بي اتش بي PHP LANGUAGE > دروس بي اتش بي PHP Lessons > أجاكس AJAX

أجاكس AJAX دروس وأكواد عن تقنية أجاكس AJAX وكيفية استخدامها في PHP لبناء مواقع تفاعلية


إضافة رد
 
LinkBack أدوات الموضوع طريقة العرض
قديم 10-06-2007, 06:12 PM   #1 (permalink)
عضو فعال
 
تاريخ الانتساب: 10-02-2007
المكان: aLGERIA
مشاركات: 473
مشاركات المدونة: 2
مستوى السمعة : 2
aMINE سيحقق الشهرة بما فيه الكفاية قريباً
Lightbulb التصويت عن طريق PHP و AJAX

السلام عليكم ...

التصويت عن طريق PHP و AJAX ...

في درسنا هذا سنقوم بوضع تصويت و يتم عرض النتيجة بعد الإختيار دون إعادة فتح الصفحة ....

سوف نحتاج لعمل الدرس ...

- صفحة HTML
- صفحة PHP
- ملف جافا سكريبت
- ملف نصي ، لحفظ النتائج

لنبدأ العمل الآن ...

أولا: صفحة الـ HTML ...

هذه هي صفحة HTML فلنسمها مثلا " poll.html " ، و هي تحتوي على فورم HTML و رابط للجافا سكريبت ...
كود هتمل:
<html>
<head>
<script src="poll.js"></script> 
</head>
<body>

<div id="poll" align=center>
<h2>هل أحببت الأجاكس ؟</h2>

<form>
نعم
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br>
لا 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>

</body>
</html> 
شرح الصفحة ...

تحتوي الصفحة كما ترون أعلاه على فورم HTML داخل الوسم <div> و معه اثنان من عناصر الإختيار ( radio buttons )

و الفورم يعمل هكذا ...

- يقع الحدث عند التصويت على أحد الخيارين " نعم " أو " لا "
- و عند وقوع الحدث يتم تنفيذ العملية getVote()
- الوسم <div> الذي يحيط بالفورم يدعى " poll " ، و عند إعادة البيانات من عملية getVote() يتغير الفورم

ثانيا: الملف النصي ...


فلنسمي هذا الملف " poll_result.txt " ، و به يتم تخزين بيانات التصويت ...

و يخزن على الشكل الآتي:
كود:
0||0
العدد الأول ( على اليسار ) يمثل " نعم " ، و الآخر يمثل " لا "

ملاحظة : لا تنسى أن تعطي تصريح الكتابة فقط للخادم لا غير ...

ثالثا: ملف الجافا سكريبت ...

نعطيه اسم " poll.js " ، و هو الملف الذي ربطناه بصفحة الـ HTML و التي سميناها " poll.html "
كود:
var xmlHttp

function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}
شرح الملف ...

العملية getVote()

تنفذ هذه العملية عند إختيار " نعم " أو " لا " في صفحة الـ HTML

- نحدد رابط ( اسم الملف ) للإرسال للخادم
- نضيف البارامتر " vote " للرابط مع محتوى حقل الـ input
- نضيف عدد عشوائي لمنع استخدام خدمة الملف المخبأ ( cached file )
- طلب عملية GetXmlHttpObject لإنشاء كائن XMLHTTP ، و إخبار الكائن بتنفيذ العملية المسماة stateChanged عند حدوث التغيير
- فتح كائن XMLHTTP مع الرابط المعطى
- إرسال طلب HTTP إلى الخادم

رابعا: صفحة الـ PHP ...

نعطيها اسم " poll_vote.php "

كود PHP:
<?php
$vote 
$_REQUEST['vote'];

// الحصول على محتويات الملف النصي
$filename "poll_result.txt";
$content file($filename);

// وضع المحتويات في مصفوفة
$array explode("||"$content[0]);
$yes $array[0];
$no $array[1];

if (
$vote == 0)
 {
 
$yes $yes 1;
 }
if (
$vote == 1)
 {
 
$no $no 1;
 }

// إدراج التصويتات في الملف النصي
$insertvote $yes."||".$no;
$fp fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>

<div align=center><h2>النتيجة</h2>
<table>
<tr>
<td>نعم</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>لا</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
</div>
يحتوي الملف على:

- الحصول على محتوى الملف النصي " poll_result.txt "
- وضع محتوى الملف في المتغيرات و الإضافة إلى المتغير المصوت عليه
- طباعة النتيجة في الملف النصي " poll_result.txt "
- في الأخير ينتج رسم بياني لنتيجة التصويت

يمكنك تحميل ملفات الدرس من المرفقات ، و تشغيل ملف " poll.html " على الخادم ...

ملاحظة هامة :
هذا الدرس مترجم خصصيصا لمنتديات بي اتش بي من موقع W3Schools، و هذا هو رابط الدرس...

بإنتظار الردود المشجعة ...

تحياتي ...
الملفات المرفقة
نوع الملف : rar Poll.rar (1.5 كيلو بايت, 448 قراءة)

قام بآخر تعديل aMINE يوم 16-08-2008 في 02:43 PM
aMINE غير متصل   رد مع اقتباس
قديم 10-06-2007, 07:36 PM   #2 (permalink)
عضو فعال
 
الصورة الرمزية لـ enigma
 
تاريخ الانتساب: 04-03-2007
المكان: العراق
مشاركات: 655
مستوى السمعة : 2
enigma على طريق التميز و النجاح
افتراضي رد : التصويت عن طريق PHP و AJAX

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

إن شاء الله نصير كذلك في هذا المنتدى

لكن نحن في طور التعلم الآن





ربي يحفظك
تقبل تحياتي
enigma غير متصل   رد مع اقتباس
قديم 10-06-2007, 09:34 PM   #3 (permalink)
* أبو عمر *
 
الصورة الرمزية لـ coder
 
تاريخ الانتساب: 24-12-2006
المكان: مصر
السن: 30
مشاركات: 1,773
مشاركات المدونة: 2
مستوى السمعة : 10
coder على طريق التميز و النجاح
افتراضي رد : التصويت عن طريق PHP و AJAX

ممتاز بارك الله فيك أخي aMINE

سكريبت رائع بحق ويلزم لاي موقع

جزاك الله كل خير

اقتراحات في حال رغبت بالتطوير:
1- اعتماد قواعد البيانات
2- امكانية التصويت بس مرة واحدة
3- لوحة تحكم بسيطة للتحكم في التصويتات
__________________
لضمان رد سريع على استفسارك أو موضوعك
* تأكد من البحث في المنتدى قبل أن تسأل
* احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك
* قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها
coder متصل الآن   رد مع اقتباس
قديم 10-06-2007, 10:00 PM   #4 (permalink)
عضو فعال
 
تاريخ الانتساب: 10-02-2007
المكان: aLGERIA
مشاركات: 473
مشاركات المدونة: 2
مستوى السمعة : 2
aMINE سيحقق الشهرة بما فيه الكفاية قريباً
افتراضي رد : التصويت عن طريق PHP و AJAX

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

إن شاء الله نصير كذلك في هذا المنتدى

لكن نحن في طور التعلم الآن

ربي يحفظك
تقبل تحياتي
اقتباس:
الكاتب : coder عرض المشاركة
ممتاز بارك الله فيك أخي aMINE

سكريبت رائع بحق ويلزم لاي موقع

جزاك الله كل خير

اقتراحات في حال رغبت بالتطوير:
1- اعتماد قواعد البيانات
2- امكانية التصويت بس مرة واحدة
3- لوحة تحكم بسيطة للتحكم في التصويتات
السلام عليكم ...

أولا شكرا لكما على المرور ...

لكن لا أدري كيف فهمتما أنه سكريبت ، إنه درس لعمل تصويت عن طريق PHP و AJAX

و كل ما فعلته أني وضعت التطبيق في المرفقات ...

و لكن أفكارك في التطوير جميلة حقا أخي محمود ، و متى فرغت سوف أقوم بذلك ( على أساس مشاغلي كثيرة ) ...

تحياتي ...
aMINE غير متصل   رد مع اقتباس
قديم 11-06-2007, 01:16 AM   #5 (permalink)
* أبو عمر *
 
الصورة الرمزية لـ coder
 
تاريخ الانتساب: 24-12-2006
المكان: مصر
السن: 30
مشاركات: 1,773
مشاركات المدونة: 2
مستوى السمعة : 10
coder على طريق التميز و النجاح
افتراضي رد : التصويت عن طريق PHP و AJAX

اقتباس:
الكاتب : aMINE عرض المشاركة
السلام عليكم ...

أولا شكرا لكما على المرور ...

لكن لا أدري كيف فهمتما أنه سكريبت ، إنه درس لعمل تصويت عن طريق PHP و AJAX

و كل ما فعلته أني وضعت التطبيق في المرفقات ...

و لكن أفكارك في التطوير جميلة حقا أخي محمود ، و متى فرغت سوف أقوم بذلك ( على أساس مشاغلي كثيرة ) ...

تحياتي ...
صحيح ده درس

طيب.... شكرا على الدرس الرائع

فعلا نفتقد هذه النوعية من المواضيع التي لم تناقش من قبل
__________________
لضمان رد سريع على استفسارك أو موضوعك
* تأكد من البحث في المنتدى قبل أن تسأل
* احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك
* قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها
coder متصل الآن   رد مع اقتباس
قديم 11-06-2007, 01:25 PM   #6 (permalink)
عضو فعال
 
تاريخ الانتساب: 10-02-2007
المكان: aLGERIA
مشاركات: 473
مشاركات المدونة: 2
مستوى السمعة : 2
aMINE سيحقق الشهرة بما فيه الكفاية قريباً
افتراضي رد : التصويت عن طريق PHP و AJAX

اقتباس:
الكاتب : coder عرض المشاركة
صحيح ده درس

طيب.... شكرا على الدرس الرائع

فعلا نفتقد هذه النوعية من المواضيع التي لم تناقش من قبل
السلام عليكم ...

العفو ... و إن شاء الله سأقوم بوضع المزيد من دروس الأجاكس ...

تحياتي ...
aMINE غير متصل   رد مع اقتباس
قديم 11-06-2007, 04:27 PM   #7 (permalink)
عضو فعال
 
الصورة الرمزية لـ General C
 
تاريخ الانتساب: 04-05-2007
المكان: البحرين
مشاركات: 233
مستوى السمعة : 2
General C على طريق التميز و النجاح
إرسال خطاب MSN إلى General C
افتراضي رد : التصويت عن طريق PHP و AJAX

ألف شكر يغالي

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

يعني اذا تستخدمهم راح يكون موقعك مطور كثير.........

و مع تحياتي

General C
General C غير متصل   رد مع اقتباس
قديم 11-06-2007, 09:11 PM   #8 (permalink)
عضو فعال
 
تاريخ الانتساب: 10-02-2007
المكان: aLGERIA
مشاركات: 473
مشاركات المدونة: 2
مستوى السمعة : 2
aMINE سيحقق الشهرة بما فيه الكفاية قريباً
افتراضي رد : التصويت عن طريق PHP و AJAX

اقتباس:
الكاتب : General C عرض المشاركة
ألف شكر يغالي

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

يعني اذا تستخدمهم راح يكون موقعك مطور كثير.........

و مع تحياتي

General C
السلام عليكم ...

شكرا على المرور ، و فعلا الجافا سكريبت و الأجاكس هما حياة الموقع ...

تحياتي ...
aMINE غير متصل   رد مع اقتباس
قديم 12-06-2007, 07:17 PM   #9 (permalink)
عضو فعال
 
تاريخ الانتساب: 10-02-2007
المكان: aLGERIA
مشاركات: 473
مشاركات المدونة: 2
مستوى السمعة : 2
aMINE سيحقق الشهرة بما فيه الكفاية قريباً
افتراضي رد : التصويت عن طريق PHP و AJAX

السلام عليكم ...

و هذا تطبيق آخر للدرس من هنا ...

أرجو أن نرى تفاعل أكبر و تطبيقات أخرى للدرس ...

بانتظاركم ، و إن أردتم أرفق لكم تطبيقي ...

تحياتي ...

قام بآخر تعديل aMINE يوم 17-06-2007 في 08:57 PM السبب: تعديل رابط المثال ...
aMINE غير متصل   رد مع اقتباس
قديم 24-06-2007, 03:55 PM   #10 (permalink)
عضو نشيط
 
الصورة الرمزية لـ HiMiTa
 
تاريخ الانتساب: 29-05-2007
مشاركات: 53
مستوى السمعة : 2
HiMiTa على طريق التميز و النجاح
افتراضي رد : التصويت عن طريق PHP و AJAX

السلام عليكم
الأجاكس لغة رائعة توفرمن الوقت و تريح المتصفح
لي سؤال . كيف أجعل النتائج تكون مرتبة بالشكل الذي أوده مثلا القيمة التي حضيت بأعلى ترتيب تاتي الأولى ثم تليها الأقل فالأقل ..
HiMiTa غير متصل   رد مع اقتباس
إضافة رد


زوار هذا الموضوع الآن : 1 (0 عضو و 1 ضيف)
 

(View-All Members who have read this thread : 30
3BkReNo0o, متعب, ميت احساس, aljnoon, Ben.Fat7i, البنفسجيه, الـشـبـح, coder, database, بلال كيالي, gaser, hsn67, خا999لد, imadeco, iSMaiLZ, Kariro, la7nal7ua, man in dark, man summits, Mido-9, mnndee_milan, Mr.x, najdsky, saleh88it, seamaan, stareagle, عادل شريف, عبدالباقى حفنى, غزوان, zaid aliraqi
أدوات الموضوع
طريقة العرض
عادي عادي

ضوابط المشاركة
غير مصرّح لك بنشر موضوع جديد
غير مصرّح لك بنشر ردود
غير مصرّح لك برفع مرفقات
غير مصرّح لك بتعديل مشاركاتك

وسوم vB : نشيط
كود [IMG] : نشيط
كود هتمل : خامل
Trackbacks are نشيط
Pingbacks are نشيط
Refbacks are نشيط

الانتقال السريع

مواضيع ذات صلة
الموضوع الكاتب المجلس المشاركات المشاركة الأخيرة
موقع فيه الكثير من اكواد Ajax live لغة Javascript 3 25-06-2008 12:48 PM
مشكله مع الا ajax ابن العراق لغة Javascript 1 31-05-2008 08:15 PM
طلب===> سكريبت التصويت Mr.a.saif قسم السكريبتات 3 13-04-2008 05:59 PM
مشكلة في كود Ajax أبو نور الدين مشاكل وحلول PHP Errors & Troubleshooting 2 25-03-2008 01:54 PM
[مشكلة]التصويت -الاجاكس واللغة العربية مادونا مشاكل وحلول PHP Errors & Troubleshooting 1 07-03-2008 01:36 AM


يمنع نقل أي من موضوعات المنتدى دون إذن كتابي مسبق من إدارة المنتدى، مع الشكر.
التوقيت حسب جرينتش +3. الساعة الآن 02:15 AM.