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:
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
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ÀO MỪNG BẠN ĐẾN BƯU ĐIỆN THÀNH PHỐ HỒ CHÍ 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.
Ở 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:
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"> <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é.