Vue.js adalah sebuah framework javascript untuk membangun antarmuka sebuah web yang interaktif.

Pertama lakukan instalasi node.js

Download Node.js installer di sini https://nodejs.org/en/download/ kemudian jalankan file msi yang sudah di download tadi dan lakukan instalasi seperti biasa, dan tunggu hingga proses instalasi selesai.

untuk memastikan apakah node.js sudah terinstal dengan menjalankan perintah berikut:

node -v

 

Install VUE JS

bersihkan cache terlebih dahulu agar tidak terjadi error, dengan menjalankan perintah berikut:

npm cache clean --force

 Setelah itu install vuejs dengan menggunakan perintah berikut:

npm install -g @vue/cli

 Membuat Proyek Baru

untuk membuat proyek baru ketikan perintah berikut ini:

vue create nama-proyek

 

Setelah itu akan muncul opsi, pilih saja Vue 3

Tunggu hingga proses pembuatan project selesai, sampai muncul pesan "Successfully created project myapp."

setelah proyek berhasil dibuat saat kita jalankan dengan masuk ke folder myapp kemudian gunakan perintah berikut:

npm run serve

 

untuk menjalankan aplikasi localhost di browser yaitu dengan alamat localhost:8081

Dan Selamat kita sudah berhasil membuat proyek vue

end 😉

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

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