Ini adalah tutorial tentang bagaimana membuat multiple insert, update, dan delete dengan multiple selected value pada Codeigniter.
Jika Anda sering mengalami kesulitan dalam membuat multiple update?
Maka, Anda berada di tempat yang tepat.
Hari ini, saya akan sharing Step-by-Step bagaimana membuat multiple insert, update, dan delete dengan multiple select pada Codeigniter.
Mari kita mulai.
Demo:
Step #1. Persiapan
Untuk membuat multiple insert, update, dan delete dengan multiple select pada Codeigniter, inilah yang perlu Anda persiapkan:
1. Codeigniter
2. JQuery
3. Bootstrap
Pada tutorial ini saya menggunakan Codeigniter v3.1.x, JQuery v3.4.x, Bootstrap v4.3.x, dan Bootstrap Select v1.13.9.x.
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 kasus kali ini, saya menggunakan bentuk contoh nyata dalam penggunaan multiple insert, update, dan delete dengan multiple select pada Codeigniter.
Oleh sebab itu, kita membutuhkan 3 table, yaitu: tabel product, tabel package, dan tabel detail.
Untuk membuat table “product” dapat dilakukan dengan mengeksekusi query berikut:
CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100) )ENGINE=INNODB;
Untuk membuat table “package” dapat dilakukan dengan mengeksekusi query berikut:
CREATE TABLE package( package_id INT PRIMARY KEY AUTO_INCREMENT, package_name VARCHAR(100), package_created_at DATETIME )ENGINE=INNODB;
Untuk membuat table “detail” dapat dilakukan dengan mengeksekusi query berikut:
CREATE TABLE detail( detail_id INT PRIMARY KEY AUTO_INCREMENT, detail_package_id INT, detail_product_id INT )ENGINE=INNODB;
Jika Anda masih bingung bagaimana membuat database dan table pada MySQL, saya sarankan Anda untuk mempelajari “Data Definition Language (DDL)” pada MySQL.
Selanjutnya, insert beberapa data pada table “product” sebagai data acuan nantinya.
Untuk menginsert data pada table “product” dapat dilakukan dengan mengeksekusi query berikut:
INSERT INTO product(product_name) VALUES
('Product 1'),('Product 2'),('Product 3'),
('Product 4'),('Product 5'),('Product 6'),
('Product 7'),('Product 8'),('Product 9');
Query diatas akan menginsert data kedalam table “product” sebanyak 9 records.
Jika Anda masih bingung bagaimana menginsert data pada table “product”, saya sarankan untuk mempelajari “Data Manipulation Language (DML)” pada MySQL.
Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI
Order Sekarang.!Step #3. Installasi Codeigniter
Extract Codeigniter yang telah Anda download sebelumnya pada direktori “C:/wamp/www” jika Anda menggunakan WAMPSERVER.
Atau pada direktori “C:/xampp/htdocs” jika Anda menggunakan XAMPP.
Kemudian rename (ganti nama) codeigniter yang telah di extract menjadi “pos”.
Perhatikan gambar berikut untuk lebih jelasnya:
Selanjutnya, buat folder “assets” didalam folder “pos” 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.4.1.min.js
Seleksi semua kode-nya (CTRL + A) dan copy lalu pastekan di notepad dan simpan dengan nama jquery-3.4.1.min.js.
Selanjutnya, copykan file bootstrap-select.css kedalam folder “assets/css” dan file bootstrap-select.js kedalam folder “assets/js” seperti gambar berikut:
Jika Anda belum mendapatkan bootstrap-select, silahkan download pada URL berikut:
https://developer.snapappointments.com/bootstrap-select/
Step #4. Konfigurasi Codeigniter
Selanjutnya lakukan konfigurasi pada beberapa 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/pos/';
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 #5. Controller
Buat sebuah controller dengan nama Package.php pada folder “application/controllers”.
Kemudian ketikan kode berikut:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Package extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('Package_model','package_model');
}
// READ
function index(){
$data['product'] = $this->package_model->get_products();
$data['package'] = $this->package_model->get_packages();
$this->load->view('package_view',$data);
}
//CREATE
function create(){
$package = $this->input->post('package',TRUE);
$product = $this->input->post('product',TRUE);
$this->package_model->create_package($package,$product);
redirect('package');
}
// GET DATA PRODUCT BERDASARKAN PACKAGE ID
function get_product_by_package(){
$package_id=$this->input->post('package_id');
$data=$this->package_model->get_product_by_package($package_id)->result();
foreach ($data as $result) {
$value[] = (float) $result->product_id;
}
echo json_encode($value);
}
//UPDATE
function update(){
$id = $this->input->post('edit_id',TRUE);
$package = $this->input->post('package_edit',TRUE);
$product = $this->input->post('product_edit',TRUE);
$this->package_model->update_package($id,$package,$product);
redirect('package');
}
// DELETE
function delete(){
$id = $this->input->post('delete_id',TRUE);
$this->package_model->delete_package($id);
redirect('package');
}
}
Step #6. Model
Buat sebuah model dengan nama “Package_model.php” pada folder “application/models”.
Kemudian ketikan kode berikut:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Package_model extends CI_Model{
// GET ALL PRODUCT
function get_products(){
$query = $this->db->get('product');
return $query;
}
//GET PRODUCT BY PACKAGE ID
function get_product_by_package($package_id){
$this->db->select('*');
$this->db->from('product');
$this->db->join('detail', 'detail_product_id=product_id');
$this->db->join('package', 'package_id=detail_package_id');
$this->db->where('package_id',$package_id);
$query = $this->db->get();
return $query;
}
//READ
function get_packages(){
$this->db->select('package.*,COUNT(product_id) AS item_product');
$this->db->from('package');
$this->db->join('detail', 'package_id=detail_package_id');
$this->db->join('product', 'detail_product_id=product_id');
$this->db->group_by('package_id');
$query = $this->db->get();
return $query;
}
// CREATE
function create_package($package,$product){
$this->db->trans_start();
//INSERT TO PACKAGE
date_default_timezone_set("Asia/Bangkok");
$data = array(
'package_name' => $package,
'package_created_at' => date('Y-m-d H:i:s')
);
$this->db->insert('package', $data);
//GET ID PACKAGE
$package_id = $this->db->insert_id();
$result = array();
foreach($product AS $key => $val){
$result[] = array(
'detail_package_id' => $package_id,
'detail_product_id' => $_POST['product'][$key]
);
}
//MULTIPLE INSERT TO DETAIL TABLE
$this->db->insert_batch('detail', $result);
$this->db->trans_complete();
}
// UPDATE
function update_package($id,$package,$product){
$this->db->trans_start();
//UPDATE TO PACKAGE
$data = array(
'package_name' => $package
);
$this->db->where('package_id',$id);
$this->db->update('package', $data);
//DELETE DETAIL PACKAGE
$this->db->delete('detail', array('detail_package_id' => $id));
$result = array();
foreach($product AS $key => $val){
$result[] = array(
'detail_package_id' => $id,
'detail_product_id' => $_POST['product_edit'][$key]
);
}
//MULTIPLE INSERT TO DETAIL TABLE
$this->db->insert_batch('detail', $result);
$this->db->trans_complete();
}
// DELETE
function delete_package($id){
$this->db->trans_start();
$this->db->delete('detail', array('detail_package_id' => $id));
$this->db->delete('package', array('package_id' => $id));
$this->db->trans_complete();
}
}
Step #7. View
Buat sebuah view dengan nama “package_view.php” pada folder “application/views”.
Kemudian ketikan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Package</title>
<!--Load CSS File-->
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap-select.css');?>">
</head>
<body>
<div class="container">
<h1>Package Lists</h1>
<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addNewModal">Add New Package</button><br/>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Package Name</th>
<th>Created At</th>
<th>Item Product</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$count=0;
foreach ($package->result() as $row) :
$count++;
?>
<tr>
<td><?php echo $count;?></td>
<td><?php echo $row->package_name;?></td>
<td><?php echo $row->package_created_at;?></td>
<td><?php echo $row->item_product.' Items';?></td>
<td>
<a href="#" class="btn btn-info btn-sm update-record" data-package_id="<?php echo $row->package_id;?>" data-package_name="<?php echo $row->package_name;?>">Edit</a>
<a href="#" class="btn btn-danger btn-sm delete-record" data-package_id="<?php echo $row->package_id;?>">Delete</a>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
<!-- Modal Add New Package-->
<form action="<?php echo site_url('package/create');?>" method="post">
<div class="modal fade" id="addNewModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Package</label>
<div class="col-sm-10">
<input type="text" name="package" class="form-control" placeholder="Package Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Product</label>
<div class="col-sm-10">
<select class="bootstrap-select" name="product[]" data-width="100%" data-live-search="true" multiple required>
<?php foreach ($product->result() as $row) :?>
<option value="<?php echo $row->product_id;?>"><?php echo $row->product_name;?></option>
<?php endforeach;?>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</div>
</div>
</div>
</form>
<!-- Modal Update Package-->
<form action="<?php echo site_url('package/update');?>" method="post">
<div class="modal fade" id="UpdateModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Package</label>
<div class="col-sm-10">
<input type="text" name="package_edit" class="form-control" placeholder="Package Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Product</label>
<div class="col-sm-10">
<select class="bootstrap-select strings" name="product_edit[]" data-width="100%" data-live-search="true" multiple required>
<?php foreach ($product->result() as $row) :?>
<option value="<?php echo $row->product_id;?>"><?php echo $row->product_name;?></option>
<?php endforeach;?>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="edit_id" required>
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success btn-sm">Update</button>
</div>
</div>
</div>
</div>
</form>
<!-- Modal Delete Package-->
<form action="<?php echo site_url('package/delete');?>" method="post">
<div class="modal fade" id="DeleteModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4>Are you sure to delete this package?</h4>
</div>
<div class="modal-footer">
<input type="hidden" name="delete_id" required>
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-success btn-sm">Yes</button>
</div>
</div>
</div>
</div>
</form>
<!--Load JavaScript File-->
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.4.1.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap.bundle.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap-select.js');?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bootstrap-select').selectpicker();
//GET UPDATE
$('.update-record').on('click',function(){
var package_id = $(this).data('package_id');
var package_name = $(this).data('package_name');
$(".strings").val('');
$('#UpdateModal').modal('show');
$('[name="edit_id"]').val(package_id);
$('[name="package_edit"]').val(package_name);
//AJAX REQUEST TO GET SELECTED PRODUCT
$.ajax({
url: "<?php echo site_url('package/get_product_by_package');?>",
method: "POST",
data :{package_id:package_id},
cache:false,
success : function(data){
var item=data;
var val1=item.replace("[","");
var val2=val1.replace("]","");
var values=val2;
$.each(values.split(","), function(i,e){
$(".strings option[value='" + e + "']").prop("selected", true).trigger('change');
$(".strings").selectpicker('refresh');
});
}
});
return false;
});
//GET CONFIRM DELETE
$('.delete-record').on('click',function(){
var package_id = $(this).data('package_id');
$('#DeleteModal').modal('show');
$('[name="delete_id"]').val(package_id);
});
});
</script>
</body>
</html>
Step #8. Uji Coba
Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:
http://localhost/pos/index.php/package
Maka, akan tampil seperti gambar berikut:
1. Add New (CREATE)
Klik tombol “Add New Package” untuk membuat paket baru. Maka akan muncul sebuah modal seperti gambar berikut:
Input “package” dan pilih beberapa “product” yang ingin dimasukan ke paket tersebut.
Pada gambar diatas, saya memberi nama package “Paket I” dan memilih Product 1, Product 3, Product 4, dan Product 5 kedalam “Paket I”.
Kemudian klik tombol “Save” untuk insert data.
Jika berhasil, maka akan terlihat hasilnya seperti gambar berikut:
Pada saat insert data, maka akan terinsert satu record pada table “package” yaitu Package Name, dan Created At.
Dan terinsert multiple records pada table “detail” sesuai dengan jumlah product yang dipilih dalam satu paket.
Dengan kata lain, satu paket terdapat banyak item product didalamnya.
2. Update
Klik tombol “Edit” untuk update record, maka akan muncul modal “Update Package” seperti gambar berikut:
Ubah “Package” dan tambahkan atau kurangi jumlah item product sesuai dengan keinginan, kemudian klik tombol “Update” untuk update data.
Pada kasus diatas, saya mengganti nama package-nya menjadi “Paket I Edit” dan saya kurangi item productnya menjadi 2 items yaitu Product 3 dan Product 4.
Jika update berhasil, maka akan muncul seperti gambar berikut:
Pada saat update, maka akan terupdate satu record pada table “package” dan terupdate multiple records pada table “detail”.
3. Delete
Klik tombol “Delete” untuk menghapus data, maka akan muncul modal delete package seperti gambar berikut:
Klik tombol “Yes” untuk menghapus data. Jika berhasil, maka data paket akan terhapus.
Pada saat delete, maka akan menghapus multiple records pada table “detail” berdasarkan “package_id” dan menghapus satu record pada table “package” berdasarkan “package_id”.
Related: Tutorial Lengkap CodeIgniter 4 Untuk Pemula
Kesimpulan
Pembahasan kali ini adalah tentang bagaimana membuat multiple Insert, Update, dan delete dengan multiple selected value pada Codeigniter.
Dengan contoh studi kasus yang nyata dapat membuat Anda memahami dengan baik seperti apa pembuatan multiple insert, update, dan delete dan bagaimana penerapannya.
Jadi, tunggu apalagi Let’s Coding!
![Tutorial Codeigniter Untuk Pemula [Full Tutorial]](/assets/images/small/2631429ede1d080f81ca5a4de5fe844b.png)
Komentar (2)
Zeldianto Eka Putra, 25 June 2019 09:07 - Reply
GGWP.. Mantap bg, Lanjutkan !!!
eddie, 04 March 2021 03:07 - Reply
bang... kalo di implement untuk CI 4 bisa gak?