CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 3 Update Data

CRUD (Create, Read, Update, Delete) dengan Ajax tanpa Loading PHP  part 3 Update Data – Hai ketemu lagi dengan saya, kemarin saya telah memposting tentang cara memasukkan data ke dalam loading tanpa harus refresh/loading halaman. Dan pada kesempatan kali ini saya akan memposting tentang cara mengedit dan update data dan tentunya juga tanpa pindah halaman dan tanpa resfresh/loading. Dalam cara ini nanti kita akan membahas juga tentang JSON.

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 – Desember 1999.

Cara Membuat Update Data Tanpa Loading dengan Ajax pada PHP

Kita disini tidak perlu membuat form lagi karena kita akan menggunakan form sebelumnya yang digunakan untuk tambah data. Hanya tambah 1 baris saja untuk menambahkan id value. Langsung saja saya berikan tutorialnya :

1. Tambahkah pada tag <form> dengan baris dibawah. Bisa dimana saja yang penting ada dalam antara tag <form>…</form>. Baris ini berfungsi untuk nantinya menyimpan id dari baris data yang ingin kita ubah.

<input type="hidden" name="id" id="id">

 

2. Kemudian pada file data.php yang pernah kita buat pada tutorial Part 1, tambahkan baris ini pada tag <script>…</script>

function reset(){
    document.getElementById("err_nama_mahasiswa").innerHTML = "";
    document.getElementById("err_alamat").innerHTML = "";
    document.getElementById("err_jurusan").innerHTML = "";
    document.getElementById("err_tanggal_masuk").innerHTML = "";
    document.getElementById("err_jenkel").innerHTML = "";
}

$(document).on('click', '.edit_data', function(){
    $('html, body').animate({ scrollTop: 0 }, 'slow');
    var id = $(this).attr('id');
    $.ajax({
        type: 'POST',
        url: "get_data.php",
        data: {id:id},
        dataType:'json',
        success: function(response) {
            reset();
            $('html, body').animate({ scrollTop: 30 }, 'slow');
            document.getElementById("id").value = response.id;
            document.getElementById("nama_mahasiswa").value = response.nama_mahasiswa;
            document.getElementById("tanggal_masuk").value = response.tgl_masuk;
            document.getElementById("alamat").value = response.alamat;
            document.getElementById("jurusan").value = response.jurusan;
            if (response.jenis_kelamin=="Laki-laki") {
                document.getElementById("jenkel1").checked = true;
            } else {
                document.getElementById("jenkel2").checked = true;
            }
        }, error: function(response){
           console.log(response.responseText);
        }
    });
});

Penjelasan :

Pada baris dibawah berfungsi untuk mereset kembali atau mengosongkan pesan mandatory atau harus diisi jika user menghapus semua isinya dan klik edit. Karena kita sudah mengeset bahwa semua field mandatory atau harus diisi baik saat tambah baru maupun saat edit data.

function reset(){
    document.getElementById("err_nama_mahasiswa").innerHTML = "";
    document.getElementById("err_alamat").innerHTML = "";
    document.getElementById("err_jurusan").innerHTML = "";
    document.getElementById("err_tanggal_masuk").innerHTML = "";
    document.getElementById("err_jenkel").innerHTML = "";
}

Untuk mendapatkan id dari baris yang ingin kita edit, kita mengambilnya dari id yang telah disimpan pada id tombol, fungsi javascripnya adalah sebagai berikut

var id = $(this).attr('id');

Cara diatas bisa dilakukan karena sebelumnya kita membuat tombol editnya di dalam tabel pada data.php menjadi seperti ini

<button id="<?php echo $id; ?>" class="btn btn-success btn-sm edit_data"> <i class="fa fa-edit"></i> Edit </button>

button id pasti berbeda setiap barisnya karena itu merupakan id dari mahasiswa tersebut.

$.ajax({
    type: 'POST',
    url: "get_data.php",
    data: {id:id},
    dataType:'json',
    success: function(response) {
        reset();
        document.getElementById("id").value = response.id;
        document.getElementById("nama_mahasiswa").value = response.nama_mahasiswa;
        document.getElementById("tanggal_masuk").value = response.tgl_masuk;
        document.getElementById("alamat").value = response.alamat;
        document.getElementById("jurusan").value = response.jurusan;
        if (response.jenis_kelamin=="Laki-laki") {
            document.getElementById("jenkel1").checked = true;
        } else {
            document.getElementById("jenkel2").checked = true;
        }
        
    }
});

Seperti https://dewankomputer.com/2019/01/25/crud-create-read-update-delete-dengan-ajax-tanpa-loading-php-part-3-update-data/yang sobat bisa dilihat pada script Ajax, untuk type kita menggunakan POST pastinya dan url adalah get_data.php dengan kata lain kita harus membuat file get_data.php yang berfungsi untuk mengambil seluruh data mahasiswa berdasarkan id yang kita dapatkan pada button id.  dataType kita set json karena nanti hasil dari get_data.php adalah berformat json kemudia nhasilnya kita ambil pada response code bagian

success: function(response) {

Setelah mendapatkan datanya baru kita isikan nilai pada setial field dan radio button nya.

 

3. Buat file get_data.php dan isikan dengan script dibawah ini

<?php
session_start();
include 'koneksi.php';
include 'csrf.php';

$id = $_POST['id'];
$query = "SELECT * FROM tbl_mahasiswa WHERE id=? ORDER BY id DESC";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param('i', $id);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
    $h['id'] = $row["id"];
    $h['nama_mahasiswa'] = $row["nama_mahasiswa"];
    $h['alamat'] = $row["alamat"];
    $h['jurusan'] = $row["jurusan"];
    $h['jenis_kelamin'] = $row["jenis_kelamin"];
    $h['tgl_masuk'] = $row["tgl_masuk"];
}
echo json_encode($h);

$db1->close();
?>

Dari kode diatas akan menghasil kan data seperti dibawah

{"id":5,"nama_mahasiswa":"Andre","alamat":"Purwokerto","jurusan":"Sistem Infomasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-01"}

Dan data inilah yang nantinya akan ditangkap oleh Ajax dan dipisah-pisah untuk kemudian dimasukkan ke dalam field-fieldnya.

Pada baris include ‘csrf.php’ merupakan script untuk mengamankan dalam pertukaran data saat menggunakan Ajax. Jika tidak ada header maka siapapun dan dimanapun baik menggunakan local ataupun menggunakan server online dapat menginsert data melalui url pada Ajax. File csrf.php ini kita include-kan ke setiap file yang merupakan file action yang menggunakan Ajax dalam pertukaran datanya. Jika sobat mengalami ERROR pada baris ini berarti sobat perlu kembali ke part 1.

 

4. Terakhir kita ubah file form_action.php menjadi seperti dibawah

<?php
session_start();
include 'koneksi.php';
include 'csrf.php';

$id = stripslashes(strip_tags(htmlspecialchars($_POST['id'] ,ENT_QUOTES)));
$nama_mahasiswa = stripslashes(strip_tags(htmlspecialchars($_POST['nama_mahasiswa'] ,ENT_QUOTES)));
$jenkel = stripslashes(strip_tags(htmlspecialchars($_POST['jenkel'] ,ENT_QUOTES)));
$alamat = stripslashes(strip_tags(htmlspecialchars($_POST['alamat'] ,ENT_QUOTES)));
$jurusan = stripslashes(strip_tags(htmlspecialchars($_POST['jurusan'] ,ENT_QUOTES)));
$tanggal_masuk = stripslashes(strip_tags(htmlspecialchars($_POST['tanggal_masuk'] ,ENT_QUOTES)));

if ($id == "") {
	$query = "INSERT into tbl_mahasiswa (nama_mahasiswa, alamat, jurusan, jenis_kelamin, tgl_masuk) VALUES (?, ?, ?, ?, ?)";
	$dewan1 = $db1->prepare($query);
	$dewan1->bind_param("sssss", $nama_mahasiswa, $alamat, $jurusan, $jenkel, $tanggal_masuk);
	$dewan1->execute();
} else {
	$query = "UPDATE tbl_mahasiswa SET nama_mahasiswa=?, alamat=?, jurusan=?, jenis_kelamin=?, tgl_masuk=? WHERE id=?";
	$dewan1 = $db1->prepare($query);
	$dewan1->bind_param("sssssi", $nama_mahasiswa, $alamat, $jurusan, $jenkel, $tanggal_masuk, $id);
	$dewan1->execute();
}

echo json_encode(['success' => 'Sukses']);

$db1->close();
?>

Script diatas terlihat kita membuat fungsi pengecekan terlebih dahulu dengan if else. Jika idnya kosong berarti itu merupakan tambah data baru dan jika id tidak kosong berarti itu adalah update data. Dengan cara itu kita tidak perlu membuat file action banyak-banyak toh isinya hanya sedikit baris code.

Pada baris include ‘csrf.php’ merupakan script untuk mengamankan dalam pertukaran data saat menggunakan Ajax. Jika tidak ada header maka siapapun dan dimanapun baik menggunakan local ataupun menggunakan server online dapat menginsert data melalui url pada Ajax. File csrf.php ini kita include-kan ke setiap file yang merupakan file action yang menggunakan Ajax dalam pertukaran datanya. Jika sobat mengalami ERROR pada baris ini berarti sobat perlu kembali ke part 1.

 

5. Jika sobat klik tombo edit dalam tabel maka field-fieldnya akan secara otomatis terisi seperti gambar dibawah

 

 

Sekian postingan saya tentang CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 3 Update Data. Pada pada postingan selanjutnya adalah hapus data. Jika ada salah kata saya mohon maaf, jika masih ada yang error atau ada yang kurang bisa disampaikan pada kolom komentar dibawah. Untuk menambahkan file upload dan menyimpannya menggunakan Ajax sobat bisa kunjungi postingan saya yang lainnya karena itu tidak saya bahas pada CRUD ini.

Baca juga :

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 1 Menampilkan Data Ajax

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 2 Insert Data dan Validasinya

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 3 Update Data

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 4 Hapus Data

Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP

Membuat CRUD Expert, Upload & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Demo