Cara Membuat Fitur Authentication dan Reset Lupa Password pada Laravel 7

Halo semua, kembali lagi di sahretech. Kali ini kita akan membuat fitur yang cukup bermanfaat dan biasa ada pada website-website besar. Yaitu fitur reset password. Fitur reset password di laravel membutuhkan beberapa konfigurasi seperti email pengirim yang akan disetting pada .env. Ayo ikuti tutorialnya berikut ini!.

Pada tutorial kali ini kita akan menggunakan laravel 7 sebagai percobaan. Perlu diingat juga, kalian perlu menyiapkan beberapa system requirementnya agar proses instalasi laravel 7 berjalan lancar. Salah satu cara untuk memenuhi kebutuhan laravel 7 adalah kalian bisa menggunakan paket xampp terbaru yang telah include php, apache, mysql dan fungsi-fungsi terbaru lainnya.

Perlu diketahui juga, bagi kalian yang menggunakan laravel versi 6 ke bawah atau versi 8, cara pembuatan fitur ini berbeda. Hal ini terjadi karena pembuatan authentication pada versi lawas (versi 6 ke bawah) atau versi 8 juga berbeda. So, sebelum kita masuk ke pembahasan inti saya jelaskan terlebih dahulu agar tidak membuang-buang waktu kalian jika tutorial ini tidak cocok dengan versi laravel yang kalian pakai.

Bagi kalian yang sudah tahu cara membuat authentication pada laravel 7 dan hanya membutuhkan cara membuat fitur reset password, silahkan langsung menuju ke tahap Setting Mailtrap.io dan seterusnya. Baiklah tanpa perlu berlama-lama lagi langsung saja kita masuk ke tutorial utamanya. Let's Go!

1. Persiapan Project

Pertama lakukan instalasi laravel di link berikut ini https://laravel.com/docs/7.x/installation. Untuk lokasi dan nama projectnya bebas tentukan sendiri. Setelah project berhasil dibuat. Masuk ke dalam direktori project tersebut lalu jalankan perintah php artisan serve, buka browser dan jalankan alamat berikut ini http://127.0.0.1:8000 maka hasilnya akan tampak seperti gambar di bawah ini.

Instalasi Laravel 7

2. Membuat Authentication

Setelah instalasi laravel berhasil dilakukan, selanjutnya kita akan membuat authentication. Pembuatan authentication pada laravel sangat mudah, dan setelah authentication berhasil dibuat maka tombol login dan register akan muncul di bagian atas layar project laravel yang kita buat. Berikut saya jabarkan secara singkat cara pembuatan authentication berikut ini.

2.1. Buat Database di PhpMyadmin

Karena pada proses sebelumnya kita belum menghidupkan xampp control panel, maka kali ini kita perlu menghidupkannya terlebih dahulu. Buka xampp control panel kalian masing-masing lalu hidupkan apache service dan mysql service.

Setelah kedua service tersebut hidup buka browser kalian dan masuk ke localhost/phpmyadmin untuk membuat sebuah database baru. Buatlah sebuah database baru dengan nama laravel, kenapa namanya laravel?. Ya agar namanya sama dengan setting DB_DATABASE yang ada di file .env. Tapi jika kalian ingin memberikan nama lain, maka DB_DATABASE pada file .env juga harus di ubah.

Membuat Database dengan nama Laravel

Menyesuaikan DB_DATABASE dengan database yang telah dibuat

2.2. Lakukan Migrasi

Tahap selanjutnya adalah melakukan migrasi. Caranya buka terminal kalian dan pastikan kalian berada di dalam folder project kalian. lalu jalankan perintah  php artisan migrate . Setelah berhasil dijalankan, maka tabel-tabel baru akan tercipta di dalam database laravel yang telah kita buat sebelumnya.

Menjalankan php artisan migrate

2.3. Install Laravel UI dan Jalankan Beberapa Perintah Berikut ini.

Setelah tahap migrasi berhasil, kita perlu melakukan instalasi laravel ui. Jalankan perintah beriktu ini.  composer require laravel/ui:^2.4 .Untuk jelasnya dapat kalian lihat pada gambar di bawah ini

Setelah instalasi laravel ui berhasil jalankan perintah berikut ini  php artisan ui vue --auth  untuk jelasnya dapat kalian lihat pada gambar di bawah ini

terakhir, jalankan perintah berikut ini  npm install  lalu perintah  npm run dev . Tunggu sebentar sampai prosesnya selesai. Lalu jalankan kembali  php artisan serve  dan masuk ke browser, maka hasilnya akan tampak seperti gambar di bawah ini.

Tapi jika npm install tidak bisa dijalankan  atau saat dijalankan terjadi error itu mungkin terjadi karena npmnya belum terinstall di komputer kalian, maka kalian perlu menginstall npmnya terlebih dahulu. Download pada link berikut ini https://nodejs.org/en/. Setelah selesai di download lakukan instalasinya seperti composer. Kemudian jalankan kembali npm install lalu perintah npm run dev.

Sampai tahap ini kalian telah berhasil install project laravel dan membuat authentication di dalamnya. Sekarang kalian sudah bisa melakukan registrasi dan login ke halaman laravel kalian. Dan saat kalian membuka halaman login, maka kalian akan menemukan tulian reset password di bagian bawah form login. Untuk aksinya akan saya jelaskan pada tahap di bawah ini. 

3. Konfigurasi Mailtrap.io

Bagi kalian yang sudah tahu cara membuat authentication di laravel 7 dan hanya ingin membuat fitur reset password saja, tahapan sebelumnya bisa kalian lewatkan dan langsung masuk ke tahap ini seperti yang telah saya jelaskan di atas.

Masuk dan daftar mailtrap terlebih dahulu di link berikut ini https://mailtrap.io/. Setelah mendaftar masuk ke akun kalian masing-masing dan klik menu inboxes. Di dalam menu inboxes kalian akan diberikan credentials SMTP/POP3 dan pilih laravel pada dropdown integrations, seperti gambar di bawah ini.

Tampilan inbox pada mailtrap.io

Buka file .env lalu gantilah baris yang sama pada laravel dengan baris yang telah dicopy sebelumnya ke dalam file .env. Lalu isi MAIL_FROM_ADDRESS dengan email kalian masing-masing. Kalian dapat mengisi fake email untuk percobaan sementara, contoh: laravel@gmail.com.

Setting mailtrap.io di .env

 

Setelah semuanya diganti jangan lupa untuk menjalankan perintah berikut ini  php artisan config:cache  Perintah ini dijalankan setiap file .env diubah sehingga tidak terjadi error karena masih menggunakan cache lama.

4. Testing Reset Password

Ok, sekarang waktunya untuk testing reset password. Lakukan pendaftaran baru di laravel kalian atau jika sudah pernah daftar masuk ke halaman login kemudian klik reset password, lalu masukkan alamat email kalian. Lalu klik send reset password.

Mengirim Reset Password

Buka halaman mailtrap.io kalian, lalu buka inbox dan lihat pesan masuk yang telah dikirimkan dari laravel sebelumnya. Klik reset password lalu kalian akan diarahkan kembali ke halaman laravel kalian. Isi password baru dan password konfirmasi kalian.

Reset password dari mailtrap.io

Alhamdulillah akhirnya semua proses telah kita kerjakan, bagaimana caranya cukup mudah bukan?. Kalian sejatinya tidak perlu banyak ngoding untuk mempersiapkan fitur ini. Cukup sedikit konfigurasi, fitur kece ini langsung bisa kalian nikmati. Oke, sekian tutorial cara membuat fitur reset lupa password pada laravel 7. Semoga bermanfaat bagi kalian semua, apabila ada bagian yang sulit dimengerti silahkan tinggalkan komentar di bawah ini. Sampai jumpa di tutorial keren lainnya. Happy Coding :)