Post

Laravel and Vuejs

Yang akan kita pelajari kali ini adalah membuat aplikasi web "Buku Tamu", dimana kita akan membuat BackEnd Api menggunakan Laravel dan FrontEnd menggunakan Vuejs. Dan untuk sementara, tutorial kali ini untuk pengguna Windows.

Baiklah, yang harus kita siapkan adalah :

  • Xampp
  • Composer
  • NodeJs
  • Postman
  • Laravel Project

Untuk yang belum memiliki composer ter-Install, silahkan download dan install terlebih dahulu. composer dapat di download pada https://getcomposer.org/download/ . Pastikan composer sudah ter-Install.

Begitupula bila belum memiliki NodeJs ter-Install, silahkan download terlebih dahulu di https://nodejs.org/en/download/ . Pastikan NodeJs sudah ter-Install.

Selanjutnya kita akan menyiapkan Laravel Project yang akan kita gunakan sebagai BackEnd API dengan langkah - langkah seperti berikut :

  • Buka Comand Prompt (Tekan Windows + R, lalu ketik "cmd")
  • Setelah masuk ke jendela console, pindahkan active directory ke directory "htdocs" (ada dalam directory xampp anda, kira - kira umumnya seperti ini C:xampp/htdocs/).
  • Lalu ketik perintah sebagai berikut : " composer create-project --prefer-dist laravel/laravel bukutamu "
  • Sembari menunggu laravel project dibuat, anda bisa membuat database terlebih dahulu dengan nama "bukutamu"

Setelah Project Laravel selesai dibuat, akses project tersebut dengan text editor anda. Untuk saya sendiri menggunakan Sublime. Pada text editor, buka file bernama ".env" dan lakukan configuration sebagai berikut :

 

".env" configuration
Configurasi DB di ".env"

Selanjutnya, kembali ke comand prompt lalu pindahkan active directory ke Project Laravel yang tadi telah kita buat (kira - kira umumnya sperti ini C:xampp/htdocs/bukutamu). Bila active directory sudah berada di bukutamu, maka kita akan membuat model sekaligus migration. Ketik perintah " php artisan make:model Signature -m ".

Dengan perintah tersebut, maka kita sudah membuat model Signature beserta dengan migration-nya. flag "-m" yang kita gunakan adalah flag untuk membuat migration sekaligus ketika model dibuat.

Kemudian, kita beralih kembali pada text editor dan buka file migration yang sudah dibuat tadi yaitu pada directory database/migrations dan pilih file create_signature_table. Lalu tambahkan beberapa code di method up dan method down seperti berikut :

Table Signature Migration

Dengan migration tersebut, kita membuat sebuah table bernama signatures pada database bukutamu dengan field - field seperti pada gambar. Pada pembuatan table seperti digambar, saya menggunakan condtional statement yang bertujuan agar migration dilakukan bila table tersebut belum ada di database.

Selanjutnya yang akan kita lakukan adalah melakukan confugiration di AppServiceProvider. Menggunakan text editor silahkan menuju directory Providers lalu buka file AppServiceProvider.php dan tambahkan configuration sebagai berikut :

AppServiceProvider

Selanjutnya kembali ke comand prompt, pastikan active directory pada laravel project "bukutamu" lalu lakukan perintah " php artisan migrate " untuk melakukan migration dari table signatures yang telah ktia buat tadi. Dengan ini, table signatures sudah dibuat di database bukutamu.

Pada article kali ini, kita sudah mempelajari bagaimana membuat dan mengkonfigurasi Laravel Project, membuat Model beserta migrationnya, serta melakukan database migration. Untuk selanjutnya, tutorial akan saya lanjutkan di post berikutnya berhubung tutorialnya cukup panjang. Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih.