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)

	<svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
	<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
	fill="#000000" stroke="none">
	<path d="M198 469 c-21 -3 -58 -19 -84 -35 -126 -78 -142 -263 -32 -366 l30
	-28 41 21 c105 54 203 199 214 317 5 56 4 58 -23 71 -40 19 -102 28 -146 20z"/>
	<path d="M2172 433 c-46 -60 -132 -189 -132 -200 0 -13 -44 -53 -58 -53 -26 0
	-6 60 53 157 33 54 45 103 27 103 -14 0 -49 -43 -71 -88 -12 -23 -26 -40 -32
	-36 -19 11 -59 -6 -99 -42 -22 -20 -40 -41 -40 -48 0 -12 -39 -40 -47 -33 -2
	3 10 30 28 62 24 42 29 59 20 68 -8 8 -28 -6 -78 -56 -37 -37 -70 -67 -75 -67
	-16 0 -8 20 15 34 12 8 30 29 40 46 l18 30 -30 0 c-22 0 -37 -9 -55 -33 -15
	-19 -26 -39 -26 -45 0 -6 -9 -16 -20 -22 -23 -13 -25 -5 -5 30 39 67 -2 67
	-71 -1 -29 -28 -57 -50 -64 -47 -18 6 25 55 76 84 51 30 58 54 15 54 -19 0
	-47 -14 -81 -41 -50 -39 -51 -42 -48 -86 4 -60 25 -75 69 -49 30 18 31 18 20
	0 -5 -11 -26 -34 -46 -53 -33 -32 -54 -75 -42 -87 14 -15 52 13 82 61 31 48
	87 105 103 105 4 0 13 -9 20 -20 16 -26 30 -25 62 5 l26 25 -1 -27 c0 -36 15
	-38 59 -8 43 29 46 30 46 11 0 -7 6 -18 13 -24 15 -13 51 7 77 42 14 20 15 19
	20 -18 6 -49 19 -54 59 -20 31 26 32 26 46 8 14 -18 17 -16 60 31 l45 50 -16
	-39 c-26 -66 0 -87 54 -41 34 29 42 31 42 10 0 -21 44 -47 66 -39 10 4 32 19
	47 33 24 22 29 23 37 11 5 -8 10 -21 10 -27 0 -8 13 -13 29 -13 21 0 38 10 60
	35 45 52 42 73 -6 35 -32 -25 -40 -25 -48 0 -4 13 6 35 36 72 67 84 92 168 51
	168 -26 0 -97 -99 -117 -163 -19 -59 -54 -97 -91 -97 -35 0 -29 22 13 45 20
	11 46 32 57 48 18 25 19 29 5 43 -31 30 -70 7 -162 -95 -51 -56 -65 -36 -17
	24 23 29 28 41 19 51 -19 24 -40 16 -85 -33 -62 -67 -63 -48 -1 28 67 83 117
	154 117 168 0 6 -11 11 -24 11 -16 0 -34 -13 -54 -37z m303 -98 c-10 -19 -22
	-35 -27 -35 -5 0 2 18 14 39 28 48 40 44 13 -4z m-153 -77 c-12 -12 -25 -18
	-29 -14 -4 4 3 16 16 27 31 25 41 15 13 -13z m-407 -33 c-47 -40 -55 -43 -48
	-15 6 21 47 49 73 49 8 1 -3 -15 -25 -34z"/>
	<path d="M1010 393 c-16 -26 -32 -54 -35 -62 -3 -10 -17 -16 -39 -17 -40 -1
	-103 -44 -116 -79 -8 -21 -37 -45 -54 -45 -13 0 -5 38 9 50 9 7 15 20 13 29
	-1 9 1 22 6 29 5 9 2 20 -7 30 -15 14 -20 14 -59 -4 -24 -10 -60 -34 -80 -53
	-31 -27 -38 -40 -38 -71 0 -23 7 -43 19 -54 17 -16 20 -15 50 9 l31 27 0 -26
	c0 -35 35 -35 72 1 l28 26 21 -27 22 -27 33 32 34 33 0 -25 c0 -24 16 -49 32
	-49 4 0 23 14 43 32 35 30 36 30 42 10 8 -31 39 -37 77 -14 32 19 32 19 42 -2
	5 -11 16 -22 25 -24 18 -3 97 52 106 74 10 25 -4 27 -36 3 -40 -29 -49 -19
	-31 34 11 30 21 43 36 45 33 5 56 37 60 82 4 48 -14 54 -50 15 -13 -14 -33
	-25 -44 -25 -26 0 -52 -25 -52 -50 0 -13 5 -17 15 -14 27 11 16 -12 -25 -55
	-38 -39 -80 -55 -80 -28 1 6 14 28 30 47 36 41 38 60 7 60 -26 0 -71 -43 -81
	-77 -4 -11 -18 -29 -33 -38 -51 -34 -47 26 7 110 34 51 61 115 55 125 -12 19
	-26 10 -55 -37z m-310 -168 c-35 -36 -64 -47 -53 -20 6 18 74 67 82 60 2 -3
	-11 -21 -29 -40z m208 -1 c-40 -36 -61 -44 -51 -19 7 19 74 67 82 59 3 -3 -11
	-21 -31 -40z"/>
	<path d="M422 246 c-40 -77 -119 -155 -196 -193 -31 -15 -56 -30 -56 -34 0 -4
	17 -9 37 -11 153 -18 283 112 265 265 -2 20 -7 37 -11 37 -3 0 -21 -29 -39
	-64z"/>
	</g>
	</svg>

view raw application-logo.blade.php hosted with ❤ by GitHub

Ganti Logo Aplikasi Jetstream (SVG)