Program Simple Shopping Cart Menggunakan PHP - II

 

2. Struktur Folder dari Program PHP



Struktur
  • reset.css - Untuk reset Form
  • style.css - Untuk design tampilan HTML 
  • connection.php - Untuk koneksi ke database
  • index.php - Induk pemanggil utama
  • cart.php - Untuk memilih produk dari keranjang belanja ( menambah, menghapus )
  • products.php - halaman daftar produk

3. File connections.php

Tambahkan script pada file connections.php seperti dibawah ini :

<?php 
  
    $server="localhost"; 
    $user="useshop"; 
    $pass="1234567"; 
    $db="shopping"; 
      
    // connect to mysql 
      
    mysql_connect($server, $user, $pass) or die("can't connect to mysql."); 
      
    // select the db 
      
    mysql_select_db($db) or die("can't select the database."); 
  
?>


4.  File : index.php

Tambahkan script pada file index.php seperti dibawah ini :

<?php 
    session_start(); 
    require("includes/connection.php"); 
    if(isset($_GET['page'])){ 
          
        $pages=array("products", "cart"); 
          
        if(in_array($_GET['page'], $pages)) { 
              
            $_page=$_GET['page']; 
              
        }else{ 
              
            $_page="products"; 
              
        } 
          
    }else{ 
          
        $_page="products"; 
          
    } 

<h1>Cart</h1> 
<?php 
  
    if(isset($_SESSION['cart'])){ 
          
        $sql="SELECT * FROM products WHERE id_product IN ("; 
          
        foreach($_SESSION['cart'] as $id => $value) { 
            $sql.=$id.","; 
        } 
          
        $sql=substr($sql, 0, -1).") ORDER BY name ASC"; 
        $query=mysql_query($sql); 
        while($row=mysql_fetch_array($query)){ 
              
        ?> 
            <p><?php echo $row['name'] ?> x <?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?></p> 
        <?php 
              
        } 
    ?> 
        <hr /> 
        <a href="index.php?page=cart">Go to cart</a> 
    <?php 
          
    }else{ 
          
        echo "<p>Your Cart is empty. Please add some products.</p>"; 
          
    } 
  
?>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/style.css" /> 
 
<title>Shopping cart</title> 
 
</head> 
 
<body> 
 
<div id="container"> 
 
<div id="main"> 
 
</div><!--end main--> 
 
<div id="sidebar"> 
 
</div><!--end sidebar--> 
 
</div><!--end container--> 
 
</body> 
</html>


5.  File : style.css

Tambahkan script pada file style.css seperti dibawah ini :

body { 
    font-family: Verdana; 
    font-size: 12px; 
    color: #444; 
  
a {color: #48577D; text-decoration: none;} 
  
a:hover {text-decoration: underline;} 
  
h1, h2 {margin-bottom: 15px} 
  
h1 {font-size: 18px;} 
h2 {font-size: 16px} 
  
#container { 
    width: 700px; 
    margin: 150px auto; 
    background-color: #eee; 
    padding:15px; 
    overflow: hidden; 
  
    #main { 
        width: 490px; 
        float: left; 
    } 
      
        #main table { 
            width: 480px; 
        } 
          
            #main table th { 
                padding: 10px; 
                background-color: #48577D; 
                color: #fff; 
                text-align: left; 
            } 
              
            #main table td { 
                padding: 5px; 
            } 
              
            #main table tr { 
                background-color: #d3dcf2; 
            } 
      
    #sidebar { 
        width: 200px; 
        float: left; 
    }

Gambar dibawah adalah tampilan yang dihasilkan :

tampilan sebelum ada belanjaan

tampilan setelah ada belanjaan