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.

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

1laravel new laravel-turbo
2cd laravel-turbo
3composer require laravel/breeze --dev
4php artisan breeze:install
5composer require tonysm/turbo-laravel
6php artisan turbo:install --alpine
7npm i && npm run dev
8
bashCopy

Instalasi Laravel dan Breeze

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

1laravel new laravel-turbo
2
bahsCopy

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

1composer require laravel/breeze --dev
2
bashCopy

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

1php artisan breeze:install
2
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.

1php artisan serve
2
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:

1Route::view('blog', 'blog')->name('blog');
2Route::view('contact', 'contact')->name('contact');
3Route::view('about', 'about')->name('about');
4
phpCopy

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

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:

1<!-- Navigation Links -->
2<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
3    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
4        {{ __('Dashboard') }}
5    </x-nav-link>
6    <x-nav-link :href="route('blog')" :active="request()->routeIs('blog')">
7        {{ __('Blog') }}
8    </x-nav-link>
9    <x-nav-link :href="route('about')" :active="request()->routeIs('about')">
10        {{ __('About') }}
11    </x-nav-link>
12    <x-nav-link :href="route('contact')" :active="request()->routeIs('contact')">
13        {{ __('Contact') }}
14    </x-nav-link>
15</div>
16
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:

1<x-app-layout>
2    <x-slot name="header">
3        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
4            {{ __('Contact') }}
5        </h2>
6    </x-slot>
7</x-app-layout>
8
htmlCopy

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

1./
2├── auth/
3├── components/
4├── layouts/
5├── about.blade.php
6├── blog.blade.php
7├── contact.blade.php
8├── dashboard.blade.php
9└── welcome.blade.php
10
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:

1php artisan migrate
2
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:

1composer require tonysm/turbo-laravel
2
bashCopy

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

1php artisan turbo:install
2
bashCopy

Perintah Turbo (Optional)

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

1php artisan turbo:install --jet
2
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:

1php artisan turbo:install --alpine
2
bashCopy

Output yang kita dapat kurang lebih seperti:

1Run: `npm install && npm run dev`
2Ensured a CSRF Token meta tag exists in your layout files.
3
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:

1npm i && npm run dev
2
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

Link Referensi

Berikut adalah link yang terkait pada artikel ini:

• Turbo
• Turbo Laravel
• Taylor's Tweet
• Rendering Inline Blade Templates

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.