Multiple Insert, Update, Delete dengan Multiple Select Pada Codeigniter

Multiple Insert, Update, Delete dengan Multiple Select Pada Codeigniter

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

4. Bootstrap Select

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.

 

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:

Project name

Selanjutnya, buat folder “assets” didalam folder “pos” 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:

Bootstrap Files

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

Jquery File

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:

Bootstrap Select Files

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">&times;</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">&times;</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">&times;</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:

Package Lists

1. Add New (CREATE)

Klik tombol “Add New Package” untuk membuat paket baru. Maka akan muncul sebuah modal seperti gambar berikut:

Add New

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:

Package List Saved

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:

Update Package

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:

Package List Edited

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:

Delete Modal

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”.

 

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!

Download Source Code

Share:




Komentar (1)

Zeldianto Eka Putra, 25 June 2019 09:07 - Reply

GGWP.. Mantap bg, Lanjutkan !!!

Leave a Comment