Selamat datang dalam tutorial Laravel Breeze! Dalam tutorial ini, kita akan menjelajahi salah satu starter kit terbaru dari Laravel yang memungkinkan Anda untuk dengan mudah mengimplementasikan fitur-fitur autentikasi penting dalam proyek Anda. Laravel Breeze tidak hanya menyediakan proses login dan registrasi, tetapi juga memfasilitasi reset password, verifikasi email, dan pengelolaan halaman profil pengguna.

Mari kita mulai dengan langkah-langkah untuk memanfaatkan kekuatan Laravel Breeze dalam membangun aplikasi web yang aman dan andal.

Breeze sendiri juga bisa di integrasikan dengan beberapa teknologi seperti :

• React / Vue : Framework JavaScript modern untuk membangun antarmuka pengguna.
• Next.js / API : Framework React yang memungkinkan rendering sisi server dan pembuatan API.
• Livewire : Library full-stack untuk Laravel yang membuat aplikasi dinamis tanpa menulis kode JavaScript.
• Blade : Template engine bawaan Laravel untuk merender tampilan di sisi server.

Namun kali ini saya akan menggunakan Blade. Perlu diketahui Untuk memulai, pastikan bahwa lingkungan pengembangan Anda telah menggunakan PHP versi 8.2.4 dan Composer, karena kita akan membuat proyek menggunakan Composer.

Pertama, Anda perlu membuat proyek Laravel 11 di dalam direktori root dari Lingkungan Pengembangan Lokal yang Anda gunakan. Saya menggunakan Laragon, jadi saya akan beralih ke direktori www. Jika Anda menggunakan XAMPP, direktori tersebut biasanya ada di htdocs. Kemudian, jalankan perintah berikut di Command Prompt:

composer create-project laravel/laravel laravel-breeze

Ini akan membuat proyek Laravel baru dengan nama laravel-breeze. Pastikan untuk menyesuaikan nama proyek sesuai keinginan Anda.

Setelah proyek berhasil dibuat, buka proyek tersebut menggunakan code editor pilihan Anda. Dalam hal ini, saya menggunakan Visual Studio Code (VSCode). Langkah selanjutnya adalah mengonfigurasi basis data yang akan digunakan oleh aplikasi Laravel Anda.

Jalankan perintah composer require laravel/breeze –dev untuk menambahkan Breeze ke proyek Anda sebagai dependensi pengembangan.

Setelah itu, jalankan perintah php artisan breeze:install untuk menginstal dependensi Breeze yang baru saja ditambahkan ke proyek Anda.

Jika instalasi berhasil kurang lebih akan ada informasi seperti ini :

Selanjutnya, buka file .env yang terletak di root direktori proyek Anda. File ini berisi pengaturan lingkungan aplikasi, termasuk konfigurasi basis data. Secara default, Laravel menggunakan SQLite sebagai basis data. Konfigurasi default ini terlihat seperti berikut:

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

Karena kita akan menggunakan MySQL, kita perlu mengubah pengaturan ini. Ubah bagian konfigurasi basis data menjadi seperti berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307
DB_DATABASE=laravel_breeze
DB_USERNAME=root
DB_PASSWORD=

Berikut penjelasan untuk setiap baris:

DB_CONNECTION: Menentukan jenis basis data yang akan digunakan. Kita mengubahnya menjadi mysql untuk menggunakan MySQL.
DB_HOST: Menentukan alamat host dari server basis data. Untuk pengembangan lokal, biasanya 127.0.0.1 atau localhost.
DB_PORT: Menentukan port yang digunakan oleh MySQL. Port default MySQL adalah 3306, namun di beberapa konfigurasi, seperti pada Laragon, portnya bisa berbeda. Di sini, kita menggunakan 3307.
DB_DATABASE: Menentukan nama basis data yang akan digunakan. Anda dapat menamainya sesuai dengan proyek Anda, misalnya laravel_breeze.
DB_USERNAME: Menentukan nama pengguna yang digunakan untuk mengakses basis data. Pada pengaturan lokal, biasanya adalah root.
DB_PASSWORD: Menentukan kata sandi untuk pengguna basis data. Biarkan kosong jika Anda tidak menetapkan kata sandi untuk root di lingkungan pengembangan Anda.
Setelah melakukan perubahan ini, simpan file .env.

Jangan lupa untuk mengkonfigurasi sesuai dengan lingkungan pengembangan lokal Anda. Port 3307 adalah port yang saya gunakan untuk MySQL. Berikut ini adalah konfigurasi Laragon saya:

Selanjutnya, buat database sesuai dengan konfigurasi yang Anda atur di file .env. Anda dapat menggunakan alat manajemen database seperti phpMyAdmin, Adminer, atau langsung menggunakan command line. Pastikan nama basis data sesuai dengan yang telah Anda tentukan, dalam contoh ini adalah laravel_breeze.

Langkah selanjutnya adalah menjalankan perintah php artisan migrate agar Laravel membuat tabel-tabel yang diperlukan ke dalam basis data yang sudah Anda konfigurasi.

Setelah berhasil menjalankan perintah tersebut, basis data Anda seharusnya memiliki tabel-tabel seperti yang ditunjukkan dalam gambar di bawah ini:

Selanjutnya, mari kita coba mengakses proyek Anda melalui browser dengan mengunjungi alamat http://192.168.57.70:85/laravel-breeze/public/. Di sini:

192.168.57.70:85: Ini adalah alamat IP dan port yang saya gunakan saat melakukan pengembangan. Pastikan untuk menggantinya dengan alamat yang sesuai dengan lingkungan pengembangan Anda.
laravel-breeze: Merupakan nama proyek Laravel yang Anda tentukan.
public: Perlu disertakan karena Anda tidak menjalankan server dengan perintah php artisan serve.

Pastikan untuk menyesuaikan alamat IP, port, dan nama proyek sesuai dengan konfigurasi lingkungan pengembangan Anda sebelum mencoba mengaksesnya melalui browser.

Jika Anda menjalankan proyek Laravel dengan Breeze dan mengaksesnya melalui http://localhost:8000/ setelah menjalankan php artisan serve, Anda akan melihat halaman utama aplikasi. Di sana, Anda akan menemukan tautan “Login” dan “Register”.

Setelah Anda mengklik “Login”, Anda akan dibawa ke halaman login. Halaman ini meminta Anda untuk memasukkan email dan kata sandi Anda untuk masuk ke dalam aplikasi.

Sementara itu, jika Anda memilih “Register”, Anda akan diarahkan ke halaman registrasi. Di sini, Anda dapat membuat akun baru dengan memasukkan email, kata sandi, dan konfirmasi kata sandi.

Setelah berhasil membuat akun dan masuk dengan akun tersebut melalui halaman login, Anda dapat menguji aplikasi untuk memastikan semuanya berjalan dengan lancar.

Dalam tutorial berikutnya, kita akan melanjutkan dengan menjelaskan secara lebih mendetail mekanisme registrasi menggunakan Breeze di Laravel 11.

Jika Anda mengikuti tutorial ini, Anda bisa merujuk ke https://laravel.com/docs/11.x/starter-kits#laravel-breeze sebagai sumber resmi untuk memahami lebih dalam tentang Laravel Breeze.