Hal yang juga sangat mendasar untuk membuat aplikasi adalah adanya fungsi edit dan hapus data, dalam catatan kali ini akan di tulis sebuah cara untuk mengganti dan menghapus data menggunakan Single Page Application (SPA) atau satu halaman tunggal melalu Laravel dan Vue JS, sekaligus melanjutkan catatan kemarin tentang menambah data yang juga mengguanakan SPA Laravel dan Vue JS. bagaimana caranya yuk ikuti tahapan langkah-langkah dari catatan berikut ini.

Baca Sebelumnya:

• Mengambil Data Dari Database Menggunakan SPA Laravel & Vue JS

buka kembali file Items.vue


lalu tambahkan 1 buah tombol pada form yaitu tombol Edit Item, yang apabila di klik akan menjalankan fungsi editItem dengan membawa sebuah id yang kegunaanya untuk mengedit data.


kemudian pada tabel tambahkan 2 buah aksi yaitu berupa tombol edit dan remove tombol edit berguna untuk menampilkan data yang akan di edit pada form. dan tombol remove untuk menghapus data dengan menjalankan fungsi removeItem dengan membawa id dari item yang akan dihapus.


dan juga tambahkan juga beberapa fungsi-fungsi seperti berikut ini dan letakan ditempat yang tepat.


berikut ini script lengkap dari Items.vue

maka tampilan dari form dan table adalah seperti ini


dan apabila tombol Edit di tekan disalah satu data, maka datanya akan ditampilkan pada form dan tombol Add New Item akan berubah menjadi Edit Item yang berfungsi untuk mengganti data.


selanjutnya pada Router file api.php


tambahkan route-route berikut ini.


berikut ini file router api.php script lengkapnya

dan yang terakhir buka file ItemController.php


tambahkan ketiga fungsi berikut ini yaitu untuk menampilkan data ke form, mengedit data dan menghapus data.


berikut ini script lengkap dari file ItemController.php

setelah selesai menyematkan kode-kode diatas, jalankan aplikasi pada browser maka hasilnya akan seperti video dibawah ini.


Baca Selanjutnya:

• Upload dan Menampilkan Gambar Menggunakan SPA Laravel & Vue JS

Data dapat diambil dari tabel database dengan mengeksekusi controller melalui API. Sejauh ini kita telah membuat database dan tabel sekaligus memasukkan data. Sekarang saatnya untuk mengambil data yang telah di input pada catatan sebelumnya. mari ikuti tahap demi tahap pada catatan kali ini.

Sebelumnya Baca:

• Menambah Data Ke Database Menggunakan SPA Laravel & Vue JS

Buka kembali file ItemController.php


Dan tambahkan fungsi berikut ini yang berfungsi untuk mengambil data dan mengkonversinya kedalam bentuk json


Berikut script lengkapnya:

Kemudian pada route file api.php


tambahkan route berikut ini yang merujuk pada fungsi getItem pada ItemController


berikut script lengkapnya

Lalu tahap berikutnya buka kembali component yaitu file Item.vue


dan selip kan kode berikut ini untuk menampilkan data-data nya


berikut ini script lengkapnya

setelah selesai jalankan pada browser maka akan terlihat tabel berikut datanya seperti pada tampilan berikut ini.


dan proses input data beserta menampilkan datanya secara langsung, seperti pada layar video dibawah ini.



Selanjutnya Baca:

• Mengganti dan Menghapus Data Menggunakan SPA Laravel & Vue JS

Setelah kemarin membuat beberapa link yang dihubungkan dengan menggunakan vue-router, maka cacatan kali ini akan mengungkapkan bagaimana cara menambah data ke dalam database menggunakan SPA Laravel & Vue JS. jadi proses penambahan data dilakukan tanpa melakukan reload halaman. dengan banyaknya plugin yang sudah terintegrasi pada laravel maka hal ini dapat dilakukan dengan mudah, mari ikuti tahap-tahap menambahan data berikut ini:

Baca Sebelumnya:

• Menghubungkan Link Menggunakan Vue Router Untuk SPA Laravel+Vue

kali ini kita akan menambahkan pada tabel items, maka buatlah model dan tabel Item dengan perintah sebagai berikut:

php artisan make:model Item -m

kemudian pada file create_items_table tambahkan struktur datanya seperti berikut:


lalu buat sebuah controller yang bernama ItemController:

php artisan make:controller ItemController

yang isi dari pada file ItemController.php adalah sebagai berikut:

setelah itu buat lah route pada file api.php di folder routes


sematkan kode berikut ini:


dan yang terakhir edit file Items.vue



dan tambahkan script seperti berikut ini:

setelah semua selesai lakukan migrate dan coba jalankan pada browser.


berikut tampilan pada browser isi datanya dengan lengkap dan kemudian tekan tombol submit


maka data akan masuk kedalam database tanpa melakukan reload pada halaman



Selanjutnya Baca:

• Mengambil Data Dari Database Menggunakan SPA Laravel & Vue JS

Creating, Reading, Updating, Deleting atau yang disingkat CRUD adalah sebuah aksi yang selalu digunakan disetiap aplikasi, dan kini laravel 5 membantu membuatnya lebih mudah untuk menggunakan pengendalian CRUD dengan resource controller menjadikannya lebih mudah karena kita dapat menggunakan dari beberapa teknik routing yang dimiliki laravel 5, dan pada kesempatan kali ini kita akan mengimplementasikannya pada proyek kecil kita yuk mari ikuti langkah-langkah berikut ini:

php artisan make:model Tukangjamu -m

Gambar 4.1

Perintah tersebut akan membuat sebuah file tukangjamu migration pada folder database/migrations dan file Tukangjamu Model pada folder App, buka file yang telah dibuat tadi ada pada folder database/migration dan tambahkan beberapa field yaitu, nama, email dan kualitas jamu.

Gambar 4.2

lalu buka shell kembali dan ketikan perintah dibawah ini untuk membuat tabel data tukangjamus:

php artisan migrate

Selanjutnya membuat Controller, kita dapat menggunakan artisan untuk membuat Controller ini, yuk kita buat dengan mengetikan perintah:

php artisan make:controller TukangjamuController

Gambar 4.3

Maka perintah tersebut akan menghasilkan satu buah file TukangjamuController.php yang ada pada app/Http/Controllers.
lalu pada router tambahkan baris berikut ini untuk menggunakan Controller tersebut:

Route::resource('tukangjamu', 'TukangjamuController');

maka alamat url akan merujuk pada http://yourdomain/tukangjamu

Gambar 4.4

dan kita dapat menjalankan perintah:

php artisan route:list

untuk melihat semua rute pada aplikasi kita.

Gambar 4.5

• master.blade.php
• index.blade.php
• create.blade.php
• show.blade.php
• edit.blade.php

Gambar 4.6

Gambar 4.7

buka file master.blade.php dan isikan script berikut:

Gambar 4.8

dan pada file index.blade.php sebagai berikut:

Gambar 4.9

sekarang kita dapat menampilkan data tukang jamu tersebut melalui browser dengan url http://yourdomain/tukangjamu

Gambar 5.0

Gambar 5.1

Gambar 5.2

sehingga tampilan pada url http://yourdomain/tukangjamu/create akan menampilkan sebagai berikut:

Gambar 5.3

apabila mengalami error pada html dan form anda silahkan baca disini. Setelah ini kita akan melakukan proses penyimpanan data kedalam database yang akan dilakukan oleh function store(). buka kembali file TukangjamuController.php dan masukan script berikut pada bagian function store():

Gambar 5.4

sehingga apa bila kita buka halaman /tukangjamu/create akan menghasilkan tampilan seperti berikut:

Gambar 5.5

Gambar 5.6

Gambar 5.7

sehingga akan menghasilkan tampilan seperti dibawah ini:

Gambar 5.8

Selanjutnya kita akan mengaktifkan tombol Ganti yang berguna untuk mengedit atau menggati data yang telah di inputkan. kembali lagi buka TukangjamuController.php dan pada function edit() sematkan script berikut:

Gambar 5.9

dan pada view file edit.blade.php buat script seperti dibawah ini:

Gambar 6.0

sehingga semuanya akan berjalan seperti tampilan dibawah ini:

Gambar 6.1

kemudian buka kembali controller file TukangjamuController.php dan pada function update masukan script berikut:

Gambar 6.2

dan apabila kita ganti datanya maka akan berjalan seperti dibawah ini:

Gambar 6.3

yang terakhir kita akan mebuat untuk penghapusan data atau delete untuk melakukan ini kita buka lagi view file index.blade.php dan tambahkan script berikut ini:

Gambar 6.4

Sehingga akan menampilkan tombol hapus seperti gambar dibawah ini:

Gambar 6.5

lalu buka kembali controller file TukangjamuController.php pada function destroy() sematkan script berikut ini

Gambar 6.6

dan datapun terhapus.

Gambar 6.7