Post

Laravel and Vuejs #6

Pada article yang lalu kita sudah mempelajari bagaimana cara melakukan blade templating pada laravel. Dan pada article kali ini, kita akan melanjutakan proses pembuatan web aplikasi bukutamu, dengan membuat vue component.

Pertama - tama, pastikan NodeJs sudah terinstal secara global dengan benar. Selanjutnya, kembali pada command prompt , pastikan active directory sudah pada bukutamu, dan kemudian ketik perintah " npm install ". Silahkan tunggu beberapa menit hingga proses installasi selesai.

Bila proses installasi sudah selesai, kita akan menambahkan sedikit styling. Kembali pada text editor anda lalu buka file " app.scss ", yang berada pada directory " resource/sass ". Kemudian tambahkan code seperti pada dua gambar berikut.

app.scss

Lanjutkan pada line 45 seperti gambar berikut.

app.scss

Bila sudah, kembali ke command prompt dan ketik perintah " npm run dev " untuk melakukan compile pada file yang baru saja kita perbarui.

Bila sudah berhasil, kembali lagi pada text editor anda lalu buatlah dua file baru dengan extensi " .vue " pada directory " resource/js/components ". Pada directory tersebut seharusnya sudah ada sebuah file dengan nama " ExampleComponent.vue ", dan kita dapat mengabaikan file itu terlebih dahulu. Pada directory tersebut, buatlah 2 buah file yang pertama adalah " Signatures.vue ", dan yang kedua adalah " SignaturesForm.vue ". 

Dan nantinya, kita akan memerlukan paginasi untuk web aplikasi bukutamu kita. Maka dari itu, kembali sejenak pada command promt dan ketik perintah " npm install vuejs-paginate --save ". Perlu anda ketahui, dalam pengetikan perintah dari npm, pastikan space adn dash sudah seperti yang dicontohkan pada article.

Selanjutnya kita perlu melakukan beberapa configuration pada file " app.js " yang terletak pada directory " resources ". Kembali lagi pada text editor anda lalu buka file tersebut dan tambahkan code sebagai berikut.

Bila sudah, kembali lagi ke command prompt dan ketik lagi perintah " npm run dev " untuk melakukan compile pada perubahan yang baru saja kita lakukan. Perlu anda ketahui bahwasanya kita harus selalu compiling setiap tambahan ataupun perubahan yang kita lakukan pada component. Namun bila anda sudah cukup mahir, anda dapat melakukan proses tersebut sejalan dengan perubahan yang anda lakukan tanpa harus berkali - kali melakukan run dev dengan cara melakukan perintah npm run watch. Namun pada article ini saya tidak mengunakan itu agar setiap prosesnya dapat anda perhatikan satu - persatu.

Pada saat melakukan npm install, kita juga sudah secara otomatis menginstall library axios pada node module kita, sehingga untuk proses get, post, dan put data pada article ini kita akan menggunakan axios.

Baiklah sebelum sampai kesitu, mari kita lanjutkan untuk membuat Vue component terlebih dahulu. Kembali ke text editor anda, lalu buka file Signatures.vue yang baru saja kita buat tadi dan tambahkan code sebagai berikut.

Pada file ini, kita membuat component dari element tag yang telah kita panggil pada file index.blade.php dengan element tag " <signatures> ".

Bila sudah, masih pada text editor anda lalu buka file SignatureForm.vue dan tambahkan code sebagai berikut.

Sebagai tips, usahakan untuk benar - benar anda perhatikan dalam penulisan code dri tiap element seperti pada gambar.

Selanjutnya, kita akan menggunakan axios untuk melakukan get, post, maupun put data pada aplikasi bukutamu yang kita buat. kembali pada file Signatures.vue dan tambahkan script sebagai berikut.

Route yang kita gunakan seperti pada gambar, merupakan API route yang telah kita buat sebelumnya pada article lalu. Baiklah bila sudah, buka kembali file SignatureForm.vue lalu tambahkan script sebagai berikut.

 

Jangan lupa untuk compiling perubahan yang sudah kita lakukan. Kkembali pada command prompt anda dengan memastian active directory pada bukutamu, lalu ketik perintah " npm run dev ". Baiklah bila sudah, tetap pada command prompt anda dan jalankan aplikasi bukutamu dengan mengetikan perintah " php artisan serve ". Silahkan kemudian menuju browser anda dan isikan address bar dengan URL " Localhost:8000 ".

Baiklah, sampai disini pembuatan aplikasi sederhana bukutamu dengan menggunakan Laravel dan VueJs. Apa yang sudah kita pelajari dari tutorial bagian pertama sampai tutorial ini adalah sebagai berikut :

  1. Membuat Project Laravel mulai dari menyiapkan composer, etc.
  2. Membuat Controller, Model, Model Factory, Model Scope, Data Transform, Tinker, dan Faker pada Laravel.
  3. Membuat API Route & Controller dengan Laravel.
  4. Melakukan End Point Test dengan Postman.
  5. Membuat Front End dengan VueJs.
  6. Penggunaan Axios.

Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih dan sampai bertemu di tutorial selanjutnya.