Membuat Web SPA Tanpa Reload dengan Vue Js & Laravel

Halo semuanya, kembali lagi di sahretech. 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

    

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <router-link :to="{ name: 'home'}" class="navbar-brand me-5">Sahretech</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>

6. Buka file Home.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/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 Sahretech</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>

7. Buka file About.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/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 Sahretech</h1>
              <p>
                Sahretech 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 Sahretech
            </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>

9. Buka router/index.js copy dan paste script berikut ini ke dalam file tersebut. Semua halaman harus kita daftarkan disini agar dapat ditampilkan saat link diklik.



    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,
            }
        ]
    }

10. Buka resources/js/app.js lalu copy dan paste script berikut ini ke dalam file tersebut

    

    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),
    });

11. Buka resources/view lalu buat file dengan nama app.blade.php. Lalu copy dan paste script di bawah ini

    

    <!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>

12. Buka routes/web.php lalu ubah script di dalam file tersebut dengan script yang ada di bawah ini

    

    <?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', '.*');

13. Buka file webpack.mix.js lalu ubah script di dalam file tersebut dengan script yang ada di bawah ini




    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.

Cara membuat web spa dengan laravel dan vue

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 sahretech. Saya sangat mengharapkan feedback dari kalian semua. Sekian dan sampai jumpa.

Sahretech

Membuat Web SPA Tanpa Reload dengan Vue Router & Laravel

Cara Membuat Website SPA dengan Laravel dan Vue

No comments

Kategori Pemrograman

Popular

Facebook