Membuat Shopping Cart dengan CodeIgniter dan Bootstrap

4 October 2017 | Tags: , , ,

Membuat Shopping Cart dengan CodeIgniter dan Bootstrap: Tampilan Awal

Baik sobat, kali ini kita akan membahas materi tentang pembuatan shopping cart dengan CodeIgniter dan bootstrap. Shopping Cart mungkin bukan istilah asing lagi dewasa ini. Dalam pemasaran online, shopping cart merupakan perangkat lunak yang memungkinkan pengunjung  sebuah situs Internet untuk memilih item untuk akhirnya melakukan pembelian.

Asumsi Pembahasan Materi

Pada pembahasan ini kami mengasumsikan bahwa anda sudah memahami:

  1. CodeIgniter: Salah satu framework PHP. CodeIgniter sudah menyediakan library Cart, sehingga kita bisa lebih cepat dalam mengembangkan aplikasi dibandingkan membuat sendiri.
  2. Bootstrap: Dengan bootstrap membuat urusan desain antarmuka web menjadi lebih gampang dan cepat.

Bahan Persiapan

Bahan yang perlu disiapkan:

  1. CodeIgniter. Pada materi ini dibuat, kami menggunakan CodeIgniter versi 3.1.5
  2. Bootstrap
  3. Contoh data pada table
  4. Gambar-gambar produk

Bagaimana jika tidak punya? Tenang, kami menyertakan semua bahan untuk anda download

 

Konseptual Basis Data Shopping Cart

Sebelum memulai ada baiknya kita memahami konseptual basis data sederhana dari shopping cart sebagai berikut:

Diagram E-R Membuat Shopping Cart dengan CodeIgniter dan Bootstrap

Langkah-Langkah Membuat Shopping Cart dengan CodeIgniter dan Bootstrap

Membuat Database dan Table

Berdasarkan rancangan konseptual basis data diatas kita bisa membuat table-table sesuai keperluan. Namun tidak menutup kemungkinan untuk berbeda dan bahkan lebih lengkap. Konseptual basis data tersebut cuma acuan saja.

  1. Buat database: db_toko (Kalau mau nama lain juga boleh)
  2. Buat table: tbl_kategori  (Untuk menyimpan data kategori)
     CREATE TABLE tbl_kategori (
    id int(10) unsigned NOT NULL AUTO_INCREMENT,
    nama_kategori varchar(30) DEFAULT NULL,
    PRIMARY KEY (id)
 ) ENGINE=InnoDB  DEFAULT CHARSET=latin1;
insert  into tbl_kategori(id,nama_kategori) values (1,'Laptop'),(2,'Smartphone'),(3,'Robot');
  3. Buat tabel: tbl_produk (Untuk menyimpan data produk)
    CREATE TABLE tbl_produk (
  id_produk int(10) unsigned NOT NULL AUTO_INCREMENT,
  nama_produk varchar(50) DEFAULT NULL,
  deskripsi varchar(50) DEFAULT NULL,
  harga varchar(10) DEFAULT NULL,
  gambar varchar(50) DEFAULT NULL,
  kategori int(10) DEFAULT NULL,
  PRIMARY KEY (id_produk)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


insert  into tbl_produk(id_produk,nama_produk,deskripsi,harga,gambar,kategori) values (1,'Laptop 1','Lorem ipsum dolor sit amet, consectetur adipisicin','3500000','laptop1.jpg',1),(2,'Laptop 2','Lorem ipsum dolor sit amet, consectetur adipisicin','6250000','laptop2.jpg',1),(3,'Laptop 3','Lorem ipsum dolor sit amet, consectetur adipisicin','7250000','laptop3.jpg',1),(4,'Smartphone 1','Lorem ipsum dolor sit amet, consectetur adipisicin','3560000','hp1.jpg',2),(5,'Smartphone 2','Lorem ipsum dolor sit amet, consectetur adipisicin','4300000','hp2.jpg',2),(6,'Smartphone 3','Lorem ipsum dolor sit amet, consectetur adipisicin','5100000','hp3.jpg',2),(7,'Robot 1','Lorem ipsum dolor sit amet, consectetur adipisicin','3500000','robot1.jpg',3),(8,'Robot 2','Lorem ipsum dolor sit amet, consectetur adipisicin','4500000','robot2.jpg',3),(9,'Robot 3','Lorem ipsum dolor sit amet, consectetur adipisicin','6100000','robot3.jpg',3);
  4. Buat table: tbl_pelanggan (Untuk menyimpan data pelanggan)
    CREATE TABLE tbl_pelanggan (
  id int(10) unsigned NOT NULL AUTO_INCREMENT,
  nama varchar(50) DEFAULT NULL,
  email varchar(50) DEFAULT NULL,
  alamat varchar(50) DEFAULT NULL,
  telp varchar(20) DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  5. Buat table: tbl_order (Untuk menyimpan data order)
    CREATE TABLE tbl_order (
  id int(10) NOT NULL AUTO_INCREMENT,
  tanggal date DEFAULT NULL,
  pelanggan int(10) DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  6. dan terakhir table: tbl_detail_order (Untuk menyimpan rincian order)
    CREATE TABLE tbl_detail_order (
  id int(10) unsigned NOT NULL AUTO_INCREMENT,
  order_id int(10) DEFAULT NULL,
  produk int(10) DEFAULT NULL,
  qty int(10) DEFAULT NULL,
  harga varchar(20) DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Konfigurasi CodeIgniter

  1. Konfigurasi file .htaccess: Secara default struktur URL pada CodeIgniter biasanya http://localhost/nama_folder/controller/index.php/method. Nah, mungkin anda sama dengan saya tidak suka dengan bagian index.php setelah controller, maka kita perlu merubah file .htaccess sebagai berikut:
    RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
  2. Konfigurasi file routes.php (application/config/routes.php). Bertujuan untuk menentukan default dari controller pertama kali diakses.
    $route['default_controller'] = 'page';
  3. Konfigurasi file autoload.php (application/config/autoload.php)
    $autoload['libraries'] = array('database','form_validation','session','pagination');
$autoload['helper'] = array('form','url','html');
  4. Konfigurasi file  config.php (application/config/config.php)
    $config['base_url'] = 'http://localhost/toko/';
$config['index_page'] = '';
  5. Konfigurasi file  databases.php (application/config/databases.php). Sesuaikan dengan konfigurasi database anda.
    $db['default'] = array(
	'dsn'	=>; '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_toko'

Buat Model

Untuk operasi table, kita akan membuat model: Keranjang_model.php (application/models/Keranjang_model.php)

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Keranjang_model extends CI_Model {

	public function get_produk_all()
	{
		$query = $this->db->get('tbl_produk');
		return $query->result_array();
	}

	public function get_produk_kategori($kategori)
	{
		if($kategori>0)
			{
				$this->db->where('kategori',$kategori);
			}
		$query = $this->db->get('tbl_produk');
		return $query->result_array();
	}

	public function get_kategori_all()
	{
		$query = $this->db->get('tbl_kategori');
		return $query->result_array();
	}

	public  function get_produk_id($id)
	{
		$this->db->select('tbl_produk.*,nama_kategori');
		$this->db->from('tbl_produk');
		$this->db->join('tbl_kategori', 'kategori=tbl_kategori.id','left');
   		$this->db->where('id_produk',$id);
        return $this->db->get();
    }	

	public function tambah_pelanggan($data)
	{
		$this->db->insert('tbl_pelanggan', $data);
		$id = $this->db->insert_id();
		return (isset($id)) ? $id : FALSE;
	}

	public function tambah_order($data)
	{
		$this->db->insert('tbl_order', $data);
		$id = $this->db->insert_id();
		return (isset($id)) ? $id : FALSE;
	}

	public function tambah_detail_order($data)
	{
		$this->db->insert('tbl_detail_order', $data);
	}
}
?>

Buat Controller

Pada pembuatan shopping cart ini kita akan membuat 2 (dua) control yaitu Page dan Shopping. Page untuk mengelola halaman informai tambahan dan Shopping untuk transaksi cart.

  1. Page.php (application/controllers/Page.php)
    <?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Page extends CI_Controller {
	public function __construct()
	{
		parent::__construct();
		$this->load->library('cart');
		$this->load->model('keranjang_model');
	}
	public function index()
		{
			$data['produk'] = $this->keranjang_model->get_produk_all();
			$data['kategori'] = $this->keranjang_model->get_kategori_all();
			$this->load->view('themes/header',$data);
			$this->load->view('shopping/list_produk',$data);
			$this->load->view('themes/footer');
		}
	public function tentang()
		{
			$data['kategori'] = $this->keranjang_model->get_kategori_all();
			$this->load->view('themes/header',$data);
			$this->load->view('pages/tentang',$data);
			$this->load->view('themes/footer');
		}
	public function cara_bayar()
		{
			$data['kategori'] = $this->keranjang_model->get_kategori_all();
			$this->load->view('themes/header',$data);
			$this->load->view('pages/cara_bayar',$data);
			$this->load->view('themes/footer');
		}
}
  2. Shopping.php (application/controllers/Shopping.php)
    <?php
if (!defined('BASEPATH')) exit('No direct script access allowed');


class Shopping extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		$this->load->library('cart');
		$this->load->model('keranjang_model');
	}

	public function index()
	{
		$kategori=($this->uri->segment(3))?$this->uri->segment(3):0;
		$data['produk'] = $this->keranjang_model->get_produk_kategori($kategori);
		$data['kategori'] = $this->keranjang_model->get_kategori_all();
		$this->load->view('themes/header',$data);
		$this->load->view('shopping/list_produk',$data);
		$this->load->view('themes/footer');
	}
	public function tampil_cart()
	{
		$data['kategori'] = $this->keranjang_model->get_kategori_all();
		$this->load->view('themes/header',$data);
		$this->load->view('shopping/tampil_cart',$data);
		$this->load->view('themes/footer');
	}

	public function check_out()
	{
		$data['kategori'] = $this->keranjang_model->get_kategori_all();
		$this->load->view('themes/header',$data);
		$this->load->view('shopping/check_out',$data);
		$this->load->view('themes/footer');
	}

	public function detail_produk()
	{
		$id=($this->uri->segment(3))?$this->uri->segment(3):0;
		$data['kategori'] = $this->keranjang_model->get_kategori_all();
		$data['detail'] = $this->keranjang_model->get_produk_id($id)->row_array();
		$this->load->view('themes/header',$data);
		$this->load->view('shopping/detail_produk',$data);
		$this->load->view('themes/footer');
	}

	function tambah()
	{
		$data_produk= array('id' => $this->input->post('id'),
							 'name' => $this->input->post('nama'),
							 'price' => $this->input->post('harga'),
							 'gambar' => $this->input->post('gambar'),
							 'qty' =>$this->input->post('qty')
							);
		$this->cart->insert($data_produk);
		redirect('shopping');
	}

	function hapus($rowid)
	{
		if ($rowid=="all")
			{
				$this->cart->destroy();
			}
		else
			{
				$data = array('rowid' => $rowid,
			  				  'qty' =>0);
				$this->cart->update($data);
			}
		redirect('shopping/tampil_cart');
	}

	function ubah_cart()
	{
		$cart_info = $_POST['cart'] ;
		foreach( $cart_info as $id => $cart)
		{
			$rowid = $cart['rowid'];
			$price = $cart['price'];
			$gambar = $cart['gambar'];
			$amount = $price * $cart['qty'];
			$qty = $cart['qty'];
			$data = array('rowid' => $rowid,
							'price' => $price,
							'gambar' => $gambar,
							'amount' => $amount,
							'qty' => $qty);
			$this->cart->update($data);
		}
		redirect('shopping/tampil_cart');
	}

	public function proses_order()
	{
		//-------------------------Input data pelanggan--------------------------
		$data_pelanggan = array('nama' => $this->input->post('nama'),
							'email' => $this->input->post('email'),
							'alamat' => $this->input->post('alamat'),
							'telp' => $this->input->post('telp'));
		$id_pelanggan = $this->keranjang_model->tambah_pelanggan($data_pelanggan);
		//-------------------------Input data order------------------------------
		$data_order = array('tanggal' => date('Y-m-d'),
					   		'pelanggan' => $id_pelanggan);
		$id_order = $this->keranjang_model->tambah_order($data_order);
		//-------------------------Input data detail order-----------------------
		if ($cart = $this->cart->contents())
			{
				foreach ($cart as $item)
					{
						$data_detail = array('order_id' =>$id_order,
										'produk' => $item['id'],
										'qty' => $item['qty'],
										'harga' => $item['price']);
						$proses = $this->keranjang_model->tambah_detail_order($data_detail);
					}
			}
		//-------------------------Hapus shopping cart--------------------------
		$this->cart->destroy();
		$data['kategori'] = $this->keranjang_model->get_kategori_all();
		$this->load->view('themes/header',$data);
		$this->load->view('shopping/sukses',$data);
		$this->load->view('themes/footer');
	}
}
?>

Buat View

Untuk memudahkan pengelolaan, pada view kita akan membuat subfolder untuk keperluan yang berbeda seperti: pages (antarmuka pada halaman informasi), shopping (antarmuka untuk shopping cart), themes (untuk template)

View pada subfolder page:

  1. tentang.php (application/views/pages/tentang.php)
    <h2>Tentang Komang.My.ID Shop</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  2. cara_bayar.php (application/views/pages/cara_bayar.php)
    <h2>Cara Bayar</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

View pada subfolder shopping

  1. list_produk.php (application/views/shopping/list_produk.php)
    <h2>Daftar Produk</h2>
<?php
	foreach ($produk as $row) {
?>
            <div class="col-lg-4 col-md-6 mb-4">
              <div class="kotak">
              <form method="post" action="<?php echo base_url();?>shopping/tambah" method="post" accept-charset="utf-8">
                <a href="#"><img class="img-thumbnail" src="<?php echo base_url() . 'assets/images/'.$row['gambar']; ?>"/></a>
                <div class="card-body">
                  <h4 class="card-title">
                    <a href="#"><?php echo $row['nama_produk'];?></a>
                  </h4>
                  <h5>Rp. <?php echo number_format($row['harga'],0,",",".");?></h5>
                  <p class="card-text"><?php echo $row['deskripsi'];?></p>
                </div>
                <div class="card-footer">
                  <a href="<?php echo base_url();?>shopping/detail_produk/<?php echo $row['id_produk'];?>" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-search"></i> Detail</a> 


                  <input type="hidden" name="id" value="<?php echo $row['id_produk']; ?>" />
                  <input type="hidden" name="nama" value="<?php echo $row['nama_produk']; ?>" />
                  <input type="hidden" name="harga" value="<?php echo $row['harga']; ?>" />
                  <input type="hidden" name="gambar" value="<?php echo $row['gambar']; ?>" />
                  <input type="hidden" name="qty" value="1" />
                  <button type="submit" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-shopping-cart"></i> Beli</button>
                </div>
                </form>
              </div>
            </div>
<?php
	}
?>
  2. detail_produk.php(application/views/shopping/detail_produk.php)
    <h2><?php echo $detail['nama_produk'];?></h2>
<form method="post" action="<?php echo base_url();?>shopping/tambah" method="post" accept-charset="utf-8">
<div class="kotak2">
<img class="img-responsive" src="<?php echo base_url() . 'assets/images/'.$detail['gambar']; ?>"/>
 <h5>Harga: Rp. <?php echo number_format($detail['harga'],0,",",".");?></h5>
 <p class="card-text">
<strong> <u>Deskripsi</u></strong><br>
 <?php echo $detail['deskripsi'];?></p>
  <input type="hidden" name="id" value="<?php echo $detail['id_produk']; ?>" />
  <input type="hidden" name="nama" value="<?php echo $detail['nama_produk']; ?>" />
  <input type="hidden" name="harga" value="<?php echo $detail['harga']; ?>" />
  <input type="hidden" name="gambar" value="<?php echo $detail['gambar']; ?>" />
  <input type="hidden" name="qty" value="1" />
 <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-shopping-cart"></i> Beli Produk Ini</button>
 </div>
 </form>
  3. tampil_cart.php (application/views/shopping/tampil_cart.php)
    <h2>Daftar Belanja</h2>
<form action="<?php echo base_url()?>shopping/ubah_cart" method="post" name="frmShopping" id="frmShopping" class="form-horizontal" enctype="multipart/form-data">
<?php
	if ($cart = $this->cart->contents())
		{
 ?>


<table class="table">
<tr id= "main_heading">
<td width="2%">No</td>
<td width="10%">Gambar</td>
<td width="33%">Item</td>
<td width="17%">Harga</td>
<td width="8%">Qty</td>
<td width="20%">Jumlah</td>
<td width="10%">Hapus</td>
</tr>
<?php
// Create form and send all values in "shopping/update_cart" function.
$grand_total = 0;
$i = 1;

foreach ($cart as $item):
$grand_total = $grand_total + $item['subtotal'];
?>
<input type="hidden" name="cart[<?php echo $item['id'];?>][id]" value="<?php echo $item['id'];?>" />
<input type="hidden" name="cart[<?php echo $item['id'];?>][rowid]" value="<?php echo $item['rowid'];?>" />
<input type="hidden" name="cart[<?php echo $item['id'];?>][name]" value="<?php echo $item['name'];?>" />
<input type="hidden" name="cart[<?php echo $item['id'];?>][price]" value="<?php echo $item['price'];?>" />
<input type="hidden" name="cart[<?php echo $item['id'];?>][gambar]" value="<?php echo $item['gambar'];?>" />
<input type="hidden" name="cart[<?php echo $item['id'];?>][qty]" value="<?php echo $item['qty'];?>" />
<tr>
<td><?php echo $i++; ?></td>
<td><img class="img-responsive" src="<?php echo base_url() . 'assets/images/'.$item['gambar']; ?>"/></td>
<td><?php echo $item['name']; ?></td>
<td><?php echo number_format($item['price'], 0,",","."); ?></td>
<td><input type="text" class="form-control input-sm" name="cart[<?php echo $item['id'];?>][qty]" value="<?php echo $item['qty'];?>" /></td>
<td><?php echo number_format($item['subtotal'], 0,",",".") ?></td>
<td><a href="<?php echo base_url()?>shopping/hapus/<?php echo $item['rowid'];?>" class="btn btn-sm btn-danger"><i class="glyphicon glyphicon-remove"></i></a></td>
<?php endforeach; ?>
</tr>
<tr>
<td colspan="3"><b>Order Total: Rp <?php echo number_format($grand_total, 0,",","."); ?></b></td>
<td colspan="4" align="right">
<a data-toggle="modal" data-target="#myModal"  class ='btn btn-sm btn-danger' rel="noopener noreferrer">Kosongkan Cart</a>
<button class='btn btn-sm btn-success'  type="submit">Update Cart</button>
<a href="<?php echo base_url()?>shopping/check_out"  class ='btn btn-sm btn-primary'>Check Out</a>
</tr>

</table>
<?php
		}
	else
		{
			echo "<h3>Keranjang Belanja masih kosong</h3>";
		}
?>
</form>

  <!-- Modal Penilai -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
      	<form method="post" action="<?php echo base_url()?>shopping/hapus/all">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&amp;amp;times;</button>
          <h4 class="modal-title">Konfirmasi</h4>
        </div>
        <div class="modal-body">
			Anda yakin mau mengosongkan Shopping Cart?

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Tidak</button>
          <button type="submit" class="btn btn-sm btn-default">Ya</button>
        </div>

        </form>
      </div>

    </div>
  </div>
  <!--End Modal-->
  4. check_out.php (application/views/shopping/check_out.php)
    <h2>Konfirmasi Check Out</h2>
<div class="kotak2">
<?php
$grand_total = 0;
if ($cart = $this->cart->contents())
	{
		foreach ($cart as $item)
			{
				$grand_total = $grand_total + $item['subtotal'];
			}
		echo "<h4>Total Belanja: Rp.".number_format($grand_total,0,",",".")."</h4>";
?>
<form class="form-horizontal" action="<?php echo base_url()?>shopping/proses_order" method="post" name="frmCO" id="frmCO">
        <div class="form-group  has-success has-feedback">
            <label class="control-label col-xs-3" for="inputEmail">Email:</label>
            <div class="col-xs-9">
                <input type="email" class="form-control" name="email" id="email" placeholder="Email">
            </div>
        </div>
        <div class="form-group  has-success has-feedback">
            <label class="control-label col-xs-3" for="firstName">Nama :</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" name="nama" id="nama" placeholder="Nama Lengkap">
            </div>
        </div>
        <div class="form-group  has-success has-feedback">
            <label class="control-label col-xs-3" for="lastName">Alamat:</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" name="alamat" id="alamat" placeholder="Alamat">
            </div>
        </div>
        <div class="form-group  has-success has-feedback">
            <label class="control-label col-xs-3" for="phoneNumber">Telp:</label>
            <div class="col-xs-9">
                <input type="tel" class="form-control" name="telp" id="telp" placeholder="No Telp">
            </div>
        </div>


        <div class="form-group  has-success has-feedback">
            <div class="col-xs-offset-3 col-xs-9">
                <button type="submit" class="btn btn-primary">Proses Order</button>
            </div>
        </div>
    </form>
    <?php
	}
	else
		{
			echo "<h5>Shopping Cart masih kosong</h5>";
		}
	?>
</div>
  5. sukses.php (application/views/shopping/sukses.php)
    <h2>Proses Order sukses</h2>
<div class="kotak2">
<p>Terima kasih sudah berbelanja di toko Komang.My.ID Shop. Order anda sudah masuk ke database kami, dan dalam 3 x 24 Jam barang akan sampai di tempat anda.<br>
Jangan segan mengontak kami jika ada permasalahan!</p>
</div>

View pada subfolder themes

  1. header.php (application/views/themes/header.php)
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Komang.My.ID Shop Online</title>
	<link href="<?php echo base_url()?>assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="<?php echo base_url()?>assets/asie/css/ie10-viewport-bug-workaround.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="<?php echo base_url()?>assets/custom.css" rel="stylesheet">
    <link href="<?php echo base_url()?>assets/jquery/jquery-ui.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="<?php echo base_url()?>assets/asie/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            < class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="<?php echo base_url()?>assets/logos.png"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="<?php echo base_url()?>">Home</a></li>
            <li><a href="<?php echo base_url()?>page/tentang"><i class="glyphicon glyphicon-user"></i> Tentang</a></li>
            <li><a href="<?php echo base_url()?>page/cara_bayar"><i class="glyphicon glyphicon-briefcase"></i> Cara Bayar</a></li>
            <li><a href="<?php echo base_url()?>shopping/tampil_cart"><i class="glyphicon glyphicon-shopping-cart"></i>  Keranjang Belanja</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
<div class="container">

<div class="row">

        <div class="col-lg-3">

          <div class="list-group">
          	<a class="list-group-item"><strong>KATEGORI</strong></a>
            <a href="<?php echo base_url()?>shopping/index/" class="list-group-item">Semua</a>
          	<?php
		          	foreach ($kategori as $row)
						{
			?>
            <a href="<?php echo base_url()?>shopping/index/<?php echo $row['id'];?>" class="list-group-item"><?php echo $row['nama_kategori'];?></a>
            <?php
						}
			?>
          </div><br>

           <div class="list-group">
           <a href="<?php echo base_url()?>shopping/tampil_cart" class="list-group-item"><strong><i class="glyphicon glyphicon-shopping-cart"></i> KERANJANG BELANJA</strong></a>
          <?php 

		  	$cart= $this->cart->contents();

// If cart is empty, this will show below message.
			if(empty($cart)) {
				?>
                <a class="list-group-item">Keranjang Belanja Kosong</a>
                <?php
			}
			else
				{
					$grand_total = 0;
					foreach ($cart as $item)
						{
							$grand_total+=$item['subtotal'];
				?>
                <a class="list-group-item"><?php echo $item['name']; ?> (<?php echo $item['qty']; ?> x <?php echo number_format($item['price'],0,",","."); ?>)=<?php echo number_format($item['subtotal'],0,",","."); ?></a>
                <?php
						}
				?>

                <?php
				}
 ?>
			</div>
        </div>
        <!-- /.col-lg-3 -->

        <div class="col-lg-9">

<div class="row">
  2. footer.php (application/views/themes/footer.php)
     </div>
          <!-- /.row -->
   </div>
        <!-- /.col-lg-9 -->


      </div>
      <!-- /.row -->

    </div>
 <footer class="footer">
      <div class="container">
        <p class="text-muted"><center>Contoh Shopping Cart dengan CodeIgniter dan Bootstrap. By:<a href="http://www.komang.my.id"> Komang.My.ID</a></center></p>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?php echo base_url()?>assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="<?php echo base_url()?>assets/js/arf.js"></script>
    <script src="<?php echo base_url()?>assets/js/prs.js"></script>
    <script src="<?php echo base_url()?>assets/js/validation.js"></script>
    <script src="<?php echo base_url()?>assets/jquery/jquery-ui.js"></script>
    <script src="<?php echo base_url()?>assets/jquery/jquery.validate.min.js"></script>
    <script>window.jQuery || document.write('<script src="<?php echo base_url()?>assets/vendor/jquery.min.js"><\/script>')</script>
    <script src="<?php echo base_url()?>assets/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<?php echo base_url()?>assets/asie/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Menjalankan Aplikasi Shopping Cart

Silahkan buka browser anda, dan pada address bar ketikkan alamat: http://localhost/nama_folder_aplikasi

Contoh Tampilan Aplikasi Shopping Cart

Membuat Shopping Cart dengan CodeIgniter dan Bootstrap: Tampilan Awal

Membuat Shopping Cart dengan CodeIgniter dan Bootstrap : View Cart

Membuat Shopping Cart dengan CodeIgniter dan Bootstrap: Check Out

Membuat Shopping Cart dengan CodeIgniter dan Bootstrap: Order sukses

Download Shopping Cart dengan CodeIgniter dan Bootstrap

Download

Klik tombol Facebook / Twitter / Google + untuk Download


Komentar via Facebook tentang Membuat Shopping Cart dengan CodeIgniter dan Bootstrap

Komentar tentang Membuat Shopping Cart dengan CodeIgniter dan Bootstrap

  • Mas, kalau mau edit koneksi ke database nya file nya di mana ya ?. Soalnya saya sudah rubah password php my adminya. Terima kasih

    Balas

  • gan bagaimana cara membuat kategori dan sub kategori gan yang terhubung?
    contoh nya kategori jawa barat muncul pilihan depok, bogor, dll

    Balas

  • kak, kl mau nampilin data pembelinya di halaman admin gimana. datanya kesimpen ke table orderkanya, tapi nampilinnya gimana, ada lanjutannya lagi nggak ?

    Balas

    • Silahkan tulis saran, komentar dan pertanyaan dibawah!

    Your email address will not be published. Required fields are marked *