Halo semuanya, kembali lagi di tulisan saya. Pada kesempatan kali ini kita akan belajar bagaimana cara membuat website SPA atau website tanpa reload dengan laravel dan vue js. Penasaran?, ayo ikuti selengkapnya berikut ini.
Untuk membuat website SPA, vue js sudah menyediakan router resmi bernama vue router. Vue router ini memungkinkan perpindahan tampilan tanpa melakuan reload halaman. Penggunaan SPA sangat bermanfaat untuk meningkatkan respon sebuah website dan meningkatkan user experience tentunya.
Untuk mengikuti tutorial kali ini, setidaknya kalian sudah tidak bingung lagi menggunakan laravel dan setidaknya pernah menggunakan vue js. Meski begitu, saya akan coba membahasnya semudah mungkin. Dan saya juga merekomendasikan beberapa tutorial di website ini yang berkaitan dengan vue dan laravel untuk kalian pelajari klik linkya Belajar Laravel Belajar vue js
| Baca Artikel Lain ✨ |
| 📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more |
| 📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more |
| 📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more |
Cara Membuat Website SPA dengan Laravel dan Vue
1. Download dan install composer, composer adalah depedency management. Yaitu sebuah alat yang memudahkan kalian untuk mendownload dan mengatur semua library dan aplikasi. Silahkan download di link berikut ini https://getcomposer.org/download 2. Lakukan instalasi laravel terlebih dahulu dengan nama laravel-vue-router atau bebas. Pada saat tutorial ini dibuat, laravel yang saya pakai adalah versi 8. Ikuti panduan berikut ini untuk cara install laravel https://www.duniailkom.com/tutorial-belajar-laravel-cara-menginstall-laravel
3. Setelah proses instalasi selesai, silahkan masuk ke direktori laravel-vue-router. Lalu jalankan perintah di bawah ini untuk mendownload vue, vue-router, vue loader, dan vue-template-compiler.
npm install
npm install vue vue-router vue-loader vue-template-compiler
4. Buat beberapa file dan folder di dalam folder resources/js dengan mengikuti gambar di bawah ini. Setelah semua file telah kita buat, selanjutnya kita akan isi semua filenya satu persatu.
- resources/js
- components
- About.vue
- Contact.vue
- Home.vue
- Navigation.vue
- router
- index.js
- app.js
- bootstrap.js
5. buka file Navigation.vue lalu copy dan paste script berikut ini ke dalam file tersebut
6. Buka file Home.vue lalu copy dan paste script berikut ini ke dalam file tersebut
7. Buka file About.vue lalu copy dan paste script berikut ini ke dalam file tersebut
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<router-link :to="{ name: 'home'}" class="navbar-brand me-5">tulisan saya</router-link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item me-3">
<router-link :to="{ name: 'home'}" class="nav-link">Home</router-link>
</li>
<li class="nav-item me-3">
<router-link :to="{ name: 'about'}" class="nav-link">About</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'contact'}" class="nav-link">Contact</router-link>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
}
</script>
<template>
<div class="container">
<div class="card mt-4" style="border-radius: 25px">
<div
class="card-body"
style="
height: 300px;
background-size: cover;
background-position: center;
background-image: linear-gradient(2deg, black, transparent), url('https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png');
border-radius: 25px;">
<div
style="position: absolute; bottom: 0; margin: 10px"
class="text-white">
<h1>Selamat Datang di tulisan saya</h1>
<h5>Belajar Membuat Aplikasi SPA dengan Laravel dan Vue</h5>
<router-link :to="{ name: 'home' }" class="btn btn-dark me-2 mb-4 mt-3" >Home</router-link>
<router-link :to="{ name: 'about' }" class="btn btn-dark me-2 mb-4 mt-3" >About</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
};
</script>
<template>
<div class="container">
<div class="card mt-4" style="border-radius: 25px">
<div
class="card-body"
style="
height: 300px;
background-size: cover;
background-position: center;
background-image: linear-gradient(2deg, black, transparent),url('https://cdn.pixabay.com/photo/2014/08/05/10/30/iphone-410324_960_720.jpg');
border-radius: 25px;
">
<div
style="position: absolute; bottom: 0; margin: 10px"
class="text-white">
<h1>Tentang tulisan saya</h1>
<p>
tulisan saya adalah situs belajar pemrograman, tutorial blogger dan
wordpress, <br />
tutorial office, dan pembahasan mengenai komputer lainnya.
</p>
<router-link :to="{ name: 'home'}" class="btn btn-dark me-2 mb-4 mt-3">Home</router-link>
<router-link :to="{ name: 'contact'}" class="btn btn-dark me-2 mb-4 mt-3">Contact</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
};
</script> 8. Buka file Contact.vue lalu copy dan paste script berikut ini ke dalam file tersebut
<template>
<div class="container">
<div class="card mt-4" style="border-radius: 25px">
<div
class="card-body"
style="
height: 300px;
background-size: cover;
background-position: center;
background-image: linear-gradient(2deg, black, transparent), url('https://cdn.pixabay.com/photo/2017/10/12/22/17/business-2846221_960_720.jpg');
border-radius: 25px;">
<div style="position: absolute; bottom: 0; margin: 10px;" class="text-white">
<h1>
Kontak tulisan saya
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos doloremque exercitationem laudantium,
</p>
<router-link :to="{ name: 'home'}" class="btn btn-dark me-2 mb-4 mt-3">Home</router-link>
<router-link :to="{ name: 'about'}" class="btn btn-dark me-2 mb-4 mt-3">About</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
export default {
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/contact',
name: 'contact',
component: Contact,
}
]
}
require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './router'
Vue.component('navigation', require('./components/Navigation').default);
const app = new Vue({
el: '#app',
router: new VueRouter(routes),
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Latihan Vue Router</title>
</head>
<body style="background-color: #edf2f7;">
<main id="app">
<navigation></navigation>
<router-view></router-view>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('app');
});
Route::view('/{any}', 'app')->where('any', '.*');
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
14. Sampai tahap ini semua step sudah kita lalui, jalankan perintah npm run dev untuk mengcompile perubahan yang dilakakuan sebelumnya. Jika berhasil maka terminal atau cmd kalian akan menampilkan tampilan berikut ini.
 |
| Menjalankan npm run dev |
Jalankan project dengan menggunakan php artisan serve dan buka di browser dengan menjalankan url ini http://127.0.0.1:8000. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
Sekian tutorial kali ini tentang cara Membuat Web SPA Tanpa Reload dengan Vue Router & Laravel 8. Semoga tutorial ini bermanfaat, jika merasa kesulitan silahkan tanyakan langsung di kolom komentar atau tanya langsung di fanspage tulisan saya. Saya sangat mengharapkan feedback dari kalian semua. Sekian dan sampai jumpa.
Posting Komentar