Bagaimana membangun sebuah Shopping Cart menggunakan CodeIgniter dan jQuery

() translation by (you can also view the original English article)

CodeIgniter adalah open source PHP framework web aplikasi dengan banyak fitur. Baru-baru ini, berkat update terbaru, fitur baru telah ditambahkan ke frameowrk ini, disebut Cart Class. Dalam tutorial ini, kita akan mengambil keuntungan dari kelas baru ini, dan menulis sebuah sistem shopping cart, dengan sentuhan tambahan sentuhan jQuery.

Apa yang dimaksud dengan CodeIgniter?

CodeIgniter adalah PHP framework yang kuat dengan footprint yang sangat kecil, dibangun untuk PHP coders yang membutuhkan sebuah toolkit yang sederhana dan elegan
untuk membuat aplikasi web berfitur lengkap. Jika Anda seorang developer yang hidup di dunia nyata dari shared hosting account dan klien
dengan deadline, dan jika Anda lelah ponderously besar dan benar-benar tidak terdokumentasikan framework, CodeIgniter adalah untuk Anda!

Dalam tutorial ini, saya menggunakan versi stabil terbaru dari CodeIgniter, V1.7.2. Tutorial ini mengharuskan Anda untuk memiliki pengetahuan sederhana CodeIgniter dan pola MVC. Tutorial berikut akan membantu Anda memulai segera!

Semua yang Anda butuhkan untuk mendapatkan untuk memulai oleh Ben Haines
CodeIgniter dari awal: Hari 1 oleh Jeffrey cara

Sumber daya

Sebelum kita mulai, kita perlu men-download CodeIgniter dan jQuery. Klik di sini untuk men-download CodeIgniter, dan di sini untuk men-download jQuery. Atau, Anda dapat referensi jQuery melalui Google CDN: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js " type = text/javascript"

Struktur folder

Sebelum kita mulai pengkodean, saya ingin membuat struktur yang solid untuk aplikasi kita. Saya lebih suka memindahkan application folder dari folder system; Hal ini tidak diperlukan, tetapi
itu membuat proses update lebih mudah di masa depan.

Folder akhir kita perlu membuat sebelum awal adalah folder assets; ini adalah tempat aku menyimpan gambar-gambar saya, Javascript, CSS dan aset lainnya.
Mari kita lihat pada struktur folder akhir:

Di dalam folder assets/js, kami menempatkan jquery-1.3.2.min.js file, dan file kosong yang disebut core.js. Dalam file ini, kami akan menulis JavaScript kami.
Dan satu hal lagi tetap: kita perlu membuat stylesheet. Jadi membuat file baru di assets/css disebut core.css.

Database

Kita akan mengambil produk kami dari database; Jadi mari kita pergi ke PHPMyAdmin dan membuat sebuah tabel yang disebut CI_Cart.

Dan bagi Anda yang ingin melakukan copy dan paste, kode SQL...

  CREATE TABLE `products` (
	  `id` int(128) NOT NULL auto_increment,
	  `name` varchar(128) NOT NULL,
	  `price` varchar(32) NOT NULL,
	  `image` varchar(128) NOT NULL,
	  PRIMARY KEY  (`id`)
	) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Sekarang, mari kita memasukkan beberapa data ke tabel ini:

Lagi - untuk mereka yang lebih suka untuk copy dan paste:

	INSERT INTO `products` VALUES(1, 'MacBook Pro', '1199', 'macbookpro.jpg');

	INSERT INTO `products` VALUES(2, 'MacBook Air', '1499', 'macbookair.jpg');

	INSERT INTO `products` VALUES(3, 'MacBook', '999', 'macbook.jpg');

Ada segala sesuatu yang perlu dilakukan untuk database kami dalam tutorial ini.

Langkah 1: Aplikasi Config

Sebelum kita dapat mulai menggunakan CodeIgniter, kita harus men-setup konfigurasi kami. Buka application/config/config.php, dan ubah rincian berikut:

1	$config['base_url'] = "http://example.com";

Mengganti http://example.com dengan url untuk Anda instalasi. Selanjutnya, mencari Global XSS Filtering terletak di dekat bagian bawah config.php file.

1	$config['global_xss_filtering'] = FALSE;

Mari kita udah dari FALSE ke TRUE, untuk membuat filter ini aktif ketika GET, POST atau COOKIE data ditemui. Selanjutnya, buka application/config/database.php dan
masukkan informasi database Anda.

	$db['default']['hostname'] = "localhost";
	$db['default']['username'] = "root";
	$db['default']['password'] = "root";
	$db['default']['database'] = "CI_Cart";
	$db['default']['dbdriver'] = "mysql";

Selanjutnya, buka application/config/routes.php dan mengubah controller default untuk "cart":

1	$route['default_controller'] = "cart";

Sekarang ketika seseorang mengunjungi url untuk aplikasi Anda, kelas cart akan dimuat secara otomatis.

Kami memiliki satu file untuk mengedit, jadi buka application/config/autoload.php dan autoload komponen-komponen berikut:

1	/*
2	\| -------------------------------------------------------------------
3	\| Auto-load Libraries
4	\| -------------------------------------------------------------------
5	\| These are the classes located in the system/libraries folder
6	\| or in your system/application/libraries folder.
7	\|
8	\| Prototype:
9	\|
10	\| $autoload['libraries'] = array('database', 'session', 'xmlrpc');
11	*/
12
13	$autoload['libraries'] = array('cart', 'database');
14
15
16	/*
17	\| -------------------------------------------------------------------
18	\| Auto-load Helper Files
19	\| -------------------------------------------------------------------
20	\| Prototype:
21	\|
22	\| $autoload['helper'] = array('url', 'file');
23	*/
24
25	$autoload['helper'] = array('url', 'form');

Perpustakaan

database - memungkinkan aplikasi Anda untuk terhubung dengan database dan membuat database kelas yang tersedia.
cart - memungkinkan Anda untuk mengakses kelas keranjang belanja, informasi lebih lanjut.

Helper

url - url Perpustakaan memungkinkan Anda untuk mengakses metode yang berbeda untuk membuat dan mengambil link, informasi lebih lanjut
form - Perpustakaan ini membantu kami dengan menciptakan form. Untuk informasi lebih lanjut...

Langkah 2: Cart Controller

Kami mengubah controller standar kami untuk "cart", tapi controller ini belum ada. Jadi, buat file baru yang bernama application/controllers/cart.php dan menambahkan
struktur controller standar.

	<?php

	class Cart extends Controller { // Our Cart class extends the Controller class
		
		function Cart()
		{
			parent::Controller(); // We define the the Controller class is the parent.	
		}
	

	}
	/* End of file cart.php */
	/* Location: ./application/controllers/cart.php */

Sekarang, mari kita membuat fungsi index. Ini akan berjalan secara otomatis ketika kelas cart di diminta.

1	function index()
2	{
3	$data['products'] = $this->cart_model->retrieve_products(); // Retrieve an array with all products
4	}

Jadi apa yang terjadi di sini? Juga Anda akan melihat bahwa kami assign output dari cart_model ke variabel disebut "$data ['products']."
Jika kita me-refresh halaman, kami akan mendapatkan error, karena kami belum membuat cart_model.

Langkah 3: Membuat Model kita

Apa itu Model?

Model yang kelas PHP yang dirancang untuk bekerja dengan informasi dalam database Anda. Sebagai contoh, katakanlah Anda menggunakan CodeIgniter untuk mengelola sebuah blog. Anda mungkin telah
kelas model yang berisi fungsi untuk insert, update, dan mengambil data blog Anda.

Model yang dibuat di folder berikut: application/models/; Jadi mari kita membuat file model yang disebut cart_model.php, dan membuat beberapa update.

	<?php 

		class Cart_model extends Model { // Our Cart_model class extends the Model class
		
		}
		
	/* End of file cart_model.php */
	/* Location: ./application/models/cart_model.php */

Ini sederhana seperti itu; kami telah menciptakan model. Penting bahwa perlu extend Cart_model dengan Model untuk membuatnya bekerja dengan baik. Ingat ketika kita dipanggil model kami dalam fungsi index() cart controller kami? Kita sebut fungsi yang disebut retrieve_products, jadi mari kita membuat itu!

	<?php 

		class Cart_model extends Model { // Our Cart_model class extends the Model class
			
			// Function to retrieve an array with all product information
			function retrieve_products(){
				$query = $this->db->get('products'); // Select the table products
				return $query->result_array(); // Return the results in a array.
			}			
		
		}
		
	/* End of file cart_model.php */
	/* Location: ./application/models/cart_model.php */

Refresh halaman, dan melihat apa yang terjadi:

Kami membuat model, dan memanggil fungsi retrieve_products dari cart controller, tapi kami lupa untuk memuatnya.
Ada metode yang berbeda tentang bagaimana untuk me-load model, tetapi dalam tutorial ini saya akan memanggilnya dalam construct fungsi, atau dalam kasus ini, fungsi cart terletak di
Bagian atas dari file controllers/cart.php kami.

	<?php

	class Cart extends Controller { // Our Cart class extends the Controller class
		
		function Cart()
		{
			parent::Controller(); // We define the the Controller class is the parent.	
			$this->load->model('cart_model'); // Load our cart model for our entire class
		}
	
	}
	/* End of file cart.php */
	/* Location: ./application/controllers/cart.php */

Sekarang, menguji itu dengan mencetak array.

		function index()
		{
		    $data['products'] = $this->cart_model->retrieve_products(); // Retrieve an array with all products
		    print_r($data['products']); // Print out the array to see if it works (Remove this line when done testing)
		}

Jika semuanya diproses benar, Anda harus melihat berikut di browser Anda.

1	Array ( [0] => Array ( [id] => 1 [name] => MacBook Pro [price] => 1199 [image] => macbookpro.jpg )
2	[1] => Array ( [id] => 2 [name] => MacBook Air [price] => 1499 [image] => macbookair.jpg )
3	[2] => Array ( [id] => 3 [name] => MacBook [price] => 999 [image] => macbook.jpg ) )
4

Sekarang bahwa kita telah diperoleh konten kami, kita harus menampilkannya menggunakan view!

Step 4: Membuat View

Apa itu View?

Lihat adalah hanya sebuah halaman web, atau sebuah fragmen halaman, seperti header, footer, sidebar, dll.
Pada kenyataannya, view fleksibel dapat tertanam dalam view lain (dalam view lainnya, dll, dll) jika Anda memerlukan jenis hirarki.

View tidak pernah dipanggil langsung, mereka harus dimuat oleh controller.
Ingat bahwa dalam MVC framework, Controller bertindak sebagai polisi lalu lintas, sehingga bertanggung jawab untuk mengambil view tertentu.

Buka folder application/views, dan buat sebuah file baru yang disebut index.php.

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CodeIgniter Shopping Cart</title>
		
		<link href="<?php echo base_url(); ?>assets/css/core.css" media="screen" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/core.js"></script>
		</head>
		<body>
		
		<div id="wrap">
		
			<?php $this->view($content); ?>
			
		</div>
		
		</body>
		</html>

Ini akan menjadi template inti kami. Seperti yang Anda lihat, kami memuat kami jQuery dan stylesheet kami.
Karena kita memuat helper url, "base_url();" akan kembali url ke aplikasi kita.

Kami juga yang memuat view yang mengandung sebuah variabel yang disebut $content. Hal ini memungkinkan kita untuk secara dinamis memuat konten. Jika kita mendefinisikan bahwa '$content' adalah 'demo,' view
views/demo.php akan dimuat misalnya.

Langkah 5: Mengirim Data ke View

Di langkah 3, kami menyiapkan fungsi index, dan diperoleh semua produk dari database, tapi kami belum mengirim data ke view Jadi Bukalah
/application/controllers/cart.php

		function index()
		{
		    $data['products'] = $this->cart_model->retrieve_products(); // Retrieve an array with all products
			
			$data['content'] = 'cart/products'; // Select our view file that will display our products
			$this->load->view('index', $data); // Display the page with the above defined content
		}

Seperti yang Anda lihat, kita telah menetapkan variabel $content ke 'cart/products'. Kami belum membuat view ini, jadi mari kita melakukan itu sekarang.

Buat sebuah file baru dalam application/views/cart dan menyebutnya products.php. Dalam file ini, kami akan menampilkan data yang kami terima dari model cart kami. Kita akan
Gunakan unsorted list untuk menampilkan produk-produk kami.

1	<ul class="products">
2	<li></li>
3	</ul>

Karena data produk yang dikembalikan dalam sebuah array, kita harus menggunakan foreach untuk menampilkan semua produk

	<ul class="products">
		<?php foreach($products as $p): ?>
		<li>
		</li>
		<?php endforeach;?>
	</ul>

Sekarang bahwa kita sudah mulai foreach loop, kita dapat mulai menampilkan data produk.

	<ul class="products">
		<?php foreach($products as $p): ?>
		<li>
			<h3><?php echo $p['name']; ?></h3>
			<img src="<?php echo base_url(); ?>assets/img/products/<?php echo $p['image']; ?>" alt="" />
			<small>&euro;<?php echo $p['price']; ?></small>
			<?php echo form_open('cart/add_cart_item'); ?>
				<fieldset>
					<label>Quantity</label>
					<?php echo form_input('quantity', '1', 'maxlength="2"'); ?>
					<?php echo form_hidden('product_id', $p['id']); ?>
					<?php echo form_submit('add', 'Add'); ?>
				</fieldset>
			<?php echo form_close(); ?>
		</li>
		<?php endforeach;?>
	</ul>

Mari kita memecah kode di atas menjadi beberapa bagian.

1	<h3><?php echo $p['name']; ?></h3>

Kami menampilkan nama produk dalam H3 tag.

1	<img src="<?php echo base_url(); ?>assets/img/products/<?php echo $p['image']; ?>" alt="" />

Di sini, kami menggunakan fungsi base_url untuk mengambil url ke aplikasi kami, dan kemudian mengakses folder assest/img.
Kemudian kami meminta gambar produk dari database.

1	<small>€<?php echo $p['price']; ?></small>

Kami menampilkan produk harga Diperoleh dari database, dan wrapp itu dalam tag kecil.

1	<?php echo form_open('cart/add_cart_item'); ?>
2	<fieldset>

Kami menggunakan form helper untuk membuat form opening tag, dan menetapkan action untuk "cart/add_cart_item".

1	<label>Quantity</label>
2	<?php echo form_input('quantity', '1', 'maxlength="2"'); ?>
3	<?php echo form_hidden('product_id', $p['id']); ?>
4	<?php echo form_submit('add', 'Add'); ?>

Ini adalah bagian di mana pengguna dapat menentukan jumlah item yang ia suka. Kami menggunakan form helper lagi untuk membuat sebuah field input dengan nama "quantity" dan menetapkan nilai default untuk "1." Kita juga melewati beberapa data tambahan - dalam kasus ini, kita tetapkan maxlength untuk "2."

Kami juga ditempatkan bidang hidden - lagi menggunakan form helper - dan menamakannya "product_id."

Selanjutnya, kami memiliki tombol kirim, dengan nama "add" dan nilai default "Add."

1	</fieldset>
2	<?php echo form_close(); ?>

Akhirnya, kami menutup fieldset kami, dan form. Sekarang mari kita tambahkan beberapa CSS!

	body{
		font-family: "Lucida Sans";
		font-size: 12px;
	}
	
	#wrap{
		width: 1024px;
	}
	
	ul.products{
		list-style-type: none;
		width: 525px;
		margin: 0;
		padding: 0;
	}
	
		ul.products li{
			background: #eeeeee;
			border: 1px solid #d3d3d3;
			padding: 5px;
			width: 150px;
			text-align: center;
			float: left;
			margin-right: 10px;
		}
	
		ul.products h3{
			margin: 0;
			padding: 0px 0px 5px 0px;
			font-size: 14px;
		}
		
		ul.products small{
			display: block;
		}
		
		ul.products form fieldset{
			border: 0px;
		}
		
		ul.products form label{
			font-size: 12px;
		}
		
		ul.products form input[type=text]{
			width: 18px;
			background: #FFF;
			border: 1px solid #d3d3d3;
		}

Saya telah menambahkan tiga gambar untuk assets/img/products, yang sesuai dengan nama dari database.

Step 6: Menambahkan produk ke Cart

Kami ingin menambahkan produk ke cart menggunakan jQuery, tetapi kami juga ingin untuk bekerja untuk pengguna yang tidak memiliki JavaScript diaktifkan. Mari selami kami file JavaScript, assets/js/core.js, dan mulai dengan jQuery opening Tag:

1	$(document).ready(function() {
2	/place jQuery actions here/
3
4	});

Karena CodeIgniter menggunakan mod_rewrite jenis url "index.php/cart", kita akan menentukan var dengan url ke aplikasi kami:

	$(document).ready(function() { 
		/*place jQuery actions here*/ 
		var link = "/tutorials/CodeIgniter_Shopping_Cart/demo/index.php/"; // Url to your application (including index.php/)
	
	});

Jangan lupa untuk mengubahnya sesuai untuk situasi Anda. Selanjutnya, kami ingin melihat jika bentuk sedang dikirimkan. Kita dapat menggunakan fungsi kirim jQuery untuk melakukan hal itu.

	$(document).ready(function() { 
		/*place jQuery actions here*/ 
		var link = "/tutorials/CodeIgniter_Shopping_Cart/demo/index.php/"; // Url to your application (including index.php/)
	
		$("ul.products form").submit(function() {
	
			return false; // Stop the browser of loading the page defined in the form "action" parameter.
		});
	
	});

Sebelum kami dapat mengirimkan data menggunakan jQuery, kita harus mendapatkan nilai-nilai yang kita perlu kirim. Jadi kami menggunakan jQuery menemukan fungsi untuk menemukan bidang yang kita butuhkan, dan mengambil nilai-nilai mereka.

	$(document).ready(function() { 
		/*place jQuery actions here*/ 
		var link = "/tutorials/CodeIgniter_Shopping_Cart/demo/index.php/"; // Url to your application (including index.php/)
	
		$("ul.products form").submit(function() {
			// Get the product ID and the quantity 
			var id = $(this).find('input[name=product_id]').val();
			var qty = $(this).find('input[name=quantity]').val();
			
			return false; // Stop the browser of loading the page defined in the form "action" parameter.
		});
	
	});

Jika Anda ingin menguji it out, tambahkan alert dan mari kita lihat apa yang terjadi.

	$(document).ready(function() { 
		/*place jQuery actions here*/ 
		var link = "/tutorials/CodeIgniter_Shopping_Cart/demo/index.php/"; // Url to your application (including index.php/)
	
		$("ul.products form").submit(function() {
			// Get the product ID and the quantity 
			var id = $(this).find('input[name=product_id]').val();
			var qty = $(this).find('input[name=quantity]').val();
			
			alert('ID:' + id + '\n\rQTY:' + qty);
			
			return false; // Stop the browser of loading the page defined in the form "action" parameter.
		});
	
	});

Jadi ini bekerja dengan baik! Ini berarti kita dapat mulai mengirimkan nilai-nilai ini menggunakan jQuery Post.

	$(document).ready(function() { 
		/*place jQuery actions here*/ 
		var link = "/tutorials/CodeIgniter_Shopping_Cart/demo/index.php/"; // Url to your application (including index.php/)
	
		$("ul.products form").submit(function() {
			// Get the product ID and the quantity 
			var id = $(this).find('input[name=product_id]').val();
			var qty = $(this).find('input[name=quantity]').val();
			
		 	$.post(link + "cart/add_cart_item", { product_id: id, quantity: qty, ajax: '1' },
  				function(data){	
 		 			// Interact with returned data
 			 });
 			 
			return false; // Stop the browser of loading the page defined in the form "action" parameter.
		});
	
	});

Pada kode diatas, kita post data ke cart controller kami dan meminta add_cart_item fungsi. Ini contoh data yang dikirim:

product_id: 3
quantity: 1
ajax: 1

Selain data produk, Anda dapat melihat bahwa kami juga kirim melalui variabel disebut ajax, dengan nilai '1.' Kita dapat menggunakan ini untuk memeriksa apakah pengguna memiliki JavaScript diaktifkan
atau tidak. Karena ketika dinonaktifkan, hanya product_id dan kuantitas akan diposting.

Sebelum kita dapat mulai berinteraksi dengan data yang dikembalikan dari post, kami harus membuat fungsi yang mengembalikan data. Buka
application/controllers/cart.php dan menambahkan fungsi bernama "add_cart_item"

	function add_cart_item(){
		
		if($this->cart_model->validate_add_cart_item() == TRUE){
			
			// Check if user has javascript enabled
			if($this->input->post('ajax') != '1'){
				redirect('cart'); // If javascript is not enabled, reload the page with new data
			}else{
				echo 'true'; // If javascript is enabled, return true, so the cart gets updated
			}
		}
		
	}

Pada kode diatas, kita mulai add_cart_item fungsi. Selanjutnya, kami menggunakan if statement untuk memeriksa jika fungsi cart_model memanggil validate_add_cart_item()
mengembalikan nilai true. Kita masih harus membuat fungsi tersebut, tetapi apa yang dilakukan pada akhirnya, adalah memeriksa jika produk yang ada, dan kemudian menambahkan ini ke cart. Kita akan pergi selama ini sedikit lebih lama.

Sekarang Anda dapat melihat mengapa kami telah menambahkan nilai ajax di jQuery Post. Jika tidak ada ajax ada diposting, itu berarti pengguna telah dinonaktifkan JavaScript - yang berarti kita harus reload halaman
sehingga pengguna melihat sebuah refreshed cart. Jika ajax diposting, kita mengembalikan nilai true, jadi jQuery tahu bahwa semuanya diproses dengan benar.

Mari kita bergerak dan membuat fungsi validate_add_cart_item()! Buka application/models/cart_model.php

1	// Add an item to the cart
2	function validate_add_cart_item(){
3	// Validate posted data, and then add the item!
4	}

Pertama kita akan menetapkan data dikirim ke variabel lokal.

	// Add an item to the cart
	function validate_add_cart_item(){
		
		$id = $this->input->post('product_id'); // Assign posted product_id to $id
		$cty = $this->input->post('quantity'); // Assign posted quantity to $cty
		
	}

Sekarang, saatnya untuk memvalidasi data dikirim, dan melihat apakah ada produk.

	// Add an item to the cart
	function validate_add_cart_item(){
		
		$id = $this->input->post('product_id'); // Assign posted product_id to $id
		$cty = $this->input->post('quantity'); // Assign posted quantity to $cty
		
		$this->db->where('id', $id); // Select where id matches the posted id
		$query = $this->db->get('products', 1); // Select the products where a match is found and limit the query by 1
		
	}

Kami menciptakan sebuah query, dan meminta untuk mengembalikan 1 hasil mana id dikirim sesuai id dalam database.

	// Add an item to the cart
	function validate_add_cart_item(){
		
		$id = $this->input->post('product_id'); // Assign posted product_id to $id
		$cty = $this->input->post('quantity'); // Assign posted quantity to $cty
		
		$this->db->where('id', $id); // Select where id matches the posted id
		$query = $this->db->get('products', 1); // Select the products where a match is found and limit the query by 1
		
		// Check if a row has matched our product id
		if($query->num_rows > 0){
		
		// We have a match!
		
		}else{
			// Nothing found! Return FALSE!	
			return FALSE;
		}
	}

Jika tidak menemukan apapun, kita mengembalikan false. Jika ada yang cocok, kita menambahkan item ke cart.

	// Add an item to the cart
	function validate_add_cart_item(){
		
		$id = $this->input->post('product_id'); // Assign posted product_id to $id
		$cty = $this->input->post('quantity'); // Assign posted quantity to $cty
		
		$this->db->where('id', $id); // Select where id matches the posted id
		$query = $this->db->get('products', 1); // Select the products where a match is found and limit the query by 1
		
		// Check if a row has matched our product id
		if($query->num_rows > 0){
		
		// We have a match!
			foreach ($query->result() as $row)
			{
				// Create an array with product information
			    $data = array(
               		'id'      => $id,
               		'qty'     => $cty,
               		'price'   => $row->price,
               		'name'    => $row->name
            	);

				// Add the data to the cart using the insert function that is available because we loaded the cart library
				$this->cart->insert($data); 
				
				return TRUE; // Finally return TRUE
			}
		
		}else{
			// Nothing found! Return FALSE!	
			return FALSE;
		}
	}

Sebelum kita dapat menggunakan jQuery untuk reload cart, kita harus membuat daftar cart.

Langkah 7: Membuat View Cart

Pertama, mari kita buka application/views/index.php dan tambahkan div untuk cart kami.

	<div id="wrap">
	
		<?php $this->view($content); ?>
		
		<div class="cart_list">
			<h3>Your shopping cart</h3>
			<div id="cart_content">
				<?php echo $this->view('cart/cart.php'); ?>
			</div>
		</div>
	</div>

Di atas, kami menciptakan sebuah div yang disebut cart_list, dan, di dalam, div dengan id cart_content. Sekarang dalam div cart_content, kita akan memuat view lain
disebut cart.php.

Buat sebuah file baru dalam application/views/cart, dan nama itu cart.php. Tambahkan kode berikut:

	<?php if(!$this->cart->contents()):
		echo 'You don\'t have any items yet.';
	else:
	?>
	
	<?php echo form_open('cart/update_cart'); ?>
	<table width="100%" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<td>Qty</td>
				<td>Item Description</td>
				<td>Item Price</td>
				<td>Sub-Total</td>
			</tr>
		</thead>
		<tbody>
			<?php $i = 1; ?>
			<?php foreach($this->cart->contents() as $items): ?>
			
			<?php echo form_hidden('rowid[]', $items['rowid']); ?>
			<tr <?php if($i&1){ echo 'class="alt"'; }?>>
		  		<td>
		  			<?php echo form_input(array('name' => 'qty[]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?>
		  		</td>
		  		
		  		<td><?php echo $items['name']; ?></td>
		  		
		  		<td>&euro;<?php echo $this->cart->format_number($items['price']); ?></td>
		  		<td>&euro;<?php echo $this->cart->format_number($items['subtotal']); ?></td>
		  	</tr>
		  	
		  	<?php $i++; ?>
			<?php endforeach; ?>
			
			<tr>
				<td</td>
	 		 	<td></td>
	 		 	<td><strong>Total</strong></td>
	 		 	<td>&euro;<?php echo $this->cart->format_number($this->cart->total()); ?></td>
			</tr>
		</tbody>
	</table>
	
	<p><?php echo form_submit('', 'Update your Cart'); echo anchor('cart/empty_cart', 'Empty Cart', 'class="empty"');?></p>
	<p><small>If the quantity is set to zero, the item will be removed from the cart.</small></p>
	<?php 
	echo form_close(); 
	endif;
	?>

Itulah beberapa kode; Mari kita memecahnya menjadi bagian yang berbeda.

1	<?php if(!$this->cart->contents()):
2	echo 'You don\'t have any items yet.';
3	else:
4	?>

Kami menggunakan if statement untuk memeriksa jika cart berisi konten apapun. Jika cart tidak memiliki konten apapun, kami menampilkan pesan "You don't have any items yet." Jika
cart tidak kosong, kami akan menjalankan seluruh kode.

	<?php echo form_open('cart/update_cart'); ?>
	<table width="100%" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<td>Qty</td>
				<td>Item Description</td>
				<td>Item Price</td>
				<td>Sub-Total</td>
			</tr>
		</thead>

Selanjutnya, kita membuat tag terbuka form kami menggunakan form helper, dan menetapkan action parameter ke cart/update_cart. Kami juga membuat sebuah tabel dengan tableheading, dan
menambahkan jumlah, Deskripsi Item, harga barang, dan Total sub bidang.

		<tbody>
			<?php $i = 1; // Keep track of the amount of loops ?> 
			<?php foreach($this->cart->contents() as $items): // We break the cart contents into parts ?>
			
			<?php echo form_hidden('rowid[]', $items['rowid']); // We added an hidden field which contains a unique id in array format, this is needed in order to update ?>
			<tr <?php if($i&1){ echo 'class="alt"'; // If $i is odd, we add the class "alt" in order to change the background color }?>>
		  		<td>
		  			<?php echo form_input(array('name' => 'qty[]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); // Here we created an input field with the name qty[] this allows us to interact with it as an array when its posted.?>
		  		</td>
		  		
		  		<td><?php echo $items['name']; // Display the item name ?></td>
		  		
		  		<td>&euro;<?php echo $this->cart->format_number($items['price']); // Display the item price ?></td>
		  		<td>&euro;<?php echo $this->cart->format_number($items['subtotal']); // Display subtotal ?></td>
		  	</tr>
		  	
		  	<?php $i++; // Add 1 to $i ?>
			<?php endforeach; // End the foreach ?>
			
			<tr>
				<td</td>
	 		 	<td></td>
	 		 	<td><strong>Total</strong></td>
	 		 	<td>&euro;<?php echo $this->cart->format_number($this->cart->total()); // Display the total amount ?></td>
			</tr>
		</tbody>

Apa yang dimaksud dengan ID baris?

ID baris adalah pengidentifikasi unik yang dihasilkan oleh kode cart ketika item ditambahkan ke cart.
ID unik dibuat alasannya sehingga produk yang identik dengan pilihan yang berbeda dapat dikelola oleh cart.

Sebagai contoh, mari kita bayangkan bahwa seseorang membeli dua identik t-shirt (sama Produk ID), tetapi dalam ukuran yang berbeda. ID Produk (dan atribut lainnya) akan
menjadi identik untuk ukuran kedua karena itu adalah baju yang sama. Satu-satunya perbedaan akan menjadi ukuran. cart harus memiliki cara untuk mengidentifikasi
perbedaan ini sehingga dua ukuran kemeja dapat dikelola secara mandiri. Itu begitu dengan menciptakan yang unik "baris ID" berdasarkan ID Produk dan
setiap pilihan yang terkait dengan itu.

	</table>
	
	<p><?php echo form_submit('', 'Update your Cart'); echo anchor('cart/empty_cart', 'Empty Cart', 'class="empty"');?></p>
	<p><small>If the quantity is set to zero, the item will be removed from the cart.</small></p>
	<?php 
	echo form_close(); 
	endif;
	?>

Akhirnya, kita menutup table dan membuat link menggunakan fungsi anchor ke cart/emtpy_cart. Kita akan menciptakan cart kosong
fungsi segera.

Refresh halaman dan lihatlah:

Kita tidak diberitahu jQuery untuk memperbarui cart belanja ketika Add ditekan. Tetapi kita dapat menguji menggunakan FireBug. Klik "Add", dan meninjau apa yang terjadi:

Seperti yang Anda lihat, jQuery post data cart/add_cart_item; Sekarang mari kita lihat apa tanggapan.

TRUE dikembalikan, jadi me-refresh halaman Anda, dan Anda harus memiliki item dalam shopping cart.

Sekarang bahwa karya ini, mari kita bergerak dengan jQuery, dan refresh cart ketika item ditambahkan ke cart.

Langkah 8: Refreshing Cart

Ingat bahwa kita berakhir dengan:

	$(document).ready(function() { 
		/*place jQuery actions here*/ 
		var link = "/tutorials/CodeIgniter_Shopping_Cart/demo/index.php/"; // Url to your application (including index.php/)
	
		$("ul.products form").submit(function() {
			// Get the product ID and the quantity 
			var id = $(this).find('input[name=product_id]').val();
			var qty = $(this).find('input[name=quantity]').val();
			
		 	$.post(link + "cart/add_cart_item", { product_id: id, quantity: qty, ajax: '1' },
  				function(data){	
 		 			// Interact with returned data
 			 });
 			 
			return false; // Stop the browser of loading the page defined in the form "action" parameter.
		});
	
	});

Sekarang saatnya untuk berinteraksi dengan data yang dikembalikan, dalam hal ini 'true' atau 'false.'

		 	$.post(link + "cart/add_cart_item", { product_id: id, quantity: qty, ajax: '1' },
  				function(data){	
 		 			
 		 			if(data == 'true'){
 		 			
 		 			}else{
 		 				alert("Product does not exist");
 		 			}
 			 });

Dengan menggunakan if statement, kita dapat me-refresh cart jika benar dikembalikan, atau memberikan peringatan ketika pengguna mencoba untuk menambahkan produk tidak ada.

		 	$.post(link + "cart/add_cart_item", { product_id: id, quantity: qty, ajax: '1' },
  				function(data){	
 		 			
 		 			if(data == 'true'){
 		 			
    					$.get(link + "cart/show_cart", function(cart){ // Get the contents of the url cart/show_cart
  							$("#cart_content").html(cart); // Replace the information in the div #cart_content with the retrieved data
						}); 		 
										
 		 			}else{
 		 				alert("Product does not exist");
 		 			}
 			 });

Ketika true dikembalikan, kita menggunakan jQuery's "get", untuk memuat url cart/show_cart dan kami menggantikan div #cart_content dengan data yang dikembalikan oleh url itu.
Namun, Anda mungkin memperhatikan bahwa fungsi show_cart tidak ada Mari kita membuat yang sekarang dengan membuka application/controllers/cart.php controller kami

Ini adalah solusi yang sangat mudah. Kita hanya perlu mengembalikan isi dari cart, membuat fungsi, dan kembali view views/cart/cart.php

1	function show_cart(){
2	$this->load->view('cart/cart');
3	}

Refresh halaman, dan mencoba untuk menambah item lain. jQuery harus menambahkannya tanpa reload halaman. (Kecuali jika Anda memiliki JavaScript dinonaktifkan, tentu saja.)

Langkah 9: Update Cart

Hanya beberapa langkah lagi! Bila Anda memiliki item dalam cart Anda, tekan update, dan melihat apa yang sebenarnya sedang diposting:

Seperti yang Anda lihat, rowid unik untuk setiap item dalam shopping cart. Kita akan menggunakan ID ini untuk memeriksa item yang harus diperbaharui.

Buka application/controllers/cart.php, dan menambahkan fungsi update_cart.

1	function update_cart(){
2	$this->cart_model->validate_update_cart();
3	redirect('cart');
4	}

Sekali lagi, kita menggunakan sebuah model untuk menangani data. Setelah selesai, kita menyegarkan halaman pengguna. Buka application/models/cart_model.php, dan membuat yang baru
fungsi yang disebut validate_update_cart.

	// Updated the shopping cart
	function validate_update_cart(){
		
		// Get the total number of items in cart
		$total = $this->cart->total_items();
		
		// Retrieve the posted information
		$item = $this->input->post('rowid');
	    $qty = $this->input->post('qty');

		// Cycle true all items and update them
		for($i=0;$i < $total;$i++)
		{
			// Create an array with the products rowid's and quantities. 
			$data = array(
               'rowid' => $item[$i],
               'qty'   => $qty[$i]
            );
            
            // Update the cart with the new information
			$this->cart->update($data);
		}

	}

Seperti yang Anda lihat, kami pertama menetapkan jumlah item dalam cart kami ke variabel lokal disebut $total.
Selanjutnya, kami assign posted rowid dan kuantitas untuk variabel lokal juga.

Kami menggunakan for siklus melalui semuanya sampai $i sama dengan $total - ini memastikan semuanya diperbarui.

Ketika cycling melalui item dikirim, kami menciptakan sebuah array dengan posted rowid dan kuantitas. Array yang dibuat, kami memperbarui informasi ini menggunakan
fungsi perpustakaan cart yang disebut update.

Mencobanya dan melihat jika item sedang Diperbarui!

Langkah 10: Cart kosong

Langkah terakhir kami! Kita harus membuat fungsi untuk mengosongkan cart kami. Buka application/controllers/cart.php lagi dan membuat fungsi yang disebut empty_cart.

1	function empty_cart(){
2	$this->cart->destroy(); // Destroy all cart data
3	redirect('cart'); // Refresh te page
4	}

Tambahkan beberapa jQuery untuk itu! Buka assets/js/core.js dan menulis berikut:

	$(".empty").live("click", function(){
    	$.get(link + "cart/empty_cart", function(){
    		$.get(link + "cart/show_cart", function(cart){
  				$("#cart_content").html(cart);
			});
		});
		
		return false;
    });

Link "Emtpy Cart" kami memiliki kelas yang disebut .empty; Jadi kami lampirkan fungsi klik untuk itu tanpa masalah. Anda mungkin melihat bahwa kita menggunakan fungsi jQuery live.
Kita harus menggunakan ini untuk membuatnya bekerja. Jika kami meninggalkan itu, dan Anda menambahkan item ke cart, dan kemudian tekan keranjang kosong, itu tidak akan berhasil.

Setelah link diklik, kami menggunakan kode yang sama bahwa dalam fungsi cart update. Pertama, kami mengambil empty_cart url jadi cart kami akan kosong, dan kemudian kita hanya mengambil konten keranjang baru, dan menempatkan konten ke div. #cart_content kami

Selesai!

Saya harap Anda menikmati tutorial ini! Jika Anda melakukannya, Harap beritahu kami tahu di komentar!

Ikuti kami di Twitter, atau berlangganan Nettuts + RSS Feed untuk tutorial pengembangan web terbaik di web. Siap

Siap untuk mengambil keterampilan Anda ke tingkat berikutnya, dan mulai mendapatkan keuntungan dari script dan komponen? Periksa saudari kita pasar, CodeCanyon.