Laravel 8 Jetstream Livewire + Blade

Salah satu fitur baru Laravel versi 8 adalah Laravel Jetstream. Laravel Jetstream menggantikan scafolding built in otentifikasi laravel yang lama, dilengkapi dengan fitur two factor authentification (2FA) dan session management (berguna untuk menghapus session yang aktif jika melakukan login di browser yang berbeda) serta dilengkapi dukungan API Laravel Sanctum. Laravel jetstream mendukung 2 stack teknologi dalam implementasinya, bisa menggunakan Liveware + Blade atau Inertia.js + Vue. Pada tutorial ini kita akan mencoba menggunakan Livewire + Blade, untuk dapat menginstall laravel 8 dibutuhkan php versi 7.3+ beserta ekstensi php yg dibutuhkan laravel, node js dan npm (node package manager), selengkapnya dapat dibaca pada halaman dokumentasi instalasi laravel.

Buat Database Baru (MySQL)

# Buat database baru menggunakan mysql dengan nama database jetstream
$ mysql -uroot -p
# Masukan root password mysql
mysql> create database jetstream;
mysql> exit

Instalasi Jetstream

Untuk menggunakan fitur jetstream, gunakan argumen --jet setelah nama project. Tutorial ini menggunakan nama project "jetstream" untuk nama project laravelnya.

$ laravel new jetstream --jet
> 0 (Untuk livewire)
> no (Jika aplikasi tidak digunakan untuk tim)
$ cd jetstream
$ npm install && npm run dev
# Buka file .env di root aplikasi dan konfigurasi username, password dan nama database
DB_DATABASE=jetstream
DB_USERNAME=root
DB_PASSWORD=<MYSQL_PASSWORD>
$ php artisan migrate
$ php artisan serve
# Buka browser ketikkan alamat url localhost:8000

Laravel Jetstream running on Valet

Registrasi User Baru

Halaman Dashboard Jetstream

Browser Session Management

Enable Two Factor Authentification

Two Authentification Challenge On Login

Struktur Jetstream

• Views / Pages
• Jika menggunakan Livewire views terletak pada direktori resources/views, jika menggunakan Inertia views terletak pada direktori resources/js/Pages

• Dashboard (Halaman Utama)
• View halaman utama / dashboard terletak pada direktori resources/views/dashboard.blade.php jika menggunakan Livewire dan resoureces/js/Pages/Dashboard.vue jika menggunakan Inertia

• Actions
• Aksi / actions class terdapat pada direktori app/Actions. Class pada direktori ini merupakan bawaan laravel yg terdiri dari 2 component Fortify dan Jetstream. Aksi standar contohnya untuk membuat user baru, update password, update profil dan menghapus user. 
• Tailwind
• Tailwind digunakan untuk melakukan kompilasi CSS atau assets aplikasi. File konfigurasi tailwind terletak pada tailwind.config.js
• Livewire Component
• Jetstream menggunakan berbagai macam komponen blade seperti button atau modal untuk mendukung teknologi Liverwire. Kita dapat publish komponen Livewire supaya dapat dikustomisasi tampilannya dengan menggunakan artisan command 

php artisan vendor:publish --tag=jetstream-views

Mengganti Logo Aplikasi

Jetstream menggunakan svg untuk logo pada aplikasi baik pada halaman otentifikasi ataupun pada navbar aplikasi. Untuk dapat mengganti custom logo aplikasi, ubahlah file-file berikut :

• resources/views/vendor/jetstream/components/application-logo.blade.php
• resources/views/vendor/jetstream/components/authentification-card-logo.blade.php
• resources/views/vendor/jetstream/components/application-mark.blade.php

Contoh script ganti logo aplikasi (resources/views/vendor/jetstream/components/application-logo.blade.php)

Ganti Logo Aplikasi Jetstream (SVG)