Membuat Shopping Cart dengan Codeigniter dan Ajax

Membuat Shopping Cart dengan Codeigniter dan Ajax

Hi sahabat web developer, gimana kabranya? Semoga sehat selalu ya. Agar tetap semangat codingnya.

Pada kesempatan kali ini saya akan sharing tentang sesuatu yang sangat menarik nich. Apa itu?

Hmm., yaitu membuat shopping cart atau keranjang belanja menggunakan codeigniter dan ajax.

Apa itu shopping cart?

Shopping cart merupakan keranjang belanja yang berfungsi untuk menampung item belanja pada aplikasi E-Commerce.

Kenapa menggunakan codeigniter dan ajax?

Itu pertanyaan yang menarik.

Codeigniter merupakan framework php yang memiliki library dan helper yang lengkap, termasuk library cart, yang diperuntukkan untuk membuat shopping cart pada E-Commerce.

Sedangkan AJAX (Asyncronous Javascript and XML), merupakan suatu teknik atau metode yang digunakan untuk berkomunikasi dengan server dari balik layar dan tanpa meload web page (halaman web) secara keseluruhan, sehingga dapat menghemat bandwidth server dan membuat web menjadi lebih cepat dan interaktif.

Keren bukan?

Codeigniter menyediakan library-nya, sedangkan AJAX metode komunikasinya.

Hmm., ini baru namanya perfetto, Numero Uno!

Ayo donk, cepetan udah gak sabar nich!

Ok, sekarang kita langsung saja ke proses pembuatannya. Untuk proses pembuatan silahkan ikuti langkah berikut:


#1. Persiapan

Sebelumnya proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, jquery ini berfungsi untuk menjalan AJAX yang akan kita buat. Jika anda belum memilikinya, silahkan download di situs resminya www.jquery.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

Gambar Produk, siapkan juga beberapa gambar produk. Tidak perlu banyak-banyak, cukup 6 gambar saja.

Selain beberapa hal diatas, ada lagi yang perlu anda persiapkan. Yaitu, secangkir kopi.

Ya kopi, agar lebih rileks.!

 

#2. Pembuatan Database Dan Table

Berikutnya, yang perlu anda lakukan adalah pembuatan database dan table.

Table yang perlu anda buat tidak perlu banyak-banyak, cukup satu table saja. Yaitu, table produk.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_cart;

Pada query diatas, anda akan mendapatkan sebuat database dengan nama db_cart.

Table, buat table dengan mengeksekusi query berikut:

CREATE TABLE tbl_produk(
produk_id INT PRIMARY KEY AUTO_INCREMENT,
produk_nama VARCHAR(100),
produk_harga DOUBLE,
produk_image VARCHAR(50)
)ENGINE=INNODB;

Insert data, insert beberapa data pada table produk dengan mengeksekusi query berikut:

INSERT INTO tbl_produk(produk_nama,produk_harga,produk_image) VALUES
('212 Sexy Men','720000','1.jpg'),
('Adidas Dive','100000','2.jpg'),
('Aigner Pour Homme','460000','3.jpg'),
('Aigner No 1 OUD','575000','4.jpg'),
('Aigner Etienne','535000','5.jpg'),
('Aigner Too Feminine','465000','6.jpg');

Ok, sekarang kita sudah punya database, table, dan juga beberapa data.

Mari kita lanjutkan!

 

#3. Install Codeigniter

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama shopping_cart.

Setelah di extract, buat folder assets, kemudian buat folder images di dalam folder assets.

kemudian sertakan file bootstrap dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

aplication

assets

      css

      images

      js

system

 

Didalam folder css, terdapat file bootstrap.css.

Didalam folder js, terdapat file bootstrap.js dan jquery.js

Setelah itu, anda copy-kan gambar produk kedalam folder images. Kemudian, rename (ganti nama) semua file image dengan 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, dan 6.jpg.

Mari kita lanjutkan!

 

#4. Konfigurasi Codeigniter

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database', 'cart');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/shopping_cart/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_cart',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

 

#5. Buat model dengan nama Cart_model.php

Kemudian ketikan coding berikut:

<?php
class Cart_model extends CI_Model{

	function get_all_produk(){
		$hasil=$this->db->get('tbl_produk');
		return $hasil->result();
	}
	
}

 

#6. Buat controller dengan nama Cart.php

Kemudian ketikan coding berikut:

<?php

class Cart extends CI_Controller{
	
	function __construct(){
		parent::__construct();
		$this->load->model('cart_model');
	}

	function index(){
		$data['data']=$this->cart_model->get_all_produk();
		$this->load->view('v_cart',$data);
	}

	function add_to_cart(){ //fungsi Add To Cart
		$data = array(
			'id' => $this->input->post('produk_id'), 
			'name' => $this->input->post('produk_nama'), 
			'price' => $this->input->post('produk_harga'), 
			'qty' => $this->input->post('quantity'), 
		);
		$this->cart->insert($data);
		echo $this->show_cart(); //tampilkan cart setelah added
	}

	function show_cart(){ //Fungsi untuk menampilkan Cart
		$output = '';
		$no = 0;
		foreach ($this->cart->contents() as $items) {
			$no++;
			$output .='
				<tr>
					<td>'.$items['name'].'</td>
					<td>'.number_format($items['price']).'</td>
					<td>'.$items['qty'].'</td>
					<td>'.number_format($items['subtotal']).'</td>
					<td><button type="button" id="'.$items['rowid'].'" class="hapus_cart btn btn-danger btn-xs">Batal</button></td>
				</tr>
			';
		}
		$output .= '
			<tr>
				<th colspan="3">Total</th>
				<th colspan="2">'.'Rp '.number_format($this->cart->total()).'</th>
			</tr>
		';
		return $output;
	}

	function load_cart(){ //load data cart
		echo $this->show_cart();
	}

	function hapus_cart(){ //fungsi untuk menghapus item cart
		$data = array(
			'rowid' => $this->input->post('row_id'), 
			'qty' => 0, 
		);
		$this->cart->update($data);
		echo $this->show_cart();
	}
}

 

#7. Buat view dengan nama v_cart.php

Kemudian ketikan coding berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Shopping cart dengan codeigniter dan AJAX</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
<div class="container"><br/>
	<h2>Shopping Cart Dengan Ajax dan Codeigniter</h2>
	<hr/>
	<div class="row">
		<div class="col-md-8">
			<h4>Produk</h4>
			<div class="row">
			<?php foreach ($data as $row) : ?>
				<div class="col-md-4">
					<div class="thumbnail">
						<img width="200" src="<?php echo base_url().'assets/images/'.$row->produk_image;?>">
						<div class="caption">
							<h4><?php echo $row->produk_nama;?></h4>
							<div class="row">
								<div class="col-md-7">
									<h4><?php echo 'Rp '.number_format($row->produk_harga);?></h4>
								</div>
								<div class="col-md-5">
									<input type="number" name="quantity" id="<?php echo $row->produk_id;?>" value="1" class="quantity form-control">
								</div>
							</div>
							<button class="add_cart btn btn-success btn-block" data-produkid="<?php echo $row->produk_id;?>" data-produknama="<?php echo $row->produk_nama;?>" data-produkharga="<?php echo $row->produk_harga;?>">Add To Cart</button>
						</div>
					</div>
				</div>
			<?php endforeach;?>
				
			</div>

		</div>
		<div class="col-md-4">
			<h4>Shopping Cart</h4>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Produk</th>
						<th>Harga</th>
						<th>Qty</th>
						<th>Subtotal</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody id="detail_cart">

				</tbody>
				
			</table>
		</div>
	</div>
</div>

<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-2.2.3.min.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.add_cart').click(function(){
			var produk_id    = $(this).data("produkid");
			var produk_nama  = $(this).data("produknama");
			var produk_harga = $(this).data("produkharga");
			var quantity     = $('#' + produk_id).val();
			$.ajax({
				url : "<?php echo base_url();?>index.php/cart/add_to_cart",
				method : "POST",
				data : {produk_id: produk_id, produk_nama: produk_nama, produk_harga: produk_harga, quantity: quantity},
				success: function(data){
					$('#detail_cart').html(data);
				}
			});
		});

		// Load shopping cart
		$('#detail_cart').load("<?php echo base_url();?>index.php/cart/load_cart");

		//Hapus Item Cart
		$(document).on('click','.hapus_cart',function(){
			var row_id=$(this).attr("id"); //mengambil row_id dari artibut id
			$.ajax({
				url : "<?php echo base_url();?>cart/hapus_cart",
				method : "POST",
				data : {row_id : row_id},
				success :function(data){
					$('#detail_cart').html(data);
				}
			});
		});
	});
</script>
</body>
</html>

 

#8. Uji coba Aplikasi

Silahkan buka browser anda, dan kunjung URL berikut:

http://localhost/shopping_cart/index.php/cart

kemudian, masukan quantity dan klik tombol Add to Cart.

BOOMMM, selamat anda berhasil melakukannya.!


Kesimpulan:

Codeigniter merupakan framework (kerangka kerja) berbasis php yang menyediakan library cart, yang berfungsi untuk membuat shopping cart pada aplikasi E-Commerce.

Ajax merupakan metode atau teknik yang digunakan untuk berkomunikasi dengan server dari balik layar.

Ajax dapat berkomunikasi dengan server tanpa merload halaman web secara keseluruhan.

Perpaduan Codeigniter dan Ajax merupakan langkah tepat untuk membuat web menjadi lebih cepat dan interaktif.

Ok, sekian tutorial kali ini, semoga bermanfaat.

Jika anda bersedia membagikan tutorial ini, saya akan merasa sangat senang dan ini akan menjadi hari terbaik bagi saya.

Terima Kasih.

Dowload Source

Share:



Komentar (15)

Agus Setiawan, 04 January 2018 11:38 - Reply

haloo, apakah
1.shoping chart itu mengurangi stock?
2.pada saat proses apa yang mengurangi stock ?
3. jika sudah proses bayar tetapi ada masa expirednya bagaimana membuat sistem expirednya dan mengembalikan stock otomotis ?
TERIMA KASIH ... :-)

M Fikri, 07 January 2018 12:20 - Reply

Thanks Atas Reponnya mas,
Artikel itu hanya cara bagaimana membuat cart sederhana dengan codeigniter dan AJAX (tanpa reload page).
Tidak melakukan pengurangan stok apapun, karena belum masuk proses transaksi.
pada tabel transaksi di database harus terdapat field status transaksi.
Untuk melakukan pengurangan stok pada aplikasi e-commerce adalah pada saat checkout, setelah itu di beri tempo pembayaran pada invoice. jika lewat dari tempo yang ditetapkan, update status transaksi menjadi expired.

Budiman, 16 January 2018 08:24 - Reply

apakah produk_id harus integer?

M Fikri, 16 January 2018 14:40 - Reply

Tidak kang, yang penting unik!
Thanks atas responnya!

Jarene, 19 January 2018 15:20 - Reply

var produk_id = $(this).data("produkid"); var produk_nama = $(this).data("produknama"); var produk_harga = $(this).data("produkharga"); var quantity = $('#' + produk_id).val(); itu produkid, produknama larinya kemana kok gak ada yang sama

M Fikri, 22 January 2018 17:03 - Reply

Diambil dari Button add to cart gan:
perhatikan v_cart, dan temukan kode berikut:
<button class="add_cart btn btn-success btn-block" data-produkid="<?php echo $row->produk_id;?>;" data-produknama="<?php echo $row->produk_nama;?>;" data-produkharga="<?php echo $row->;produk_harga;?>;">Add To Cart</button>

putri, 26 January 2018 03:46 - Reply

kalau buat update data cart setelah dimasukkan ke database dengan menggunakan ajax jadi kaya gimana ya?

M Fikri, 26 January 2018 13:36 - Reply

Kalo udah masuk ke database, panggil dulu datanya dari database!
kemudian tampilkan datanya dan buat fungsi update seperti CRUD AJAX biasa.

putri, 28 January 2018 18:54 - Reply

kalau misalkan mau menambahkan dan menampilkan status apakah pesanan tersebut sedang diproses atau sudah selesai di proses kepada user, bisa ditambahkan didalam cart nya? atau terpisah? terimakasih

M Fikri, 14 February 2018 11:05 - Reply

Mbak putri, Terpisah mbak!
Status pemesanan biasanya berhubungan dengan transaksi. sedangkan shopping cart hanyalah untuk penampung item belanja secara temporary (sementara). jadi, user dapat menghapus item belanjaan tanpa mempengaruhi transaksi.

Riki Ahmad Fadilah, 01 March 2018 16:52 - Reply

terima kasih, tutorial ini sangat membantu :)

M Fikri, 02 March 2018 06:58 - Reply

Sama-sama gan!

Manggiardi Brahma Wijaya Tirta, 31 July 2018 11:19 - Reply

thanks gan, sangat membantu, tapi saya mau tanya, itu pas saya coba maksimal cartnya hanya 6 aja ya? bagaimana jika mesan barangnya lebih dari 6? thanks

M Fikri, 01 August 2018 17:28 - Reply

Itu karena data produk yang ada di database hanya ada 6 record gan,
coba tambahkan data produk yang di database.!

Burhan Abdillah, 09 August 2018 10:22 - Reply

mas, bagaimana cara nya pengunjung bisa melakukan update qty langsung di keranjang belanja? jadi sebaiknya qty di table itu berupa input="text" lalu samping nya ada button untuk ubah qty, otomatis subtotal dan grand total juga berubah

Leave a Comment