التصويت عن طريق Php و Ajax

مُجَاهِد · #1 14-08-2007, 02:20 مساء

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

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

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

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

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

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

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

هذه هي صفحة HTML فلنسمها مثلا " poll.html " ، و هي تحتوي على فورم 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 " على الخادم ...

ملاحظة هامة : يسمح نقل الدرس و لكن بشرط كتابة التالي في النهاية و بخط واضح " المصدر : منتدى بي اتش بي ... montadaphp.net "

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

تحياتي ...

المواضيع المتشابهه
الموضوع / كاتب الموضوع
التعامل بين الـ Php و Ajax و قاعدة البيانات (كاتب الموضوع : مُجَاهِد)
إيجابيات وسلبيات الـ Ajax (كاتب الموضوع : مُجَاهِد)
مقدمة في الأجاكس (AJAX) والـ XMLHttpRequest (كاتب الموضوع : مُجَاهِد)
Lightbox2 - شاهد صورك بتقنية الـ AJAX (كاتب الموضوع : مُجَاهِد)
سكربتات Ajax يمكن التعديل عليها بسهولة (كاتب الموضوع : مُجَاهِد)

العاب	العاب بنات	العاب اطفال	العاب اكشن	العاب حربية
العاب سيارات	العاب ذكاء	العاب قتال	العاب رياضية	العاب جميلة

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