Tutorial
CRUD PHP MySQLi Menggunakan Modal Bootstrap & Ajax
Oke langsung saja, agar kalian tidak bingung saya akan membahas satu persatu dari judul diatas terlebih dahulu.
CRUD
CRUD merupakan istilah yang merupakan singkatan dari Create, Read, Update dan Delete. Sudahkah kalian mendengarnya? Jika belum akan saya perjelas secara rinci.
Create
Create yang berarti membuat sebuah data baru, contoh kita sedang melakukan registrasi disebuah web itu sudah merupakan Create dari CRUD karena kita membuat dan menyimpan data registrasi ke database.
Read
Read membaca atau menampilkan suatu data yang tadinya berada di database MySQL misalnya, kemudian ditampilkan di WEB menggunakan bahasa pemrograman PHP.
Update
Update untuk yang satu ini prosesnya adalah mengedit sebuah data dari database yang kemudian di edit menggunakan bahasa pemrograman PHP berupa WEB.
Delete
Pastinya kalian tahu fungsinya apa bukan? Fungsinya hampir sama dengan Update akan tetapi proses ini adalah untuk melakukan penghapusan data di database melalui bahasa PHP.
PHP
PHP adalah bahasa pemrograman yang sering disisipkan ke dalam HTML. PHP sendiri berasal dari kata Hypertext Preprocessor. Sejarah PHP pada awalnya merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
Penjelasan Tentang
MySQLi
Pernahkan Anda mengalami masalah dengan munculnya pesan error The mysql extension is deprecated and will be removed in the future. Ya, pesan itu muncul karena Query yang Anda gunakan adalah MySQL, dan Command MySQL ini akan dihapus kedepannya, dan tidak di support lagi. Jadi jika Script yang Anda gunakan masih MySQL, sekarang harus bersiap-siap untuk migrasi menggunakan MySQLi.
MySQLi
MySQLi, dimana i ini mempunyai kepanjangan improved yang berarti ditingkatkan. Nah dari arti ini saja kita sudah paham bahwa MySQLi adalah hasil pengembangan dari MySQL itu sendiri.
Modal Bootstrap
Modal Bootstrap adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesan atau konfirmasi untuk suatu aksi, anda bisa membuat promosi dengan modal, membuat persetujuan untuk suatu aksi, misalnya anda membuat aksi untuk menghapus suatu data maka anda bisa menggunakan modal untuk membuat pertanyaan konfirmasi seperti misalnya “apakah anda yakin ingin menghapus data ini?”. Banyak lagi kegunaan dari modal karena anda juga bisa menampilkan data dalam bentuk modal.
AJAX
AJAX adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi web untuk bekerja secara asynchronous (tidak langsung) – memproses setiap request (permintaan) yang datang ke server di sisi background. Penjelasan diatas gunanya untuk membantu Anda sekalian agar bisa lebih paham untuk mengikuti tutorial ini.
Langkah Pertama
Download file-file yang dibutuhkan disini
Langkah Kedua
Extract file bootstrap dan jquery yang sobat download kedalam root aplikasi sobat, root aplikasi saya di c:\xampp\htdocs\php7\modalajax, sesuaikan dengan folder root yang sobat miliki.
Langkah Ketiga
Sobat buat database, database milik saya namanya dbphp7, kalau untuk sobat terserah mau buat apa namanya tapi saran saya gunakan nama yang sama, dan buat tabel dengan nama modal.
CREATE TABLE `modal` ( `modal_id` int(11) NOT NULL AUTO_INCREMENT, `modal_name` varchar(255) DEFAULT NULL, `description` text, `date` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`modal_id`) ) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
Langkah Keempat
Setelah ketiga langkah diatas sobat lakukan, ketiklah kode dibawah ini, simpan dengan nama index.php.
<!doctype html> <html lang="en">
<head>
<title>CRUD PHP MySQLi Modal Bootstrap | Aguzrybudy.com</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<meta content="Aguzrybudy" name="author"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5 mb-5">
<h2>CRUD PHP MySQLi Modal Bootstrap</h2>
<p> CRUD PHP MySQLi Modal Bootstrap By Aguzrybudy, Rabu 06 November 2019 </p>
<p class="text-right">
<a href="javascript:void(0)" class="btn btn-success" data-target="#ModalAdd" data-toggle="modal"> Add Data </a>
<a href="datatable.php" class="btn btn-info"> Datatable </a>
</p>
<table id="mytable" class="table table-bordered">
<thead>
<tr> <th>No</th> <th>Name</th> <th>Description</th> <th>Action</th> </tr>
</thead>
<tbody id="modal-data">
<?php
//menampilkan data mysqli
include "koneksi.php";
$no = 0;
$modal=mysqli_query($koneksi,"SELECT * FROM modal ORDER BY modal_id DESC");
while($r=mysqli_fetch_array($modal)){
$no++;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $r['modal_name']; ?></td>
<td><?php echo $r['description']; ?></td>
<td>
<a href="javascript:void(0)" class='open_modal' id='<?php echo $r['modal_id']; ?>'> Edit </a>
<a href="javascript:void(0)" class="delete_modal" data-id='<?php echo $r['modal_id']; ?>'> Delete </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- Modal Popup untuk Add -->
<div id="ModalAdd" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> Add Data Using Modal Bootstrap (popup) </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"> × </span>
</button>
</div>
<div class="modal-body">
<form id="form-save" action="proses_save.php" name="modal_popup" enctype="multipart/form-data" method="POST">
<div class="form-group" style="padding-bottom:20px;">
<label for="Modal Name"> Modal Name </label>
<input type="text" name="modal_name" id="modal-name" class="form-control" placeholder="Modal Name" required/>
</div>
<div class="form-group" style="padding-bottom:20px;">
<label for="Description"> Description </label>
<textarea name="description" id="description" class="form-control" placeholder="Description" required> </textarea>
</div>
<div class="form-group" style="padding-bottom:20px;">
<label for="Date"> Date </label>
<input type="text" name="date" class="form-control" placeholder="Timestamp" disabled value="<?php echo date('Y-m-d H:i:s');?>" required/>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">
Save
</button>
<button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal Popup untuk Edit -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
</div>
<!-- Modal Popup untuk delete -->
<div class="modal fade" id="modal_delete">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:100px;">
<div class="modal-header">
<h5 class="modal-title"> Are you sure to delete this data ? </h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true"> × </span>
</button>
</div>
<div class="modal-footer" style="margin:0px;border-top:0px;text-align:center;">
<button type="button" class="btn btn-danger" id="delete_link"> Delete </button>
<button type="button" class="btn btn-success" data-dismiss="modal"> Cancel </button> </div> </div> </div> </div>
<!-- Javascript untuk popup modal Edit-->
<script type="text/javascript">
$(document).ready(function () {
$(".open_modal").click(function(e) {
var m = $(this).attr("id");
$.ajax({
url: "modal_edit.php",
type: "GET",
data : { modal_id: m },
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{ backdrop: 'true' });
}
});
});
});
</script>
<!-- Ajax untuk menyimpan data -->
<script type="text/javascript">
$("#form-save").on('submit', function(e){
e.preventDefault();
$.ajax({
method: $(this).attr("method"),
url: $(this).attr("action"),
data: {
modal_name: $('#modal-name').val(),
description: $('#description').val()
},
success:function(response){
console.log(response);
$("#modal-data").empty();
$("#modal-data").html(response.data);
$("#ModalAdd").modal('hide');
$('#modal-name').val('');
$('#description').val('');
},
error:function(e) {
// Error function here
},
beforeSend:function(b) {
// Before function here
}
})
.done(function(d){
// When ajax finished
});
});
</script>
<!-- Ajax untuk update data -->
<script type="text/javascript">
$('body').on('submit','#form-update', function(e){
e.preventDefault();
$.ajax({
method: $(this).attr("method"),
url: $(this).attr("action"),
data:{
modal_id: $('#edit-id').val(),
modal_name: $('#edit-name').val(),
description: $('#edit-description').val()
},
success:function(response){
console.log(response);
$("#modal-data").empty();
$("#modal-data").html(response.data);
$("#ModalEdit").modal('hide');
},
error:function(e) {
// Error function here
},
beforeSend:function(b) {
// Before function here
}
})
.done(function(d){
// When ajax finished
});
});
</script>
<!-- Ajax untuk delete data -->
<script type="text/javascript">
$('body').on('click','.delete_modal', function(e){
let modal_id = $(this).data('id');
$('#modal_delete').modal('show',{ backdrop:'static' });
$("#delete_link").on("click", function(){
e.preventDefault();
$.ajax({
method:'POST',
url:'proses_delete.php',
data:{
modal_id:modal_id
},
success:function(response){
console.log(response);
$("#modal-data").empty();
$("#modal-data").html(response.data);
$("#modal_delete").modal('hide');
},
error:function(e) {
// Error function here
},
beforeSend:function(b) {
// Before function here
}
})
.done(function(d){
// When ajax finished
});
});
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title> CRUD PHP MySQLi Modal Bootstrap & Datatable | Aguzrybudy.com </title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<meta content="Aguzrybudy" name="author"/>
<link rel="stylesheet" type="text/css" href="DataTables/Bootstrap-4-4.1.1/css/bootstrap.min.css"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Untuk datatable -->
<link rel="stylesheet" type="text/css" href="datatables/datatables.min.css"/>
<script type="text/javascript" src="datatables/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
</head>
<body>
<div class="container mt-5 mb-5">
<h2> CRUD PHP MySQLi Modal Bootstrap </h2>
<p> CRUD PHP MySQLi Modal Bootstrap By Aguzrybudy, Rabu 06 November 2019 </p>
<p class="text-right">
<a href="javascript:void(0)" class="btn btn-success" data-target="#ModalAdd" data-toggle="modal">
Add Data
</a>
<a href="index.php" class="btn btn-info">
Back
</a>
</p>
<table id="datatable" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody id="modal-data">
<?php
//menampilkan data mysqli
include "koneksi.php";
$no = 0;
$modal=mysqli_query($koneksi,"SELECT * FROM modal ORDER BY modal_id DESC");
while($r=mysqli_fetch_array($modal)){
$no++;
?>
<tr>
<td> <?php echo $no; ?> </td>
<td> <?php echo $r['modal_name']; ?> </td>
<td> <?php echo $r['description']; ?> </td>
<td>
<a href="javascript:void(0)" class='open_modal' id='<?php echo $r['modal_id']; ?>'>
Edit
</a>
<a href="javascript:void(0)" class="delete_modal" data-id='<?php echo $r['modal_id']; ?>'>
Delete
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- Modal Popup untuk Add -->
<div id="ModalAdd" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Add Data Using Modal Bootstrap (popup)
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<form id="form-save" action="proses_save.php" name="modal_popup" enctype="multipart/form-data" method="POST">
<div class="form-group" style="padding-bottom:20px;">
<label for="Modal Name">
Modal Name
</label>
<input type="text" name="modal_name" id="modal-name" class="form-control" placeholder="Modal Name" required/>
</div>
<div class="form-group" style="padding-bottom:20px;">
<label for="Description">
Description
</label>
<textarea name="description" id="description" class="form-control" placeholder="Description" required> </textarea>
</div>
<div class="form-group" style="padding-bottom:20px;">
<label for="Date">
Date
</label>
<input type="text" name="date" class="form-control" placeholder="Timestamp" disabled value="<?php echo date('Y-m-d H:i:s'); ?>" required/>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">
Save
</button>
<button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal Popup untuk Edit -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
</div>
<!-- Modal Popup untuk delete -->
<div class="modal fade" id="modal_delete">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:100px;">
<div class="modal-header">
<h5 class="modal-title">
Are you sure to delete this data ?
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-footer" style="margin:0px;border-top:0px;text-align:center;">
<a href="#" class="btn btn-danger" id="delete_link">
Delete
</a>
<button type="button" class="btn btn-success" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
<!-- Javascript untuk popup modal Edit -->
<script type="text/javascript">
$(document).ready(function(){
$('#datatable').on('click','.open_modal',function(e){
var m = $(this).attr("id");
$.ajax({
url:"modal_edit.php",
type:"GET",
data:{ modal_id:m },
success:function(ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{ backdrop:'true' });
}
});
});
});
</script>
<!-- Ajax untuk menyimpan data -->
<script type="text/javascript">
$('body').on('submit','#form-save',function(e){
e.preventDefault();
$.ajax({
method:$(this).attr("method"),
url:$(this).attr("action"),
data:{
modal_name:$('#modal-name').val(),
description:$('#description').val()
},
success:function(response){
console.log(response);
$("#modal-data").empty();
$("#modal-data").html(response.data);
$("#ModalAdd").modal('hide');
$(".modal-backdrop").hide();
},
error:function(e){
// Error function here
},
beforeSend:function(b){
// Before function here
}
})
.done(function(d){
// When ajax finished
});
});
</script>
<!-- Ajax untuk update data -->
<script type="text/javascript">
$('body').on('submit','#form-update',function(e){
e.preventDefault();
$.ajax({
method:$(this).attr("method"),
url:$(this).attr("action"),
data:{
modal_id:$('#edit-id').val(),
modal_name:$('#edit-name').val(),
description:$('#edit-description').val()
},
success:function(response){
console.log(response);
$("#modal-data").empty();
$("#modal-data").html(response.data);
$("#ModalEdit").modal('hide');
},
error:function(e){
// Error function here
},
beforeSend:function(b){
// Before function here
}
})
.done(function(d){
// When ajax finished
});
});
</script>
<!-- Ajax untuk delete data -->
<script type="text/javascript">
$('body').on('click','.delete_modal',function(e){
let modal_id=$(this).data('id');
$('#modal_delete').modal('show',{ backdrop:'static' });
$("#delete_link").on("click",function(){
e.preventDefault();
$.ajax({
method:'POST',
url:'proses_delete.php',
data:{
modal_id:modal_id
},
success:function(response){
console.log(response);
$("#modal-data").empty();
$("#modal-data").html(response.data);
$("#modal_delete").modal('hide');
},
error:function(e){
// Error function here
},
beforeSend:function(b){
// Before function here
}
})
.done(function(d){
// When ajax finished
});
});
});
</script>
</body>
</html>
