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 2 Insert Data dan Validasinya – Hai ini merupakan kelanjutan postingan saya kemarin tentang CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 1 Menampilkan Data Ajax . Dan hari ini saya akan memposting tentang cara menyimpan data ke dalam database MySQL menggunakan ajax tanpa reload/loading halaman menggunakan PHP. Berbeda dengan CRUD yang pertama kita harus membuat file tambah_data.php dan tambah_data_action.php, setelah klik simpan pada file tambah_data.php maka akan menuju ke tambah_data_action.php terlebih dahulu barulah nanti menyimpan data dan setelah berhasil akan meredirect kembali ke halaman utama. Tentu itu sangat tidak enak jika digunakan oleh user. Sehingga sekarang banyak aplikasi yang menggunakan Ajax untuk menyimpan datanya sehingga tidak perlu redirect ke halaman lain dan bahkan tidak perlu reload halaman. Secara otomatis data pada table akan menambah tanpa reload.

Cara ini banyak disukai oleh developer khususnya developer PHP karena dengan cara ini dapat memberikan kenyamanan user dalam menggunakan aplikasi yang sobat buat karena terkesan ringan dan cepat. Untuk membuatnya juga tidak terlalu susah. Namun berbeda dengan cara yang pertama, dalam penggunaan ajax ini perlu juga membuat validasinya jika ada data yang wajib diisi. Tidak seperti cara menggunakan HTML biasa kita hanya perlu menambahkan “required”  dan pada javascript ini itu tidak berlaku dan saya lebih suka untuk membuat validasinya secara manual karena dengan itu kita bisa membuatnya sesuka hati kita. Validasi untuk field input text, select dan radio button nanti akan saya bahas juga dalam postingan ini.

Cara Menyimpan Data Menggunakan Ajax Dan Membuat Validasi

Validasi yang dimaksud disini adalah peringatan bahwa field ini wajib diisi. Sebenarnya untuk form tambah data sudah dibuat pada part 1 namun belum ada actionnya jadi dika sobat klik simpan maka tidak terjadi apa-apa. Selain itu juga belum ada validasinya. Jadi kita perlu menambahkan validasinya disini. Kita ubah tag <form> menjadi seperti dibawah

Kita tambahkan baris ini

baris ini berfungsi untuk menampilkan pesan ketika data belum diisi.

Kemudian pada tag <script> kita tambahkan kode ajax sehingga akan menjadi seperti dibawah ini.

Penjelasan :

Pada baris dibawah ini berarti #simpan adalah maksudnya jika tombol dengan id=”simpan” diklik maka akan memanggil perintah selanjutnya

Untuk mengirim datanya kita perlu menambahkan baris dibawah yang artinya kita mengambil semua nilai yang ada di dalam inputan pada form yang mempunyai class=”form-data”

Untuk mengirim attachment/input file nanti caranya agak sedikit berbeda dan akan saya bahas pada postingan saya yang lainnya karena pada contoh kali ini saya tidak menyertakan upload file.

Pada baris dibawah artinya kita mengambil isi yang telah diinputkan user pada field yang mempunyai id=”nama_mahasiswa”

Pada baris dibawah merupakan script untuk menampilkan peringatan eror, ini adalah script yang telah kita tambahkan pada tag <form> yang berjenis paragraf dan mempunyai id=’err_nama_mahasiswa’

Sedangkan https://dewankomputer.com/2019/01/24/crud-create-read-update-delete-dengan-ajax-tanpa-loading-php-part-2-insert-data-dan-validasinya/script dibawah merupakan pengecekan secara keseluruhan, jika sudah terisi semua dan radio button sudah tercentang salah satu  baru lah dijalankan fungsi ajaxnya

Berikut ini adalah fungsi ajaxnya

sesuai yang tertulis diatas, kita menggunakan method POST karena tentunya lebih aman dibandingkan GET. untuk urlnya bernama form_action.php artinya kita perlu membuat file form_action.php untuk menjalankan aksinya. Jika sukses ada 2 baris yang perlu ditambahkan yaitu

Kode untuk merefresh tabel. Refresh disini bukanlah loading halaman web secara keseluruhan melainkan hanya tabelnya saja dan menggunakan ajax jadi tidak akan terasa oleh user dan tentunya lebih cepat dibandingkan dengan loading keseluruhan halaman. Kodenya adalah seperti dibawah

Kedua adalah mereset form isian tadi menjadi kosong, kodenya adalah seperti dibawah

 

Selanjutnya adalah membuat file form_action.php yang berfungsi untuk menyimpan ke dalam database. Kemudian isikan dengan script dibawah ini

Kodenya sama seperti file action pada CRUD yang pertama jadi saya tidak perlu menjelaskannya lagi karena saya anggap sobat sudah latihan juga dengan postingan saya yang pertama.

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.

 

Jika sudah selesai maka jalankan http://localhost/dewan-crud-ajax/

 

Jika sudah diisi semua dan klik simpan maka akan langsung tersimpan tanpa loading. Jika tidak percaya sobat bisa lihat pada demo atau bisa download project. Masih ada 2 lagi yaitu Edit data dan hapus data yang belum berjalan. Namun itu akan saya bahas besok pada postingan saya selanjutnya.

Sekian postingan saya tentang CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 2 Insert Data dan Validasinya. Jika ada salah atau ada yang kurang saya mohon maaf dan apabila masih ada eror 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