Create a Simple Shopping Cart - E commerce with PHP & MySQL
If username and password is correct, the system will load the next page. Page title: item panel. In this page you can add product items and also you can give product name, price, quality, etc to the added product. Then you can save it. If you want to view the product items, you have added already, go to link 'view product' in the same page. It will provide the facility to edit the product or delete the product item which you have added. Let's see how it happens step by step.
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Item Panel</title>
<style type="text/css">
#opr{
border:1px dashed #CCCCCC;
padding:5px;
width:300px;
float:left;
color: #00CC66;
}
#fr_opr{
width:650px;
border:1px solid #666;
padding:10px;
margin:5px;
float:left;
color: #CC3333;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
</style>
<script type="text/javascript" src="../lib_js/jquery2.0.3.js">
</script>
<script type="text/javascript">
$(document).ready(function(e) {
var opr=$("#opr ul li a");
opr.click(function(){
var opr_click=$(this).attr('rel');
switch(opr_click){
case "add_pro":
$("#fr_opr").load("products/add_pro.php");
break;
case "v_pro":
$("#fr_opr").load("products/view_pro.php");
break;
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<strong><font size="3">Items</font>
<input type="text" size="50" id="search">
<input type="button" value="Search">
</strong>
<hr>
<div id="opr">
<h3><a href="#">Logout</a></h3>
<strong>Manage Products</strong>
<ul type="square">
<li><a href="#" rel="add_pro">Add Products</a></li>
<li><a href="#" rel="v_pro">View Products</a></li>
</ul>
</div>
<div id="fr_opr">Form operatoin</div>
</body>
</html>
add_pro.php
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn_add").click(function(){
var pname=$("#pname_txt").val();
var pcode=$("#pcode_txt").val();
var qty=$("#qty_txt").val();
var cost=$("#cost_txt").val();
var price=$("#price_txt").val();
var desc=$("#desc_txt").val();
if(pname!="" && pcode!=""){
$("#msg").load("products/add_pro.action.php",{
"pname":pname,
"pcode":pcode,
"qty":qty,
"cost":cost,
"price":price,
"desc":desc
});
}
else
$("#msg").text("dak oy ors");
});
});
</script>
<?php
function textbox($id,$size){
$a='<input type="text" id='.$id.' size="'.$size.'" />';
return $a;
}
?>
<h3>Add Products</h3>
<form method="post">
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tr>
<td>Product name:</td>
<td><?php echo textbox('pname_txt',50);?></td>
</tr>
<tr>
<td>Product code:</td>
<td><input type="text" id="pcode_txt" size="50"></td>
</tr>
<tr>
<td>Quantity:</td>
<td><input type="text" id="qty_txt" size="50"></td>
</tr>
<tr>
<td>Cost:</td>
<td><input type="text" id="cost_txt" size="50"></td>
</tr>
<tr>
<td>Price:</td>
<td><input type="text" id="price_txt" size="50"></td>
</tr>
<tr>
<td>Description:</td>
<td>
<textarea id="desc_txt" rows="4" cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add Products" id="btn_add">
<a href="#">Cancel</a>
</td>
</tr>
</table>
</form>
<div id="msg" align="center"></div>
If you have any doubts about the session, please don’t hesitate to ask from iTech Digest | Thank you! See you on next tutorial.
Post a Comment