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