-

Membuat CRUD menggunakan Ajax PHP – Input Data


crud ajax php mysqli

Membuat crud menggunakan ajax php dalam operasi input data. Artikel ini dilanjutkan dari materi sebelumnya yang membahas bagaimana cara menampilkan data menggunakan ajax dan php.

Ajax atau ajax jquery merupakan fitur untuk membuat aplikasi/website tanpa reload. Ajax sendiri dikenal sangat ringan dan sangat bagus jika digunakan proses development aplikasi.

Membuat CRUD menggunakan Ajax PHP – Input Data

Pada artikel part ini kita membahas bagaimana membuat CRUD dengan ajax jquery pada operasi input data kedalam database mysql. Untuk sobat yang masih belum mengerti tahapan saya rekomendasikan untuk membaca part sebelumnya membuat crud denan ajax php – menampilkan data.

Untuk membuat inpu data menggunakan ajax ada tahapannya tersendiri yang bisa dilakukan. Mulai dari persipaan form dan juga proses input data dalam database. Ikuti langkah-langkah berikut untuk lebih jelasnya dalam input data menggunakan ajax jquery.

Persiapan Form Inputan

Langkah awal yaitu mempersiapkan form inputan yang menampung data apa saja yang diperlukan. Misalnya disini Kita memerlukan identitas user berupa nama, kelamin, kontak dan alamat. Untuk membuat form inputan bisa dilihat dari script dibawah ini :

Jika dilihat pada script diatas ada yang tidak biasa, dimana pada biasanya dalam membuat form input data menggunakan php ada aksi dan model pengiriman data yang digunakan. Namun pada form yang kita buat ini hanya ditandai dengan id yaitu form_input (<form id="form_input">).

Nah id inilah yang dikirim dan akan ditampung menggunakan javascript untuk membuat input data. Juga dapat dilihat pada setiap item data di tandai oleh id misalnya : <input type="text" class="form-control" id="nama" name="nama" placeholder="Nama"> ini maksudnya adalah untuk menampung data dari nama itu sendiri. Begitu juga dengan lainnya.

Untuk script lebih lengkap dalam membuat Saya lampirkan pada script berikut ini :

Tampilannya dari hasil script diatas dapat dilihat pada gambar berikut ini :

input data menggunakan ajax jquery
input data menggunakan ajax jquery

Proses Input Data Dengan Ajax Jquery

Tahap kedua yaitu membuat proses inputan dengan Ajax. Berikut script ajax untuk menangkap data yang akan di proses. Perhatikan script berikut ini :

Berikut penjelasan singkat yang bisa membantu sobat malasngoding dalam memahi codingan :

  • $("#tombol_simpan").click(function () { script ini dijalankan ketika tombol simpan di klik. #tombol_simpan adalah id dari tombol simpan yang kita buat pada form inputan diatas.
  • $('#form_input').validate({ script ini digunakan untuk menangkap data yang ada dalam form dan di cek validasinya.
  • rules: { ini adalah script untuk kita buat aturan dimana jika salah satu data kosong maka tidak bisa di proses. Artinya data akan di proses jika sudah lengkap
  • submitHandler: function (form) { ini adalah script untuk menghandle inputan data yang akan disimpan dalam database.

Adapun penjelasan script untuk proses ajax jquery dalam menyimpan data adalah sebagai berikut :

Tipe yang digunakan untuk proses inputan menggunakan POST, url-nya simpan.php sedangkan data yang disimpan sesuai dengan data pada form. nah jika proses penyimpanan berhasil maka akan dijalankan fungsi tampil data.

Untuk script menyimpan data menggunakan php dalam hal ini file simpan.php adalah sebagai berikut :

Langkah pertama yaitu memasukkan (include) koneksi, selanjutnya menampung semua data yang ada pada form, dan terakhir yaitu perintah sql untuk input data.

script lengkapnya dapat dilihat ada kolom berikut :

Membuat CRUD menggunakan Ajax PHP
Membuat CRUD menggunakan Ajax PHP
input data dengan ajax php mysqli
input data dengan ajax php mysqli

Itulah gambar hasil dari input data menggunakan ajax jquery dan php. Supaya lebih muda di pahami cobalah membaca dari artikel part sebelumnya.


Muzanni

Algorithms Learner, future lecturer and Happy to sharing about knowledge

Tutorial Menarik Lainnya

crud dengan ajax php mysqli
menampilkan data dengan aja php
Membuat Select Option Dinamis Menggunakan Ajax
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery

Diskusi

Belum Ada Diskusi
Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD