Select Option Berhubungan Dengan Codeigniter Dan Ajax JQuery

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 CREATE TABLE category(

2 category_id INT PRIMARY KEY AUTO_INCREMENT,
3 category_name VARCHAR(100)
4 )ENGINE=INNODB;
Untuk membuat table “sub_category” dapat dilakukan dengan
1 CREATE TABLE sub_category(

2 subcategory_id INT PRIMARY KEY AUTO_INCREMENT,
3 subcategory_name VARCHAR(100),
4 subcategory_category_id INT
)ENGINE=INNODB;
5
Untuk membuat table “product” dapat dilakukan dengan mengeksekusi
query berikut:
1
CREATE TABLE product(
2 product_id INT PRIMARY KEY AUTO_INCREMENT,
3 product_name VARCHAR(100),
4 product_price INT,
5 product_category_id INT,
product_subcategory_id INT
6 )ENGINE=INNODB;
7
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 INSERT INTO category(category_name) VALUES

2 ('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
1 INSERT INTO sub_category(subcategory_name,subcategory_category_id) VALUES

2 ('Perlengkapan Makanan','1'),('Perlengkapan Mandi','1'),('Pakaian Bayi','1'),
3 ('Dress','2'),('Sweater','2'),('Kebaya','2'),
4 ('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 $autoload['libraries'] = array();
2 $autoload['helper'] = array();
Kemudian atur menjadi seperti berikut:
1 $autoload['libraries'] = array('database');
2 $autoload['helper'] = array('url');
#2. Config.php
Buka file config.php yang tedapat pada folder “application/config” dan
1 $config['base_url'] = '';
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
1
2 $active_group = 'default';
$query_builder = TRUE;
3
4 $db['default'] = array(
5
'dsn' => '',
6 'hostname' => 'localhost',
7 'username' => '',
8 'password' => '',
9 'database' => '',
'dbdriver' => 'mysqli',
10 'dbprefix' => '',
11 'pconnect' => FALSE,
12 'db_debug' => (ENVIRONMENT !== 'production'),
13 'cache_on' => FALSE,
14 'cachedir' => '',
'char_set' => 'utf8',
15 'dbcollat' => 'utf8_general_ci',
16 'swap_pre' => '',
17 'encrypt' => FALSE,
18 'compress' => FALSE,
'stricton' => FALSE,
19 'failover' => array(),
20 'save_queries' => TRUE
21 );
22
23
24
1
2
3 $active_group = 'default';
$query_builder = TRUE;
4
5 $db['default'] = array(
6
'dsn' => '',
7 'hostname' => 'localhost',
8 'username' => 'root',
9 'password' => '',
10 'database' => 'pos_db',
'dbdriver' => 'mysqli',
11 'dbprefix' => '',
12 'pconnect' => FALSE,
13 'db_debug' => (ENVIRONMENT !== 'production'),
14 'cache_on' => FALSE,
15 'cachedir' => '',
'char_set' => 'utf8',
16 'dbcollat' => 'utf8_general_ci',
17 'swap_pre' => '',
18 'encrypt' => FALSE,
19 'compress' => FALSE,
'stricton' => FALSE,
20 'failover' => array(),
21 'save_queries' => TRUE
22 );
23
24
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 <?php
3 defined('BASEPATH') OR exit('No direct script access allowed');
4
class Product_model extends CI_Model{
5
6 function get_category(){
7 $query = $this->db->get('category');
8 return $query;
9 }
10
11 function get_sub_category($category_id){
$query = $this->db->get_where('sub_category', array('subcategory_category_i
12 return $query;
13 }
14
15 }
16
#2. Controller
Buat sebuah file controller dengan nama “Product.php” pada folder
“application/controllers”.
1 <?php
defined('BASEPATH') OR exit('No direct script access allowed');
2
3 class Product extends CI_Controller {
4 function __construct(){
5 parent::__construct();
6 $this->load->model('Product_model','product_model');
7 }
8
function index(){
9 $data['category'] = $this->product_model->get_category()->result();
10 $this->load->view('product_view', $data);
11 }
12
13 function get_sub_category(){
$category_id = $this->input->post('id',TRUE);
14 $data = $this->product_model->get_sub_category($category_id)->result();
15 echo json_encode($data);
16 }
17 }
18
19
20
#3. View
Buat sebuah file view dengan nama “product_view.php” pada folder
“application/views”.
1 <!DOCTYPE html>
<html>
2
<head>
3 <title>Dynamic Select Option using Codeigniter and Ajax</title>
4 <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet
5 </head>
6 <body>
<div class="container">
7
8 <div class="row justify-content-md-center">
9 <div class="col col-lg-6">
10 <h3>Product Form:</h3>
11 <form>
12 <div class="form-group">
<label>Category</label>
13 <select class="form-control" name="category" id="category" requir
14 <option value="">No Selected</option>
15 <?php foreach($category as $row):?>
16 <option value="<?php echo $row->category_id;?>"><?php echo $
<?php endforeach;?>
17 </select>
18 </div>
20 <label>Sub Category</label>
21 <select class="form-control" id="sub_category" name="sub_categor
<option>No Selected</option>
22
23 </select>
24 </div>
25 </form>
26 </div>
</div>
27
28 </div>
29 <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.
30 <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.j
31 <script type="text/javascript">
32 $(document).ready(function(){
33
$('#category').change(function(){
34 var id=$(this).val();
35 $.ajax({
36 url : "<?php echo site_url('product/get_sub_category');?>",
37 method : "POST",
data : {id: id},
38 async : true,
39 dataType : 'json',
40 success: function(data){
41
42 var html = '';
43 var i;
for(i=0; i<data.length; i++){
44 html += '<option
45 value='+data[i].subcategory_id+'>'+data[i].subcategory_name+'</option>';
46 }
47 $('#sub_category').html(html);
48
49 }
});
50 return false;
51 });
52
53 });
54 </script>
</body>
55
</html>
56
57
58
59
60
61
62
63
64
65
#4. Testing
Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:
1 http://localhost/select-ajax/index.php/product
Maka, akan tampil seperti gambar berikut:
Pilih salah satu “Category”, maka akan tampil option dari “Sub Category”
yang berhubungan.
Seperti gambar berikut:

Pada gambar diatas, saya memilih category “Fashion Wanita”, maka pada
Sub Category hanya akan tampil sesuai dengan category yang terpilih
yaitu: Dress, Sweater, dan Kebaya.
Jika Anda pilih category yang berbeda, maka juga akan tampil option Sub
Category yang berbeda.
Itulah konsep dasar dari Select Option berhungan dengan Codeigniter dan
Ajax JQuery.
Step #5. Insert dengan Select Option

berhubungan dengan Codeigniter dan Ajax
Pada step ini Anda akan belajar bagaimana melakukan insert data ke
database menggunakan select option berhubungan dengan Codeigniter
dan AJAX JQuery.
Mari kita mulai.
#1. Controller
Buka controller “Product.php” yang tedapat pada folder
Kemudian ubah menjadi seperti berikut:
1 <?php
3
function __construct(){
7 $this->load->library('session');
8 }
9
10 function index(){
11
}
12
13 // add new product
14 function add_new(){
16 $this->load->view('add_product_view', $data);
}
17
18
// get sub category by category_id
20 $category_id = $this->input->post('id',TRUE);
23 }
24
25 //save product to database
function save_product(){
26
$product_name = $this->input->post('product_name',TRUE);
27
$category_id = $this->input->post('category',TRUE);
28 $subcategory_id = $this->input->post('sub_category',TRUE);
29 $product_price = $this->input->post('product_price',TRUE);
30 $this->product_model-
31 >save_product($product_name,$category_id,$subcategory_id,$product_price);
32 $this->session->set_flashdata('msg','<div class="alert alert-success">Produ
33 redirect('product/add_new');
}
34 }
35
36
37
38
#2. Model
Buka model “Product_model.php” yang tedapat pada folder
1 <?php
3
4
7 return $query;
8 }
9
function get_sub_category($category_id){
10 $query = $this->db->get_where('sub_category', array('subcategory_category_i
11 return $query;
12 }
13
14 function save_product($product_name,$category_id,$subcategory_id,$product_price
15 $data = array(
'product_name' => $product_name,
16 'product_price' => $product_price,
17 'product_category_id' => $category_id,
18 'product_subcategory_id' => $subcategory_id
19 );
20 $this->db->insert('product',$data);
}
21 }
22
23
24
25
#3. View
Buat sebuah view baru dengan nama “add_product_view.php” pada
folder “application/views”.
1 <!DOCTYPE html>
2 <html>
<head>
3 <title>Add New</title>
5 </head>
6 <body>
<div class="container">
7
8 <div class="row justify-content-md-center">
10 <h3>Add New Product:</h3>
11 <?php echo $this->session->flashdata('msg');?>
12 <form action="<?php echo site_url('product/save_product');?>" method="p
13
<div class="form-group">
14 <label>Product Name</label>
15 <input type="text" class="form-control" name="product_name" place
16 </div>
17
<label>Category</label>
19
<select class="form-control" name="category" id="category" requir
21 <?php foreach($category as $row):?>
22 <option value="<?php echo $row->category_id;?>"><?php echo $
23 <?php endforeach;?>
</select>
24 </div>
25
28 <select class="form-control" id="sub_category" name="sub_categor
30
</select>
31 </div>
32
34 <label>Product Price</label>
35 <input type="number" class="form-control" name="product_price" pl
</div>
36
37 <button class="btn btn-success" type="submit">Save Product</button>
38
39 </form>
40 </div>
41 </div>
42
43 </div>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.
44 <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.j
47
48 $('#category').change(function(){
var id=$(this).val();
49 $.ajax({
51 method : "POST",
52 data : {id: id},
53 async : true,
dataType : 'json',
55
56 var html = '';
57 var i;
58 for(i=0; i<data.length; i++){
59 html += '<option value='+data[i].subcategory_id+'>'+dat
}
60 $('#sub_category').html(html);
61
62 }
63 });
64 return false;
});
65
66
});
67 </script>
68 </body>
69 </html>
70
71
72
73
74
75
76
77
78
79
80
81
#4. Testing
1 http://localhost/select-ajax/index.php/product/add_new
Kemudian masukan product name, category, sub category, dan product
price.
Kemudian klik tombol “Save Product” untuk menyimpan product ke
database.
Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:
Step #6. Menampilkan data yang telah di
insert ke datatable.
Extract file Datatable yang telah di download sebelumnya kedalam folder
“assets”.
Extract file datatables.css kedalam folder “assets/css”
dan datatables.js kedalam folder “assets/js”.
Perhatikan gambar berikut untuk lebih jelasnya:
Setalah itu, ikuti langkah berikut:

#1. Controller
1
2 <?php
4
function __construct(){
9 }
10
11 function index(){
$data['products'] = $this->product_model->get_products();
12 $this->load->view('product_list_view',$data);
13 }
14
$this->load->view('add_product_view', $data);
18 }
19
20 // get sub category by category_id
$data = $this->product_model->get_sub_category($category_id)->result();
24 }
25
27 function save_product(){
28 $product_name = $this->input->post('product_name',TRUE);
29 $category_id = $this->input->post('category',TRUE);
$this->product_model-
32 >save_product($product_name,$category_id,$subcategory_id,$product_price);
34 redirect('product');
35 }
36 }
37
38
39
#2. Model
1
2 <?php
4
5 class Product_model extends CI_Model{
6
return $query;
9 }
10
12 $query = $this->db->get_where('sub_category', array('subcategory_category_i
13 return $query;
14 }
15
function save_product($product_name,$category_id,$subcategory_id,$product_price
16 $data = array(
17 'product_name' => $product_name,
'product_subcategory_id' => $subcategory_id
20 );
22 }
23
24 function get_products(){
25 $this->db->select('product_id,product_name,product_price,category_name,subc
$this->db->from('product');
26 $this->db->join('category','product_category_id = category_id','left');
27 $this->db->join('sub_category','product_subcategory_id = subcategory_id','l
28 $query = $this->db->get();
29 return $query;
}
30
}
31
32
33
34
#3. View
Buat sebuah view baru dengan nama “product_list_view.php” pada folder
“application/views”.
1 <!DOCTYPE html>
2 <html>
3 <head>
<title>Product List</title>
5 <link href="<?php echo base_url().'assets/css/datatables.css'?>" rel="styleshee
6 </head>
7 <body>
8 <div class="container">
9
<div class="row justify-content-md-center">
11 <h3>Product List</h3>
12 <?php echo $this->session->flashdata('msg');?>
13 <a href="<?php echo site_url('product/add_new');?>" class="btn btn-succ
14 Product</a><hr/>
<table class="table table-striped" id="mytable" style="font-size: 14px;"
15 <thead>
16 <tr>
17 <th>No</th>
18 <th>Product Name</th>
<th>Category</th>
19 <th>Sub Category</th>
20 <th>Price</th>
21 <th>Action</th>
22 </tr>
23 </thead>
<tbody>
24 <?php
25 $no = 0;
26 foreach ($products->result() as $row):
27 $no++;
?>
28 <tr>
29 <td><?php echo $no;?></td>
30 <td><?php echo $row->product_name;?></td>
31 <td><?php echo $row->category_name;?></td>
32 <td><?php echo $row->subcategory_name;?></td>
33 <td><?php echo number_format($row->product_price);?></td>
34 <td>
<a href="" class="btn btn-sm btn-info">Edit</a>
35 <a href="" class="btn btn-sm btn-danger">Delete</a>
36 </td>
37 </tr>
</tbody>
39 </table>
40 </div>
41 </div>
42
43 </div>
44 <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.j
45 <script type="text/javascript" src="<?php echo base_url().'assets/js/datatables.
48 $('#mytable').DataTable();
});
49 </script>
50 </body>
51 </html>
52
53
54
55
56
57
58
59
60
#4. Testing
Klik tombol “Add New Product” untuk menambahkan product baru.
Masukan semua input, kemudian klik tombol “Save Product”.
Jika berjalan baik, maka akan tampil seperti berikut:

Step #7. Update data Select Option
berhubungan dengan Codeigniter dan Ajax
Pada step ini, saya akan sharing bagaimana membuat update data dengan
select option berhungan dengan Codeigniter dan AJAX.
Mari kita mulai.
Pertama-tama buka file view “product_list_view.php” yang terdapat pada
Kemudian temukan kode berikut:

1 <a href="" class="btn btn-sm btn-info">Edit</a>
<a href="<?php echo site_url('product/get_edit/'.$row->product_id);?>" class="btn bt

1 info">Edit</a>
#1. Controller
<?php
2
4 function __construct(){
$this->load->model('Product_model','product_model');
7 }
8
9 function index(){
10 $data['products'] = $this->product_model->get_products();
11 $this->load->view('product_list_view',$data);
}
12
16 $this->load->view('add_product_view', $data);
}
17
18
// get sub category by category_id
}
23
25 function save_product(){
$this->product_model->save_product($product_name,$category_id,$subcategory_
32 }
33
34 function get_edit(){
35 $product_id = $this->uri->segment(3);
$data['product_id'] = $product_id;
37 $get_data = $this->product_model->get_product_by_id($product_id);
38 if($get_data->num_rows() > 0){
39 $row = $get_data->row_array();
$data['sub_category_id'] = $row['product_subcategory_id'];
40 }
41 $this->load->view('edit_product_view',$data);
42 }
43
44 function get_data_edit(){
45 $product_id = $this->input->post('product_id',TRUE);
$data = $this->product_model->get_product_by_id($product_id)->result();
47 }
48
49 //update product to database
50 function update_product(){
51 $product_id = $this->input->post('product_id',TRUE);
$this->product_model-
56 >update_product($product_id,$product_name,$category_id,$subcategory_id,$product_pri
59 }
60 }
61
62
63
64
65
66
67
68
69
#2. Model
1 <?php
3
4
7 return $query;
8 }
9
$query = $this->db->get_where('sub_category', array('subcategory_category_i
11 return $query;
12 }
13
14 function save_product($product_name,$category_id,$subcategory_id,$product_price
15 $data = array(
'product_name' => $product_name,
18 'product_subcategory_id' => $subcategory_id
19 );
}
21
22 function get_products(){
23 $this->db->select('product_id,product_name,product_price,category_name,subc
24 $this->db->from('product');
25 $this->db->join('category','product_category_id = category_id','left');
26 $this->db->join('sub_category','product_subcategory_id = subcategory_id','l
$query = $this->db->get();
27 return $query;
28 }
29
30 function get_product_by_id($product_id){
31 $query = $this->db->get_where('product', array('product_id' => $product_id)
return $query;
32 }
33
34 function update_product($product_id,$product_name,$category_id,$subcategory_id,
35 $this->db->set('product_name', $product_name);
36 $this->db->set('product_price', $product_price);
37 $this->db->set('product_category_id', $category_id);
$this->db->set('product_subcategory_id', $subcategory_id);
38 $this->db->where('product_id', $product_id);
39 $this->db->update('product');
40 }
41
42
43 }
44
45
46
47
48
49
50
#3. View
Buat sebuah view baru dengan nama “edit_product_view.php” pada
1 <!DOCTYPE html>
2 <html>
3 <head>
<title>Edit Product</title>
4 <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet"
5 </head>
6 <body>
7 <div class="container">
8
<div class="row justify-content-md-center">
9
<div class="col col-lg-6">
10 <h3>Edit Product:</h3>
11
12 <form action="<?php echo site_url('product/update_product');?>" method="p
13
15 <label>Product Name</label>
<input type="text" class="form-control" name="product_name" placeho
16 </div>
17
19 <label>Category</label>
20 <select class="form-control category" name="category" required>
<?php foreach($category as $row):?>
22 <option value="<?php echo $row->category_id;?>"><?php echo $ro
24 </select>
25 </div>
26
<select class="form-control sub_category" name="sub_category" requ
30
31 </select>
32 </div>
33
<label>Product Price</label>
35 <input type="number" class="form-control" name="product_price" plac
36 </div>
37
38 <input type="hidden" name="product_id" value="<?php echo $product_id?>
39 <button class="btn btn-success" type="submit">Update Product</button>
40
41 </form>
</div>
42 </div>
43
44 </div>
45 <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.1.
46 <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'
<script type="text/javascript">
48 //call function get data edit
49 get_data_edit();
50
51 $('.category').change(function(){
52 var id=$(this).val();
var subcategory_id = "<?php echo $sub_category_id;?>";
53 $.ajax({
55 method : "POST",
56 data : {id: id},
57 async : true,
dataType : 'json',
59
60 $('select[name="sub_category"]').empty();
61
62 $.each(data, function(key, value) {
63 if(subcategory_id==value.subcategory_id){
64 +'</option>').trigger('change');$('select[name="sub_category"]').append('<option valu
65 }else{
66 $('select[name="sub_category"]').append('<option valu
67 }
68 });
69
}
70 });
71 return false;
72 });
73
74 //load data for edit
function get_data_edit(){
75 var product_id = $('[name="product_id"]').val();
76 $.ajax({
77 url : "<?php echo site_url('product/get_data_edit');?>",
method : "POST",
78 data :{product_id :product_id},
79 async : true,
80 dataType : 'json',
81 success : function(data){
$.each(data, function(i, item){
82 $('[name="product_name"]').val(data[i].product_name);
83 $('[name="category"]').val(data[i].product_category_id).t
84 $('[name="sub_category"]').val(data[i].product_subcategor
85 $('[name="product_price"]').val(data[i].product_price);
86 });
}
87
88 });
89 }
90
91 });
92 </script>
93 </body>
</html>
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
#4. Testing
Kemudian klik tombol edit, maka akan tampil form edit seperti gambar
berikut:
Edit data yang ingin di edit, kemudian klik tombol “Update Product”.
Step #8. Delete data ke database.
Pada step ini, saya akan sharing bagaimana membuat delete data ke
database.
Mari kita mulai.
Pertama-tama buka file view “product_list_view.php” yang terdapat pada
Kemudian temukan kode berikut:
1 <a href="" class="btn btn-sm btn-danger">Delete</a>

<a href="<?php echo site_url('product/delete/'.$row->product_id);?>" class="btn btn-
1 danger">Delete</a>
#1. Controller
Kemudian tambahkan function delete seperti berikut:
1 function delete(){
2 $product_id = $this->uri->segment(3);
$this->product_model->delete_product($product_id);
3 $this->session->set_flashdata('msg','<div class="alert alert-success">Product
4 Deleted</div>');
6 }
#2. Model
Kemudian tambahkan function delete_product seperti berikut:
1 function delete_product($product_id){
2 $this->db->delete('product', array('product_id' => $product_id));
3 }
#3. Testing
Kemudian klik salah satu tombol “Delete” untuk menghapus data.
Kesimpulan:
Tutorial kali ini adalah tentang bagaimana membuat select option
berhubungan dengan Codeigniter dan AJAX JQuery.

Mulai dari persiapan, pembuatan database dan table, installasi Codeigniter,
konfigurasi Codeigniter, sampai dengan CRUD (Create Read Update
Detele) dengan select option berhubungan.

Select Option Berhubungan Dengan Codeigniter Dan Ajax JQuery

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Select Option Berhubungan Dengan Codeigniter Dan Ajax JQuery

Diunggah oleh

Hak Cipta:

Format Tersedia

Select Option Berhubungan

dengan Codeigniter dan Ajax

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.

#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

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

#8. Delete data ke database.

Step #1. Persiapan

JQuery, inilah yang perlu Anda persiapkan:

Meskipun Bootstrap dan Datatable kebutuhannya opsional, akan tetapi

saya sangat menyarankan Anda untuk memiliki semua list diatas.

Step #2. Membuat Database dan Table

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;

table, yaitu: category, sub_category, dan product.

Untuk membuat table “category” dapat dilakukan dengan mengeksekusi

1 CREATE TABLE category(

Untuk membuat table “sub_category” dapat dilakukan dengan

mengeksekusi query berikut:

1 CREATE TABLE sub_category(

saya sarankan Anda untuk mempelajari “Data Definition Language

(DDL)” pada MySQL.

Selanjunya, insert beberapa data pada table “category” dan

1 INSERT INTO category(category_name) VALUES

Selenjutnya, Insert beberapa data pada table “sub_category” dengan

mengeksekusi query berikut:

1 INSERT INTO sub_category(subcategory_name,subcategory_category_id) VALUES

Perintah SQL diatas, akan menginsert data kedalam table “sub_category”

sarankan Anda untuk mempelajari “Data Manipulation Language (DML)”

Step #3. Installasi dan Konfigurasi

“C:wampwww” jika Anda menggunakan WAMPSERVER.

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:

dalam folder “assets” seperti gambar berikut:

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

Jika Anda belum mendapatkan jquery, kunjungi URL berikut:

simpan dengan nama jquery-3.3.1.js.

Selanjutnya lakukan konfigurasi pada file berikut:

Buka file autoload.php yang tedapat pada folder “application/config” dan

temukan kode berikut:

temukan kode berikut:

yang Anda gunakan.

Buka file database.php yang tedapat pada folder “application/config” dan

temukan kode berikut:

Step #4. Basic Select Option berhubungan

dengan Codeigniter dan Ajax.

Mari kita mulai.

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

Kemudian ketikan kode berikut:

Buat sebuah file controller dengan nama “Product.php” pada folder