Kĩ thuật xử lý giỏ hàng

Hôm nay học web sẽ hướng dẫn các bạn làm 1 phần trong bài tập Kĩ thuật xử lý giỏ hàng sử dụng session. Giao diện bài tập này như sau: 

bai tap session nang cao

Ta bắt đầu xây dựng giao diện cho bài tập này

Ta chia giao diện thành 3 phần header (header.php), body (datbao.php) và footer (footer.php) 

Xây dựng file index.php như sau: 

<?php
session_start();
if (!isset($_SESSION["somathang"]))
	$_SESSION["somathang"]=0;
?>
<html>
<head>
<title>Dat Bao</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<link href="dinhdang.css" rel="stylesheet" type="text/css">
</head>

<body>
<div align="center">
<table width="775" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="t1"><?php require("header.php") ?></td>
  </tr>
  <tr>
    <td class="t2"><table width="775" border="0" cellspacing="0" cellpadding="0">
      <tr>
      
        <td width="775" valign="top" class="t4"><?php require("datbao.php") ?></td>
      
      </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFCC" class="t3"><?php require("footer.php") ?></td>
  </tr>
</table>
</body>
</div>
</html>

 Trong đó file header.php với giao diện như sau 

header

 

Còn đây là Code file header.php của nó

<!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=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
		margin-left:0px;
		margin-top:0px;
		margin-right:0px;
		margin-bottom:0px;
	}
.style2 {
	color: #FFFFFF;
	font-weight: bold;
}
.style3 {font-family: AriaL}
.style4 {font-family: AriaL;
	font-size:20px;
	font-weight: bold;

}
-->
</style>				

</head>

<body>
<table width="775" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" height="120"><div align="center"><img src="logo3.png"/></div></td>
    <td width="625"><div align="center" class="style4">BAI TAP XU LY GIO HANG </div></td>
  </tr>
</table>
<table width="775" border="0" align="center">
  <tr>
    <td bgcolor="#0033FF"><marquee>
    <div align="center" class="style2 style3">CH&Agrave;O M&#7914;NG B&#7840;N &#272;&#7870;N B&#431;U &#272;I&#7878;N TH&Agrave;NH PH&#7888; H&#7890; CH&Iacute; MINH   </div>
    </marquee></td>
  </tr>
</table>
</body>
</html>

Giao diện footer đơn giản nên các bạn tự làm nhé. 

Và phần quan trọng đây. Chúng ta xâydựng giao diện đặt báo và các chức năng cho bài tập này. 

dat bao 1

 

 

Ở giao diện trên ta show loại báo vào combobox  bằng cách lấy các giá trị trong bảng loaibao

Đoạn code show dữ liệu vào combobox như sau:

<select name="loaibao">
	  <?php
	  	require_once("dbcon.php");	
		$sql="select * from loaibao";
		$result=mysql_query($sql,$link);
		if (mysql_num_rows($result)>0) {
			while($row=mysql_fetch_array($result)) 
			{
		?>
		<option value="<?php echo $row["mabao"]; ?>"><?php echo $row["tenbao"]; ?></option>
		<?php
			}
		}
	  ?>
      </select>    </td>

 

Sau khi chọn loại báo và nhấn nút đưa vào giỏ hàng thì giao diện đưa thêm vào giỏ hàng như sau: 

bai tap session nang cao

 

Giao diện khi ta chọn nút đưa vào giỏ hàng là 1 bảng chứa tên loại báo, giá tiền, số lượng, thành tiền Và tổng tiền khi ta nhấn chọn vào giỏ hàng nhiều lần. Bảng này sẽ xuất hiện nếu tồn tại số mặt hàng và số mặt hàng phải > 0 

if (isset($_SESSION["somathang"]) && $_SESSION["somathang"]>0) 

Đầu tiên ta kiểm tra nếu tồn tại việc nhấn chọn nút đặt hàng nghĩa là có giá trị loại báo Thì giá trị  somathang được gán bằng 1 sau đó 

kiểm tra xem có loại báo trong session chưa và nếu có loại báo trong session thì cập nhật số lượng của loại báo này 

if (isset($_POST["loaibao"])) {
	$kt=0;// kiem tra loai bao co trong session chua
	for($i=1;$i<=$_SESSION["somathang"];$i++){
		//Neu co loai bao trong session thi cap nhat so luong cua loai bao nay
		if ($_POST["loaibao"]==$_SESSION["mabao".$i]){
			$kt=1;
			$_SESSION["soluong".$i]+=$_POST["soluong"];
			break;
			}
	}

 Nếu chưa có loại báo này trong session thì lấy thông tin của loại báo đưa vào session đồng thời tăng số mặt hàng đưa vào session

if ($kt==0){
	$mabao=$_POST["loaibao"];
	$sql="select * from loaibao where mabao='$mabao'";
	$result=mysql_query($sql,$link);
	if (mysql_num_rows($result)>0){
		$row=mysql_fetch_array($result);
		$_SESSION["somathang"]++;// tang so mat hang luu trong sesssion
		$i=$_SESSION["somathang"];
		$_SESSION["mabao".$i]=$row["mabao"];
		$_SESSION["tenbao".$i]=$row["tenbao"];
		$_SESSION["gia".$i]=$row["gia"];
		$_SESSION["soluong".$i]=$_POST["soluong"];
	}
	}

 Cuối cùng ta cho show ra dữ liệu trên 4 dòng 

Dòng 1: Tên tiêu đề Danh sách các loại báo cần đặt

Dòng 2: Tiêu đề lần lượt STT, Tên báo, Giá, Số lượng, Thành Tiền, Xóa

Dòng 3: Ta quét hết các giá trị cho đến khi lớn hơn $_SESSION[‘somathang’] để show ra theo từng dòng tenbao [i] , gia [i], so luong [i],  thành tiền (số lượng * đơn giá) , và nút xóa hiện ra cho mỗi dòng. 

Dòng 4: Xuất tổng số tiền 

Đoạn code cho bảng này như sau: 

if (isset($_SESSION["somathang"]) && $_SESSION["somathang"]>0) {
?> 
<form method="post" action="capnhatdatbao.php">
<table width="495" border="1" align="center" cellpadding="0" cellspacing="0"  bordercolorlight="#FFFF00">
  <tr bgcolor="#CCFFCC">
    <td colspan="6"><div align="center" class="style3">Danh Sách Các Loại Báo Cần Đặt</div></td>
  </tr>
  <tr bgcolor="#CCFFCC">
    <td width="45"><div align="center" class="style2"><strong>STT</strong></div></td>
    <td width="150"><div align="center" class="style2"><strong>Tên Báo</strong></div></td>
    <td width="75"><div align="center" class="style2"><strong>Giá</strong></div></td>
    <td width="75"><div align="center" class="style2"><strong>Số Lượng</strong></div></td>
    <td width="100"><div align="center" class="style2"><strong>Thành Tiền</strong></div></td>
    <td width="50"><div align="center" class="style2"><strong>Xóa</strong></div></td>
  </tr>
<?php
$tong=0;
for($i=1;$i<=$_SESSION["somathang"];$i++) {
?>  
  <tr>
    <td width="45"><div align="center"><?php echo $i ?></div></td>
    <td width="175"><div align="center"><?php echo $_SESSION["tenbao".$i] ?></div></td>
    <td width="50"><div align="right"><?php echo $_SESSION["gia".$i] ?></div></td>
    <td width="75"><div align="center"><input type="text" size="5" name="C<?php echo $i ?>" value="<?php echo $_SESSION["soluong".$i] ?>"></div></td>
    <td width="100"><div align="right"><?php echo $_SESSION["gia".$i]*$_SESSION["soluong".$i] ?></div></td>
    <td width="50"><div align="center"><a href="xoadatbao.php?id=<?php echo $i ?>">xóa</a></div></td>
  </tr>

<?php
$tong=$tong+$_SESSION["gia".$i]*$_SESSION["soluong".$i] ;
	}
?>
<tr>
<td colspan="6" align="right">
Tong Cong Tien: <?php echo number_format($tong,2,",","."); ?>
</td>
</tr>
</table>

 Vậy đoạn code hoàn chỉnh cho file datbao.php như sau: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript">
function kiemtra()
{
	if (document.f.soluong.value=="") {
		alert("So Luong Phai co du lieu");
		document.f.soluong.focus();
		return;
	}
	document.f.submit();
}
</script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.style1 {
	color: #0000FF;
	font-weight: bold;
}
.style2 {color: #FF0000}
.style3 {
	color: #000066;
	font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; }
-->
</style></head>

<body>
<div align="center"><font size="4" color="#0000ff"><b>Đăng Ký Đặt Báo</b></font></div>
<form name="f" method="post" action="index.php">
<table width="445" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="145"><span class="style5">Loại Báo</span></td>
    <td width="300">
      <select name="loaibao">
	  <?php
	  	require_once("dbcon.php");	
		$sql="select * from loaibao";
		$result=mysql_query($sql,$link);
		if (mysql_num_rows($result)>0) {
			while($row=mysql_fetch_array($result)) 
			{
		?>
		<option value="<?php echo $row["mabao"]; ?>"><?php echo $row["tenbao"]; ?></option>
		<?php
			}
		}
	  ?>
      </select>    </td>
  </tr>
  <tr>
    <td width="145"><span class="style5">Số Lượng</span></td>
    <td width="300">
      <input type="text" name="soluong" size="5"  value="1">    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div align="center">
        <input name="Button" type="button" class="style3" onClick="kiemtra()" value="Đưa Vào Giỏ Hàng">
      </div>    </td>
  </tr>
</table>
</form>
<?php
if (isset($_POST["loaibao"])) {
	$kt=0;// kiem tra loai bao co trong session chua
	for($i=1;$i<=$_SESSION["somathang"];$i++){
		//Neu co loai bao trong session thi cap nhat so luong cua loai bao nay
		if ($_POST["loaibao"]==$_SESSION["mabao".$i]){
			$kt=1;
			$_SESSION["soluong".$i]+=$_POST["soluong"];
			break;
			}
	}
	//Chua co loai bao nay trong session thi lay thong tin cua loai bao dua vao session:
	if ($kt==0){
	$mabao=$_POST["loaibao"];
	$sql="select * from loaibao where mabao='$mabao'";
	$result=mysql_query($sql,$link);
	if (mysql_num_rows($result)>0){
		$row=mysql_fetch_array($result);
		$_SESSION["somathang"]++;// tang so mat hang luu trong sesssion
		$i=$_SESSION["somathang"];
		$_SESSION["mabao".$i]=$row["mabao"];
		$_SESSION["tenbao".$i]=$row["tenbao"];
		$_SESSION["gia".$i]=$row["gia"];
		$_SESSION["soluong".$i]=$_POST["soluong"];
	}
	}
}
if (isset($_SESSION["somathang"]) && $_SESSION["somathang"]>0) {
?> 
<form method="post" action="capnhatdatbao.php">
<table width="495" border="1" align="center" cellpadding="0" cellspacing="0"  bordercolorlight="#FFFF00">
  <tr bgcolor="#CCFFCC">
    <td colspan="6"><div align="center" class="style3">Danh Sách Các Loại Báo Cần Đặt</div></td>
  </tr>
  <tr bgcolor="#CCFFCC">
    <td width="45"><div align="center" class="style2"><strong>STT</strong></div></td>
    <td width="150"><div align="center" class="style2"><strong>Tên Báo</strong></div></td>
    <td width="75"><div align="center" class="style2"><strong>Giá</strong></div></td>
    <td width="75"><div align="center" class="style2"><strong>Số Lượng</strong></div></td>
    <td width="100"><div align="center" class="style2"><strong>Thành Tiền</strong></div></td>
    <td width="50"><div align="center" class="style2"><strong>Xóa</strong></div></td>
  </tr>
<?php
$tong=0;
for($i=1;$i<=$_SESSION["somathang"];$i++) {
?>  
  <tr>
    <td width="45"><div align="center"><?php echo $i ?></div></td>
    <td width="175"><div align="center"><?php echo $_SESSION["tenbao".$i] ?></div></td>
    <td width="50"><div align="right"><?php echo $_SESSION["gia".$i] ?></div></td>
    <td width="75"><div align="center"><input type="text" size="5" name="C<?php echo $i ?>" value="<?php echo $_SESSION["soluong".$i] ?>"></div></td>
    <td width="100"><div align="right"><?php echo $_SESSION["gia".$i]*$_SESSION["soluong".$i] ?></div></td>
    <td width="50"><div align="center"><a href="xoadatbao.php?id=<?php echo $i ?>">xóa</a></div></td>
  </tr>

<?php
$tong=$tong+$_SESSION["gia".$i]*$_SESSION["soluong".$i] ;
	}
?>
<tr>
<td colspan="6" align="right">
Tong Cong Tien: <?php echo number_format($tong,2,",","."); ?>
</td>
</tr>
</table>

<div align="center">
  <input name="Button1" type="submit" class="style3" value="Cập Nhật">
  &nbsp;
  <input name="Button2" type="button" class="style3" onClick="location.href='order.php'" value="Đặt Báo">
</div>
</form>
<?php
}
?>
</body>
</html>

 

Kết thúc bài LAB hi vọng các bạn sẽ góp ý để bài hoàn thện hơn. Chúc các bạn thành công. Hãy chia sẽ bằng cách click share facebook, google plus bên dưới nhé.