Simple shopping cart using jquery

JavaScript
1

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”

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

 
<?php 
mysql_connect("localhost","root","") or die("mysql_error()"); 
mysql_select_db("shopping") or die("mysql_error()"); 
session_start(); 
?>

below is my “functions.php”

 
<?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”

 
<?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”

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

2

Of course it’s possible to rewrite that using jQuery, but you might have a hard time convincing someone to rewrite it all for you.

I should have written before: “Simply re-writing all of your javascript as jQuery without a reason is pointless”. It sounds like here you need to be pointed in the right direction to learn to use the tools jQuery has available to replace things like your onclick attributes and long hand references to forms. To that end these links might be able to help you:

jQuery event handling
jQuery selectors

I’d also suggest finding some tutorials then bringing back any specific questions you have trouble with.

3

is it not possible to re write the code using jquery
i want specifically only delete and addtocart functions ie.,when we click on the delete button it must get delete using jquery and similarly when we click on addtocart button it must get added in to cart using jquery

4

instead of using javascript i want to use jquery since jquery reduces much coding of javascript.
whether is that not possible in the above case…

5

What specifically are you trying to achieve by using jQuery? I think you need to reduce the scope of your question, find something specific that you want to do and ask that question. Simply re-writing all of your javascript as jQuery is pointless.