header ads

Simple Crud Single Page Menggunakan JQuery+Ajax dan Laravel API

agung Maret 18, 2020

Step 1 : Buat Sebuah Rest API Laravel

  1. Tutorial Simple Crud Rest Api Laravel(Klik Disini)
  2. Pada route tambahkan script di bagian paling atas
  3. Running Api Laravel yang telah dibuat

Step 2 : Buat Code HTML

  1. Buat Dokumen HTML
  2. Sisipkan Library JQuery, Terdapat 2 Opsi:
    1. JQuery Lokal
      Download Terlebih dahulu JQuery dan simpan dalam folder yang sama dengan file HTML yang dibuat, kemudian sisipkan code berikut di antara tag <head> </head>
    2.  JQuery Online
      Cukup dengan menyipsipkan code berikut ke dalam file HTML di antara tag <head> </head>
      *Untuk menggunakan cara ini perangkat haruslah selalu terhubung dengan internet
  3. Code HTML Setelah Menyisipkan JQuery

Step 3 : Buat Form, Button dan Table

  1. Sisipkan code berikut di antara tag <body> </body>
  2. Hasil

Step 4 : Buat Fungsi getSiswa()

  1. Untuk Menerapkan JQuery + ajax Buatlah tag <script> </script> di bawah tag </html> dan sisipkan code JQuery di antara tag <script> </script>, Buat lah sebuah fungsi getSiswa untuk menampilkan data :
    2. perhatikan code #body dalam JQuery tanda #(hashtag) artinya mengambil elemen dengan id, yang berarti code $("#body") artinya mengambil sebuah tag elemen yang mempunyai id = "body", kemudian $("#body").empty() berfungsi untuk mengosongkan isi apapun yang ada dalam tag dengan id="body" dan fungsi $("#body").append() adalah sebaliknya yaitu menyisipkan sesuatu kedalam tag dengan id="body"
  2. Panggil fungsi getSiswa dengan menambahkan code getSiswa() diatas fungsi tersebut
  3. Hasil

Step 5 : Buat Fungsi insertSiswa()

  1. Buat lah sebuah fungsi insertSiswa() dan sisipkan di bawah fungsi getSiswa() :
  2. Lihat Kembali code pada button Simpan, terdapat perintah onClick="insertSiswa()" perintah ini menandakan event jika tombol tersebut di klik maka fungsi insertSiswa() tereksekusi
  3. Hasil

Step 6 : Buat Fungsi hapusSiswa(id)

  1. Buat lah sebuah fungsi hapusSiswa(id) dan sisipkan di bawah fungsi insertSiswa() :
  2. Lihat Kembali code pada fungsi getSiswa() tepatnya pada event append() terdapat perintah onClick="hapusSiswa("+ dataSiswa.id +")" sama seperti halnya fungsi insertSiswa() namun hanya berbeda di parameter dimana fungsi hapusSiswa(id) membutuhkan parameter id
  3. Hasil

Step 7 : Ubah Siswa

  1. Untuk ubah data sedikit berbeda dengan langkah insertdata dan hapus data, pertama buat lah sebuah event click seperti code berikut,
    2. Lihat kembali code pada fungsi getSiswa() tepatnya pada event append() terdapat button dengan class=ubah,kemudian kembali lagi pada code JQuery perhatikan code .ubah dalam JQuery tanda .(dot) artinya mengambil elemen dengan class, yang berarti code $(".ubah") artinya mengambil sebuah tag elemen yang mempunyai class = "ubah", kemudian $('.ubah').click() berfungsi untuk merespon jika elemen yang mempunyai class="ubah" di tekan dalam contohnya dalam fungsi ini jika tombol ubah di tekan maka nilai yang ada pada tabel akan di lemparkan ke dalam form untuk di ubah, selain itu dalam fungsi ini dapat memanipulasi beberapa tag HTML menjadi terlihat/tidak terlihat
  2. Buat Fungsi ubahSiswa(), pada Step 7.1 fungsi digunakan untuk memindahkan data yang berada dalam tabel ke dalam form untuk di ubah sedangkan fungsi yang sekarang di buat berguna untuk menyimpan hasil perubahan yang dilakukan agar tersimpan di database, buat lah fungsi ubahSiswa() dengan code :
  3. Buat kembali event onClick untuk tombol batal
  4. Hasil
  5. Opsional CSS , tambah code berikut di antara tag <style></style> agar tampilan lebih sedikit berwarna :

Source Code : github/agungsryn

Posting Komentar

0 Komentar