Node Js Shopping Cart Tutorial Mysql

Hi sahabat web developer, gimana kabranya? Semoga sehat selalu ya. Sepatutnya konsisten jiwa codingnya.

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

Hmm., yaitu membentuk shopping cart ataupun keranjang belanja menggunakan codeigniter dan ajax.

Apa itu shopping cart?

Shopping cart yaitu keranjang belanja yang berfungsi untuk menampung item belanja puas aplikasi E-Commerce.

Kenapa menggunakan codeigniter dan ajax?

Itu pertanyaan yang menarik.

Codeigniter merupakan framework php nan n kepunyaan library dan helper nan komplet, tersurat library cart, yang diperuntukkan bagi membuat shopping cart pada E-Commerce.

Sedangkan AJAX (Asyncronous Javascript and XML), merupakan suatu teknik atau metode yang digunakan bagi berkomunikasi dengan peladen berpunca balik layar dan tanpa meload web page (pekarangan web) secara keseluruhan, sehingga dapat menghemat bandwidth server dan menciptakan menjadikan web menjadi lebih cepat dan interaktif.

Keren bukan?

Codeigniter menyediakan library-nya, padahal AJAX metode komunikasinya.

Hmm., ini mentah namanya
perfetto, Numero Uno!

Ayo donk, cepetan udah gak kepala dingin nich!

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

Dapatkan diskon 75% paket hosting dan gratis domain + extra potongan harga 5% dengan menunggangi kupon: MFIKRI

Titipan Masa ini.!

#1. Langkah

Sebelumnya proses pembuatan, ada tahap yang tidak dapat anda lewatkan sedemikian itu doang. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, takdirnya kamu belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, jquery ini berfungsi bakal menjalan AJAX nan akan kita buat. Seandainya sira belum memilikinya, silahkan download di situs resminya www.jquery.com

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

Lembaga Produk, siapkan juga beberapa gambar komoditas. Tidak perlu banyak-banyak, cukup 6 gambar saja.

Selain beberapa situasi diatas, terserah kembali yang perlu beliau persiapkan. Yakni, secangkir kopi.

Ya kopi, moga lebih rileks.!

#2. Pembuatan Database Dan Table

Berikutnya, yang wajib anda bagi yakni pembuatan database dan table.

Table yang perlu anda lakukan bukan teradat banyak-banyak, patut satu table saja. Yaitu, table produk.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_cart;

Plong query diatas, anda akan mendapatkan sebuat database dengan stempel 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 mempunyai database, table, dan sekali lagi beberapa data.

Mari kita lanjutkan!

#3. Install Codeigniter

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

Kemudian rename (ganti nama) project codeigniter sira sesuai dengan project Beliau. Disini saya memberi nama
shopping_cart.

Selepas di extract, kerjakan folder assets, kemudian buat folder images di dalam folder assets.

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

aplication

assets

      css

      images

      js

system

Didalam folder css, terdapat file bootstrap.css.

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

Sesudah itu, anda copy-kan rajah produk kedalam folder
images. Kemudian, rename (ganti merek) 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/';

Bontot bentang 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. Lakukan 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->arketipe('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 sesudah added 	}  	function show_cart(){ //Fungsi lakukan menyodorkan 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(){ //arti lakukan menghapus item cart 		$data = array( 			'rowid' => $this->input->post('row_id'),  			'qty' => 0,  		); 		$this->cart->update($data); 		echo $this->show_cart(); 	} }
      

#7. Bakal 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>Dagangan</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"); //menjumut 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 Tuntutan

Silahkan buka browser anda, dan kunjung URL berikut:

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

kemudian, akuisisi quantity dan klik cembul
Add to Cart.

BOOMMM, selamat anda berakibat melakukannya.!

Related: Tutorial Lengkap CodeIgniter 4 Bagi Pemula

Inferensi:

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

Ajax merupakan metode ataupun teknik yang digunakan untuk berkomunikasi dengan server berasal balik layar.

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

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

Ok, sekian tutorial barangkali ini, sepatutnya bermanfaat.

Sekiranya anda bersedia membagikan tutorial ini, saya akan merasa sangat gemar dan ini akan menjadi masa terbaik untuk saya.

Syukur.

Dapatkan reduksi 75% sampul hosting dan percuma domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Masa ini.!

Dowload Source

Source: https://mfikri.com/artikel/membuat-shopping-cart-dengan-codeigniter-dan-ajax.html