07/07/2012 ~ TOÁN-TIN MATH-IT

Vấn đề là chúng ta muốn tạo ra trang Web bán hàng trực tuyến nho nhỏ, làm sao chúng ta tạo dược giỏ hàng online đây ? Đơn giản thôi, bạn chỉ cần nắm vững kiến thức HTML ,CSS, JS, PHP, SQL thì làm được thôi .Ok, h chúng ta thực hiện trình tự theo các bước sau để tạo fior hàng online nha !

1.Tạo thư mục shopping trong thư muc web root (của Wampserver là www ,cái khác thì khác ), thư mục này chứa : thư mục "images" (chứa 7 ảnh ), thư mục "includes" (chứa 2 file "db.php","functions.php"), "index.php","products.php","shoppingcart.php","billing.php","shopping.sql".

Hình minh họa:

2. Dowload 7 ảnh dưới đây về rồi bỏ vào thư mục "images"

3. Tạo file "shopping.sql" , Import CSDL, vào 127.0.0.1/phpmyadmin ( hoặc localhost/phpmyadmin ) tạo 1 CSDL tên là "shopping", chọn CSDL này rồi "import " file "shopping.sql" vào.
File "shopping.sql" có nội dung như sau: ( trước khi import thì bạn tạo cấu trúc thư mục, tải ảnh về để vào thư mục ảnh nha, không thì lúc import sẽ bị lỗi )

-- phpMyAdmin SQL Dump
-- version 2.11.9.5
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jul 18, 2009 at 01:47 PM
-- Server version: 5.0.81
-- PHP Version: 5.2.9

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

-- --------------------------------------------------------

--
-- 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(20) collate latin1_general_ci NOT NULL,
`description` varchar(255) collate latin1_general_ci NOT NULL,
`price` float NOT NULL,
`picture` varchar(80) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`serial`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=7 ;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`serial`, `name`, `description`, `price`, `picture`) VALUES
(1, 'View Sonic LCD', '19" View Sonic Black LCD, with 10 months warranty', 250, 'images/lcd.jpg'),
(2, 'IBM CDROM Drive', 'IBM CDROM Drive', 80, 'images/cdrom-drive.jpg'),
(3, 'Laptop Charger', 'Dell Laptop Charger with 6 months warranty', 50, 'images/charger.jpg'),
(4, 'Seagate Hard Drive', '80 GB Seagate Hard Drive in 10 months warranty', 40, 'images/hard-drive.jpg'),
(5, 'Atech Mouse', 'Black colored laser mouse. No warranty', 5, 'images/mouse.jpg'),
(6, 'Nokia 5800', 'Nokia 5800 XpressMusic is a mobile device with 3.2" widescreen display brings photos, video clips and web content to life', 299, 'images/mobile.jpg');

4. Tạo file "db.php" , file này có nhiệm vụ kết nối với CSDL MySQL, nội dung file như sau:

<?php
@mysql_connect("localhost","root","") or die("Demo is not available, please try again later");
@mysql_select_db("shopping") or die("Demo is not available, please try again later");
session_start();
?>

5. Tạo file "functions.php", file này có nhiệm vụ là kiểm tra điều kiện rồi lấy DL từ các table ở CSDL shopping, nội dung file như sau:

<?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;
}

?>

6. Tạo file "index.php" , nhiệm vụ khổi bàn :)) , nội dung file như sau:

<?php
echo " Vao gia hang: ". "<br/>";
print "<a href='products.php'> Click here: </a>";
//header("location:products.php");
?>

7. Tạo file "products.php" ,file này lấy CSDL từ MySQL (bảng products ), in ra màn hình, nút "Add To Cart " , nếu người dung muốn mua sp nào thì nhấp "Add To Cart " để đưa sp vào giỏ hàng, nội dung file như sau:

<?php
include("includes/db.php");
include("includes/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();
}
?>
<!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>Products</title>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
<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">
<h1 align="center">
<marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" bgcolor="silver" scrollamount=3>
Gian Hang Online
</marquee>
</h1>
<table cellpadding="2px" width="600px">
<?php
$result=mysql_query("select * from products");
while($row=mysql_fetch_array($result)){
?>
<tr>
<td><img src="<?php echo $row['picture'];?>" /></td>
<td> <b><?php echo $row['name'];?></b><br />
<?php echo $row['description'];?><br />
Price:<big style="color:green">
$<?php echo $row['price'];?></big><br /><br />
<input type="button" value="Add to Cart" onclick="addtocart(<?php echo $row['serial'];?>)" />
</td>
</tr>

<?php } ?>
</table>
</div>
</body>
</html>

8. Tạo file "shoppingcart.php", đây là file fior hàng gồm các chức năng như: cập nhật sp, xóa sp, di chuyển trang hóa đơn, nội dung file như sau:

<?php
include("includes/db.php");
include("includes/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">Gio Hang Cua Ban</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>

9. Tạo file "billing.php", file này nhiệm vụ: hóa đơn, gửi DL hóa đơn đến CSDL, in hóa đơn, nội dung file như sau:

<?php
include("includes/db.php");
include("includes/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 $i+1;?> </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>

10. Demo:

Hình minh họa trang index.php: