Phân trang web không là vấn đề khó, nhưng chúng ta thường thấy dạng phân trang tương đối đơn giản , phức tạp nhất mình thấy là phân trang cho forums tự viết , add to cart .
Hôm này mình sẽ trình bày cái phân trang cho trang " Add to cart ", trang "Add to cart " như phần hướng dẫn trước , bây giời mình phân trang cho nó bởi vì nếu như số lương sản phẩm nhiều chúng ta không thể để nó ở một trang được mà phải chia ra nhiều trang.
Các bước thực hiện :
A. PHẦN "Add to cart ":
1. Tạo database : shopping
2. Tạo các table :
--
-- Table structure for table `customers`
--
CREATE TABLE IF NOT EXISTS `customers` (
`serial` int(11) NOT NULL auto_increment,
`name` varchar(20) collate latin1_general_ci NOT NULL,
`email` varchar(80) collate latin1_general_ci NOT NULL,
`address` varchar(80) collate latin1_general_ci NOT NULL,
`phone` varchar(20) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`serial`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=1 ;
--
-- Dumping data for table `customers`
--
-- --------------------------------------------------------
--
-- Table structure for table `orders`
--
CREATE TABLE IF NOT EXISTS `orders` (
`serial` int(11) NOT NULL auto_increment,
`date` date NOT NULL,
`customerid` int(11) NOT NULL,
PRIMARY KEY (`serial`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=1 ;
--
-- Dumping data for table `orders`
--
-- --------------------------------------------------------
--
-- Table structure for table `order_detail`
--
CREATE TABLE IF NOT EXISTS `order_detail` (
`orderid` int(11) NOT NULL,
`productid` int(11) NOT NULL,
`quantity` int(11) NOT NULL,
`price` float NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
--
-- Dumping data for table `order_detail`
--
-- --------------------------------------------------------
--
-- Table structure for table `products`
--
CREATE TABLE IF NOT EXISTS `products` (
`serial` int(11) NOT NULL auto_increment,
`name` varchar(50) collate latin1_general_ci NOT NULL,
`description` varchar(500) collate latin1_general_ci NOT NULL,
`price` float NOT NULL,
`picture` varchar(500) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`serial`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=7 ;
3. Tạo file "connect.php" :
<?php
$doman = 'localhost';
$username = 'root';
$password = 'huy';
$databasename = 'shopping';
$connect = mysql_connect($doman, $username, $password);
mysql_query("SET character_set_results=utf8", $connect);
mb_language('uni');
mb_internal_encoding('UTF-8');
mysql_select_db($databasename, $connect);
mysql_query("set names 'utf8'",$connect);
session_start();
?>
4. Tạo file "function.php" :
<?php
function get_product_name($pid){
$result=mysql_query("select name from products where serial=$pid");
$row=mysql_fetch_array($result);
return $row['name'];
}
function get_price($pid){
$result=mysql_query("select price from products where serial=$pid");
$row=mysql_fetch_array($result);
return $row['price'];
}
function remove_product($pid){
$pid=intval($pid);
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
if($pid==$_SESSION['cart'][$i]['productid']){
unset($_SESSION['cart'][$i]);
break;
}
}
$_SESSION['cart']=array_values($_SESSION['cart']);
}
function get_order_total(){
$max=count($_SESSION['cart']);
$sum=0;
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$q=$_SESSION['cart'][$i]['qty'];
$price=get_price($pid);
$sum+=$price*$q;
}
return $sum;
}
function addtocart($pid,$q){
if($pid<1 or $q<1) return;
if(is_array($_SESSION['cart'])){
if(product_exists($pid)) return;
$max=count($_SESSION['cart']);
$_SESSION['cart'][$max]['productid']=$pid;
$_SESSION['cart'][$max]['qty']=$q;
}
else{
$_SESSION['cart']=array();
$_SESSION['cart'][0]['productid']=$pid;
$_SESSION['cart'][0]['qty']=$q;
}
}
function product_exists($pid){
$pid=intval($pid);
$max=count($_SESSION['cart']);
$flag=0;
for($i=0;$i<$max;$i++){
if($pid==$_SESSION['cart'][$i]['productid']){
$flag=1;
break;
}
}
return $flag;
}
?>
5. Tạo file "products.php" :
<?php
include("/var/www/shopping/connect/connect.php");
include("/var/www/shopping/products/sony/functions.php");
if(isset($_REQUEST['command']))
{
if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){
$pid=$_REQUEST['productid'];
$q = 1;
if(is_array($_SESSION['cart'])){
$pid=intval($pid);
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
if($pid==$_SESSION['cart'][$i]['productid']){
$flag = 1;
break;
} else {
$flag = 0;
}
}
if($flag == 1)
{
$quan = $_SESSION['cart'][$i]['qty'];
$quan = $quan + 1;
$_SESSION['cart'][$i]['qty'] = $quan;
$i = $max;
} else {
$max=count($_SESSION['cart']);
$_SESSION['cart'][$max]['productid']=$pid;
$_SESSION['cart'][$max]['qty']=$q;
$i = $max;
}
}else{
$_SESSION['cart']=array();
$_SESSION['cart'][0]['productid']=$pid;
$_SESSION['cart'][0]['qty']=$q;
}
}
//addtocart($pid,1);
header("location: shoppingcart.php");
exit();
}
?>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th
{
border:1px solid blue;
background-color:green;
}
</style>
<script language="javascript">
function addtocart(pid){
document.form1.productid.value=pid;
document.form1.command.value='add';
document.form1.submit();
}
</script>
</head>
<body>
<form name="form1">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>
<div align="center">
<table cellpadding="2px" width="550px">
<?php
mysql_query("SET character_set_results=utf8", $connect);
$result="select * from products";
$result = mysql_query( $result, $connect);
while($row=mysql_fetch_array($result)){
?>
<tr>
<td><img src="<?php echo $row['picture'];?>" /></td>
<td> Name: <b><?php echo $row['name'];?></b><br/>
Description: <?php echo $row['description'];?><br/>
Price: $<?php echo $row['price'];?>
<br/><br/>
<input type="button" value="Add to Cart" onclick="addtocart(<?php echo $row['serial'];?>)" />
</td>
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
6. Tạo file "shoppingcart.php"
<?php
include("/var/www/shopping/connect/connect.php");
include("/var/www/shopping/products/sony/functions.php");
if(isset($_REQUEST['command']))
{
if($_REQUEST['command']=='delete' && $_REQUEST['pid']>0){
remove_product($_REQUEST['pid']);
}
else if($_REQUEST['command']=='clear'){
unset($_SESSION['cart']);
}
else if($_REQUEST['command']=='update'){
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$q=intval($_REQUEST['product'.$pid]);
if($q>0 && $q<=999){
$_SESSION['cart'][$i]['qty']=$q;
}
else{
$msg='Some proudcts not updated!, quantity must be a number between 1 and 999';
}
}
}
}
?>
<!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" />
<title>Shopping Cart</title>
<script language="javascript">
function del(pid){
if(confirm('Do you really mean to delete this item')){
document.form1.pid.value=pid;
document.form1.command.value='delete';
document.form1.submit();
}
}
function clear_cart(){
if(confirm('This will empty your shopping cart, continue?')){
document.form1.command.value='clear';
document.form1.submit();
}
}
function update_cart(){
document.form1.command.value='update';
document.form1.submit();
}
</script>
</head>
<body>
<form name="form1" method="post">
<input type="hidden" name="pid" />
<input type="hidden" name="command" />
<div style="margin:0px auto; width:600px;" >
<div style="padding-bottom:10px">
<h1 align="center">Giỏ Hàng Của Bạn </h1>
</div>
<div style="color:#F00"><?php if(isset($msg)) {echo $msg;}?></div>
<table border="3" cellpadding="5px" cellspacing="1px" style="font-family:Verdana, Geneva, sans-serif; font-size:11px; background-color:#E1E1E1" width="100%">
<?php
if(isset($_SESSION['cart']))
{
if(is_array($_SESSION['cart'])){
echo '<tr border="4" bgcolor=blue style="font-weight:bold"><td>Serial</td><td>Name</td><td>Price</td><td>Qty</td><td>Amount</td><td>Options</td></tr>';
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$q=$_SESSION['cart'][$i]['qty'];
$pname=get_product_name($pid);
if($q==0) continue;
?>
<tr bgcolor="#FFFFFF"><td><?php echo $i+1;?></td><td><?php echo $pname;?></td>
<td>$ <?php echo get_price($pid);?></td>
<td><input type="text" name="product<?php echo $pid;?>" value="<?php echo $q;?>" maxlength="3" size="2" /></td>
<td>$ <?php echo get_price($pid)*$q;?></td>
<td><a href="javascript:del(<?php echo $pid?>)">Remove</a></td></tr>
<?php
}
?>
<tr border="3" bgcolor=green ><td><b>Order Total: $<?php echo get_order_total();?></b></td><td colspan="5" align="right"> <input type="button" value="Continue Shopping" onclick="window.location='products.php'" /> <input type="button" value="Clear Cart" onclick="clear_cart()"> <input type="button" value="Update Cart" onclick="update_cart()"><input type="button" value="Place Order" onclick="window.location='billing.php'"></td></tr>
<?php
}
else{
echo "<tr bgColor='#FFFFFF'><td>There are no items in your shopping cart!</td>";
}
} else{
echo "<tr bgColor='#FFFFFF'><td>There are no items in your shopping cart!</td>";
}
?>
</table>
</div>
</form>
</body>
</html>
7. Tạo file "billing.php" :
<?php
include("/var/www/shopping/connect/connect.php");
include("/var/www/shopping/products/sony/functions.php");
if(isset($_REQUEST['command'])) {
if($_REQUEST['command']=='update'){
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$address=$_REQUEST['address'];
$phone=$_REQUEST['phone'];
$result=mysql_query("insert into customers values('','$name','$email','$address','$phone')");
$customerid=mysql_insert_id();
$date=date('Y-m-d');
$result=mysql_query("insert into orders values('','$date','$customerid')");
$orderid=mysql_insert_id();
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$q=$_SESSION['cart'][$i]['qty'];
$price=get_price($pid);
mysql_query("insert into order_detail values ($orderid,$pid,$q,$price)");
}
die('Thank You! your order has been placed!');
}
}
?>
<!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" />
<title>Billing Info</title>
<script language="javascript">
function validate(){
var f=document.form1;
if(f.name.value==''){
alert('Your name is required');
f.name.focus();
return false;
}
f.command.value='update';
f.submit();
}
</script>
<style type="text/css">
table, td
{
border:1px solid blue;
background-color:green;
}
</style
</head>
<body>
<div align="center">
<h1 align="center"> Mat Hang</h1>
<table border="2" cellpadding="2px">
<tr style="font-weight:bold">
<td> Mat Hang:</td>
<td> So Luong:</td>
<td>Don Gia:</td>
</tr>
<?php if(isset($_SESSION['cart'])){
if(is_array($_SESSION['cart'])){
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$q=$_SESSION['cart'][$i]['qty'];
$pname=get_product_name($pid);
?>
<tr><td> <?php echo $pname;?></td> <td> <?php echo $q;?> </td><td> <?php echo get_price($pid);?></td>
</tr>
<?php }?>
<?php }?>
<?php } ?>
</table>
</div>
<form name="form1" onsubmit="return validate()">
<input type="hidden" name="command" />
<div align="center">
<h1 align="center"> Thong Tin Khach Hang</h1>
<table border="1" cellpadding="2px">
<tr><td>Order Total:</td><td><?php echo get_order_total();?></td></tr>
<tr><td>Your Name:</td><td><input type="text" name="name" /></td></tr>
<tr><td>Address:</td><td><input type="text" name="address" /></td></tr>
<tr><td>Email:</td><td><input type="text" name="email" /></td></tr>
<tr><td>Phone:</td><td><input type="text" name="phone" /></td></tr>
<tr><td><input type=button onclick="window.print()" value='Print this page'></td><td><input type="submit" value="Place Order" /></td></tr>
</table>
</div>
</form>
</body>
</html>
=>Để chạy thử phần " Add to cart " các bạn nên sửa lại đường dẫn các file nha, insert dữ liệu vào table "products " : serial ,name, ..... .
B. PHẦN PHÂN TRANG :
1. Tạo file " pagination.css" :
@charset "utf-8";
/* CSS Document */
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 450px;
text-transform:capitalize;
}
tr{
background: #FFFFD9;
}
td,th {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
text-align:center
}
th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.paginate {
font-family:Arial, Helvetica, sans-serif;
padding: 3px;
margin: 3px;
}
.paginate a {
padding:2px 5px 2px 5px;
margin:2px;
border:1px solid #999;
text-decoration:none;
color: #666;
}
.paginate a:hover, .paginate a:active {
border: 1px solid #999;
color: #000;
}
.paginate span.current {
margin: 2px;
padding: 2px 5px 2px 5px;
border: 1px solid #999;
font-weight: bold;
background-color: #999;
color: #FFF;
}
.paginate span.disabled {
padding:2px 5px 2px 5px;
margin:2px;
border:1px solid #eee;
color:#DDD;
}
li{
padding:4px;
margin-bottom:3px;
background-color:#FCC;
list-style:none;}
ul{margin:6px;
padding:0px;}
2. Sửa nội dung file "products.php" ở phía trên như sau :
<?php
include("/var/www/shopping/connect/connect.php");
include("/var/www/shopping/products/sony/functions.php");
if(isset($_REQUEST['command']))
{
if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){
$pid=$_REQUEST['productid'];
$q = 1;
if(is_array($_SESSION['cart'])){
$pid=intval($pid);
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
if($pid==$_SESSION['cart'][$i]['productid']){
$flag = 1;
break;
} else {
$flag = 0;
}
}
if($flag == 1)
{
$quan = $_SESSION['cart'][$i]['qty'];
$quan = $quan + 1;
$_SESSION['cart'][$i]['qty'] = $quan;
$i = $max;
} else {
$max=count($_SESSION['cart']);
$_SESSION['cart'][$max]['productid']=$pid;
$_SESSION['cart'][$max]['qty']=$q;
$i = $max;
}
}else{
$_SESSION['cart']=array();
$_SESSION['cart'][0]['productid']=$pid;
$_SESSION['cart'][0]['qty']=$q;
}
}
//addtocart($pid,1);
header("location: shoppingcart.php");
exit();
}
?>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="pagination.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function addtocart(pid){
document.form1.productid.value=pid;
document.form1.command.value='add';
document.form1.submit();
}
</script>
</head>
<body>
<form name="form1">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>
<table width="450" border="1" align="center" cellspacing="0">
<tr>
<th width="25" scope="col">Sản Phẩm</th>
<th scope="col">Mô Tả sản Phẩm</th>
</tr>
<?php
$connect=mysql_connect("localhost","root","huy");
$sdb=mysql_select_db("shopping",$connect);
$tableName="products"; //page name
$targetpage = "products.php";
$limit =1; //limit of dispaly
$query = "SELECT COUNT(*) as num FROM $tableName";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages[num];
$stages = 1;
$page = mysql_escape_string($_GET['page']);
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data
$sel = mysql_query("select * FROM $tableName LIMIT $start, $limit");
while($row1=mysql_fetch_array($sel))
{
$id=$id=$row1['serial'];;
?>
<tr align="left" >
<td align="left" >
<img src="<?php echo $row1['picture'];?>" />
<?php echo $row1['name'];?>
<?php echo "<br/>";?>
<?php echo "<br/>";?>
Giá Bán:$<?php echo $row1['price'];?>
<?php echo "<br/>";?>
<?php echo "<br/>";?>
<input type="button" value=" Mua " onclick="addtocart(<?php echo $row1['serial'];?>)" />
<?php echo "<br/>";?>
</td>
<td> <?php echo $row1['description'];?>
</td>
</tr>
<?php } ?>
<tr><td colspan="2" >
<?php
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</div>";
}
echo $total_pages.' Trang';
// pagination
echo $paginate;
?>
</td>
</tr>
</table>
</body>
</html>
C. VIDEO DEMO :
