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.

 

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

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.

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

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

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

Seperti 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

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

Dari kode diatas akan menghasil kan data seperti dibawah

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

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 :

Sampai jumpa pada postingan saya selanjutnya..

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

      1. Iya mas. Sy coba semua mantap jiwa kecuali edit/ update data.
        Setelah ditekan edit, memang berhasil memanggil data ke dalam form.
        Tapi setelah disimpan jadinya insert, sepertinya $id nya jadi kosong.
        Mungkin di sini:
        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();
        }

        1. berarti di ajax .edit_data kurang
          document.getElementById(“id”).value = response.id;
          jadinya idnya ngga keisi
          atau bisa juga id-nya udah keisi tapi ngga dikirim pas send ajax-nya

  1. pingin download agar codingnya tidak salah tapi link hilang semua.

    sudah coba ikutin semua alurnya tapi kok untuk updatenya belum bisa
    saat coba edit malah insert new mhs.
    – id mhs sudah tampil diform. *type saya ubah ke text.

    1. apakah pas klik update idnya sudah terkirim atau ada perubahan nama?
      atau mungkin file form_action.php belum diubah? karena itu ada perubahan dari part 2 menjadi seperti part 3

      di form_action.php ada script dibawah yg mana jika $id kosong maka akan insert dan jika idnya tidak kosong maka akan menjalankan query update
      if ($id == “”) {
      //insert data

      } else {
      //update data

      }

  2. kalo udah nyambung logika relasi pada form dan tag lainnya… segala nya jauh lebih mudah.
    bisa berkreasi sendiri. tp kalo ga dipahami dan hanya “copy-paste” ya pengetahuan ga bakal berkembang… kek kodok kekenyangan… ga pindah pindah temmpat… ehehejejejkekekek

    1. memang yg paling penting dan utama pahami dulu alur dan logikanya..
      copas ga masalah asalkan tahu apa yg dicopas kalo gatau nantinya malah banyak koding sampah yg ga kepake tapi ga dihapus,
      dan yg paling penting ga semua yg kita butuhin saat bikin aplikasi itu 100% sama seperti tutorial di google/youtube pasti ada modifikasi

  3. Alhamdulillah setelah 4 hari utak-atik… berasil menambahkan “input-file” dengan form editable :
    – edit judul
    -edit penulis
    -edit kategori
    -edit deskripsi
    Ketika upload file, judul otomatis .. namun nantinya bisa diedit,dengan menambah kan input “hidden” pada tag berkaitan
    Puas rasanya bisa kedapet caranya.
    Terima kasih dewan…. segala do’a yang baik untuk mu dan keluarga mu
    NB : tambahkan attach gambar untuk commenting donk

Leave a Reply

Your email address will not be published. Required fields are marked *

20 − three =