Laravel Jetstram merupakan package yang bersifat open source yang hadir dengan rilisnya Laravel versi 8, Jetstram digunakan untuk membuat scaffolding Authentication di Laravel 8 dengan penambahan banyak fitur, diantaranya adalah :

• Register
• Login
• Email Verififcation
• Two Factor Authentication
• Session Management
• API Support Via Laravel Sanctum
• Dan Optional Team Management

Laravel Jetstream hadir dengan banyak sekali penambahan fitur jika dibandingkan dengan Laravel UI, di Jetstream sendiri kita bisa memilih menggunakan stack apa yang digunakan, yaitu :

• Livewire
• Inertia

Laravel Jetstream dibuat oleh creator Laravel yaitu om Taylor Otwel dan didesain dengan menggunakan Tailwind CSS. Jika kita menggunakan stack Livewire maka kita akan menggunakan sebuah template engine blade. Akan tetapi jika kita menggunakan Inertia maka kita akan menggunakan template Vue component.

Livewire + Blade

Laravel Livewire adalah library yang dibangun untuk membuat modern, reactive dan tampilan dinamis menggunakan template engine blade, merupakan pilihan bagus jika kita ingin membuat aplikasi yang modern dan reactive tanpa harus belajar JavaScript Framework seperti Vue Js dan React Js.

Inertia.js + Vue

Jika Jetstream menggunakan Inertia.js maka akan menggunakan template engine berbasis Vue component. Inertia merupakan libarary yang sangat kecil dan memungkinkan kita merender sebuah component vue secara tunggal dari Backend Laravel.

Dengan Inertia kita dapat membuat aplikasi menggunakan template berbasis Vue tanpa harus susah payah mengkonfigurasi Vue Router, jadi kita bisa langsung menggunakan router standar dari Laravel untuk memanggil component tersebut.

Inertia.js adalah pilihan yang baik jika kita nyaman menggunakan template berbasis Vue untuk mengambangkan aplikasi kita di Laravel.

Installasi Laravel Jetstream

Langkah 1 – Installasi Laravel Jetstream

Silahkan masuk di dalam folder project Laravel yang sudah kita install dan jalankan perintah berikut ini :

composer require laravel/jetstream

Tunggu proses installasi selesai dan pastikan harus terhubung dengan internet. Jika installasi sudah selesai kita bisa mencoba menginstall Laravel Jetstream dengan stack yang ingin kita gunakan.

 

Langkah 2 – Pilihan Stack Laravel Jetstream

Jika ingin menggunakan Laravel Livewire kita bisa menjalankan perintah berikut ini :

php artisan jetstream:install livewire

Akan tetapi jika kita ingin menggunakan Inertia, bisa jalankan perintah berikut ini :

php artisan jetstream:install inertia

Dan jika kita ingin sekaligus menginstall untuk management team kita bisa tambahkan flag — teams. Maka kurang lebih menjadi seperti berikut ini :

php artisan jetstream:install livewire --teams

php artisan jetstream:install inertia --teams

Dalam contoh tutorial ini kita akan belajar menggunakan Laravel Livewire sebagai stack-nya dan sekaligus menginstall teams management. Jadi silahkan jalankan perintah berikut ini :

php artisan jetstream:install livewire --teams

Tunggu proses installasi sampai selesai, setelah proses installasi selesai kita bisa lakukan compile assets menggunakan Laravel MIX.

npm install && npm run dev

Jika perintah di atas tidak berhasil, jalankan perintahnya satu persatu, seperti berikut :

npm install

npm run dev

Langkah 3 – Konfigurasi Database

Setelah proses compiling selesai, sekarang kita bisa menjalankan migration untuk mengenerate beberapa table ke dalam database. Pertama kita akan lakukan konfigurasi koneksi database terlebih dahulu. Silahkan buka file .env kemudian cari kode berikut ini :

DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Kemudian ubah menjadi seperti berikut ini :

DB_DATABASE=datasekolah
DB_USERNAME=root
DB_PASSWORD=

Di atas kita akan menggunakan nama database datasekolah, setelah itu silahkan buat database tersebut di dalam http://localhost/phpmyadmin. Setelah database berhasil dibuat, silahkan jalankan perintah berikut ini :

php artisan migrate

Sekarang jika kita jalankan project Laravel kita dengan terlebih dahulu menjalankan servernya dengan pertintah :

php artisan serve

Setelah itu akses melalui browser dengan alamat http://localhost:8000, maka di bagian kanan atas kita sudah memiliki link untuk Login dan Register.

Sekarang kita bisa mencobanya dengan melakukan registrasi user baru kemudian login menggunakan akun tersebut.

 

Struktur Laravel Jetstream

Views/Pages

Ketika kita menggunakan stack Laravel Livewire, saat intstalasi Jetstream akan mempublikasi berbagai tampilan dan beberapa class dan tampilan tersebut akan diletakkan di dalam folder resourcers/views. Jika kita menggunakan Inertia, maka tampilan tersebut akan di publish di dalam folder resources/js/Pages.

Tampilan tersebut merupakan isi dari semua fitur yang ada di dalam Jetstream, dan kita bisa dengan bebas kustomisasi sesuai dengan kebutuhan. Jetstream membuat kita lebih mudah dalam hal kustomisasi baik secara tampilan dan yang lainnya.

 

Dashboard

Untuk halaman dashboard, jika kita menggunakan Laravel Livewire maka akan diletakan di dalam folder resources/views/dasshboard.blade.php. Jika kita menggunakan Inertia maka halman dashboard tersebut akan di letakkan di dalam folder resources/js/Pages/Dashboard.vue. Disini kita bebas melakukan kustomisasi untuk tampilan dashboard dari main project kita.

 

Actions

Class action yang berada di dalam folder app/Actions. Class action ini biasanya melakukan single action sesuai dengan fitur Jetstream. Seperti contoh membuat team dan menghapus seorang user, kita bisa dengan bebas melakukan perubahan terhadap behavior dari backend Jetstream.

 

Tailwind CSS

Saat proses installasi, Jetstream akan melakukan sebuah scaffolding dengan mengintegrasikannya dengan Tailwind CSS, dimana akan membuat 2 file configurasi di dalam root project kita, yaitu :

• • webpack.mix.js
  • tailwind.config.js

Kedua file tersebut digunakan untuk proses compiling yang mana outputnya adalah sebuah file CSS untuk kebutuhan project kita, kita juga bisa melakukan kustomisasi sesuai kebutuhan dan bisa menghapus beberapa plugin jika memang tidak dibutuhkan.

 

Livewire Components

Jetstream menggunakan beberapa component blade seperti button, modal dan yang lainnya, kita bisa melakukan perubahan terhadap component-component tersebut setelah proses installasi Jetstream selesai, yaitu dengan menjalankan perintah berikut ini :

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

Maka akan secara otomatis mempublish component tersebut di dalam folder resources/views/vendor/jetstream/.

Application Logo

Jetstream hadir dengan beberapa tampilan seperti Register, Login dan Dashboard. Di halaman tersebut terdapat sebuah logo yang bisa kita sesuaikan sendiri, jika kita ingin merubahnya kita bisa merubahnya melalui component yang sudah kita publish sebelumnya. yang kurang lebih tempatnya di :

resources/views/vendor/jetstream/components/application-logo.blade.phpresources/views/vendor/jetstream/components/application-mark.blade.php

Jika kita menggunakan stack Inertia, maka kita bisa melaihatnya di dalam folder :

resources/js/Jetstream/ApplicationLogo.vueresources/js/Jetstream/ApplicationMark.vue

Jangan lupa setelah perubahan kemudian jalankan perintah berikut ini untuk melakukan rebuilding / recompiling assets.

npm run dev

Sekarang kita sudah bisa menggunakan Laravel Jetstream di dalam project kita, mulai dari melakukan proses registrasi, login, reset password, update profile, management teams dan masih banyak lagi.

Di tutorial selanjutnya kita akan membahas arsitektur Authentication di Laravel Jetstream mulai dari proses Register, Login, Reset Password, Two Factor Authentication dan masih banyak lagi.

 

Referensi :

• https://santrikoding.com/apa-itu-laravel-jetstream