เขียนคำสั่ง แสดงผล-แบ่งหน้ารายการสินค้า โดยใช้เทคนิค AJAX

วันพฤหัสบดีที่ 15 ธันวาคม พ.ศ. 2554

เขียนคำสั่ง แสดงผล-แบ่งหน้ารายการสินค้า โดยใช้เทคนิค AJAX

เนื่องจากบทความก่อนหน้า มีเนื้อหาค่อนข้างซับซ้อน ทำให้บางคนอาจต้องใช้เวลาทำความเข้าใจค่อนข้างนาน ผมก็เลยทำบทความนี้ขึ้นมา เพราะ Code ที่ใช้ไม่ค่อยซับซ้อน และเขียนคำสั่งเพียงไม่กี่บรรทัด ก็สามารถได้ผลลัพธุ์ตามที่เราต้องการแล้วล่ะครับ เพื่อทำให้เรามองเห็นการใช้เทคนิคแบบ AJAX ได้เข้าใจมากขึ้นครับ และสามารถนำไปประยุกต์ใช้กับ Web Application ของคุณได้
บทความนี้เราจะได้เห็นการใช้เทคนิค AJAX ในการแสดงรายการสินค้าจากร้านค้าออนไลน์หรือเว็บขายของของเรา โดยเราจะมีการเขียนคำสั่งแบ่งหน้าข้อมูลอีกด้วย และเราจะใช้ jQuery (JavaScript Framework) มาช่วยในการเขียนสคริป จาวาสคริปต์ ครับ เพื่อช่วยให้เราเขียนคำสั่งได้สั้นและได้ผลลัพธุ์ที่รวดเร็วยิ่งขึ้น และใน jQuery เอง ก็มี Library ของ AJAX อยู่ด้วย ทำให้รองรับการแสดงผลได้ทุก Browserเลยครับ
ให้สร้างไฟล์ .php ขึ้น 2 ไฟล์ ตั้งชื่อ showproduct1.php,showproduct2.php
ไฟล์ showproduct1.php ให้พิมพ์คำสั่ง html และ jQuery (AJAX) ดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">
  //2011 Script By php-for-ecommerce.blogspot.com
  var divload;//ตัวแปรเก็บค่าLoadding
  $(document).ready(function(){
  $.showproduct("showproduct2.php","show-product");
  });
  $.loadding=function(){//แสดงขณะโปรแกรมกำลังประมวลผล
  if($("#loadding").length==0){
  $("body").append('<div id="loadding"></div>');
  divload=$("#loadding");
  }else{
  divload=$("#loadding");
  }
  divload.css({'background-color':'#FFFFFF','background-image':'url(loader.gif)','background-position':'center','opacity':0.7});
  divload.css({'background-repeat':'no-repeat','position':'absolute','left':'0px','top':'0px','width':'100%','height':'100%','display':'none'});
  }
  $.showproduct=function(ajaxurl,areashow){
  $.loadding();
  $.ajax({
  url: ajaxurl,
  beforeSend :function(){
  divload.fadeIn();
  },
  success: function(data) {
  $("."+areashow).html(data);
  divload.fadeOut();
  }
  });
  }
  function pagiClick(dt){
  $.showproduct(dt.href,"show-product");
  var url=dt.href.split("?");
  window.location.hash=url[1];
  }
  </script>
  <title>Showproduct-Pagination-AJAX</title>
  </head>
  <body>
  <div class="show-product"></div>
  </body>
  </html>

Codeไม่มีอะไรมากครับ เป็นไฟล์ที่ทำหน้าที่ร้องขอ (Request) ไฟล์ showproduct2.php แล้วนำค่า Response จากไฟล์ มาแสดงใน Tag div ที่มี Attribute Class ชื่อ show-product ในไฟล์ showproduct1.php ครับ
ไฟล์ showproduct2.php ไฟล์ที่ทำหน้าที่รับค่าจากไฟล์ showproduct1.php มาประมวลผล และผลลัพธุ์จะถูก Response ไปแสดงที่ไฟล์ showproduct1.php ครับ
ให้พิมพ์ code ดังนี้

<?php
  //2011 Script By php-for-ecommerce.blogspot.com
  $conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
  mysql_select_db('db_exshop');//เลื่อกฐานข้อมูล
  mysql_query("SET NAMES 'utf8'");
  header ('Content-type: text/html; charset=utf-8');
  $sql='SELECT * FROM tb_product ';
  $pagelen=5;//จำนวนข้อมูลต่อหน้า
  $numrang=9;#ระยะห่างระหว่างจำนวนเลขหน้า
  $page=$_GET['page']*1;
  if($page==''){ $page=1; }
  $CountPd = mysql_fetch_array(mysql_query('SELECT count(pd_id) FROM tb_product'));
  $totalrecords= $num_rows = $CountPd[0];
  $totalpage = ceil($num_rows / $pagelen);
  $goto = ($page-1) * $pagelen;
  $start=$page-$numrang;
  $endd=$page+$numrang;
  if ($start <= 1) $start = 1;
  if($endd >= $totalpage)$endd=$totalpage;
  $sqlshopd = $sql." LIMIT ".$goto.",".$pagelen;
  $rsShowProduct=mysql_query($sqlshopd) ;
?>
  <table width="750" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td width="224"><strong>รูปสินค้า</strong></td>
  <td width="520"><strong>รายละเอียด</strong></td>
  </tr>
  <tr>
  <td colspan="2" align="right"><?php
  if ($page > 1) { $back = $page - 1;
  echo ' <a href="'.$_SERVER['PHP_SELF'].'?page=1" class="pagi" onclick="pagiClick(this); return false;">First</a> ';
  echo ' <a href="'.$_SERVER['PHP_SELF'].'?page='.$back.'" class="pagi" onclick="pagiClick(this); return false;">&laquo;</a> ';
  if ($start > 1) {
  echo ' ... ';
  }
  }
  if($totalpage >1){
  for($i=$start ; $i<=$endd ; $i++){
  if ($i == $page ) {
  echo $i;
  } else {
  echo ' <a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" class="pagi" onclick="pagiClick(this);return false;">'.$i.'</a> ';
  }
  }
  }
  if ($page< $totalpage) {
  $next = $page +1;
  if ($endd < $totalpage) {
  echo " ... ";
  }
  echo ' <a href="'.$_SERVER['PHP_SELF'].'?page='.$next.'" class="pagi" onclick="pagiClick(this); return false;">&raquo;</a> ';
  echo ' <a href="'.$_SERVER['PHP_SELF'].'?page='.$totalpage.'" class="pagi" onclick="pagiClick(this); return false;">Last</a> ';
  }
  ?></td>
  </tr>
  <?php while($ShowProduct=mysql_fetch_array($rsShowProduct)){?>
  <tr>
  <td valign="top"><img src="../img_pd/<?=$ShowProduct['pd_img']?>" width="144"></td>
  <td valign="top"><strong><?=$ShowProduct['pd_name'];?></strong>
  <br>
  <br> <?=$ShowProduct['pd_detail']?></td>
  </tr>
  <?php } ?>
  </table>
  <?php
  mysql_free_result($rsShowProduct);
  mysql_close($conn);
  ?>

เมื่อพิมพ์ Code ถูกต้องแล้ว ให้ Run ไฟล์ showproduct1.php ขึ้นมาครับ จะแสดงสินค้าจากร้านค้าออนไลน์ (เว็บขายของ) แสดงผลลัพธ์ดังรูป