Mengubah Tampilan Email Verifikasi dan Reset Password di Laravel 8

Admin・ 16 Oktober 2021

6 min read ・ 4889 views

Laravel Email Customize -  Halo gaess 👋 Di artikel ini saya akan share bagaimana cara customize atau mengubah tampilan (theme dan text) email verifikasi dan reset password di laravel 8. Dan di artikel ini, saya juga akan share bagaimana cara mengirimkan email verifikasi dan reset password tersebut menggunakan sender gmail.

By default, tampilan email verifikasi dan reset password seperti gambar di atas. Dan mari kita langsung saja ke koding untuk customize atau mengubah tampilan (theme dan text) kedua email tersebut di laravel 8. 👇 👨‍💻

Step 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new laravel-email

//via Composer
composer create-project laravel/laravel laravel-email

Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita coba untuk mengubah atau customize tampilan email verifikasi dan reset password di laravel 8. Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-email.

Step 2: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_email
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk kita gunakan pada percobaan ini. Jika kamu menggunakan xampp sebagai local development, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel_email. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Step 3: Install Laravel UI

composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev
php artisan migrate

Kita perlu fitur authentication untuk implementasi customize atau mengubah tampilan email verifikasi dan reset password di laravel project kita. Untuk itu, disini saya contohkan menggunakan laravel ui package untuk membuat fitur authentication tersebut.

Silahkan install laravel ui package di laravel project kita dengan menjalankan perintah-perintah seperti di atas secara berurutan.

*Sebelum menginstall laravel ui package tersebut, pastikan kamu sudah masuk ke direktori project dengan menjalankan perintah cd laravel-email pada terminal. 

Step 4: Setup Email

MAIL_MAILER=smtp
MAIL_HOST=smtp.googlemail.com
MAIL_PORT=587
MAIL_USERNAME=mail@gmail.com
MAIL_PASSWORD=1234
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=mail@gmail.com
MAIL_FROM_NAME="Codelapan"

Ok, pada percobaan ini, saya akan menggunakan gmail sebagai sender atau pengirim email verifikasi dan reset password. Pada file .env, silahkan sesuaikan seperti kode di atas.

Link: https://myaccount.google.com/u/1/security

Untuk dapat menggunakan gmail sebagai sender, pastikan akun google yang akan digunakan, pada bagian Akses aplikasi yang kurang aman telah aktif atau bisa dilihat seperti gambar di atas.

Step 5: Aktifkan Verification Mail

routes/web.php

Auth::routes(['verify' => true]);

Aktifkan email verification dengan mengubah route auth menjadi seperti kode di atas.

use Illuminate\Contracts\Auth\MustVerifyEmail;

Kemudian buka model User.php, pastikan sudah menggunakan trait seperti kode di atas.

class User extends Authenticatable implements MustVerifyEmail

Kemudian tambahkan implements MustVerifyMail pada class User.

public function __construct()
{
    $this->middleware(['auth','verified']);
}

Selanjutnya, tambahkan middleware verified pada HomeController.php, agar setelah user register tidak langsung diarahkan ke halaman home, tapi user perlu melakukan verifikasi email terlebih dahulu.

Step 6: Customize Email

php artisan vendor:publish --tag=laravel-mail

OK, untuk dapat melakukan custom email di laravel, kita bisa publish resources email dengan menjalankan perintah artisan seperti di atas.

Ganti Logo

resources/views/vendor/mail/html/header.blade.php

<img src="https://codelapan.com/front/brand/logo.png" class="logo" alt="Laravel Logo">

Untuk mengganti logo pada email, kita bisa masuk ke file resources/views/vendor/mail/html/header.blade.php, kemudian ubah attribut src seperti contoh kode di atas. Dari contoh kode di atas, saya ingin mengganti logo laravel dengan logo codelapan.

Ganti Background

.wrapper {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    background-color: #004aad;
    margin: 0;
    padding: 0;
    width: 100%;
}

Kemudian, untuk mengganti background color, kita bisa mengubahnya di file default.css. Disini saya contohkan, mengubah background-color dengan kode hex-color #004aad. 

.body {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    background-color: #004aad;
    margin: 0;
    padding: 0;
    width: 100%;
}

Kemudian, background-color pada class body juga akan saya ganti dengan hex color #004aad.

border-bottom: 1px solid #edf2f7;
border-top: 1px solid #edf2f7;

Pada class body ini, saya menghapus border-buttom dan border-top.

config/mail.php

'markdown' => [
    'theme' => 'default',

    'paths' => [
        resource_path('views/vendor/mail'),
    ],
],

FYI, settingan markdown email dapat ditemukan pada file config/mail.php. By default, theme yang digunakan pada email laravel adalah default.css dan paths terletak pada direktori views/vendor/mail.

Step 7: Testing

Baiklah, setelah selesai melakukan customize tampilan email verifikasi atau reset password, sekarang waktunya pengujian. Untuk mengujinya, silahkan jalankan laravel project dan buka laravel project di browser. Silahkan coba melakukan register, maka nanti kita akan diminta melakukan verifikasi email. Dan saat kita cek email, tampilan verification email laravel akan menjadi seperti gambar di atas.

Kemudian, jika kita coba melakukan reset password, maka tampilan email reset password yang diterima menjadi seperti gambar di atas.

Sekian artikel kali ini yang telah membahas tentang bagaimana cara customize atau mengubah tampilan email verification dan reset password di laravel 8. Semoga artikel ini bisa membantu, selamat mencoba dan sampai jumpa di artikel berikutnya. 👋 🚀