hi all,
i have written a code for simple shopping cart using javascript.now i want to
do it using jquery.i have created database with 4 tables as shown below as
"shopping.sql"
Code:
-- 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 ;
-- 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 ;
-- 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;
-- 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 ;
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');
below is my database connection as "db.php"
Code:
<?php
mysql_connect("localhost","root","") or die("mysql_error()");
mysql_select_db("shopping") or die("mysql_error()");
session_start();
?>
below is my "functions.php"
Code:
<?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;
}
?>
below is my "products.php"
Code:
<?php
include("db.php");
include("functions.php");
if($_REQUEST['command']=='add' && $_REQUEST['productid']>0)
{
$pid=$_REQUEST['productid'];
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>
<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>Products</h1>
<table border="0" cellpadding="2px" width="500px">
<?php
$result=mysql_query("select * from products");
while($row=mysql_fetch_array($result))
{
?>
<tr>
<td>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:1px auto; width:600px;" >
<div style="padding-bottom:10px">
<h1 align="center">Your Shopping Cart</h1>
<input type="button" value="Continue Shopping" onclick="window.location='products.php'" />
</div>
<div style="color:#F00"><?php echo$msg?></div>
<table border="0" cellpadding="5px" cellspacing="1px" style="font-family:Verdana, Geneva, sans-serif; font-size:11px; background-color:#E1E1E1" width="100%">
<?php
if(is_array($_SESSION['cart']))
{
echo '<tr bgcolor="white" 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="white"><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="1" /></td>
<td>$ <?php echo get_price($pid)*$q?></td>
<td>)">Remove</td>
</tr>
<?php
}
?>
<tr>
<td>Order Total: $<?php echo get_order_total()?></td><td colspan="5" align="right">
<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='white'><td>There are no items in your shopping cart!</td>";
}
?>
</table>
</div>
</form>
</body>
</html>
lastly is my "billing.php"
Code:
<?php
include("db.php");
include("functions.php");
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>
</head>
<body>
<form name="form1" onsubmit="return validate()">
<input type="hidden" name="command" />
<div align="center">
<h1 align="center">Billing Info</h1>
<table border="0" cellpadding="2px">
<tr><td>Order Total:</td><td><?php echo get_order_total()?></td></tr>
<tr><td>Cust 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> </td><td><input type="submit" value="Place Order" /></td></tr>
</table>
</div>
</form>
</body>
</html>
kindly tell me how to do it using JQUERY
simple shopping cart using jquery
