CRUD Codeigniter 4 dengan menggunakan Bootstrap dan Jquery

CRUD Codeigniter 4 dengan menggunakan Bootstrap dan Jquery

loading....

Pada tutorial kali ini penulis akan membuat tutorial tentang bagaimana membuat CRUD dengan menggunakan Codeigniter 4. Tutorial tentang crud ini sudah pernah penulis bahas tapi kali ini penulis akan membahas nya dengan menggunakan bootstrap dan jquery. Bootstrap yang akan di gunakan adalah bootstrap tabel dan bootstrap modal. Jadi kamu bisa melakukan oprasi crud tanpa harus pindah halaman.

CRUD Codeigniter 4 dengan menggunakan Bootstrap dan Jquery

Pada tutroal kali ini saya melakukan banyak perubahan dari tutorial saya yang sebelum nya. Walaupun base code nya berasa dari tutorial saya yang sebelum nya. Mari kita lihat perubahan apa saja yang saya lakukan :

Model

<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;

class M_user extends Model
{
    protected $table = 'user';
	protected $primaryKey = 'user_id';
    protected $allowedFields = ['user_id', 'user_email','user_alias','user_password'];
}

pada model M_user saya melakukan penambahan $primarykey dan $allowedFields

Controller User

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\M_user;

class User extends Controller
{
    public function index()
    {    
        return view('user');
    }
	public function hal()
	{
        $model = new M_user();
		$request = \Config\Services::request();
        $data = [
            'user' => $model->paginate(5,'jq'),
            'hal' => $model->pager,
			'p' => $request->getPostGet('page_jq'),
        ];
		return view('user2', $data);
	}
    public function detail()
    {   $request = \Config\Services::request();
        $model = new M_user();
		$user_id = $request->getPostGet('user');
		$hal = $request->getPostGet('hal');
		//$user_id = 'admin';
        $user = $model->find($user_id);
		
		echo '  <div class="form-group row">
					<label for="email" class="col-sm-2 col-form-label">Email</label>
					<div class="col-sm-10">
						<input type="email" class="form-control" id="email" value="'.$user['user_email'].'">
						 <input type="hidden" id="user_id" name="user_id" value="'.$user['user_id'].'">
						 <input type="hidden" id="hal" name="hal" value="'.$hal.'">
					</div>
				</div>
				<div class="form-group row">
					<label for="alias" class="col-sm-2 col-form-label">Alias</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="alias" value="'.$user['user_alias'].'">
					</div>
				</div>
				<div class="form-row">
					<div class="form-group col-md-6">
						<label for="password">Password</label>
						<input type="password" class="form-control" id="password">
					</div>
					<div class="form-group col-md-6">
						<label for="password1">Konfirmasi Password</label>
						<input type="password" class="form-control" id="password1">
					</div>
				</div>';
        
    }	
	public function update()
	{
		$request = \Config\Services::request();
        $model = new M_user();
		$user_id = $request->getGetPost('user_id');
		$email = $request->getGetPost('email');
		$alias = $request->getGetPost('alias');
		$password = MD5($request->getGetPost('password'));
		
		if ($password == '')
		{
			$data = [
			'user_email' => $email,
			'user_alias' => $alias,
			];	
		}else
		{
			$data = [
			'user_email' => $email,
			'user_alias' => $alias,
			'user_password' => $password,
			];
		}
		$result = $model->update($user_id, $data);
		echo $result;
	}
	public function insert()
	{
		$request = \Config\Services::request();
        $model = new M_user();
		$user_id = $request->getGetPost('user_id');
		$email = $request->getGetPost('email');
		$alias = $request->getGetPost('alias');
		$password = MD5($request->getGetPost('password'));
		
		if ($password == '')
		{
			$data = [
			'user_email' => $email,
			'user_alias' => $alias,
			];	
		}else
		{
			$data = [
			'user_id' => $user_id,
			'user_email' => $email,
			'user_alias' => $alias,
			'user_password' => $password,
			];
		}
		$result = $model->insert($data);
		echo $result+1;
	}	
    public function hapus()
    {    
        $model = new M_user();
		$request = \Config\Services::request();
		$user_id = $request->getPostGet('id');  
		$hal = $request->getPostGet('hal');		
        $result = $model->where('user_id', $user_id)->delete();
		echo $result;
    }		
}

pada controller user saya melakukan beberapa penambahan fungsi untuk melakukan proses crud. Fungsi yang saya tambahkan berfungsi untuk melakukan proses update insert dan delete.

View user2.php

    <div class="row p-2">
		<div class="col-md-12">
				<table class="table table-bordered">
				 <thead>
					<tr>
					   <th>User ID</th>
					   <th>Email</th>
					   <th>Alias</th>
					   <th>Aksi</th>
					</tr>
				 </thead>
				 <tbody>
					<?php $a = 0 ?>
					<?php if($user): ?>
					<?php foreach($user as $users): ?>
					<tr>
					
					   <td><?php echo $users['user_id']; ?></td>
					   <td><?php echo $users['user_email']; ?></td>
					   <td><?php echo $users['user_alias']; ?></td>
					   <td> <a class="btn btn-primary" href="#" OnClick="modal('<?php echo $users['user_id']."','".$p; ?>');"><i class="fas fa-pen-square"></i></a>  <a class="btn btn-danger" href="#" OnClick="hapus('<?php echo $users['user_id']."','".$p; ?>');"><i class="fas fa-user-times"></i></a></td>
					</tr>
				   <?php endforeach; ?>
				   <?php endif; ?>
					<tr>
					   <td></td>
					   <td></td>
					   <td></td>
					   <td><a class="btn btn-success" href="#" OnClick="modal('','<?php echo $p; ?>');"><i class="fas fa-plus-square"></i> Tambah Data</a></td>
					</tr>				   
				 </tbody>
			   </table>
		</div>
    </div>
    <div class="row p-2">
		<div class="col-md-12">
			
              <?php if ($hal) :?>
              <?php echo $hal->links('jq', 'bs_page') ?> 
              <?php endif ?>
		</div>
    </div>

perubahan yang saya lakukan pada file ini adalah menambahkan sebuah kolom untuk malkukan proses update dan delete dan sebuah baris di bawah untuk melakukan penambahan data. proses ini dilakukan dengan menggunakan bootstrap modal dan jquery.

View user

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Tutorial membuat Pagination Sederhana Menggunakan Codeigniter 4@RumahCode.Org</title>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script defer src="http://localhost/ci41/vendor/fontawesome5/svg-with-js/js/fontawesome-all.min.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script>
function getfpage(){	
	$("#isi").html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
    $.get("user/hal", function(data, status){
      $("#isi").html(data);
    });
}
function goto(hal){	
	$("#isi").html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
    $.get(hal, function(data, status){
      $("#isi").html(data);
    });
}
function detail(id,hal){
	$("#modaleditisi").html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
	$("#modaleditjdl").html('<input type="hidden" id="st" name="st" value="0">Edit User ID '+id);
    $.get("user/detail?user="+id+"&hal="+hal, function(data, status){
      $("#modaleditisi").html(data);
	  
    });	
}	
function modal(id,hal)
{
	$('#modaledit').modal('show');
	if (id != '')
	{
		detail(id,hal);
	}else
	{
		$("#modaleditjdl").html('Tambah User<input type="hidden" id="st" name="st" value="1">');
		$("#modaleditisi").html('<div class="form-group row"><label for="user_id" class="col-sm-2 col-form-label">User ID</label><div class="col-sm-10"><input type="text" class="form-control" id="user_id"></div></div><div class="form-group row"><label for="email" class="col-sm-2 col-form-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="email"><input type="hidden" id="hal" name="hal" value="'+hal+'"></div></div><div class="form-group row"><label for="alias" class="col-sm-2 col-form-label">Alias</label><div class="col-sm-10"><input type="text" class="form-control" id="alias"></div></div><div class="form-row"><div class="form-group col-md-6"><label for="password">Password</label><input type="password" class="form-control" id="password"></div><div class="form-group col-md-6"><label for="password1">Konfirmasi Password</label><input type="password" class="form-control" id="password1"></div></div>');
	}
}
function hapus(id,hal)
{	$('#modalhapus').modal('show');
	$("#modalhapusjdl").html('Hapus User ID '+id+'<input type="hidden" id="hal" name="hal" value="'+hal+'"><input type="hidden" id="id" name="id" value="'+id+'">');
	$("#modalhapusisi").html('Apakah anda yakin?');
	
}
function dohapus()
{
	var id = $("#id").val();
	var hal = $("#hal").val();	
    $.get("user/hapus?id="+id, function(data, status){});
		alert('Hapus data berhasil');
		$('#modalhapus').modal('hide');
		goto('user/hal?page_jq='+hal);	
  
}
function simpan()
{
	var userid = $("#user_id").val();
	var email = $("#email").val();
	var alias = $("#alias").val();
	var password = $("#password").val();
	var password1 = $("#password1").val();
	var hal = $("#hal").val();
	var st = $("#st").val();
		if (userid == ''){alert('Semua field harus diisi');return false;}
		if (email == ''){alert('Semua field harus diisi');return false;}
		if (alias == ''){alert('Semua field harus diisi');return false;}		
	if (st != '1')
	{	var act = 'update';
	}else
	{
		var act = 'insert';	
		if (password != '')
		{
			if (password != password1){alert('Password & Konfirmasi tidak sama');return false;}
		}else{
			alert('Password Tidak Boleh Kosong');
			return false;
			}

	}
		if (password != '')
		{
			//tidak kosong
			if (password != password1)
			{
				alert('Password & Konfirmasi Password tidak sama');
				return false;
			}
		}
			//password Kosong
				$.post( "user/"+act, { user_id: userid,email: email,alias: alias,password: password }).done(function( data ) {
					if (data == 1)
					{	
						alert (act+' Data Berhasil');
						$('#modaledit').modal('hide');
						goto('user/hal?page_jq='+hal);
					}
					else
					{
						alert (act+' Data Gagal');
					}
				});				
}
</script>  
</head>
<body onload="getfpage();">
<div class="container" id="isi">

</div> 
<div class="modal fade" id="modaledit" tabindex="-1" role="dialog" aria-labelledby="modaleditjdl" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modaleditjdl">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" id="modaleditisi">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary" OnClick="simpan();">Simpan</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalhapus" tabindex="-1" role="dialog" aria-labelledby="modalhapusjdl" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalhapusjdl">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" id="modalhapusisi">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary" OnClick="dohapus()">Hapus</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Perubahan yang baling banyak saya lakukan pada file ini. penambahan yang saya lakukan adalah:

  • deklarasi script untuk font awesome
  • deklarasi css & script untuk bootstrap
  • penambahan fungsi javascript yang menggunakan jquery untuk menampilkan bootstrap modal yang berfungsi untuk menambah data menghapus data atau merubah data..
  • Penambahan fungsi untuk melakukan proses crud yang menggunakan jquery.

Hasil akhir dari apalikasi ini adalah kamu dapat melakukan proses crud tanpa harus membuka secara berulang ulang halaman yang sama. dan ketikan kamu sudah berhasil melakukan proses crud halaman semula akan di load secara otomatis. biar lebih jelasnya kamu dapat mendownload keseluruhan tutorial ini di sini.

Artikel Menarik Lainnya
belajar codeigniter, crud codeigniter sederhana, download crud codeigniter, crud codeigniter bootstrap, crud codeigniter modal, tutorial codeigniter, codeigniter ajax crud with datatables and bootstrap modals, tutorial ajax codeigniter, crud codeigniter bootstrap, membuat crud codeigniter bootstrap, crud codeigniter bootstrap modal, codeigniter pagination, pagination codeigniter, codeigniter crud, codeigniter crud bootstrap, codeigniter 4

loading...