Cara Membuat CRUD Plus Upload Gambar dengan PHP AJAX Bootstrap
Rizaldi Maulidia Achmad
Sesuai request dari beberapa teman-teman dari salah satu komunitas pemograman di media sosial. Saya akan coba menjelaskan step by step mengenai cara membuat CRUD (Create, Read, Update, Delete) plus Upload Gambar dengan menggunakan PHP, AJAX, Database MySQL, dan Bootstrap. Catatan ini adalah pengembangan dari catatan sebelumnya mengenai Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL.
AJAX
Apa itu AJAX? AJAX adalah singkatan dari “Asynchronous JavaScript and XML“, merupakan metode suatu laman web menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. XML adalah sejenis markup language – seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet. Belakangan ini, JSON (“JavaScript Object Notation”) lebih populer dan bisa dibaca – secara bawaan (native) – oleh JavaScript.
Bootstrap
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Perbedaan PDO dan MySQLi
Kenapa saya membahas ini? Karena pada catatan ini saya menggunakan PDO untuk melakukan koneksi dan query ke database MySQL nya. Berikut ini perbedaan keduanya yang saya ambil dari blog lain :
- PDO memiliki kelebihan yaitu mendukung 12 Jenis Database dengan script yang sama. Hanya sedikit perubahan query-nya. kekurangannya yaitu Hanya bisa digunakan dengan model Object Oriented.
- MySQLi memiliki kelebihan yaitu Mendukung penggunaan secara prosedural maupun Object Oriented. Kekuranganya yaitu Harus melakukan perubahan pada script dan query-nya jika akan menggunakan database selain MySQL.
DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – Persiapan
Berikut ini adalah hal-hal yang harus dipersiapkan :
- Download JQUERY, klik link berikut : Download.
- Download Bootstrap, klik link berikut : Download.
- Buat sebuah folder baru dengan nama crud_ajax, lalu simpan pada folder xampp/htdocs/.
- Buat sebuah folder dengan nama css, lalu simpan pada folder xampp/htdocs/crud_ajax/.
- Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/crud_ajax/.
- Buat sebuah folder dengan nama foto, lalu simpn pada folder xampp/htdocs/crud_ajax/. Folder ini nanti akan kita gunakan untuk menampung foto yang diupload oleh user.
- Esktrak file bootstrap.7z yang telah didownload tadi.
- Copy and paste folder fonts dari folder bootstrap yang telah diekstrak tadi ke folder xampp/htdocs/crud_ajax/.
- Copy and paste file bootstrap.min.css dari folder bootstrap/css/ yang telah diekstrak tadi ke folder xampp/htdocs/crud_ajax/css/.
- Copy and paste file bootstrap.min.js dari folder bootstrap/js/ yang telah diekstrak tadi ke folder xampp/htdocs/crud_ajax/js/.
- Copy and paste file jquery.min.js yang telah di download tadi ke folder xampp/htdocs/crud_ajax/js/.
STEP 2 – Database
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
- Buat sebuah database dengan nama mynotescode.
- Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
CREATE TABLE IF NOT EXISTS `siswa` ( `nis` varchar(11) NOT NULL, `nama` varchar(50) NOT NULL, `jenis_kelamin` varchar(10) NOT NULL, `telp` varchar(15) NOT NULL, `alamat` text NOT NULL, `foto` varchar(200) NOT NULL, PRIMARY KEY (`nis`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
STEP 3 – Koneksi Database
Pada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folder xampp/htdocs/crud_ajax/. Berikut ini kodenya :
<?php
$host = 'localhost'; // Nama hostnya
$username = 'root'; // Username
$password = ''; // Password (Isi jika menggunakan password)
$database = 'mynotescode'; // Nama databasenya
// Koneksi ke MySQL dengan PDO
$pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>
STEP 4 – View Data
Langkah selanjutnya adalah membuat 1 buah file yang berguna sebagai template utamanya. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut tampilan dan kodenya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CRUD AJAX</title>
<!-- Load File bootstrap.min.css yang ada difolder css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.align-middle{
vertical-align: middle !important;
}
</style>
</head>
<body>
<!-- Membuat Menu Header / Navbar -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="color: white;"><b>CRUD AJAX</b></a>
</div>
<p class="navbar-text navbar-right hidden-xs">
<a href="https://www.mynotescode.com" style="color: white;" class="navbar-link">www.mynotescode.com</a>
</p>
</div>
</nav>
<div style="padding: 0 15px;">
<button type="button" id="btn-tambah" data-toggle="modal" data-target="#form-modal" class="btn btn-success pull-right">
<span class="glyphicon glyphicon-plus"></span> Tambah Data
</button>
<h2>Data Siswa</h2>
<div id="pesan-sukses" class="alert alert-success"></div>
<!--
-- Buat sebuah div dengan id="view" yang digunakan untuk menampung data
-- yang ada pada tabel siswa di database
-->
<div id="view"><?php include "view.php"; ?></div>
</div>
<!--
-- Membuat sebuah tag div untuk Modal Dialog untuk Form Tambah dan Ubah
-- Beri id "form-modal" untuk tag div tersebut
-->
<div id="form-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<!-- Beri id "modal-title" untuk tag span pada judul modal -->
<span id="modal-title"></span>
</h4>
</div>
<div class="modal-body">
<!-- Beri id "pesan-error" untuk menampung pesan error -->
<div id="pesan-error" class="alert alert-danger"></div>
<!-- Beri id "form" untuk tag form -->
<form id="form">
<!--
-- Beri id untuk masing-masing form input
-- textbox nis : id="nis"
-- textbox nama : id="nama"
-- combobox jenis kelamin : id="jenis_kelamin"
-- textbox no.telepon : id="telp"
-- textarea alamat : id="alamat"
-- checkbox foto : id="checkbox_foto"
-- input file foto : id="foto"
-->
<div class="form-group">
<label>NIS</label>
<input type="text" class="form-control" id="nis" name="nis" placeholder="NIS">
</div>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="Nama">
</div>
<div class="form-group">
<label>Jenis Kelamin</label>
<select id="jenis_kelamin" name="jenis_kelamin" class="form-control">
<option value="">Pilih</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="form-group">
<label>No. Telepon</label>
<input type="text" class="form-control" id="telp" name="telp" placeholder="No. Telepon">
</div>
<div class="form-group">
<label>Alamat</label>
<textarea class="form-control" id="alamat" name="alamat" placeholder="Alamat"></textarea>
</div>
<div class="form-group">
<label>Foto</label>
<div id="checkbox_foto">
<input type="checkbox" id="ubah_foto" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto
</div>
<input type="file" class="form-control" id="foto">
</div>
<button type="reset" id="btn-reset"></button>
</form>
</div>
<div class="modal-footer">
<!-- Beri id "loading-simpan" untuk loading ketika klik tombol simpan -->
<div id="loading-simpan" class="pull-left">
<b>Sedang menyimpan...</b>
</div>
<!-- Beri id "loading-ubah" untuk loading ketika klik tombol ubah -->
<div id="loading-ubah" class="pull-left">
<b>Sedang mengubah...</b>
</div>
<!-- Beri id "btn-simpan" untuk tombol simpan nya -->
<button type="button" class="btn btn-primary" id="btn-simpan">Simpan</button>
<!-- Beri id "btn-ubah" untuk tombol simpan nya -->
<button type="button" class="btn btn-primary" id="btn-ubah">Ubah</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
<!--
-- Membuat sebuah tag div untuk Modal Dialog untuk Form Tambah dan Ubah
-- Beri id "form-modal" untuk tag div tersebut
-->
<div id="delete-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Konfirmasi
</h4>
</div>
<div class="modal-body">
<!--
-- Beri id "data-nis" untuk textbox nis yang digunakan untuk menampung
-- data nis yang akan dihapus
-->
<input type="hidden" id="data-nis">
Apakah anda yakin ingin menghapus data ini?
</div>
<div class="modal-footer">
<!-- Beri id "loading-hapus" untuk loading ketika klik tombol hapus -->
<div id="loading-hapus" class="pull-left">
<b>Sedang meghapus...</b>
</div>
<!-- Beri id "btn-hapus" untuk tombol hapus nya -->
<button type="button" class="btn btn-primary" id="btn-hapus">Ya</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Tidak</button>
</div>
</div>
</div>
</div>
<!-- Load File jquery.min.js yang ada difolder js -->
<script src="js/jquery.min.js"></script>
<!-- Load File bootstrap.min.js yang ada difolder js -->
<script src="js/bootstrap.min.js"></script>
<!-- Load file ajax.js yang ada di folder js -->
<script src="js/ajax.js"></script>
</body>
</html>
Pada kode diatas, kita akan me-load librari / plugin yang dibutuh kan seperti Jquery dan Bootstrap. Dan kita juga me-load sebuah file ajax.js yang akan kita buat pada langkah selanjutnya. Selain itu kita juga membuat sebuah form yang disimpan didalam sebuah modal dialog. ketika user mengklik tombol Tambah Data atau Tombol Ikon Pencil (Edit data) maka modal dialog tersebut akan muncul. Lihat gambar dibawah ini :
Dalam bootstrap, struktur dasar untuk membuat sebuah modal adalah sebagai berikut :
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Untuk lebih jelasnya soal modal dialog di bootstrap, klik disini.
Selanjutnya pada kode index.php diatas, lihat kode pada baris ke 55. Disitu terdapat kode <?php include “view.php”; ?>, Kode tersebut berfungsi untuk me-load file view.php yang isinya adalah tabel yang menampung data dari hasil query ke tabel siswa di database. Sekarang kita akan coba buat file tersebut. Buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th class="text-center">NO</th>
<th class="text-center">FOTO</th>
<th>NIS</th>
<th>NAMA</th>
<th>JENIS KELAMIN</th>
<th>TELP</th>
<th>ALAMAT</th>
<th colspan="2" class="text-center"><span class="glyphicon glyphicon-cog"></span></th>
</tr>
<?php
// Include / load file koneksi.php
include "koneksi.php";
// Buat query untuk menampilkan semua data siswa
$sql = $pdo->prepare("SELECT * FROM siswa");
$sql->execute(); // Eksekusi querynya
$no = 1; // Untuk penomoran tabel, di awal set dengan 1
while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
?>
<tr>
<td class="align-middle text-center"><?php echo $no; ?></td>
<td class="align-middle text-center">
<img src="foto/<?php echo $data['foto']; ?>" width="80" height="80">
</td>
<td class="align-middle"><?php echo $data['nis']; ?></td>
<td class="align-middle"><?php echo $data['nama']; ?></td>
<td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
<td class="align-middle"><?php echo $data['telp']; ?></td>
<td class="align-middle"><?php echo $data['alamat']; ?></td>
<td class="align-middle text-center">
<a href="javascript:void();" data-toggle="modal" data-target="#form-modal" onclick="edit(<?php echo $no; ?>);" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td class="align-middle text-center">
<a href="javascript:void();" data-toggle="modal" data-target="#delete-modal" onclick="hapus(<?php echo $no; ?>);" class="btn btn-danger"><span class="glyphicon glyphicon-erase"></span></a>
</td>
</tr>
<!--
-- Membuat sebuah textbox hidden yang akan digunakan untuk form ubah
-->
<input type="hidden" id="nis-value-<?php echo $no; ?>" value="<?php echo $data['nis']; ?>">
<input type="hidden" id="nama-value-<?php echo $no; ?>" value="<?php echo $data['nama']; ?>">
<input type="hidden" id="jeniskelamin-value-<?php echo $no; ?>" value="<?php echo $data['jenis_kelamin']; ?>">
<input type="hidden" id="telp-value-<?php echo $no; ?>" value="<?php echo $data['telp']; ?>">
<input type="hidden" id="alamat-value-<?php echo $no; ?>" value="<?php echo $data['alamat']; ?>">
<?php
$no++; // Tambah 1 setiap kali looping
}
?>
</table>
</div>
<script>
// Fungsi ini akan dipanggil ketika tombol edit diklik
function edit(no){
$("#btn-simpan").hide(); // Sembunyikan tombol simpan
$("#btn-ubah, #checkbox_foto").show(); // Munculkan tombol ubah dan checkbox foto
// Set judul modal dialog menjadi Form Ubah Data
$("#modal-title").html("Form Ubah data");
var nis = $("#nis-value-" + no).val(); // Ambil nis dari input type hidden
var nama = $("#nama-value-" + no).val(); // Ambil nama dari input type hidden
var jeniskelamin = $("#jeniskelamin-value-" + no).val(); // Ambil jenis kelamin dari input type hidden
var telp = $("#telp-value-" + no).val(); // Ambil telp dari input type hidden
var alamat = $("#alamat-value-" + no).val(); // Ambil alamat dari input type hidden
// Set value dari textbox nis yang ada di form
// Set textbox nis menjadi Readonly
$("#nis").val(nis).attr("readonly","readonly");
$("#nama").val(nama); // Set value dari textbox nama yang ada di form
$("#jenis_kelamin").val(jeniskelamin); // Set value dari textbox nama yang ada di form
$("#telp").val(telp); // Set value dari textbox nama yang ada di form
$("#alamat").val(alamat); // Set value dari textbox nama yang ada di form
$("#foto").val("");
}
// Fungsi ini akan dipanggil ketika tombol hapus diklik
function hapus(no){
var nis = $("#nis-value-" + no).val(); // Ambil nis dari input type hidden
// Set textbox hidden nis yang ada di modal dialog hapus
$("#data-nis").val(nis);
}
</script>
Saya akan coba jelaskan sedikit mengenai kode diatas.
include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.
$sql = $pdo->prepare(“SELECT * FROM siswa”);
$sql->execute();
Kode tersebut berfungsi untuk melakukan query ke database dan mengeksekusinya. Pada cotoh diatas, kita akan melakukan query untuk menampilkan semua data dari tabel siswa.
$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel $data. Kode tersebut saya simpan di dalam sebuah kode while(….) yang berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.
<td class="align-middle text-center"><?php echo $no; ?></td> <td class="align-middle text-center"> <img src="foto/<?php echo $data['foto']; ?>" width="80" height="80"> </td> <td class="align-middle"><?php echo $data['nis']; ?></td> <td class="align-middle"><?php echo $data['nama']; ?></td> <td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td> <td class="align-middle"><?php echo $data['telp']; ?></td> <td class="align-middle"><?php echo $data['alamat']; ?></td>
Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada pada tabel siswa di database mynotescode. Pada kode diatas juga ada kode yang berada pada tanda [‘……’], kode tersebut harus sama dengan nama field yang ada pada tabel siswa.
STEP 5 – AJAX
Langkah selanjutnya adalah kita akan membuat kode AJAX untuk mengirim datanya ke file proses. Buat sebuah file dengan nama ajax.js, lalu simpan pada folder xampp/htdocs/crud_ajax/js/. Berikut kodenya :
$(document).ready(function(){
// Sembunyikan loading simpan, loading ubah, loading hapus, pesan error, pesan sukes, dan tombol reset
$("#loading-simpan, #loading-ubah, #loading-hapus, #pesan-error, #pesan-sukses, #btn-reset").hide();
$("#btn-tambah").click(function(){ // Ketika tombol tambah diklik
$("#btn-ubah, #checkbox_foto").hide(); // Sembunyikan tombol ubah dan checkbox foto
$("#btn-simpan").show(); // Munculkan tombol simpan
// Set judul modal dialog menjadi Form Simpan Data
$("#modal-title").html("Form Simpan data");
});
$("#btn-simpan").click(function(){ // Ketika tombol simpan di klik
// Buat variabel data untuk menampung data hasil input dari form
var data = new FormData();
data.append('nis', $("#nis").val()); // Ambil data nis
data.append('nama', $("#nama").val()); // Ambil data nama
data.append('jenis_kelamin', $("#jenis_kelamin").val()); // Ambil data jenis kelamin
data.append('telp', $("#telp").val()); // Ambil data telepon
data.append('alamat', $("#alamat").val()); // Ambil data alamat
// Ambil data foto yang dipilih pada form, dan masukkan ke variabel data
data.append('foto', $("#foto")[0].files[0]);
$("#loading-simpan").show(); // Munculkan loading simpan
$.ajax({
url: 'proses_simpan.php', // File tujuan
type: 'POST', // Tentukan type nya POST atau GET
data: data, // Set data yang akan dikirim
processData: false,
contentType: false,
dataType: "json",
beforeSend: function(e) {
if(e && e.overrideMimeType) {
e.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(response){ // Ketika proses pengiriman berhasil
$("#loading-simpan").hide(); // Sembunyikan loading simpan
if(response.status == "sukses"){ // Jika Statusnya = sukses
// Ganti isi dari div view dengan view yang diambil dari proses_simpan.php
$("#view").html(response.html);
/*
* Ambil pesan suksesnya dan set ke div pesan-sukses
* Lalu munculkan div pesan-sukes nya
* Setelah 10 detik, sembunyikan kembali pesan suksesnya
*/
$("#pesan-sukses").html(response.pesan).fadeIn().delay(10000).fadeOut();
$("#form input, #form select").val(""); // Untuk meng-clear isian pada form
$("#form-modal").modal('hide'); // Close / Tutup Modal Dialog
}else{ // Jika statusnya = gagal
/*
* Ambil pesan errornya dan set ke div pesan-error
* Lalu munculkan div pesan-error nya
*/
$("#pesan-error").html(response.pesan).show();
}
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
});
$("#btn-ubah").click(function(){ // Ketika tombol ubah di klik
// Buat variabel data untuk menampung data hasil input dari form
var data = new FormData();
data.append('nis', $("#nis").val()); // Ambil data nis
data.append('nama', $("#nama").val()); // Ambil data nama
data.append('jenis_kelamin', $("#jenis_kelamin").val()); // Ambil data jenis kelamin
data.append('telp', $("#telp").val()); // Ambil data telepon
data.append('alamat', $("#alamat").val()); // Ambil data alamat
// Cek apakah checkbox ubah foto di ceklis
if($("#ubah_foto").is(":checked")) // Jika di ceklis
data.append('ubah_foto', $("#ubah_foto").val()); // Ambil data ubah foto (dari checkbox foto)
// Ambil data foto yang dipilih pada form, dan masukkan ke variabel data
data.append('foto', $("#foto")[0].files[0]);
$("#loading-ubah").show(); // Munculkan loading ubah
$.ajax({
url: 'proses_ubah.php', // File tujuan
type: 'POST', // Tentukan type nya POST atau GET
data: data, // Set data yang akan dikirim
processData: false,
contentType: false,
dataType: "json",
beforeSend: function(e) {
if(e && e.overrideMimeType) {
e.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(response){ // Ketika proses pengiriman berhasil
$("#loading-ubah").hide(); // Sembunyikan loading ubah
if(response.status == "sukses"){ // Jika Statusnya = sukses
// Ganti isi dari div view dengan view yang diambil dari proses_ubah.php
$("#view").html(response.html);
/*
* Ambil pesan suksesnya dan set ke div pesan-sukses
* Lalu munculkan div pesan-sukes nya
* Setelah 10 detik, sembunyikan kembali pesan suksesnya
*/
$("#pesan-sukses").html(response.pesan).fadeIn().delay(10000).fadeOut();
$("#form input, #form select").val(""); // Untuk meng-clear isian pada form
$("#form-modal").modal('hide'); // Close / Tutup Modal Dialog
}else{ // Jika statusnya = gagal
/*
* Ambil pesan errornya dan set ke div pesan-error
* Lalu munculkan div pesan-error nya
*/
$("#pesan-error").html(response.pesan).show();
}
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // Munculkan alert
}
});
});
$("#btn-hapus").click(function(){ // Ketika tombol hapus di klik
// Buat variabel data untuk menampung data hasil input dari form
var data = new FormData();
data.append('nis', $("#data-nis").val()); // Ambil data nis
$("#loading-hapus").show(); // Munculkan loading hapus
$.ajax({
url: 'proses_hapus.php', // File tujuan
type: 'POST', // Tentukan type nya POST atau GET
data: data, // Set data yang akan dikirim
processData: false,
contentType: false,
dataType: "json",
beforeSend: function(e) {
if(e && e.overrideMimeType) {
e.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(response){ // Ketika proses pengiriman berhasil
$("#loading-hapus").hide(); // Sembunyikan loading hapus
// Ganti isi dari div view dengan view yang diambil dari proses_hapus.php
$("#view").html(response.html);
/*
* Ambil pesan suksesnya dan set ke div pesan-sukses
* Lalu munculkan div pesan-sukes nya
* Setelah 10 detik, sembunyikan kembali pesan suksesnya
*/
$("#pesan-sukses").html(response.pesan).fadeIn().delay(10000).fadeOut();
$("#delete-modal").modal('hide'); // Close / Tutup Modal Dialog
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert("ERROR : "+xhr.responseText); // Munculkan alert
}
});
});
$('#form-modal').on('hidden.bs.modal', function (e){ // Ketika Modal Dialog di Close / tertutup
$("#btn-reset").click(); // Klik tombol reset agar form kembali bersih
$("#nis").removeAttr('readonly'); // Enable textbox nis
});
});
Akan saya jelaskan sedikit mengenai ajax, karena sebagian besar sudah saya jelaskan lewat kode diatas dengan komentar.
url: diisi dengan url file yang akan ditujutype: diisi dengan method yang ingin digunakan. isi dengan GET atau POSTdata: data yang akan dikirim ke file yang ditujusuccess : function(){}: ketika proses pengiriman selesai, lakukan aksierror : function(){}: ketika terjadi error, lakukan aksi
untuk penjelasan lebih lengkap mengenai atiribut yang ada di JQUERY AJAX, klik disini.
STEP 6 – Proses Simpan
Kita akan coba membuat file php untuk melakukan proses simpan ke databasenya. Buat sebuah file dengan nama proses_simpan.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :
<?php
// Include / load file koneksi.php
include "koneksi.php";
// Ambil data yang dikirim dari form
$nis = $_POST['nis']; // Ambil data nis dan masukkan ke variabel nis
$nama = $_POST['nama']; // Ambil data nama dan masukkan ke variabel nama
$jenis_kelamin = $_POST['jenis_kelamin']; // Ambil data jenis_kelamin dan masukkan ke variabel jenis_kelamin
$telp = $_POST['telp']; // Ambil data telp dan masukkan ke variabel telp
$alamat = $_POST['alamat']; // Ambil data alamat dan masukkan ke variabel alamat
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "foto/".$fotobaru;
// Proses upload
// Cek apakah gambar berhasil diupload atau tidak
if(move_uploaded_file($tmp, $path)){ // Jika proses upload sukses
// Proses simpan ke Database
$sql = $pdo->prepare("INSERT INTO siswa VALUES(:nis,:nama,:jk,:telp,:alamat,:foto)");
$sql->bindParam(':nis', $nis);
$sql->bindParam(':nama', $nama);
$sql->bindParam(':jk', $jenis_kelamin);
$sql->bindParam(':telp', $telp);
$sql->bindParam(':alamat', $alamat);
$sql->bindParam(':foto', $fotobaru);
$sql->execute(); // Eksekusi query insert
// Load ulang view.php agar data yang baru bisa muncul di tabel pada view.php
ob_start();
include "view.php";
$html = ob_get_contents();
ob_end_clean();
// Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
$response = array(
'status'=>'sukses', // Set status
'pesan'=>'Data berhasil disimpan', // Set pesan
'html'=>$html // Set html
);
}else{ // Jika proses upload gagal
$response = array(
'status'=>'gagal', // Set status
'pesan'=>'Gambar gagal untuk diupload', // Set pesan
);
}
echo json_encode($response); // konversi variabel response menjadi JSON
?>
Berikut beberapa penjelasan dari kode diatas.
$nis = $_POST[‘nis‘];
$nama = $_POST[‘nama‘];
$jenis_kelamin = $_POST[‘jenis_kelamin‘];
$telp = $_POST[‘telp‘];
$alamat = $_POST[‘alamat‘];
$foto = $_FILES[‘foto‘][‘name’];
$tmp = $_FILES[‘foto‘][‘tmp_name’];
Pada kode tersebut, ada kode yang saya beri warna merah. Itu harus sama dengan kode (pada file ajax.js) yang saya beri warna hijau berikut ini:
data.append(‘nis‘, $(“#nis”).val());
data.append(‘nama‘, $(“#nama”).val());ta nama
data.append(‘jenis_kelamin‘, $(“#jenis_kelamin”).val());
data.append(‘telp‘, $(“#telp”).val());
data.append(‘alamat‘, $(“#alamat”).val());
data.append(‘foto‘, $(“#foto”)[0].files[0]);
$_FILES[‘foto’][‘name’]
Kode ini berfungsi untuk mengambil nama file yang diupload.
$_FILES[‘foto’][‘tmp_name’]
Kode ini berfungsi untuk mengambil url/path folder tempat penyimpanan sementara file yang diupload, sebelum dipindahkan ke folder foto.
move_uploaded_file($tmp_file, $path)
kode inilah yang berfungsi untuk memindahkan foto / file yang telah diupload dari folder tmp ke dalam folder di website kita (pada catatan ini kita upload gambarnya ke folder foto).
STEP 7 – Proses Ubah
Selanjutnya kita akan membuat sebuah file untuk melakukan proses ubah ke database. Buat sebuah file baru dengan nama prose_ubah.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :
<?php
// Include / load file koneksi.php
include "koneksi.php";
// Ambil data yang dikirim dari form
$nis = $_POST['nis']; // Ambil data nis dan masukkan ke variabel nis
$nama = $_POST['nama']; // Ambil data nama dan masukkan ke variabel nama
$jenis_kelamin = $_POST['jenis_kelamin']; // Ambil data jenis_kelamin dan masukkan ke variabel jenis_kelamin
$telp = $_POST['telp']; // Ambil data telp dan masukkan ke variabel telp
$alamat = $_POST['alamat']; // Ambil data alamat dan masukkan ke variabel alamat
// Cek apakah user ingin mengubah fotonya atau tidak
if(isset($_POST['ubah_foto'])){ // Jika user menceklis checkbox yang ada di form ubah, lakukan :
// Ambil data foto yang dipilih dari form
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "foto/".$fotobaru;
// Proses upload
// Cek apakah gambar berhasil diupload atau tidak
if(move_uploaded_file($tmp, $path)){ // Jika proses upload sukses
// Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
$sqlcek = $pdo->prepare("SELECT * FROM siswa WHERE nis=:nis");
$sqlcek->bindParam(':nis', $nis);
$sqlcek->execute(); // Eksekusi / Jalankan query
$data = $sqlcek->fetch(); // Ambil data dari hasil eksekusi $sqlcek
// Cek apakah file foto sebelumnya ada di folder foto
if(is_file("foto/".$data['foto'])) // Jika foto ada
unlink("foto/".$data['foto']); // Hapus file foto sebelumnya yang ada di folder foto
// Proses ubah ke Database
$sql = $pdo->prepare("UPDATE siswa SET nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat, foto=:foto WHERE nis=:nis");
$sql->bindParam(':nama', $nama);
$sql->bindParam(':jk', $jenis_kelamin);
$sql->bindParam(':telp', $telp);
$sql->bindParam(':alamat', $alamat);
$sql->bindParam(':foto', $fotobaru);
$sql->bindParam(':nis', $nis);
$sql->execute(); // Eksekusi query insert
// Load ulang view.php agar data diubah tadi bisa terubah di tabel pada view.php
ob_start();
include "view.php";
$html = ob_get_contents();
ob_end_clean();
// Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
$response = array(
'status'=>'sukses', // Set status
'pesan'=>'Data berhasil diubah', // Set pesan
'html'=>$html // Set html
);
}else{ // Jika proses upload gagal
$response = array(
'status'=>'gagal', // Set status
'pesan'=>'Gambar gagal untuk diupload', // Set pesan
);
}
}else{ // Jika user tidak menceklis checkbox yang ada di form, lakukan :
// Proses ubah ke Database
$sql = $pdo->prepare("UPDATE siswa SET nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat WHERE nis=:nis");
$sql->bindParam(':nama', $nama);
$sql->bindParam(':jk', $jenis_kelamin);
$sql->bindParam(':telp', $telp);
$sql->bindParam(':alamat', $alamat);
$sql->bindParam(':nis', $nis);
$sql->execute(); // Eksekusi query insert
// Load ulang view.php agar data diubah tadi bisa terubah di tabel pada view.php
ob_start();
include "view.php";
$html = ob_get_contents();
ob_end_clean();
// Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
$response = array(
'status'=>'sukses', // Set status
'pesan'=>'Data berhasil diubah', // Set pesan
'html'=>$html // Set html
);
}
echo json_encode($response); // konversi variabel response menjadi JSON
?>
Saya akan coba jelaskan sedikit mengenai alur ubah data nya. Pertama, ketika user mengklik link Edit pada salah satu data siswa, maka kode javascript yang ada di file view.php yaitu function edit($no) akan dipanggil. Fungsi tersebut berguna untuk menset textbox yang ada di form ubah mulai dari nis, nama, jenis kelamin, telepon, dan alamat sesuai dengan data yang ingin dia ubah. Kedua, pada proses ubah ini kita membuat sebuah checkbox pada form ubah yang akan digunakan agar sistem bisa mengetahui apakah user ingin mengubah fotonya juga atau tidak. Maka dari itu pada file proses_ubah.php dilakukan validasi untuk mengecek apakah user menceklis checkbox tersebut atau tidak. Jika user menceklis checkbox tersebut, maka sistem akan mengupload foto baru sesuai yang dipilih oleh user kemudian akan menghapus foto lama yang ada pada folder foto. Jika user tidak menceklis, maka sistem hanya akan mengubah data selain foto.
STEP 8 – Proses Hapus
Terakhir, kita akan membuat proses hapusnya. Buat sebuah file baru dengan nama proses_hapus.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data NIS
$nis = $_POST['nis'];
$sqlcek = $pdo->prepare("SELECT * FROM siswa WHERE nis=:nis");
$sqlcek->bindParam(':nis', $nis);
$sqlcek->execute(); // Eksekusi / Jalankan query
$data = $sqlcek->fetch(); // Ambil data dari hasil eksekusi $sqlcek
// Cek apakah file fotonya ada di folder foto
if(is_file("foto/".$data['foto'])) // Jika foto ada
unlink("foto/".$data['foto']); // Hapus file fotonya yang ada di folder foto
// Query untuk menghapus data siswa berdasarkan NIS yang dikirim
$sql = $pdo->prepare("DELETE FROM siswa WHERE nis=:nis");
$sql->bindParam(':nis', $nis);
$sql->execute(); // Eksekusi/Jalankan query
// Load ulang view.php agar data diubah tadi bisa terubah di tabel pada view.php
ob_start();
include "view.php";
$html = ob_get_contents();
ob_end_clean();
// Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
$response = array(
'pesan'=>'Data berhasil dihapus', // Set pesan
'html'=>$html // Set html
);
echo json_encode($response); // konversi variabel response menjadi JSON
?>
Source Code
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi PDO : Link download yang sesuai tutorial ini yakni menggunakan fungsi PDO untuk query ke databasenya
– Download versi MySQLi : Link download untuk Anda yang ingin source code versi MySQLi dari tutorial ini
Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ing ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Terimakasih.
Sumber & Referensi
Dokumentasi Bootstrap : http://getbootstrap.com/getting-started/
http://ekajogja.com/mengenal-javascript-ajax-jquery-angularjs-dan-node-js/
http://dul.web.id/bootstrap/3/tuts-tips/belajar-bootstrap-untuk-pemula.php
http://kursuswebprogramming.com/beda-pdo-dan-mysqli-di-php/
Tutorial membuat CRUD dan Upload Gambar dengan PHP AJAX dan Bootstrap, Step by Step membuat CRUD Plus Upload Gambar dengan PHP AJAX dan Bootstrap, Cara membuat CRUD Plus Upload Gambar dengan PHP JQUERY AJAX dan Bootstrap, Source Code CRUD Plus Upload Gambar dengan PHP JQUERY AJAX dan Bootstrap
POST YOUR COMMENTS