۲۷
تیر

جلسه ۵۶ : آموزش ایجاد نظر سنجی در Ajax

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن و کاربرانی که دوره ی آموزش php 7 را دنبال می کنند.
به پایان این دوره خوش آمدید! در جلسه گذشته به آموزش ایجاد جستجوی زنده در Ajax پرداختیم و آموختیم که AJAX می تواند برای ایجاد جستجوی کاربر پسند و تعاملی مورد استفاده قرار گیرد و لذا قابلیت جستجوی زنده آن می تواند مزایای بسیاری داشته باشد.
در این جلسه یعنی آخرین جلسه از این دوره آموزش ایجاد نظر سنجی در Ajax را به علاقمندان آن ارائه می نماییم.

آموزش ایجاد نظر سنجی در Ajax

مثال زیر یک نظرسنجی را نشان می دهد که نتیجه آن بدون بارگذاری مجدد نشان داده می شود.

نظر سنجی در Ajax در صورتی که متن یافت نشد

نظر سنجی در Ajax در صورتی که متن یافت شد

تشریح نمونه بالا – صفحه HTML

هنگامی که کاربر یک گزینه را انتخاب می کند، یک تابع به نام ()getVote اجرا می شود.
این عمل توسط رویداد “onclick” event صورت می گیرد:

مثال :

<html>
<head>
<script>
function getVote(int) {
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("poll").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","poll_vote.php?vote="+int,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<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>

<head>

function getVote(int) {

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else { // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (this.readyState==4 && this.status==200) {

document.getElementById("poll").innerHTML=this.responseText;

}

xmlhttp.open("GET","poll_vote.php?vote="+int,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form>

Yes:

<br>No:

</form>

</div>

</body>

</html>

تابع ()getVote موارد زیر را انجام می دهد:

ساخت یک شیء XMLHttpRequest.
اجرا تابع هنگامی که پاسخ سرور آماده است.
ارسال request یک فایل به سرور.
توجه داشته باشید که پارامتر (q) به URL اضافه می شود (با مقدار گزینه yes یا no).

فایل PHP

صفحه مورد نظر در سرور تحت نام جاوا اسکریپت یک فایل PHP به نام “poll_vote.php” است:

مثال :

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0) {
  $yes = $yes + 1;
}
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>

<?php

$vote = $_REQUEST['vote'];

//get content of textfile

$filename = "poll_result.txt";

$content = file($filename);

//put content in array

$array = explode("||", $content[0]);

$yes = $array[0];

$no = $array[1];

if ($vote == 0) {

$yes = $yes + 1;

}

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>

<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>

<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>

حالا مقدار از جاوا اسکریپت ارسال می شود و موارد زیر اتفاق می افتد:

دریافت محتوای فایل poll_result.txt.
قرار گرفتن محتوای فایل در متغیرها و انتخاب یکی از آن ها به عنوان متغیر انتخابی.
نوشتن نتیجه در poll_result.txt.
خروجی یک نمایش گرافیکی از نتیجه نظرسنجی.

فایل متنی

فایل متنی (poll_result.txt) جایی است که داده های نظرسنجی ذخیره می شوند.
مانند نمونه زیر :

مثال :

0||0

0||0

نکته

شماره اول نشان دهنده رای مثبت و شماره دوم نشان دهنده رای منفی است.

نکته

به هیچ کس اجازه دسترسی جز به سرور وب (php) را ندهید.

کلام آخر

در آخرین جلسه از دوره آموزش php 7، آموزش ایجاد نظر سنجی در Ajax را ارائه کردیم.
این دوره نیز به پایان رسید اما راه یادگیری همچنان ادامه دارد.
با دوره های آموزشی پی وی لرن همراه باشید.

جلسه ۵۵ : آموزش ایجاد جستجوی زنده در Ajax

QR: جلسه ۵۶ : آموزش ایجاد نظر سنجی در Ajax

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۶ : آموزش ایجاد نظر سنجی در Ajax

مقدمه

آموزش ایجاد نظر سنجی در Ajax

تشریح نمونه بالا – صفحه HTML

فایل PHP

فایل متنی

نکته

نکته

کلام آخر

لیست مطالب دوره

آموزش مقدماتی php 7

PHP7 Forms

PHP7 Advanced

MySQL Database

PHP7 XML

PHP7 - AJAX

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ