PHP و AJAX: مبحث نظرسنجی Live Search در PHP

Live Search در PHP

به قسمت آخر از سری آموزشی PHP 7 خوش آمدید.

تکنولوژی AJAX فقط برای کار با فایل های XML و ... نیست بلکه یکی از استفاده های آن قابلیت Live Search است. Live Search همان قابلیت پیشنهاد دادن گوگل در هنگام جست و جو است؛ مثلا زمانی که می نویسیم «چطور زندگی ....» گوگل پیشنهاداتی مانند زیر را بدون refresh شدن صفحه برایمان می آورد:

چطور زندگی کنیم؟
چطور زندگی شادی داشته باشیم؟
جطور زندگی خوبی داشته باشیم؟
و....

به این قابلیت Live Search می گویند و با AJAX انجام می شود. از مزایای Live Search نسبت به جست و جوهای قدیمی می توان به موارد زیر اشاره کرد:

نتایج هنگام تایپ کاربر به او نمایش داده می شوند.
هر چه بیشتر تایپ کنید، نتایج جزئی تر و جزئی تر می شوند.
اگر نتایج بیش از حد جزئی شدند می توانیم با حذف چند کاراکتر نتایج کلی تری را ببینیم.
در بسیاری از اوقات نتایج نمایش داده شده به کاربر ایده های جدیدی داده و او را راهنمایی می کند.
وب سایت شما مدرن تر به نظر می رسد.
و ...

به مثال زیر دقت کنید:

<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) { 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  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("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

در مثال بالا رویداد onkeyup را در نظر گرفته ایم. اگر این رویداد اتفاق بیفتد تابعی به نام ()showResult اجرا خواهد شد. از طرفی اگر در فیلد چیزی وجود نداشته باشد (str.length==0) تابع ()showResult محتوای placeholder را خالی کرده و از تابع خارج می شود (کلمه ی return) اما اگر محتویات آن خالی نباشد:

شیء XMLHttpRequest ساخته می شود.
تابعی ساخته می شود که هنگام آماده بودن پاسخ سرور اجرا می شود.
درخواست به یک فایل روی سرور ارسال می شود.
پارامتر q به همراه محتویات فیلد جست و جو به URL اضافه می شود.

فایل PHP که روی سرور مسئول بررسی این درخواست است livesearch.php نام دارد. سورس کد این فایل می گوید به دنبال عناوین موجود در یک فایل XML بگرد و اگر چیزی با جست و جو همخوانی داشت آن را ارسال کن:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
  $hint="";
  for($i=0; $i<($x->length); $i++) {
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1) {
      //find a link matching the search text
      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" . 
          $z->item(0)->childNodes->item(0)->nodeValue . 
          "' target='_blank'>" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" . 
          $z->item(0)->childNodes->item(0)->nodeValue . 
          "' target='_blank'>" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>

در این کد اگر درخواستی از سمت جاوا اسکریپت ارسال شده باشد (strlen($q) > 0) مراحل زیر انجام خواهد شد:

یک فایل XML در یک شیء XML DOM بارگذاری می شود.
بین تمام <title> ها گردش می شود تا عبارت جست و جو شده را پیدا کنیم.
قرار گرفتن پاسخ سرور در response$ (اگر بیشتر از یک نتیجه پیدا شد، تمام نتایج در متغیر قرار می گیرند).
اگر هیچ نتیجه ای پیدا نشود مقدار response$ روی عبارت no suggestion (نتیجه ای پیدا نشد) تنظیم می شود.

نظرسنجی در PHP

حتما قابلیت نظرسنجی را در سایت های مختلف دیده اید. این نظرسنجی ها بدون refresh شدن صفحه و پس از انتخاب یک گزینه توسط کاربر، نتایج را نمایش می دهند. بیایید با هم یک نظر سنجی بسازیم.

محتویات فایل HTML ما بدین صورت است:

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

در این صفحه بر اساس رویداد onclick تابعی به نام ()getVote اجرا خواهد شد. این تابع:

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

از طرف دیگر فایلی به نام 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>

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

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

محتویات فایل poll_result.txt به شکل زیر ذخیره می شوند:

0||0

عدد اول تعداد نظرات Yes و عدد دوم تعداد نظرات No را نشان می دهد.

نکته: به وب سرور خود اجازه دهید که به فایل های متنی دسترسی داشته باشد اما این اجازه را به هر فردی ندهید چرا که مشکلات امنیتی ایجاد می کند (فقط وب سرور کافی است).

این دوره ی آموزشی نیز به پایان رسید. در این دوره از هیچ کدام از دستورات منسوخ و قدیمی PHP استفاده نشد و اگر قابلیت جدیدی به PHP 7 اضافه شده بود برای شما توضیح داده شد. به هر حال امیدوارم از این سری آموزشی لذت برده باشید. قدم بعدی شما برای یادگیری، گذراندن دوره ی آموزشی پیشرفته PHP شیء گرا است، پیشنهاد می کنم حتما سری به این دوره بزنید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سینا عطایی

17 مرداد 1398

سلام الان که از live search گفتین من یاد elastic search افتادم میشه توضیح بدین چیه؟

امیر زوارمی

سلام دوست عزیز مبحث elastic search خیلی طولانی هست و نمیشه توی کامنت ها توضیح داد. به طور خلاصه یه روش برای اجرای جست و جوی سریع هست و REST API خودش رو برای کار با پایگاه داده داره. برای زبان php میتونید به repository زیر برید: https://github.com/elastic/elasticsearch-php

PHP و AJAX: مبحث Live Search و نظرسنجی

Live Search در PHP

نظرسنجی در PHP