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:
Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI
Order Sekarang.!
#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'] = '//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: