Input Data Ke Database Tanpa Reload Dengan Ajax JQuery


Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery – Jika sebelumnya kita telah belajar membuat CRUD dengan PHP, seperti menginput data ke database, mengedit data, menampilkan data dari database, serta menghapus data dari database dengan PHP. maka pada tutorial kali ini kita akan belajar cara membuat input data ke database tanpa reload dengan ajax jquery.

Silahkan teman-teman baca tutorial sebelumnya tentang tutorial membuat crud dengan php.

Pengertian Ajax JQuery

Ajax JQuery adalah sebuah metode/teknik atau fungsi juga yang di sediakann oleh jquery untuk membuat suatu aksi dengan tanpa reload atau tanpa refresh halaman. lebih spesifikasi nya tentang ajax akan saya jelaskan pada lain kesempatan di lain tutorial. intinya adalah dengan ajax jquery memungkinkan kita untuk membuat aksi tanpa reload. contohnya seperti di tutorial ini. yaitu kita bisa membuat input data ke database tanpa reload dengan ajax jquery. bukan hanya input data sih. bisa juga mengedit data, menghapus data. tapi di tutorial ajax jquery ini saya hanya akan menjelaskan tentang cara input data tanpa reload dengan jquery. input data tanpa refresh. dan jika cara menampilkan data dari database tanpa reload dengan menggunakan fungsi load jquery.

Seiring perkembangan dunia web development, teknik ajax sudah sangat populer. dan sangat banyak di gunakan di hampir semua aplikasi berbasis web yang modern. karena salah satu kelebihan ajax jquery adalah halaman aplikasi tidak perlu refresh/reload. dan yang lebih menguntungkan nya lagi aplikasi bisa lebih ringan dan menghemat source. oke lanjut langsung ke tutorial ajax jquery.

Artikel yang mungkin anda sukai : Aplikasi penjualan dengan php dan mysql gratis.

silahkan teman-teman perhatikan penjelasan berikut ini tentang cara menginput data tanpa refresh.

Persiapan Membuat Input Data Ke Database Tanpa Reload

Point membuat input form tanpa reload dengan ajax jquery:

  • buat database dengan nama “malasngoding”.
  • buat koneksi database dengan php. (koneksi.php).
  • buat file index.php
  • buat file aksi.php
  • style.css
  • download file library jquery di situs resminya. jquery.js

Langsung saja teman-teman kita masuk ke tutorial membuat input data ke database tanpa reload. yaitu dengan menggunakan ajax jquery. untuk mulai mengikuti tutorial ajax jquery menginput data ke database tanpa reload ini. silahkan teman-teman buat dulu sebuah database dengan nama “malasngoding”. dan kemudian buat table bernama user. dan isikann column nya id, nama, alamat dan pekerjaan. biar lebih cepat silahkan teman-teman import saja sql berikut ini.

setelah database malasngoding dan table user jadi langsung buat koneksi php dan mysql nya. baca tutorial sebelumnya tentang cara membuat koneksi database php dan mysql.

koneksi.php

teman-teman sesuaikan saja password mysql teman-teman. password mysql saya xxx. silahkn teman-teman ganti dengan password mysql teman-teman. kalau kosong silahkan teman-teman kosongkan saja.

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

Setelah selesai membuat database dan membuat file untuk menghubungkan php dan mysql. sekarang yang paling terpenting adalah download dulu file jquery.js nya. input data tanpa refresh.download di situs resminya saja. di jquery.com.

setelah teman-teman selesai mendownloadnya. buat sebuah file php lagi dengan nama index.php

index.php

letakkan file index.php ini satu directory dengan file jquery.js dan style.css. kemudian di file index.php ini kita hubungkan dulu dengann style.css dan file jquery nya.seperti syntax di atas.

dan kemudian seperti yang teman-teman lihat pada index.php di atas. kita buat form untuk tempat penginputan data nya.

action form nya hilangkan saja seperti syntax di atas. jangan lupa juga memberikan class atau id di form inputnya seperti contoh di atas.

pada form di atas saya membuat class dengan nama form-user. ini berguna untuk mendapatkan data yang di input nantinya.

dan juga terdapat class

yang kita jadikan sebagai pengirim data nya. sampai di sini kita telah sampai pada intinya. perhatikan perintah jquery di file index.php

saya tidak menjelaskan lagi cara penulisan syntax jquery dan cara-cara penggunaan fungsi nya ya. teman-teman bisa melihat di tutorial jquery sebelumnya di www.malasngoding.com. baca di sini.

seperti yang teman-teman lihat pada syntax di atas. kita buat pada saat class .tombol-simpan di klik maka semua data yang ada pada form kita simpan ke variabel data.

dan kemudian kita gunakan fungsi ajax jquery. untuk membuat input data tanpa reload dengan ajax jquery.

nah ada beberaa property fungsi ajax jquery yang harus teman-teman perhatikan di sini untuk membuat ajax. yaitu:

  • type = untuk mendeklarasikan metode pengiriman data dari form.
  • url = untuk mendeklarasikan file/method yang memproses form.
  • data = untuk mendeklarasikan data yang di kirim. pada contoh ini kita isi dengan variabel data. dan variabel data kita sudah berisi data yang di input pada form. kita mendapatkan data dari form nya dengan fungsi serialize() jquery.
  • success = untuk mendeklarasikan aksi yang terjadi pada saat proses ajax berhasil di lakukan.

mudah-mudahan penjelasan di atas dapat mudah di pahami. oh ya satu lagi. di sini pada saat ajax berhasil di lakukan kita menampilkann file tampil.php pada element <div class=”tampildata”></div> di file index.php.

sekarang kita akan membuat file aksi.php. karena kita mengarahkan pemprosesan form ini ke file aksi.php.

aksi.php

di file index.php ini sama seperti cara penginputan data ke database dengan cara yang telah kita bahas di tutorial CRUD php sebelumnya.

lalu buat file tampil.php. di file tampil.php ini kita akan menampilkan data dari database.

tampil.php

style.css

Oke saya rasa selesai sudah. dan berikut adalah hasil input data tanpa reload dengan ajax jquery.

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

input data ke database tanpa reload dengan ajax jquery

klik simpan.

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

membuat input data tanpa reload dengan ajax jquery

data pun berhasil tersimpan tanpa reload sedikit pun.

Di tutorial ini kita telah belajar ajax jquery. yaitu membuat input data dengan ajax. tanpa refresh atau reload.

Oke sekian dulu tutorial menampilkan data tanpa reload dan Input Data Ke Database Tanpa Reload Dengan Ajax JQuery. pada tutorial selanjutnya akan kita bahas tentang cara membuat hapus data di database tanpa reload. dan edit/update data tanpa reload.

silahkan download source code input data tanpa reload ini di tombol di bawah ini. silahkan juga di share asalkan tetap mencantumkan alamat aslinya. http://www.malasngoding.com/

[Opt-In Panda] The locker [id=764] doesn't exist or the default lockers were deleted.

Incoming search terms:

  • membuat crud dengan jquery
  • simpan data dengan ajax
  • Menampilkan data codeigniter tanpa reload
  • crud dengan jquery
  • cara membuat ajax simpan
  • donload script simpan dengan ajak
  • koneksi database javascript
  • belajar ajax jquery
  • crud dengan ajax jquery
  • cara simpan data input dari web




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 3 Comments
  • […] perhatikan pada contoh penulisan object pada oop di atas. penulisan object di awali dengan syntax new. dan kemudian di ikuti dengan nama class yang ingin di instansiasi. baca juga : Input Data Ke Database Tanpa Reload Dengan Ajax JQuery […]


  • Tio 8 months ago

    Terima kasih Gan, bermanfaat sekali


  • adwin 2 weeks ago

    bagaimana kalau ditambahkan insert suatu file (jpg/pdf) ?



Write a Comment

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