Artikel

Vue dan Laravel: buat Aplikasi Satu Halaman

Laravel adalah salah satu framework PHP yang paling populer digunakan oleh developer, mari kita lihat hari ini cara membuat Aplikasi Satu Halaman dengan VueJs.

Sebelum peluncuran Laravel UI, salah satu fitur utamanya adalah pre supportdefimalam untuk Vue.js dari Laravel v5.3 ke v6. Vue adalah framework frontend JavaScript modern yang digunakan untuk membangun antarmuka pengguna.

Mengapa menginstal Laravel dan Vue bersamaan?

Berikut adalah beberapa manfaat utama menggunakan Laravel dengan Vue untuk membuat alur kerja lengkap untuk proyek Anda:

Kode sumber digabungkan menjadi satu proyek, alih-alih memiliki proyek terpisah untuk backend dan frontend
Instalasi dan konfigurasi sederhana
Distribusi tunggal dapat mengelola kedua kerangka kerja secara bersamaan

Apa itu SPA? (aplikasi satu halaman)

sebuah aplikasi satu halaman (disingkat SPA) secara dinamis memuat data baru dari server web ke halaman web tanpa harus me-refresh seluruh halaman.

Contoh situs web populer yang menggunakan SPA adalah gmail.com dan youtube.com – dengan kata lain, SPA ada di mana-mana. Sebagian besar dasbor admin yang mungkin Anda gunakan setiap hari dibuat menggunakan SPA.

Keuntungan SPA:

Pengalaman pengguna lebih fleksibel
Data cache di browser
Waktu pemuatan cepat

Kekurangan SPA:

Dapat membahayakan SEO (pengoptimalan mesin telusur)
Potensi masalah keamanan
Ini menghabiskan banyak sumber daya browser

Konfigurasi proyek di Laravel

Posting ini akan menunjukkan cara mengembangkan aplikasi agenda yang memungkinkan pengguna mendaftar akun dan menambahkan tugas.

Untuk tutorial ini, Laravel 9 digunakan, yang membutuhkan PHP 8.1 dan Vue 3; kita juga perlu menginstal PHP dan NGINX.

Kita mulai dengan perintah berikut:

composer create-project --prefer-dist laravel/laravel laravel-vue-combo

Selanjutnya, kita akan menginstal dependensi JavaScript.

npm install

Kita perlu menginstal beberapa paket sebelum kita dapat menambahkan Vue ke proyek kita.

Juga, plugin-vue harus diinstal, karena Laravel 9 dikirimkan dengan Vite, bukan webpack-mix, yang merupakan bundler Laravel sebelumnya untuk JavaScript. Ayo kita lakukan sekarang:

npm install vue@next vue-loader@next @vitejs/plugin-vue

Buka file bernama vite.config.js dan tambahkan vue() ke konfigurasi:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Edit file app.js dan cuplikan bootstrap untuk aplikasi Vue 3:

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Buat file bernama App.vue dan tambahkan yang berikut ini:

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

Terakhir, buka file tersebut welcome.blade.php terletak di folder resources/views dan tambahkan yang berikut ini:

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

Untuk mempratinjau aplikasi kita, kita perlu memulai aplikasi Vue dan server Laravel kita di dua terminal/baris perintah yang berbeda:

npm run dev


php artisan serve

Untuk membuat aplikasi agenda kami, kami perlu membuat file lain. Vue akan membuat banyak halaman, terutama:

akses
untuk pendaftaran
Sebuah halaman rumah

Untuk berkomunikasi dengan Laravel endpoint, kita perlu menginstal Axios:

npm install axios

perutean vue

Menggunakan paket vue-router, ada berbagai strategi routing yang bisa digunakan di Vue; strategi ini juga dikenal sebagai history models.

Saat pengguna meminta route seperti http://localhost:8000/home, yang akan mengembalikan error 404 saat halaman di-refresh, kita dapat mengandalkan Laravel untuk mendeteksi rute fallback dan kemudian menyajikan file Blade yang berisi aplikasi kita.

Untuk alasan ini, kami akan menggunakan mode HTML5:

Route::get('/{vue_capture?}', function() {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('./pages/Login.vue')
        },
        {
            path: '/register',
            component: () => import('./pages/Register.vue')
        },
        {
            path: '/home',
            component: () => import('./pages/Home.vue')
        }
    ],
})

Dalam contoh ini kami menangani otentikasi menggunakan Tempat Suci Laravel, kemudian token disimpan di penyimpanan lokal.

Agar permintaan lain berhasil, token digabungkan ke dalam header, yang memungkinkan pengguna membuat permintaan untuk diidentifikasi oleh Laravel.

Berikut adalah blok kode terkait untuk keduanya:

<!--Login.vue-->
<template>
    <div class="mx-auto w-4/12 mt-10 bg-blue-200 p-4 rounded-lg">
        <div
            class="bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-2 flex flex-col"
        >
            <h1 class="text-gray-600 py-5 font-bold text-3xl"> Login </h1>
            <ul class="list-disc text-red-400" v-for="(value, index) in errors" :key="index" v-if="typeof errors === 'object'">
                <li>{{value[0]}}</li>
            </ul>
            <p class="list-disc text-red-400" v-if="typeof errors === 'string'">{{errors}}</p>
            <form method="post" @submit.prevent="handleLogin">
            <div class="mb-4">
                <label
                    class="block text-grey-darker text-sm font-bold mb-2"
                    for="username"
                >
                    Email Address
                </label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
                    id="username"
                    type="text"
                    v-model="form.email"
                    required
                />
            </div>
            <div class="mb-4">
                <label
                    class="block text-grey-darker text-sm font-bold mb-2"
                    for="password"
                >
                    Password
                </label>
                <input
                    class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
                    id="password"
                    type="password"
                    v-model="form.password"
                    required
                />
            </div>
            <div class="flex items-center justify-between">
                <button
                    class="bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
                    type="submit"
                >
                    Sign In
                </button>
                <router-link
                    class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
                    to="register"
                >
                    Sign Up
                </router-link>
            </div>
            </form>
        </div>
    </div>
</template>

export default {
    setup() {
        const errors = ref()
        const router = useRouter();
        const form = reactive({
            email: '',
            password: '',
        })
        const handleLogin = async () => {
            try {
                const result = await axios.post('/api/auth/login', form)
                if (result.status === 200 && result.data && result.data.token) {
                    localStorage.setItem('APP_DEMO_USER_TOKEN', result.data.token)
                    await router.push('home')
                }
            } catch (e) {
                if(e && e.response.data && e.response.data.errors) {
                    errors.value = Object.values(e.response.data.errors)
                } else {
                    errors.value = e.response.data.message || ""
                }
            }
        }

        return {
            form,
            errors,
            handleLogin,
        }
    }
}

Ercole Palmeri

Anda mungkin juga tertarik dengan ...