Laravel dengan Turbo

Jika Anda berfikir ingin menggunakan Laravel tetapi ingin tetap mendapatkan fitur yang namanya "Single Page Application", maka sepertinya turbo adalah jawaban nya.

5 min read

Published on 09 Nov, 2022 (updated: 19 Nov, 2022)

Written by Irsyad A. Panjaitan

Fill in LaravelPackage

ArticlesLaravel dengan Turbo

Jika Anda berfikir ingin menggunakan Laravel tetapi ingin tetap mendapatkan fitur yang namanya "Single Page Application", maka sepertinya turbo adalah jawaban nya.

Dalam artikel ini, saya berfikir ingin menggunakan yang namanya breeze dan package yang telah dibuat oleh Tonysm. Package ini adalah package yang juga di dukung oleh komunitas laravel termasuk Taylor sendiri.

TL;DR

laravel new laravel-turbo cd laravel-turbo composer require laravel/breeze --dev php artisan breeze:install composer require tonysm/turbo-laravel php artisan turbo:install --alpine npm i && npm run dev
bashCopy

Instalasi Laravel dan Breeze

Kita akan mulai dari awal ya, install dulu laravel nya.

laravel new laravel-turbo
bahsCopy

Setelah itu, install laravel breeze agar kita mendapatkan boilerplate blade componen untuk playground kita.

composer require laravel/breeze --dev
bashCopy

Setelah itu, silakan install langsung breeze nya dengan perintah breeze:install seperti:

php artisan breeze:install
bashCopy

Dengan perintah di atas, maka dia akan melakukan npm i && npm run build, sehingga jika perintah itu sudah selesai, Anda bisa langsung buka di browser.

php artisan serve
bashCopy

Kita Butuh Beberapa Halaman

Sebelum kita melakukan instalasi dari turbo nya, mari kita buat dulu 3 halaman untuk contoh saja, buka routes/web.php. Silakan tambahkan 3 route seperti berikut:

./routes/web.php
Route::view('blog', 'blog')->name('blog'); Route::view('contact', 'contact')->name('contact'); Route::view('about', 'about')->name('about');
phpCopy

Untuk lebih lengkapnya, saya sudah memodifikasi route yang telah di bawa laravel breezenya, jadi sekarang keseluruhan untuk route nya kurang lebih seperti:

./routes/web.php
1<?php 2 3use Illuminate\Support\Facades\Route; 4 5Route::view('/', 'welcome')->name('welcome'); 6 7Route::middleware(['auth', 'verified'])->group(function () { 8 Route::view('dashboard', 'dashboard')->name('dashboard'); 9 Route::view('blog', 'blog')->name('blog'); 10 Route::view('contact', 'contact')->name('contact'); 11 Route::view('about', 'about')->name('about'); 12}); 13 14require __DIR__ . '/auth.php'; 15
phpCopy

Setelah itu, mari kita buka dulu navigation.blade.php dan tambahkan 3 menu seperti:

./resources/views/layouts/navigation.blade.php
<!-- Navigation Links --> <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"> <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')"> {{ __('Dashboard') }} </x-nav-link> <x-nav-link :href="route('blog')" :active="request()->routeIs('blog')"> {{ __('Blog') }} </x-nav-link> <x-nav-link :href="route('about')" :active="request()->routeIs('about')"> {{ __('About') }} </x-nav-link> <x-nav-link :href="route('contact')" :active="request()->routeIs('contact')"> {{ __('Contact') }} </x-nav-link> </div>
htmlCopy

Jangan lupa untuk membuat file dari route yang telah kita buat yaitu {blog,about,contact}.blade.php, untuk lebih cepatnya, silakan duplikasi aja file dari dashboard.blade.php dan modifikasi dalamnya seperti:

./resources/views/contact.blade.php
<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> {{ __('Contact') }} </h2> </x-slot> </x-app-layout>
htmlCopy

Berarti untuk structur folder di dalam views kurang lebih seperti ini sekarang

./ ├── auth/ ├── components/ ├── layouts/ ├── about.blade.php ├── blog.blade.php ├── contact.blade.php ├── dashboard.blade.php └── welcome.blade.php
bashCopy

Migrate

Jika semua sudah selesai, maka kita lihat hasilnya di browser, dan harusnya Anda akan melihat hal tersebut jika sudah melakukan yang namanya login, jika database Anda belum di setup, silakan buka terminal Anda dan jalankan perintah berikut:

php artisan migrate
bashCopy

Jika ada pertanyaan untuk membuat database baru, silakan tekan y saja kemudian enter. Setelah itu, Anda bisa lakukan login agar kita dapat melihat menu yang kita tambahkan tadi pada navigation.blade.php.

Oia, jangan lupa jalankan perintah npm run dev ya, takutnya tidak ada perubahan yang Anda lihat hanya gara-gara perintah itu tidak jalan. Jika perlu, silakan restart npm run nya.

Jika semua berhasil, paling tidak sekarang tampilan nya kurang lebih seperti gambar berikut ini:

Jika Anda coba klik antar menu yang telah kita buat, maka itu akan masih me-refresh halamanya setiap berpindah. Yang mana itu sebenarnya yang tidak kita mau. Disini lah kita butuh yang namanya turbo ini.

Instalasi Turbo

Sebelum kita mulai, pastikan dulu npm run dev telah Anda matikan, karena kita jalankan itu lagi setelah kita selesai melakukan instalasi dari turbo ini. Buka terminal Anda kembali, dan lakukan instalasi dari turbo nya seperti:

composer require tonysm/turbo-laravel
bashCopy

Setelah itu, maka kita bisa install turbo nya dengan cara seperti:

php artisan turbo:install
bashCopy

Perintah Turbo (Optional)

Jika Anda sedang memakai jetstream dengan livewire, maka perintah di atas Anda ganti dengan menambahkan flag --jet seperti:

php artisan turbo:install --jet
bashCopy

Jika Anda tidak memakai jetstream, namun hanya memakai livewire, harusnya opsi dibawah adalah jawabannya.

Atau, karena kita tidak sedang menggunakan jetstream, tapi kita ingin menggunakan Alpine, kita bisa lakukan seperti:

php artisan turbo:install --alpine
bashCopy

Output yang kita dapat kurang lebih seperti:

Run: `npm install && npm run dev` Ensured a CSRF Token meta tag exists in your layout files.
bashCopy

Perhatikan baik-baik, bahwa disini dia menyuruh kita melakukan npm i, kalau aja dia langsung melakukan perintah itu tanpa harus menyuruh kita harusnya lebih oke. Seperti layaknya perintah breeze:install, tapi ya udala ya, mari kita ikuti untuk menjankan perintah itu:

npm i && npm run dev
bashCopy

Dan sekarang, refresh di browser Anda. Dan silakan berpindah dari halaman 1 ke halaman 2, harusnya tidak akan ada lagi refresh antar halaman yang kita pilih. Kita seakan akan memakai teknik SPA disini, padahal kita masih menggunakan blade yang itu sangat luar biasa.

Jangan lupa, jika Anda sudah di mode production, lakukan npm run build.

Laravel Updates

Pada update laravel yang terakhir, kita juga di untungkun dengan @fragment directive yang baru saja di tambahkan ke Laravel versi 9.39. Taylor juga bilang pada tweet nya tentang ini.

Today's Laravel release allows you to return only a "fragment" of a Blade template. Useful for those of you utilizing Turbo, HTMX, Unpoly, etc.

Taylor Otwell

Berikut adalah link yang terkait pada artikel ini:

Semoga artikel ini bermanfaat, jika Anda suka artikel ini. Silakan share ke teman-teman Anda, atau jika Anda ingin membuat artikel sendiri, bisa langsung disini ya. Saya Irsyad, dan kita akan ketemu lagi di artikel selanjutnya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
7

Share on