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

Jika ingin menggunakan aplikasi web atau hanya halaman web sebagai bagian dari aplikasi klien android, kita dapat melakukannya dengan menggunakan WebView. WebView memungkinkan untuk menampilkan halaman web sebagai bagian dari aplikasi android. Semua yang WebView lakukan adalah merujuk pada halaman web.

Awalnya buka Android Studio dan buat sebuah Proyek Baru


kemudian tentukan Target Android Device


Add Activity to Mobile. pilih Empty Activity


Customize the Activity, lalu klik Finish


Lalu buka file build.gradle (Module: app)

Dan tambahkan mobile ads SDK kedalam gradle dependency yaitu:

compile 'com.google.android.gms:play-services-ads:11.0.4'

script lengkapnya sebagai berikut:


Kemudian buka file activity_main.xml pada text.


untuk desainnya masukan webview, progress bar dan Admob, langsung saja script lengkapnya seperti berikut:

selanjutnya buka file MainActivity.java

dan masukan script berikut:

Lalu buka file AndroidManifest.xml

dan tambahkan beberapa permission yaitu
berikut script lengkapnya

dan yang terakhir untuk menentukan judul aplikasi dan admob banner id ada di file strings.xml

yang isi nya sebagai berikut.

setelah itu jalankan menggunakan emulator atau langsung pada handphone untuk melihat hasilnya. seperti contoh pada gambar berikut ini:

Contoh Tampilan Webview 0.1

Contoh Tampilan WebView 0.2

Contoh Tampilan WebView 0.3

WebView ini sudah di lengkapi dengan fitur menyesuaikan pada display potrait maupun landscape, tekan tombol back dua kali untuk keluar dari aplikasi, juga telah dilengkapi dengan penanganan error ketika tidak ada jaringan Internet atau aplikasi tidak dapat terhubung ke server.

Database real-time adalah sistem basis data yang menggunakan pemrosesan real-time untuk menangani beban kerja yang keadaannya terus berubah. Database real-time berguna untuk akuntansi, perbankan, hukum, rekam medis, multi media, pengendalian proses, sistem reservasi, dan analisis data ilmiah, permainan (game) dan lain-lain. dimana datanya berubah dengan sangat cepat dan dinamis. dan Firebase menyediakan sebuah layanan database real time, mari kita sinkronkan data dengan cloud-hosted database  tanpa SQL dari Firebase ini. Sehingga data disinkronkan ke semua klien secara realtime. Bagaimana caranya yuk ikuti tahapan langkah demi langkah pada catatan kali ini.

Pastikan Vue JS sudah terinstallasi, Installasi Vue JS seperti video berikut ini


setelah penginstallan vue js seperti video diatas, buka browser merujuk pada alamat:

http://localhost:8080

maka akan terbuka halaman utama atau index dari vue js tersebut.

dan isi paket file dari vue js yang telah diinstall adalah sebagai berikut:


Selanjutnya untuk menggunakan firebase real-time database kita membutuhkan paket firebase vuefire untuk mengikat vue dengan firebase. installasinya sebagai berikut, ketik:

npm install firebase vuefire --save

setelah selesai dan komplit buka file main.js:


kemudian didalam file main.js tersebut import vuefire dan gunakan vuefire untuk mengikat.


berikut main.js script lengkapnya:

selanjutnya kita buat dulu sebuah proyek dan tabel database dalam hal ini kita akan membuat tabel customers yang berisi data-data customer, baik langsung saja buka pada browser:

 https://firebase.google.com

dan silahkan masuk ke console untuk membuat proyek baru atau melihat proyek yg sudah ada. kemudian buat satu buah proyek yang namanya tergantung proyek yang kita bangun.


kemudian ambil snippet pada menu:

Add Firebase to your web app

berikut snippet nya yang akan kita copy:


setelah di copy selanjutnya buka file app.vue


tempelkan pada kode pada bagian config, sekaligus juga membaca database tabel customers dan design tabel dengan menggunakan bootstrap 4 untuk menampilkannya.

selanjutnya buka file index.html


untuk menambahkan bootstrap 4 melalui layanan CDN


berikut script index.html nya

selanjutnya untuk mencoba kita buat sebuah tabel customers dan data sebagaimana gambar berikut ini:


cara membuatnya bisa dilihat melalui video berikut ini


setelah itu lihat aplikasi pada browser http://localhost:8080 maka data yang dibuat pada firebase sudah terhubung dan tampil.

untuk melihat proses penambahan data dan menghapus data secara real time dan bahkan ketika kita offline pun data dapat melakukan sinkronisasi ketika kita sudah online, demo bisa dilihat melalui video berikut ini.

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