Select Option Berhubungan dengan Codeigniter dan Ajax JQuery

Select Option Berhubungan dengan Codeigniter dan Ajax JQuery

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:

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:

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:

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:

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:

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:

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:

Project Name

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

Seperti gambar berikut:

Assets Folder

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

css dan js bootstrap

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

JQuery

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:

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

Kemudian atur menjadi seperti berikut:

$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:

$config['base_url'] = '';

Kemudian atur menjadi seperti berikut:

$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:

$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
);

Kemudian atur menjadi seperti berikut:

$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:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product_model extends CI_Model{
        
        function get_category(){
                $query = $this->db->get('category');
                return $query;  
        }

        function get_sub_category($category_id){
                $query = $this->db->get_where('sub_category', array('subcategory_category_id' => $category_id));
                return $query;
        }
        
}

 

#2. Controller

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

Kemudian ketikan kode berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product extends CI_Controller {
        function __construct(){
                parent::__construct();
                $this->load->model('Product_model','product_model');
        }

        function index(){
                $data['category'] = $this->product_model->get_category()->result();
                $this->load->view('product_view', $data);
        }

        function get_sub_category(){
                $category_id = $this->input->post('id',TRUE);
                $data = $this->product_model->get_sub_category($category_id)->result();
                echo json_encode($data);
        }
}

 

#3. View

Buat sebuah file view dengan nama “product_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Dynamic Select Option using Codeigniter and Ajax</title>
        <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet" type="text/css">
</head>
<body>
        <div class="container">

          <div class="row justify-content-md-center">
            <div class="col col-lg-6">
                <h3>Product Form:</h3>
                <form>
                                   <div class="form-group">
                                    <label>Category</label>
                                    <select class="form-control" name="category" id="category" required>
                                        <option value="">No Selected</option>
                                        <?php foreach($category as $row):?>
                                        <option value="<?php echo $row->category_id;?>"><?php echo $row->category_name;?></option>
                                        <?php endforeach;?>
                                    </select>
                                  </div>
                                  <div class="form-group">
                                    <label>Sub Category</label>
                                    <select class="form-control" id="sub_category" name="sub_category" required>
                                        <option>No Selected</option>

                                    </select>
                                  </div>
                        </form>
            </div>
          </div>

        </div>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
        <script type="text/javascript">
                $(document).ready(function(){

                        $('#category').change(function(){ 
                var id=$(this).val();
                $.ajax({
                    url : "<?php echo site_url('product/get_sub_category');?>",
                    method : "POST",
                    data : {id: id},
                    async : true,
                    dataType : 'json',
                    success: function(data){
                        
                        var html = '';
                        var i;
                        for(i=0; i<data.length; i++){
                            html += '<option value='+data[i].subcategory_id+'>'+data[i].subcategory_name+'</option>';
                        }
                        $('#sub_category').html(html);

                    }
                });
                return false;
            }); 
            
                });
        </script>
</body>
</html>

 

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

http://localhost/select-ajax/index.php/product

Maka, akan tampil seperti gambar berikut:

product form

Pilih salah satu “Category”, maka akan tampil option dari “Sub Category” yang berhubungan.

Seperti gambar berikut:

Select Option

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 “application/controllers”.

Kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product extends CI_Controller {
        function __construct(){
                parent::__construct();
                $this->load->model('Product_model','product_model');
                $this->load->library('session');
        }

        function index(){
                
        }

        // add new product
        function add_new(){
                $data['category'] = $this->product_model->get_category()->result();
                $this->load->view('add_product_view', $data);
        }

        // get sub category by category_id
        function get_sub_category(){
                $category_id = $this->input->post('id',TRUE);
                $data = $this->product_model->get_sub_category($category_id)->result();
                echo json_encode($data);
        }

        //save product to database
        function save_product(){
                $product_name   = $this->input->post('product_name',TRUE);
                $category_id    = $this->input->post('category',TRUE);
                $subcategory_id = $this->input->post('sub_category',TRUE);
                $product_price  = $this->input->post('product_price',TRUE);
                $this->product_model->save_product($product_name,$category_id,$subcategory_id,$product_price);
                $this->session->set_flashdata('msg','<div class="alert alert-success">Product Saved</div>');
                redirect('product/add_new');
        }
}

 

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product_model extends CI_Model{
        
        function get_category(){
                $query = $this->db->get('category');
                return $query;  
        }

        function get_sub_category($category_id){
                $query = $this->db->get_where('sub_category', array('subcategory_category_id' => $category_id));
                return $query;
        }
        
        function save_product($product_name,$category_id,$subcategory_id,$product_price){
                $data = array(
                        'product_name' => $product_name,
                        'product_price' => $product_price,
                        'product_category_id' => $category_id,
                        'product_subcategory_id' => $subcategory_id 
                );
                $this->db->insert('product',$data);
        }
}

 

#3. View

Buat sebuah view baru dengan nama “add_product_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Add New</title>
        <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet" type="text/css">
</head>
<body>
        <div class="container">

          <div class="row justify-content-md-center">
            <div class="col col-lg-6">
                <h3>Add New Product:</h3>
                <?php echo $this->session->flashdata('msg');?>
                <form action="<?php echo site_url('product/save_product');?>" method="post">

                        <div class="form-group">
                                    <label>Product Name</label>
                                    <input type="text" class="form-control" name="product_name" placeholder="Product Name" required>
                                </div>

                                <div class="form-group">
                                    <label>Category</label>
                                    <select class="form-control" name="category" id="category" required>
                                        <option value="">No Selected</option>
                                        <?php foreach($category as $row):?>
                                        <option value="<?php echo $row->category_id;?>"><?php echo $row->category_name;?></option>
                                        <?php endforeach;?>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Sub Category</label>
                                    <select class="form-control" id="sub_category" name="sub_category" required>
                                        <option value="">No Selected</option>

                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Product Price</label>
                                    <input type="number" class="form-control" name="product_price" placeholder="Product Price" required>
                                </div>

                                <button class="btn btn-success" type="submit">Save Product</button>

                        </form>
            </div>
          </div>

        </div>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
        <script type="text/javascript">
                $(document).ready(function(){

                        $('#category').change(function(){ 
                var id=$(this).val();
                $.ajax({
                    url : "<?php echo site_url('product/get_sub_category');?>",
                    method : "POST",
                    data : {id: id},
                    async : true,
                    dataType : 'json',
                    success: function(data){
                        
                        var html = '';
                        var i;
                        for(i=0; i<data.length; i++){
                            html += '<option value='+data[i].subcategory_id+'>'+data[i].subcategory_name+'</option>';
                        }
                        $('#sub_category').html(html);

                    }
                });
                return false;
            }); 
            
                });
        </script>
</body>
</html>

 

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

http://localhost/select-ajax/index.php/product/add_new

Maka, akan tampil seperti gambar berikut:

Add new product

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:

Product Saved

 

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:

Datatable Structure

Setalah itu, ikuti langkah berikut:

 

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product extends CI_Controller {
        function __construct(){
                parent::__construct();
                $this->load->model('Product_model','product_model');
                $this->load->library('session');
        }

        function index(){
                $data['products'] = $this->product_model->get_products();
                $this->load->view('product_list_view',$data);
        }

        // add new product
        function add_new(){
                $data['category'] = $this->product_model->get_category()->result();
                $this->load->view('add_product_view', $data);
        }

        // get sub category by category_id
        function get_sub_category(){
                $category_id = $this->input->post('id',TRUE);
                $data = $this->product_model->get_sub_category($category_id)->result();
                echo json_encode($data);
        }

        //save product to database
        function save_product(){
                $product_name   = $this->input->post('product_name',TRUE);
                $category_id    = $this->input->post('category',TRUE);
                $subcategory_id = $this->input->post('sub_category',TRUE);
                $product_price  = $this->input->post('product_price',TRUE);
                $this->product_model->save_product($product_name,$category_id,$subcategory_id,$product_price);
                $this->session->set_flashdata('msg','<div class="alert alert-success">Product Saved</div>');
                redirect('product');
        }
}

 

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product_model extends CI_Model{
        
        function get_category(){
                $query = $this->db->get('category');
                return $query;  
        }

        function get_sub_category($category_id){
                $query = $this->db->get_where('sub_category', array('subcategory_category_id' => $category_id));
                return $query;
        }
        
        function save_product($product_name,$category_id,$subcategory_id,$product_price){
                $data = array(
                        'product_name' => $product_name,
                        'product_price' => $product_price,
                        'product_category_id' => $category_id,
                        'product_subcategory_id' => $subcategory_id 
                );
                $this->db->insert('product',$data);
        }

        function get_products(){
                $this->db->select('product_id,product_name,product_price,category_name,subcategory_name');
                $this->db->from('product');
                $this->db->join('category','product_category_id = category_id','left');
                $this->db->join('sub_category','product_subcategory_id = subcategory_id','left'); 
                $query = $this->db->get();
                return $query;
        }
}

 

#3. View

Buat sebuah view baru dengan nama “product_list_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Product List</title>
        <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet" type="text/css">
        <link href="<?php echo base_url().'assets/css/datatables.css'?>" rel="stylesheet" type="text/css">
</head>
<body>
        <div class="container">

          <div class="row justify-content-md-center">
            <div class="col col-lg-8">
                <h3>Product List</h3>
                <?php echo $this->session->flashdata('msg');?>
                <a href="<?php echo site_url('product/add_new');?>" class="btn btn-success btn-sm">Add New Product</a><hr/>
                <table class="table table-striped" id="mytable" style="font-size: 14px;">
                        <thead>
                                <tr>
                                        <th>No</th>
                                        <th>Product Name</th>
                                        <th>Category</th>
                                        <th>Sub Category</th>
                                        <th>Price</th>
                                        <th>Action</th>
                                </tr>
                        </thead>
                        <tbody>
                                <?php
                                        $no = 0;
                                        foreach ($products->result() as $row):
                                                $no++;
                                ?>
                                <tr>
                                        <td><?php echo $no;?></td>
                                        <td><?php echo $row->product_name;?></td>
                                        <td><?php echo $row->category_name;?></td>
                                        <td><?php echo $row->subcategory_name;?></td>
                                        <td><?php echo number_format($row->product_price);?></td>
                                        <td>
                                                <a href="" class="btn btn-sm btn-info">Edit</a>
                                                <a href="" class="btn btn-sm btn-danger">Delete</a>
                                        </td>
                                </tr>
                                <?php endforeach;?>
                        </tbody>
                </table>
            </div>
          </div>

        </div>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/datatables.js'?>"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $('#mytable').DataTable();
                });
        </script>
</body>
</html>

 

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

http://localhost/select-ajax/index.php/product

Maka, akan tampil seperti gambar berikut:

Product List

Klik tombol “Add New Product” untuk menambahkan product baru.

Add new product

Masukan semua input, kemudian klik tombol “Save Product”.

Jika berjalan baik, maka akan tampil seperti berikut:

Product Lists

 

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 folder “application/views”.

Kemudian temukan kode berikut:

<a href="" class="btn btn-sm btn-info">Edit</a>

Kemudian ubah menjadi seperti berikut:

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

Setalah itu, ikuti langkah berikut:

 

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product extends CI_Controller {
        function __construct(){
                parent::__construct();
                $this->load->model('Product_model','product_model');
                $this->load->library('session');
        }

        function index(){
                $data['products'] = $this->product_model->get_products();
                $this->load->view('product_list_view',$data);
        }

        // add new product
        function add_new(){
                $data['category'] = $this->product_model->get_category()->result();
                $this->load->view('add_product_view', $data);
        }

        // get sub category by category_id
        function get_sub_category(){
                $category_id = $this->input->post('id',TRUE);
                $data = $this->product_model->get_sub_category($category_id)->result();
                echo json_encode($data);
        }

        //save product to database
        function save_product(){
                $product_name   = $this->input->post('product_name',TRUE);
                $category_id    = $this->input->post('category',TRUE);
                $subcategory_id = $this->input->post('sub_category',TRUE);
                $product_price  = $this->input->post('product_price',TRUE);
                $this->product_model->save_product($product_name,$category_id,$subcategory_id,$product_price);
                $this->session->set_flashdata('msg','<div class="alert alert-success">Product Saved</div>');
                redirect('product');
        }

        function get_edit(){
                $product_id = $this->uri->segment(3);
                $data['product_id'] = $product_id;
                $data['category'] = $this->product_model->get_category()->result();
                $get_data = $this->product_model->get_product_by_id($product_id);
                if($get_data->num_rows() > 0){
                        $row = $get_data->row_array();
                        $data['sub_category_id'] = $row['product_subcategory_id'];
                }
                $this->load->view('edit_product_view',$data);
        }

        function get_data_edit(){
                $product_id = $this->input->post('product_id',TRUE);
                $data = $this->product_model->get_product_by_id($product_id)->result();
                echo json_encode($data);
        }

        //update product to database
        function update_product(){
                $product_id     = $this->input->post('product_id',TRUE);
                $product_name   = $this->input->post('product_name',TRUE);
                $category_id    = $this->input->post('category',TRUE);
                $subcategory_id = $this->input->post('sub_category',TRUE);
                $product_price  = $this->input->post('product_price',TRUE);
                $this->product_model->update_product($product_id,$product_name,$category_id,$subcategory_id,$product_price);
                $this->session->set_flashdata('msg','<div class="alert alert-success">Product Updated</div>');
                redirect('product');
        }
}

 

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Product_model extends CI_Model{
        
        function get_category(){
                $query = $this->db->get('category');
                return $query;  
        }

        function get_sub_category($category_id){
                $query = $this->db->get_where('sub_category', array('subcategory_category_id' => $category_id));
                return $query;
        }
        
        function save_product($product_name,$category_id,$subcategory_id,$product_price){
                $data = array(
                        'product_name' => $product_name,
                        'product_price' => $product_price,
                        'product_category_id' => $category_id,
                        'product_subcategory_id' => $subcategory_id 
                );
                $this->db->insert('product',$data);
        }

        function get_products(){
                $this->db->select('product_id,product_name,product_price,category_name,subcategory_name');
                $this->db->from('product');
                $this->db->join('category','product_category_id = category_id','left');
                $this->db->join('sub_category','product_subcategory_id = subcategory_id','left'); 
                $query = $this->db->get();
                return $query;
        }

        function get_product_by_id($product_id){
                $query = $this->db->get_where('product', array('product_id' =>  $product_id));
                return $query;
        }

        function update_product($product_id,$product_name,$category_id,$subcategory_id,$product_price){
                $this->db->set('product_name', $product_name);
                $this->db->set('product_price', $product_price);
                $this->db->set('product_category_id', $category_id);
                $this->db->set('product_subcategory_id', $subcategory_id);
                $this->db->where('product_id', $product_id);
                $this->db->update('product');
        }

        
}

 

#3. View

Buat sebuah view baru dengan nama “edit_product_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Edit Product</title>
        <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet" type="text/css">
</head>
<body>
        <div class="container">

          <div class="row justify-content-md-center">
            <div class="col col-lg-6">
                <h3>Edit Product:</h3>
                
                <form action="<?php echo site_url('product/update_product');?>" method="post">

                        <div class="form-group">
                                    <label>Product Name</label>
                                    <input type="text" class="form-control" name="product_name" placeholder="Product Name" required>
                                </div>

                                <div class="form-group">
                                    <label>Category</label>
                                    <select class="form-control category" name="category" required>
                                        <option value="">No Selected</option>
                                        <?php foreach($category as $row):?>
                                        <option value="<?php echo $row->category_id;?>"><?php echo $row->category_name;?></option>
                                        <?php endforeach;?>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Sub Category</label>
                                    <select class="form-control sub_category" name="sub_category" required>
                                        <option value="">No Selected</option>

                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Product Price</label>
                                    <input type="number" class="form-control" name="product_price" placeholder="Product Price" required>
                                </div>

                                <input type="hidden" name="product_id" value="<?php echo $product_id?>" required>
                                <button class="btn btn-success" type="submit">Update Product</button>

                        </form>
            </div>
          </div>

        </div>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        //call function get data edit
                        get_data_edit();

                        $('.category').change(function(){ 
                var id=$(this).val();
                var subcategory_id = "<?php echo $sub_category_id;?>";
                $.ajax({
                    url : "<?php echo site_url('product/get_sub_category');?>",
                    method : "POST",
                    data : {id: id},
                    async : true,
                    dataType : 'json',
                    success: function(data){

                        $('select[name="sub_category"]').empty();

                        $.each(data, function(key, value) {
                            if(subcategory_id==value.subcategory_id){
                                $('select[name="sub_category"]').append('<option value="'+ value.subcategory_id +'" selected>'+ value.subcategory_name +'</option>').trigger('change');
                            }else{
                                $('select[name="sub_category"]').append('<option value="'+ value.subcategory_id +'">'+ value.subcategory_name +'</option>');
                            }
                        });

                    }
                });
                return false;
            }); 

                        //load data for edit
            function get_data_edit(){
                var product_id = $('[name="product_id"]').val();
                $.ajax({
                        url : "<?php echo site_url('product/get_data_edit');?>",
                    method : "POST",
                    data :{product_id :product_id},
                    async : true,
                    dataType : 'json',
                    success : function(data){
                        $.each(data, function(i, item){
                            $('[name="product_name"]').val(data[i].product_name);
                            $('[name="category"]').val(data[i].product_category_id).trigger('change');
                            $('[name="sub_category"]').val(data[i].product_subcategory_id).trigger('change');
                            $('[name="product_price"]').val(data[i].product_price);
                        });
                    }

                });
            }
            
                });
        </script>
</body>
</html>

 

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

http://localhost/select-ajax/index.php/product

Maka, akan tampil seperti gambar berikut:

Product Lists

Kemudian klik tombol edit, maka akan tampil form edit seperti gambar berikut:

Edit Product

Edit data yang ingin di edit, kemudian klik tombol “Update Product”.

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

Product Updated

 

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 folder “application/views”.

Kemudian temukan kode berikut:

<a href="" class="btn btn-sm btn-danger">Delete</a>

Kemudian ubah menjadi seperti berikut:

<a href="<?php echo site_url('product/delete/'.$row->product_id);?>" class="btn btn-sm btn-danger">Delete</a>

Setalah itu, ikuti langkah berikut:

 

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian tambahkan function delete seperti berikut:

function delete(){
        $product_id = $this->uri->segment(3);
        $this->product_model->delete_product($product_id);
        $this->session->set_flashdata('msg','<div class="alert alert-success">Product Deleted</div>');
        redirect('product');
}

 

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian tambahkan function delete_product seperti berikut:

function delete_product($product_id){
        $this->db->delete('product', array('product_id' => $product_id));
}

 

#3. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

http://localhost/select-ajax/index.php/product

Kemudian klik salah satu tombol “Delete” untuk menghapus data.

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

product delete

 

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.

Jadi, tunggu apalagi, Let’s Coding.!

Download Source

Share:


Artikel Terbaru


Artikel Populer


LAINNYA UNTUK ANDA


Komentar (21)

priyo puji, 21 March 2019 11:28 - Reply

halo mas fikri..terima kasih tutorialnya..sangat membantu..saya mau tanya bagaimana jika dropdownnya lebih dari 5 tabel..misal dari provinsi ke kecamatan... sekalian request tutorial, nampilin data di datatable di modal dari database make ajax..misal untuk select data yang begitu banyak..trims

M Fikri, 23 March 2019 12:15 - Reply

Mas Priyo, untuk 5 table juga bisa mas, asalkan ngerti konsep dasarnya.

Fharhan Amrin, 21 March 2019 12:09 - Reply

mantaff pak,dulu saya susah banget mencari referensi seperti ini...ini sangat membantu para mereka yang masih newbie....

M Fikri, 23 March 2019 12:17 - Reply

Mas Fharhan, saya merasa senang bisa membantu.

Kamabarus, 22 March 2019 06:10 - Reply

Semakin matang tutorialnya mas. Design dan code semakin mantap dan sangat membantu.

M Fikri, 23 March 2019 12:18 - Reply

Terima kasih Kamabarus.

Bukirom, 23 March 2019 07:29 - Reply

Terima kasih tutorialnya. Bikin tutorial premium full CI development dong pak? Halaman Front End dan Back End.

M Fikri, 23 March 2019 12:21 - Reply

Sama-sama mas Bukirom, 
untuk tutorial full Frront End dan Back End masih dipikirkan mas.

Recky Anggun Saputra, 25 March 2019 10:52 - Reply

pak maaf keluar dari artikel, website bapak ini di bangun pakek apa ya

M Fikri, 31 March 2019 09:58 - Reply

Codeigniter Mas.

putra, 25 March 2019 13:06 - Reply

mantap bang tutornya. trimkasih

M Fikri, 31 March 2019 09:58 - Reply

Sama-sama Putra.

syarif, 31 March 2019 11:23 - Reply

permisi mas mau nanya, kalau itu kan input biasa.. bagaimana kalau input nya pakai session ? kan kalau pakai session misalnya scriptnya seperti ini "$a['id_member'] = $this->session->userdata("id_member");" kalau di script yang mas fikri lampirin diatas bagaimana ya saya perlu taru session didalam proses input,update ,edit, maupun hapus? terima kasih mas

M Fikri, 03 April 2019 11:54 - Reply

Mas Syarif, untuk menambahkan session id_member cukup main di controller dan model:
Controller:

function save_product(){
  $product_name  = $this->input->post('product_name',TRUE);
  $category_id  = $this->input->post('category',TRUE);
  $subcategory_id = $this->input->post('sub_category',TRUE);
  $product_price  = $this->input->post('product_price',TRUE);
        $id_member = $this->session->userdata("id_member");
  $this->product_model->save_product($product_name,$category_id,$subcategory_id,$product_price,$id_member);
  $this->session->set_flashdata('msg','
Product Saved 
');
  redirect('product');
}

Model:

function save_product($product_name,$category_id,$subcategory_id,$product_price,$id_member){
 $data = array(
  'product_name' => $product_name,
  'product_price' => $product_price,
  'product_category_id' => $category_id,
  'product_subcategory_id' => $subcategory_id,
  'product_member_id' => $id_member 
 );
 $this->db->insert('product',$data);
}

Note: Tambahkan field product_member_id pada table product.!

Zeldianto Eka Putra, 01 April 2019 16:03 - Reply

Ado pakai Github bg? Mintak link nyo bg..

M Fikri, 03 April 2019 11:44 - Reply

Ini Zel: https://github.com/mfikri94

Philip Bagus Kristianto, 03 April 2019 16:15 - Reply

bang fikri, saya udah coba manual dan download source code ini juga.. tapi kenapa style nya ga keluar ya? seperti build html tanpa css ata js Terimakasih

M Fikri, 06 April 2019 07:51 - Reply

Coba perhatikan PORT yang mas gunakan!
Webserver saya tanpa port:
http://localhost/select-ajax
JIka menggunakan port menjadi seperti ini:
?http://localhost:8080/select-ajax
Keterangan: angka 8080 sesuaikan dengan port yang anda gunakan! 
Note: Tambahkan juga port pada base_url pada file config.php

Diaku, 06 May 2019 18:18 - Reply

Bagaimana jika kasus nya adalah menampilkan data dari multiple select yang trigger ke select lainnya mas.. mohon ilmunya :D

Leave a Comment