Select Option Berhubungan Dengan Codeigniter Dan Ajax JQuery [PDF]

Citation preview

Select Option Berhubungan dengan Codeigniter dan Ajax JQuery 



21 MARCH 2019



Ini adalah ultimate tutorial tentang Select Option berhubungan dengan Codeigniter dan Ajax JQuery.



Jika Anda ingin mengetahui:



Bagaimana membuat select option berhubungan, insert, update, dan delete dengan Codeigniter dan Ajax.



Maka Anda akan menyukai tutorial ini.



Tetapi, jika Anda seorang pemula di Codeigniter saya sarankan untuk mempelajari “Tutorial Codeigniter untuk Pemula” terlebih dahulu.



Mari kita mulai.



Konten:



#1. Persiapan



#2. Membuat Database dan Table.



#3. Installasi dan Konfigurasi Codeigniter



#4. Basic Select Option berhubungan dengan Codeigniter dan Ajax.



#5. Insert dengan Select Option berhubungan dengan Codeigniter dan Ajax.



#6. Menampilkan data yang telah di insert ke datatable.



#7. Update data Select Option berhubungan dengan Codeigniter dan Ajax.



#8. Delete data ke database.



Step #1. Persiapan



Untuk membuat select option berhubungan dengan Codeigniter dan AJAX JQuery, inilah yang perlu Anda persiapkan:



1. Codeigniter



2. JQuery



3. Bootstrap (optional)



4. Datatable (optional)



Meskipun Bootstrap dan Datatable kebutuhannya opsional, akan tetapi saya sangat menyarankan Anda untuk memiliki semua list diatas.



Karana saya akan menggunakan semua list diatas pada tutorial ini.



Step #2. Membuat Database dan Table Buat database baru dengan nama “pos_db”. Jika Anda membuat database dengan nama yang sama itu lebih baik.



Untuk membuat database “pos_db” pada MySQL, dapat dilakukan dengan mengeksekusi query berikut: 1



CREATE DATABASE pos_db;



Selanjutnya pembuatan table. Pada tutorial kali ini kita membutuhkan 3 table, yaitu: category, sub_category, dan product.



Untuk membuat table “category” dapat dilakukan dengan mengeksekusi query berikut: 1 2 3 4



CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB;



Untuk membuat table “sub_category” dapat dilakukan dengan mengeksekusi query berikut: 1 2 3 4 5



CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB;



Untuk membuat table “product” dapat dilakukan dengan mengeksekusi query berikut: 1 2 3 4 5 6 7



CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100), product_price INT, product_category_id INT, product_subcategory_id INT )ENGINE=INNODB;



Jika Anda masih bingung bagaimana membuat database dengan MySQL, saya sarankan Anda untuk mempelajari “Data Definition Language (DDL)” pada MySQL.



Selanjunya, insert beberapa data pada table “category” dan “sub_category”.



Insert beberapa data pada table “category” dengan mengeksekusi query berikut: 1 2



INSERT INTO category(category_name) VALUES ('Perlengkapan Bayi'),('Fashion Wanita'),('Fashion Pria');



Perintah SQL diatas, akan meng-insert data kedalam table “category” sebanyak 3 records.



Selenjutnya, Insert beberapa data pada table “sub_category” dengan mengeksekusi query berikut: 1 2 3 4



INSERT INTO sub_category(subcategory_name,subcategory_category_id) VALUES ('Perlengkapan Makanan','1'),('Perlengkapan Mandi','1'),('Pakaian Bayi','1'), ('Dress','2'),('Sweater','2'),('Kebaya','2'), ('Kaos','3'),('Kemeja','3'),('Jeans','3');



Perintah SQL diatas, akan menginsert data kedalam table “sub_category” sebanyak 9 records.



Jika Anda masih bingung bagaimana meng-insert data pada MySQL, saya sarankan Anda untuk mempelajari “Data Manipulation Language (DML)” pada MySQL.



Step #3. Installasi dan Konfigurasi Codeigniter Extract Codeigniter yang telah Anda download sebelumnya pada direktori “C:wampwww” jika Anda menggunakan WAMPSERVER.



Atau pada direktori “C:xampphtdocs” jika Anda menggunakan XAMPP.



Kemudian rename (ganti nama) menjadi “select-ajax”.



Perhatikan gambar berikut untuk lebih jelasnya:



Selanjutnya, buat folder “assets” didalam folder “select-ajax” sejajar dengan folder application dan system.



Seperti gambar berikut:



Setelah itu, Extract file Bootstrap yang telah di download sebelumnya ke dalam folder “assets” seperti gambar berikut:



Selanjutnya, copykan file jquery kedalam folder “assets/js” seperti gambar berikut:



Jika Anda belum mendapatkan jquery, kunjungi URL berikut:



https://code.jquery.com/jquery-3.3.1.js



Select semua kode-nya (CTRL + A) dan copy lalu pastekan di notepad dan simpan dengan nama jquery-3.3.1.js.



Konfigurasi Codeigniter:



Selanjutnya lakukan konfigurasi pada file berikut:



#1. Autoload.php



Buka file autoload.php yang tedapat pada folder “application/config” dan temukan kode berikut: 1 2



$autoload['libraries'] = array(); $autoload['helper'] = array();



Kemudian atur menjadi seperti berikut: 1 2



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



#2. Config.php



Buka file config.php yang tedapat pada folder “application/config” dan temukan kode berikut: 1



$config['base_url'] = '';



Kemudian atur menjadi seperti berikut: 1



$config['base_url'] = 'http://localhost/select-ajax/';



Note: jika webserver Anda menggunakan port, maka sertakan juga port yang Anda gunakan.



#3. Database.php



Buka file database.php yang tedapat pada folder “application/config” dan temukan kode berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22



$active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => '', 'password' => '', 'database' => '', '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 );



23 24



Kemudian atur menjadi seperti berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24



$active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'pos_db', '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 );



Step #4. Basic Select Option berhubungan dengan Codeigniter dan Ajax Pada step ini, Anda akan belajar dasar dari select option berhubungan dengan Codeigniter dan Ajax.



Mari kita mulai.



#1. Model



Buat sebuah file model dengan nama “Product_model.php” pada folder “application/models”.



Kemudian ketikan kode berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16