Chanuka Asanka's Blog

Tuesday, July 5, 2011

How to create a Shopping Cart

In this post I’m going to describe how to create a shopping cart . But I am not going to describe each and every thing which must include in shopping cart, but rather give you a hint on what kind of functionality need to have in a good shopping cart ,so you can modify it. Try to develop this shopping cart with pagination and product gallery ,you may get an idea from my previous post.

Step1: create 2 table for product and shopping cart
Step2: display product items with [Add to cart] link or button (Hint: link cart.php?additem=p_id )

Step3: add action to [Add to Cart] link or button with mysql query to add products into shopping cart table
Step4: display shopping cart by the side of products with [remove] link or button ( Hint: link remove.php?remove=p_id )

Step5: add action to [remove] link or button with mysql query to delete products from shopping cart table

Live Demo

Display product items (Product.php)
You can develop this script with adding quantity field and more details link

<body>
<div style=" width:1080px; margin:0 auto;">
 <div style="float:left; width:700px;height:100%;padding:20px;"><h2>Items</h2>
 <?php 
    session_start();// start new session
    $session=session_id();// get browser unique session identifier (id)
    include("db.php");// include database connetion 
    
    $query2="select * from shopping";//start display products
    $result2=mysql_query($query2);
    
    while($row = mysql_fetch_array($result2)){
        $p_id=$row['p_id'];
        $p_name=$row['p_name'];
        $price=$row['price'];
        $details=$row['details'];
        echo "ItemName\t $p_name<br/>";
        echo "Price\t $price<br/>";
        echo "Detail\t $details";
        
    ?>
    <div style="position:relative;text-align:right;"><!--start add to cart button-->
        <form action="cart.php" method="post" name="add"> 
            <input type="hidden"  value="<?php echo $p_id;?>" name="additem" />
            <input type="submit"  value="Add to Cart" />
        </form>
    </div><!--end add to cart button-->
    <hr/>
 <?php //end display product 
    }
    ?>
    </div>
    <div style="float:right;width:300px;height:100%;background:#9CF; padding:20px;"><h2>Shopping Cart</h2>
        <?php include("show_cart.php");?> <!--include shopping cart -->
    </div>
</div>
</body>

Add action to [Add to Cart] link or button (Cart.php)
Try to add this functionality as for a perfect shopping cart. Quantity must update when you adding same product. For that you must check that product already exists or not in your shopping cart.
Hint :

_{$query1="select quan from shoppingcart where (s_id
='$session' and p_id='$p_id')";}

_{$result1=mysql_query($query1) or die(mysql_error());}

_{if(mysql_num_rows($result1)){}

<?php
include("db.php");

session_start();

$session=session_id();//get browser unique session identifier (id)

if(isset($_POST['additem'])){//check if additem variable is set and is not NULL
 
 $p_id=$_POST['additem'];
 //You can modify this adding quantity filed with UPDATE mysql command to update info already in a table .
 mysql_query("insert into shoppingcart value ('$session','$p_id')");  
  
 header("location: home.php");//redirect to home page
 
}
?>

Display shopping cart(show_cart.php)

You can develop this script with displaying total items, total price and quantity of each product.

<?php 

include("db.php");

$query="SELECT * FROM shopping,shoppingcart WHERE (shopping.p_id = shoppingcart.p_id and shoppingcart.s_id='$session')";
//get related table data where s_id equal to session_id()
$result=mysql_query($query);

while($row = mysql_fetch_array($result)){
 $p_id=$row['p_id'];
 $p_name=$row['p_name'];
 $price=$row['price'];
 $quan=$row['quan'];
 $details=$row['details'];
 
 // do something ...calculate total amount , total price 
 echo "ItemName\t $p_id<br/>";
 echo "Price\t $price x $quan<br/>";
 echo "Detail\t $details";

?>
<div style="position:relative;text-align:right;"><!--start  remove button-->
<form action="remove.php" method="post"  >

 <input type="hidden"  value="<?php echo $p_id; ?>" name="removeitem"/>
    <input type="submit" onclick="" value="Remove" />
 
</form><!--end  remove button-->
<hr/></div>
<?php 
}
?>
<!--do something ...echo total amount , total price ,-->
<input type="button" name="check_out" value="Check Out"  style="float:right;"/>

Add action to [remove] link or button (remove.php)

<?php 
include("db.php");

session_start();

$session=session_id();

if(isset($_POST['removeitem'])){
 
 $p_id = $_POST['removeitem'];
 $query="DELETE from shoppingcart where (s_id ='$session' and p_id='$p_id') ";
 //Removing Product from Shopping Cart 
 $result=mysql_query($query);
 header("location: home.php");
 
}
?>

If you like this post, please share it with others.

Saturday, June 18, 2011

How to Pagination for Files in Directory & Create an Image Gallery

In this post, I wanted to share answers to a question that came up with previous post. This post discuss about how to pagination for files in directory, my previous post about pagination for data in database. There is no much difference,However there are few things you should change such as how to read files from directory, count files and files divide into portions.

Step 1: open and read the directory.
Step 2: files get into array for handle easily.
Step 3: Pagination data with Simple back and next links.
Step 4: Develop that with page numbers.
Step 5: hide “back” and “next” links in fist page and last page respectively.
Step 6: hide current page number.

Live Demo

CSS Code

<style type="text/css" ><!--
#gallery_box{
 width:728px;
 height:545px;
 border:solid #cccccc 1px;
 margin:20px auto 0px;
 padding:5px;
 -moz-box-shadow:0px 18px 40px #ccc;
 -webkit-box-shadow:0px 14px 40px #ccc;
 box-shadow:0px 5px 30px #ccc;
}
#thumbnail{
 width:160px;
 height:160px;
 background:#f6f6f6;
 border:solid #cccccc 1px;
 border:solid #cccccc 1px;
 margin:5px;
 padding:5px;
 float:left;
 text-align:center;
 position: relative;
 line-height: 156px;
 -moz-box-shadow:4px 4px 4px #ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc;
}
img {
 border:none;
 -moz-box-shadow:0px 8px 10px #ccc; -webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc;
}
#pages{
 width:728px;
 height:20px;
 border:solid #cccccc 1px;
 margin:20px auto;
 padding:5px;
 position:relative;
 top:10px;
 font-size:1.2em;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bolder;
 text-align:center;
 color:#CC0000;
 -moz-box-shadow:0px 18px 40px #ccc; -webkit-box-shadow:0px 14px 40px #ccc; box-shadow:0px 5px 30px #ccc;
}
a{
 color:#0066FF; text-decoration:none;
}
a:hover{
 color:#0099FF;
}

-->
</style>
</head>

Pagination Code ( pagination_dir.php)
link to pagination_dir.php (..../pagination_dir.php?loop=0 )

<body>
<?php

$start=$_GET['loop'];//$start=0; ,pagination_dir.php?loop=0

$items=12;
$end=$start $items;
$count =0;

//---------------------start count files and get files to array

$dir="pets"; //Directory name 
$dir_handle=opendir($dir); // directory handle 

$img= array();
while (($getimg=readdir($dir_handle))!==false ) {   //TRUE if ($getimg=readdir($dir_handle)) is equal to false, and they are of the same type
 
 if($getimg!= "." && $getimg != ".."){
  $img[$count] = $getimg; // get files to array
  $count  ;//count files
 }
}

$total_items=$count;
$pages=ceil($total_items/$items);//round fractions up

//---------------------end count files and get files to array
//--------------------------------------------start part of hide back and next
if( $end >= $total_items) {$hide_next="hide_next" ; $end=$total_items;}
if( $start < 1  ) $hide_back="hide_back";

//--------------------------------------------end part of hide back and next 
//---------------------------------start  display data
?>
<div id="gallery_box">
<?php
for ($i=$start; $i<$end ; ) {
      
 $size=GetImageSize($dir."/".$img[$i]);//-------------start fit on thumbnail div

 if($size[0]>$size[1]){
  $width = 155;//--------------------------fit on width
  $height = round(155*$size[1]/$size[0]);
 }
 else{
  $height = 155;//------------------------fit on height
  $width = round(155*$size[0]/$size[1]);
 }
 //-------------end fit on thumbnail div

?>
<div id="thumbnail">
    <a   href="<?php echo $dir."/".$img[$i]; ?>" >
     <img  align="bottom"  src="<?php echo $dir."/".$img[$i]; ?>" width="<?php echo $width;?>" height="<?php echo $height;?>"/>
    </a>
</div>
<?php
$i  ;
}
closedir($dir_handle); 
//--------------------------------end display data 
?>
</div>
<div id="pages" ><!------------------------------------------------------------------- start display pagination -------->
<a href="pagination_dir.php?loop=<?php echo $start-$items;?>"  id="back">| Back |</a>

<?php //-----------------------------------------------------------------------------start display page number

for($i=0;$i<$pages;  $i){
 $page_num=$i 1;
 $current_page=($start/$items) 1;
 $page_start=$i*$items;
 if($current_page!=$page_num)
 echo "<a href=\"pagination_dir.php?loop=$page_start\">| $page_num |</a>";//page number with link (if current page not equal to page number)
 else
 echo "| $page_num |";//just display page number  (if current page equal to page number)
}
//-----------------------------end display page number
?>

<a href="pagination_dir.php?loop=<?php echo $end;?>"  id="next">| Next |</a>

</div><!---------------------------------------------------------------------- end display pagination -------->

Javascript Code

<script language="javascript"> //----------start part of hide back and next
 var b="<?php echo $hide_back ?>"
 var n="<?php echo $hide_next ?>";
 
 if(b == 'hide_back') {
     document.getElementById("back").style.display = 'none';
  
   }
 if(n =='hide_next' ){ 
  
  document.getElementById("next").style.display = 'none';
  
 } 
  //----------end part of hide back and next
</script>
</body>

If you like this post, please share it with others.

Monday, June 13, 2011

How to Pagination for Dynamic Data

In this post I’m going to describe how to pagination for dynamic data .but I’m not going to describe how to style this mark up , so don’t use any CSS or alignments .
You can pagination any dynamic data using this method.

Step 1: Create database connection.
Step 2: Pagination dynamic data with Simple back and next links.
Step 3: Develop that with page numbers.
Step 4: hide “back” and “next” links in fist page and last page respectively.
Step 5: hide current page number.

Let’s have a look....

Live Demo

Database Connection ( db.php )

<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "cagline";

mysql_connect("$host","$user","$password") or die("cannot connect".mysql_error());

mysql_select_db("$database") or die("cannot select_db".mysql_error());
?>

Pagination Code ( pagination.php)
link to pagination.php (..../pagination.php?loop=0 )

<?php 
//---------------------start database connection
include('db.php');
//---------------------end database connection
$start=$_GET['loop'];//$start=0;
$items=7;
$end=$start $items;
//--------------------------------------------start count data
$query_one = "select * from forum ";
$result1=mysql_query($query_one);
$total_items=mysql_num_rows($result1);
//echo $total_items."<br>";
$pages=ceil($total_items/$items);
//echo $pages."<br>";
//--------------------------------------------end count data
//--------------------------------------------start part of hide back and next
if( $end >= $total_items) {$hide_next="hide_next" ; $end=$total_items;}
if( $start < 1  ) $hide_back="hide_back";

//--------------------------------------------end part of hide back and next 

//----------------------------------------------------------------------------start  display data
$query_two = "select * from forum  limit $start,$items ";
$result2=mysql_query($query_two);
while($newArray = mysql_fetch_array($result2))
{
 $id=$newArray['id'];
 $name=$newArray['name'];
 $post=$newArray['post'];
 $date=$newArray['date'];
 echo "ID : $id <br/> Post : $post <br/>";
}
//-----------------------------------------------------------------------------end display data 

?>

<!------------------------ start display pagination -------------------------------->

<a href="pagination.php?loop=<?php echo $start-$items;?>"  id="back">| Back |</a>

<?php //-----------------------------start display page number

for($i=0;$i<$pages;  $i){
 $page_num=$i 1;
 $current_page=($start/$items) 1;
 $page_start=$i*$items;
 if($current_page!=$page_num)
 echo "<a href=\"pagination.php?loop=$page_start\">| $page_num |</a>";//page number with link (if current page not equal to page number)
 else
 echo "| $page_num |";//just display page number  (if current page equal to page number)
}
//-----------------------------end display page number
?>

<script language="javascript"> //----------------------start part of hide back and next
 var b="<?php echo $hide_back ?>"
 var n="<?php echo $hide_next ?>";
 
 if(b == 'hide_back') {
     document.getElementById("back").style.display = 'none';
  
   }
 if(n =='hide_next' ){ 
  
  document.getElementById("next").style.display = 'none';
  
 }
 
  //----------------------end part of hide back and next
</script>

If you like this post, please share it with others.