เขียนคำสั่ง แสดงผล-แบ่งหน้ารายการสินค้า โดยใช้เทคนิค AJAX
 |
บทความนี้เราจะได้เห็นการใช้เทคนิค 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;">«</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;">»</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 ขึ้นมาครับ จะแสดงสินค้าจากร้านค้าออนไลน์ (เว็บขายของ) แสดงผลลัพธ์ดังรูป |
| ไฟล์ showproduct1.php |
|
| ไฟล์ showproduct1.php ตอน Loadding... |
ขอบคุณมากครับ
ตอบลบขอบคุณที่เป็นแสงเทียนส่องสว่างให้ ในยามที่ผมกำลังมืดมิดครับ