Autentikasi adalah proses verifikasi identitas pengguna untuk memastikan user yang masuk adalah user yang diberi izin. Dalam konteks aplikasi web, ini umumnya melibatkan proses masuk (login) di mana pengguna memberikan kredensial (seperti nama pengguna dan kata sandi) yang kemudian dicocokkan dengan data yang disimpan di database. Setelah terautentikasi, pengguna diberikan akses ke area atau fitur tertentu yang dilindungi.
Mengapa Autentikasi Penting?
Autentikasi sangat penting untuk keamanan dan personalisasi aplikasi. Tanpa autentikasi, tidak ada cara untuk:
- Melindungi data sensitif dari akses tidak sah.
- Mengelola hak akses (misalnya, membedakan antara pengguna biasa dan administrator).
- Menyimpan preferensi atau riwayat pengguna.
- Mencegah penyalahgunaan layanan.
Laravel Breeze: Solusi Autentikasi Modern
Laravel Breeze adalah sebuah paket starter kit yang disediakan oleh Laravel. Fungsinya adalah untuk mengotomatiskan dan menyederhanakan proses pembuatan sistem autentikasi. Daripada harus menulis semua controller, route, view, dan logic dari awal sekali, Breeze menyediakan semua yang dibutuhkan "di luar kotak" (out-of-the-box).
Fitur Utama Laravel Breeze:
- Minimalis: Breeze menyediakan fitur-fitur autentikasi esensial saja, seperti registrasi, login, reset kata sandi, verifikasi email, dan konfirmasi kata sandi.
- Pilihan Stack: Breeze mendukung berbagai stack frontend, termasuk Blade (dengan Tailwind CSS), React, dan Vue, memungkinkan pengembang memilih teknologi yang paling sesuai dengan kebutuhan mereka.
- Kode yang Mudah Dipahami: Kode yang dihasilkan oleh Breeze sangat ringkas dan mudah dipahami, menjadikannya pilihan ideal untuk pemula yang ingin belajar cara kerja sistem autentikasi di Laravel. Ini juga memudahkan kustomisasi sesuai kebutuhan.
- Cepat: Dengan perintah artisan, Breeze dapat diinstal dan dijalankan dalam hitungan menit, menghemat waktu pengembangan secara signifikan.
Dengan menggunakan Laravel Breeze, pengembang dapat dengan cepat menyiapkan dasar autentikasi yang aman dan fungsional, kemudian fokus pada pembangunan fitur-fitur inti dari aplikasi mereka.
Memasang Breeze di Laravel
Langkah pertama adalah memastikan Anda memiliki proyek Laravel 12. Cara memasang Laravel dapat anda dilihat diartikel sebelumnya. Klik Disini. Anda juga dapat melanjutkan proyek yang sebelumnya kita buat di CRUD. disini kita akan melanjutnkan saja, jadi tidak perlu memasang laravel 12 lagi.
Setelah proyek dibuat, masuk ke direktori proyek dan instal Laravel Breeze, sebuah package yang menyediakan implementasi autentikasi yang ringan dan minimalis. Breeze akan meng-generate semua view, route, dan controller yang diperlukan untuk proses otentikasi. Silahkan buka terminal di vsCode dan ketikkan perintah ini:
composer require laravel/breeze --dev
Tungguk prose download hingga selesai, setelah itu mari kita memasang breeze tadi menggunakan artisan. Ketikkan perintah berikut untuk menginstal scaffolding autentikasi. Anda dapat memilih antara Blade, React, atau Vue. Secara default, Breeze menggunakan Blade.
php artisan breeze:install
Nanti akan muncul seperti ini:
Blade with Alpine ........................................................... blade
Livewire (Volt Class API) with Alpine .................................... livewire
Livewire (Volt Functional API) with Alpine .................... livewire-functional
React with Inertia .......................................................... react
Vue with Inertia .............................................................. vue
API only ...................................................................... api
❯
Ketikkan blade. Sebagai pemula di sarankan menggunakan blade saja. sebab kita juga sudah membahas tentang blade pada materi sebelumnya. Nanti muncul lagi notive seperti ini:
Would you like dark mode support? (yes/no) [no]
❯
Jika Anda memilih yes, Laravel Breeze akan menginstal dukungan untuk dark mode (mode gelap) pada view autentikasi Anda. Ini berarti tampilan login, register, dan halaman terkait lainnya akan memiliki versi gelap yang bisa diaktifkan oleh pengguna. Pilihan ini bagus jika Anda ingin memberikan pengalaman pengguna yang lebih modern dan fleksibel.
Jika Anda memilih no, view yang dihasilkan hanya akan memiliki tema terang (mode standar) tanpa dukungan dark mode. Ini adalah pilihan yang lebih sederhana jika Anda tidak membutuhkan fitur tersebut.
Pilihan default yang disarankan oleh Laravel adalah no, namun banyak pengembang lebih suka memilih yes karena dark mode saat ini sudah menjadi standar di banyak aplikasi web. Oke mari kita pilih Yes Juga.
Lagi-lagi akan muncul notive seperti ini:
Which testing framework do you prefer? [Pest]
Pest ............................................................................ 0
PHPUnit ......................................................................... 1
❯
Pilihan Pest (pilihan default) memiliki keuntungan:
- Ingin sintaks yang lebih bersih, modern, dan mudah dibaca.
- Suka dengan pendekatan yang ringkas dan ekspresif.
- Ingin mencoba framework yang semakin populer di komunitas Laravel.
Pilih PHPUnit memiliki keuntungan:
- Sudah sangat familiar dan nyaman dengan PHPUnit.
- Bekerja pada proyek yang sudah ada yang menggunakan PHPUnit.
- Mengutamakan framework yang sudah mapan dan stabil selama bertahun-tahun.
Untuk pengembang Laravel yang baru, banyak yang merekomendasikan Pest karena sintaksnya yang lebih sederhana dan alur kerjanya yang lebih cepat. Namun, kedua pilihan tersebut sangat baik dan tidak ada yang salah. Pilihan ini sebagian besar hanyalah masalah preferensi pribadi. Maka mari kita pilih Pest juga dengan mengetikkan angka 0.
Tunggu proses pemasangan hingga selesai. Pastikan jaringan stabil. Jika sukses maka akan muncul seperti berikut:
public/build/manifest.json 0.31 kB │ gzip: 0.17 kB
public/build/assets/app-C_ek_ebW.css 45.48 kB │ gzip: 7.96 kB
public/build/assets/app-PZj53Sw7.js 79.99 kB │ gzip: 29.80 kB
✓ built in 2.10s
INFO Breeze scaffolding installed successfully.
PS C:\laragon\www\agenda>
Jika di dalam memasang ini anda gagal, karena tidak stabil pada internet, anda dapat menghapus breeze dan memasang ulang.
composer remove laravel/breeze
Bagi anda yang sudah berhasil memasang breeze dan menggunakan proyek agenda, maka anda akan bisa menjalankan proyek secara langsung. tapi bagi yang mendownload laravel baru, maka anda perlu melakukan migrasasi database. berikut langkahnya di artikel sebelumnya. Klik Disini.
Menginstal Dependencies Frontend
Untuk memastikan tampilan antarmuka (seperti formulir login dan register) berfungsi dengan benar, Anda perlu menginstal dependencies JavaScript dan CSS, lalu menjalankannya. Silahkan instal npm. berikut perintahnya:
npm install
kemudian Jalankan npm:
npm run dev
Penjelasan Perintah
- npm install: Perintah ini mengunduh semua dependencies JavaScript yang dibutuhkan oleh project Anda, seperti Tailwind CSS dan Alpine.js, yang tercantum dalam file package.json. Ini seperti composer install untuk bagian front-end proyek Anda.
- npm run dev: Perintah ini menjalankan Vite (atau bundler lainnya) untuk mengkompilasi file-file sumber (seperti .scss dan .js) menjadi satu atau beberapa file bundle yang siap digunakan oleh browser. Ini mengoptimalkan kode dan menggabungkan semua asset menjadi file tunggal yang disimpan di direktori public/build/
Hasilnya:
Perhatikan terdapat di navbar menu login dan Register. Silahkan anda klik menu tersebut untuk melihat halamannya. Silahkan lakukan registrasi terlebih dahulu. Setelah anda registrasi maka anda secara otomatis akan di arahkan ke halaman dashboard. Dashboard sendiri memiliki navbar berupa profil dan logout. Oke ini akan dibahas pada pembahasan selanjutnya.
Selanjutnya kita akan memasang
