Postingan lainnya

Laravel dan Vue - Membuat Halaman Index Forum Sekolah Koding versi SPA (Part 2)

Di Part 1 kita sudah bahas apa saja yang kita butuhkan dan apa yang akan kita buat. Kalau belum baca silahkan cek di link ini: [link]https://sekolahkoding.com/perpustakaan/laravel-dan-vue-perkenalan-membangun-single-page-application-part-1[/link]

Untuk Part 2 ini, inilah yang akan kita lakukan: 1. Membuat Route, Controller, dan View (Laravel) 2. Konsep Tampilan (Design) 3. Membuat Vue Instance, Vue Router, dan View Index Forum (Vue)

Ini target view kita:

1. Membuat Route, Controller, dan View (Laravel) - Route (buat route di routes/web.php)

 Route::get('/forum', 'ForumController@index');

- Controller (silahkan buka command line dan lakukan perintah)

 php artisan make:controller ForumController


// selanjutnya buat method index di ForumController

public function index()
{
   return view('forum');
}

- View (buat forum.blade.php di resources/views)


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Forum</title>
</head>
<body>
   <div id="app">Siap memulai vue</div>
</body>
</html>

kita tes dulu apakah tidak ada masalah dari route hingga ke view. silahkan buka browser dan kunjungi /forum, jangan lupa untuk menjalankan server dengan 'php artisan serve'

// semestinya kita melihat tulisan 'Siap memulai vue'
// note: silahkan sesuaikan dengan localhost anda
http://localhost:8000/forum

2. Konsep Tampilan (Design) Sebelum kita beralih ke vue, ada baiknya kita lihat dulu konsep tampilan dari project yang kita buat. Kalau kita buka forum sekolah koding <a href='https://sekolahkoding.com/forum'>https://sekolahkoding.com/forum</a>, minimal tampilannya terbagi menjadi 4 bagian. Bagian2 ini akan kita sebut navbar, banner, content-container, dan footer. Lihat gambar berikut:

Content-container sendiri terbagi menjadi 2 yaitu bagian kiri (sidebar) dan kanan (utama). Namun untuk sementara kita satukan saja. Selanjutnya yang perlu diperhatikan adalah ketika kita klik 1 pertanyaan pada forum maka akan terbuka page baru yg kurang lebih sama seperti pada tampilan sebelumnya. Namun yang membedakan hanyalah 2 bagian yaitu banner dan content-container. Sedangkan navbar dan footer tidak berubah. Bila anda kebingungan coba bandingkan 2 tampilan berikut ini:

- Forum <a href='<a href='https://sekolahkoding.com/forum'>https://sekolahkoding.com/forum</a> '><a href='https://sekolahkoding.com/forum'>https://sekolahkoding.com/forum</a> </a> - Contoh salah satu pertanyaan di forum <a href='<a href='https://sekolahkoding.com/forum'>https://sekolahkoding.com/forum</a>/penulisan-query-substring-di-codeigniter '><a href='https://sekolahkoding.com/forum'>https://sekolahkoding.com/forum</a>/penulisan-query-substring-di-codeigniter </a> Bagian yg berubah adalah bagian banner dan content-container. Bila telah paham konsep tampilan ini, maka kita siap beralih ke vue.

3. Membuat Vue Instance, Vue Router, dan View Index Forum (Vue) Pertama-tama silahkan install local npm di project anda dengan menjalankan perintah dari command line:

 npm install

ini akan menginstall package2 yg ada di list file package.json (silahkan buka file ini dan lihat apa2 sj yg akan diinstall). Oh iya kita lupa, kita juga butuh vue-router. Install juga vue-router dengan perintah:

 npm install vue-router --save

Bila semua sudah selesai kita siap untuk mengimport module2 yg telah diinstall.

- Vue Instance (buka resources/assets/js/app.js dan masukkan code berikut - bila ada code di dalamnya silahkan hapus semua)

// kita import bootstrap.js - karena di file ini nantinya kita akan import semua package2 yg telah kita install di node_modules
import './bootstrap';
// kita import router.js - file ini belum kita buat, file ini khusus kita gunakan untuk menghandle route vue kita. Kita akan buat file ini setelah vue instance
import Router from './router';

// vue instance
new Vue({
   el: '#app',
   router: Router
});

kita telah buat vue instance di atas tapi kita belum import vuenya, untuk itu kita buka file resources/assets/js/bootstrap.js lalu hapus semua kode di dalam dan tambahkan kode berikut:


// kita akan gunakan bootstrap-sass
require('bootstrap-sass');

// import vue dan vue router
window.Vue       = require('vue');
window.VueRouter = require('vue-router');

// gunakan vue router pada vue
Vue.use(VueRouter);

setelah semua dilakukan kita siap untuk membuat vue router.

- Vue Router (buat file resources/assets/js/router.js dan tambahkan kode berikut)


// kita import vue router
import VueRouter from 'vue-router';

// buat variable Routes - di variable inilah kita akan daftarkan semua route forum kita
let Routes = [
   {
      // ini hanya alias route kalau dilaravel biasa kita pakai as atau name
      name: 'forumIndex',
      // ini path view, maksudnya bila kita mengunjungi http://localhost:8000/forum maka route ini yg akan menghandle
      // penting diingat path: '/' ini bukan berarti http://localhost:8000/ melainkan http://localhost:8000/forum
      path: '/',
      // ini adalah tampilan/component yang akan munculkan saat user mengunjungi http://localhost:8000/forum - kita belum buat component ini
      component: require('./views/ForumIndex')
   }
];

// kemudian kita export default vue router instance beserta routes yg telah kita defenisikan di atas
export default new VueRouter({
   routes: Routes
});

- View Index Forum (buat file resources/assets/js/view/ForumIndex.vue - sesuaikan nama file ini dengan yang kita defenisikan di router.js lalu input code berikut)

<template>
   <div id="main-view">
      <!-- Bagian banner -->
      <h2>Bagian Banner</h2>

      <!-- Bagian content-container -->
      <div class="row">
         <div class="col-md-3">
            <h2>Sidebar</h2>
         </div>

         <div class="col-md-9">
            <h2>Pertanyaan Forum</h2>
         </div>
      </div>
   </div>
</template>

Sampai disini kita telah membuat dua bagian yaitu bagian banner dan content-container. Kita belum menjadikannya component dan belum membuat navbar dan footer. Sebelum terlalu jauh mari kita tes kode kita. Buka command line, kita akan compile file2 js maupun vue yg telah kita buat menjadi 1 bundle menggunakan laravel mix. Buka file webpack.mix.js kemudian tentukan path target dan lokasi penyimpanannya.

// kita akan compile file resources/assets/js/app.js beserta module2 yg telah kita import dan menyimpannya di public/js
// kita juga akan compile file resources/assets/js/app.scss dan menyimpannya di public/css - ini sebenarnya belum kita butuh namun sekalian kita lakukan karena nantinya kita akan gunakan css ini
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Bila sudah edit webpack.mix.jsnya buka command line dan jalankan perintah:

 npm run dev

Setelah berhasil, anda akan melihat folder dan file baru di public. yaitu public/js/app.js dan public/css/app.css. Sekarang sisa import file js dan css tersebut ke forum.blade.php


// ini adalah file forum.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Forum</title>
   // ini file app.css yg baru kita compile
   <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
   <div id="app">
      // tambahkan tag baru ini, ini akan menampilkan component route yg telah kita buat di router.js
      <router-view></router-view>
   </div>

   // ini file app.js yg baru kita compile
   <script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>

Coba kunjungi di browser <a href='http://localhost:8000/forum '>http://localhost:8000/forum </a> Bila anda melihat tampilan seperti berikut maka semua yg telah kita lakukan berhasil.

Nampaknya sudah terlalu panjang, kita lanjutkan untuk component vue, api, dan lainnya di part selanjutnya. Kalau ada error silahkan share kita debug sama2.

laravel vue sharing