PHP এবং AJAX ভোট

AJAX ভোট

এই AJAX উদাহরণে, আমরা একটি ভোট প্রোগ্রাম দেখাব যা, ওয়েবসাইটটি পুনরায় লোড না করেই, ফলাফল পাওয়া যাবে。

এখন আপনি PHP এবং AJAX-এর পছন্দ করেন?

Yes:
No:

এই উদাহরণে চারটি উপাদান রয়েছে:

  • HTML ফর্ম
  • JavaScript
  • PHP পাতা
  • ফলাফল সংরক্ষণকারী টেক্সট ফাইল

HTML ফর্ম

এটি একটি HTML পাতা। এটি একটি সাধারণ HTML ফর্ম এবং একটি JavaScript ফাইলের সংযোগ নিয়ে আছে:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>আপনি PHP এবং AJAX-কে এতদিন কম্পলক্ষ্য করছেন কি?</h2>
<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

উদাহরণ ব্যাখ্যা - HTML ফর্ম

যেমন আপনি দেখতে পাচ্ছেন, উপরোক্ত HTML পাতায় একটি সাধারণ HTML ফর্ম আছে, যার মধ্যে <div> ইউনিটটি দুটি রেডিও বটন নিয়ে আছে。

ফর্মটি এমনভাবে কাজ করে:

  • যখন ব্যবহারকারী "হ্যাঁ" বা "না" নির্বাচন করবে, তখন একটি ইভেন্ট ট্রিগার হয়
  • ইভেন্ট ট্রিগার হলে, getVote() ফাংশন চালু হয়
  • ফর্মটির চারপাশে "poll" নামক <div> আছে। getVote() ফাংশন থেকে ডাটা ফেরত পাওয়ার সময়, ফর্মটির স্থানে ফেরত পাওয়া ডাটা ফর্মটিকে প্রতিস্থাপন করে。

টেক্সট ফাইল

ভোট প্রক্রিয়ার পরিণাম সংগ্রহ করা হয় টেক্সট ফাইল (poll_result.txt) এর মধ্যে。

এমনভাবেই:

0||0

প্রথম সংখ্যা "হ্যাঁ" ভোটকে ইঙ্গিত করে, দ্বিতীয় সংখ্যা "না" ভোটকে ইঙ্গিত করে。

মন্তব্য:মনে রাখুন শুধুমাত্র আপনার web সার্ভারকেই এই টেক্সট ফাইল সম্পাদনের অনুমতি দিন। অন্য কেউকেই প্রবেশ অনুমতি দেওয়া না, যেমন একই সাথে web সার্ভার (PHP) কেবল。

JavaScript

JavaScript 代码存储在 "poll.js" 中，并于 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==৪ || 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
}

উদাহরণ ব্যাখ্যা:

stateChanged() এবং GetXmlHttpObject() ফাংশন PHP এবং AJAX রিকোর্ড অনুরোধ এই অধ্যায়ের উদাহরণ একইভাবে

getVote() ফাংশন

যখন ব্যবহারকারী HTML ফর্মে "yes" বা "no" নির্বাচন করেন, তখন এই ফাংশন বাস্তবায়িত হয়

  1. সার্ভারের কাছে পাঠানো হওয়ার ইউরি (ফাইলনাম) নির্ধারণ করা হয়
  2. ইউরি তে (vote) পারামিটার যোগ করা হয়, পারামিটারে ইনপুট ফিল্ডের কনটেন্ট রয়েছে
  3. র‍্যান্ডম সংখ্যা যোগ করে, সার্ভার ক্যাশেড ফাইল ব্যবহার করা হয় না
  4. GetXmlHttpObject() ফাংশন ব্যবহার করে XMLHTTP অবজেক্ট তৈরি করা হয়, এবং অবজেক্টকে কোনও পরিবর্তন ঘটানোর সময় stateChanged() ফাংশন বাস্তবায়িত করতে বলা হয়
  5. দেওয়া ইউরি দ্বারা XMLHTTP অবজেক্ট খোলা হয়
  6. সার্ভারের কাছে HTTP রিকোর্ড পাঠানো হয়

PHP পাতা

জাভাস্ক্রিপ্ট কোড দ্বারা ব্যবহৃত সার্ভার পাতা হচ্ছে "poll_vote.php" নামক একটি সাধারণ PHP ফাইল。

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[০]);
$yes = $array[০];
$no = $array[১];
if ($vote == ০)
 {
 $yes = $yes + ১;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</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>No:</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>

উদাহরণ ব্যাখ্যা:

ভোট মূল্য JavaScript থেকে এসেছে, তারপর এটি হবে:

  1. "poll_result.txt" ফাইলের কনটেন্ট পাওয়া
  2. ফাইলের কনটেন্টকে বদলে রাখো, এবং পছন্দিত বদলে রাখো ভালো করো 1
  3. ফলাফল পরিবর্তন "poll_result.txt" ফাইলে লিখে দিন
  4. গ্রাফিক্যাল ভোট ফলাফল প্রদর্শন