shopping cart using jquery

**ravi951** · 09-05-2011, 05:11 AM

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

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

**mburt** · 09-11-2011, 03:37 AM

jQuery would do everything client-side, meaning that all the important data (like visa card numbers) would be processed after the page loads. This isn't ideal.

What you've given in your code is PHP code, which is server-side code- processed before the page loads so all important information is hidden.

I know what you're thinking, that jQuery will do everything without have to load any pages. The best thing actually would be to mix PHP and javascript, so that the important parts load before the page is finished loading, and the nifty tricks (like AJAX file loading) can be done by javascript.

Thread: shopping cart using jquery

Thread Tools

Search Thread

shopping cart using jquery

Bookmarks

Bookmarks

Posting Permissions