Tutorial CRUD Laravel Livewire SPA #4 : Install Turbolinks - Halo teman-teman semuanya, pada tutorial kali ini kita semua akan belajar bagaimana cara menginstall Package yang bernama Turbolinks.
Apa itu Turbolinks ?
Turbolinks adalah library JavaScript untuk membuat sebuah navigasi website / aplikasi kita menjadi cepat tanpa harus melakukan reload halaman atau biasanya disebut Single Page Application (SPA).
Fitur-fitur Turbolinks
-
Mengoptimalkan navigasi secara otomatis. Tidak perlu menganotasi tautan atau menentukan bagian halaman mana yang harus diubah.
-
Tidak ada kerjasama sisi server yang diperlukan. Merespon dengan halaman HTML penuh, bukan halaman parsial fragmen atau JSON.
-
Menghormati web. Tombol Back dan reload bekerja seperti yang Anda harapkan. Search Engine Friendly.
-
Mendukung aplikasi mobile. Adapter untuk iOS dan Android memungkinkan Anda membangun aplikasi hibrida menggunakan kontrol navigasi asli.
Dengan bantuan Turbolinks ini nanti, aplikasi kita akan menjadi SPA atau Single Page Application, jadi berpindah-pindah dari satu halaman ke halaman yang yang tanpa harus melakukan reload page/halaman.
Untuk teman-teman yang penasaran, bisa melihat atau mempelajarinya dari repositori pengembangannya di : https://github.com/turbolinks/turbolinks
Langkah 1 - Installasi Turbolinks
Untuk proses installasi Turbolinks di aplikasi kita, silahkan teman-teman jalankan perintah dibawah ini :
npm install
npm install --save turbolinks
Silahkan ditunggu proses installasi sampai dengan selesai, proses installasi ini membutuhkan koneksi internet.
Langkah 2 - Konfigurasi Turbolinks
Setelah proses installasi selesai, sekarang kita akan melakukan konfigurasi dari Turbolinks di aplikasi kita agar bisa berjalan dengan baik.
Silahkan teman-teman buka file resources/js/app.js dan ubahlah kodenya menjadi seperti berikut ini :
require('./bootstrap');
var Turbolinks = require("turbolinks")
Turbolinks.start()
Dari perubahan diatas, kita menambahkan beberapa baris kode dari Turbolinks itu sendiri.
Langkah 3 - Laravel MIX
Setelah kita berhasil menambahkan beberapa kode Turbolinks di app.js, langkah selanjutnya adalah mengcompile file JavaScript kita menggunakan Laravel MIX.
Silahkan teman-teman jalankan perintah dibawah ini :
npm run watch
Silahkan ditunggu proses compile file-file JavaScript sampai dengan selesai.
Langkah 4 - Memasang Turbolinks
Selanjutnya kita akan memasang file app.js hasil compile kita ke dalam layout aplikasi, silahkan teman-teman buka file resources/views/layouts/app.blade.php dan silahkan teman-teman ganti kodenya menjadi seperti berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Livewire SPA - SantriKoding.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<livewire:styles/>
<livewire:scripts/>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row justify-content-center">
<div class="col-md-12">
<!-- flash message -->
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<!-- end flash message -->
<!-- component -->
@yield('content’)
<!-- end component -->
</div>
</div>
</div>
<!-- javascript -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Dari perubahan yang kita lakukan, disini kita menambahkan 3 bagian, diantaranya :
-
Flas Message ini akan kita gunakan untuk menampilkan notifikasi/message dari aplikasi kita untuk proses insert data, edit & update data serta delete data.
-
Yeild Section ini akan kita gunakan untuk memanggil component dari Livewire nantinya.
-
Untuk app.js ini adalah file dari hasil compile beberapa JavaScript termasuk Turbolinks.
SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA
KESIMPULAN
Pada tutorial kali ini kita semua telah belajar bagaimana cara menginstall Turbolink, kemudian konfigurasi dan memanggil Turbolinks di aplikasi kita.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih