Tutorial Laravel Jetstream #3 : Installasi Laravel Jetstream


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial  Laravel Jetstream #3 : Installasi Laravel Jetstream

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.


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami