Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara installasi Laravel Jetstream dan memahaminya secara mendalam. Sekarang kita lanjutkan untuk menginstall Laravel Jetstream di dalam project Laravel kita sebelumnya.
Langkah 1 - Installasi Laravel Jetstream
Silahkan masuk di dalam folder project dan jalankan perintah berikut ini :
composer require laravel/jetstream
Kemudian silahkan tunggu proses installasi sampai 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
Untuk contohnya jika ingin menggunakan Laravel Livewire kita bisa menjalankan perintah berikut ini :
php artisan jetstream:install livewire
Akan tetapi jika teman-teman 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 artikel kali ini kita akan belajar menggunakan Laravel Livewire sebagai stack-nya dan sekaligus menginstall teams management. Jadi silahkan teman-teman jalankan perintah berikut ini :
php artisan jetstream:install livewire --teams
Silahkan tunggu proses installasi sampai selesai, setelah proses installasi selesai kita bisa lakukan compile assets menggunakan Laravel MIX.
npm install && npm run dev
Langkah 3 - Konfigurasi Database
Setelah proses compiling selesai, sekarang kita bisa menjalankan migration untuk mengenerate bebrapa 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=db_laravel_8
DB_USERNAME=root
DB_PASSWORD=
Di atas kita akan menggunakan nama database db_laravel_8, 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 buka project Laravel kita 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.
Memahami 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 resources/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. Akan tetapi 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
kemudian ada penambahan sebuah 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. Dan lagi-lagi 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 sebuah 2 file configurasi di dalam root project kita, yaitu :
-
webpack.mix.js
-
tailwind.config.js
Kedua file tersebut digunakan untuk proses compiling yang mana uotpunya adalah sebuah file CSS untuk kebutuhan project kita, dimana kita juga bisa melakukan kustomisasi sesuai kebutuhan dan bisa menghapus beberapa plugin jika memang tidak dibutuhkan.
Livewire Components
Jetstream menggunakan beberapa component blade speperti 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 mepublish component tersebut di dalam folder resources/views/vendor/jetstream/.
Application Logo
Jetstream hadir dengan beberapa tampilan seperti Register, Login dan Dashboard. Dimana 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.php
resources/views/vendor/jetstream/components/application-mark.blade.php
Jika kita menggunakan stack Inertia, maka kita bisa melaihatnya di dalam folder :
resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue
Dan jangan lupa setelah perubahan kemudian jalankan perintah berikut ini untuk melakukan rebuilding / recompiling assets.
npm run dev
Dan 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 artikel selanjutnya kita akan membahas arsitektur Authentication di Laravel Jetstream mulai dari proses Register, Login, Reset Password, Two Factor Authentication dan masih banyak lagi.