shopping cart using jquery

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

shopping cart using jquery

ravi951
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');
[/code]

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();
?>
[/code]

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;
}
?>
[/code]

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">

Products

        <?php
        $result=mysql_query("select * from products");
        while($row=mysql_fetch_array($result))
        {
         ?>
                                             <?php } ?>
   
<img src="<?php echo $row['picture']?>" />  <?php echo $row['name']?><br />
              <?php echo $row['description']?><br />
                   Price:<big style="color:red">
                   $<?php echo $row['price']?></big><br /><br />
             <input type="button" value="Add to Cart" onclick="addtocart(<?php echo $row['serial']?>)" />
                 
<hr size="4" />
</div>
</body>
</html>
[/code]

below is my "shoppingcart.php"

[code]
<?php
include("db.php");
include("functions.php");
       
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 products 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:1px auto; width:600px;" >
 <div style="padding-bottom:10px">
 

Your Shopping Cart

   <input type="button" value="Continue Shopping" onclick="window.location='products.php'" />
  </div>
    <div style="color:#F00"><?php echo$msg?></div>
        <?php
        if(is_array($_SESSION['cart']))
        {
    echo '';
        $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;
        ?>
                                                        <?php
        }
        ?>
                           <?php
    }
        else
        {
         echo "";
        }
 ?>
   
SerialNamePriceQtyAmountOptions
<?php echo $i+1?><?php echo $pname?>$ <?php echo get_price($pid)?><input type="text" name="product<?php echo $pid?>" value="<?php echo $q?>" maxlength="3" size="1" />$ <?php echo get_price($pid)*$q?><a href="javascript:del(<?php echo $pid?>)">Remove
Order Total: $<?php echo get_order_total()?>         <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'">
         
There are no items in your shopping cart!
 </div>
</form>
</body>
</html>
[/code]

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">
     

Billing Info

                                                                    
Order Total:<?php echo get_order_total()?>
Cust Name:<input type="text" name="name" />
Address:<input type="text" name="address" />
Email:<input type="text" name="email" />
Phone:<input type="text" name="phone" />
 <input type="submit" value="Place Order" />
        </div>
</form>
</body>
</html>
[/code]
kindly tell me how to do it using JQUERY