~ We are changing the world with technology. ~

Matt Mullenweg

Custom Email Template Notification Laravel

Custom Email Template Notification Laravel

2788 Dilihat

Mailing merupakan fitur yang sangat banyak digunakan dalam sebuah aplikasi dengan tujuan untuk memberikan notifikasi kepada user yang menggunakan aplikasi tersebut. E-mail, dari zaman kehadirannya hingga saat ini masih sangat dibutuhkan sebagai penyampai informasi, baik yang bersifat formal maupun informal. Maka memberikan layout e-mail yang user friendly merupakan sebuah kewajiban agar para pengguna dapat dengan mudah menangkap maksud dari email tersebut, hal ini tentu saja tidak terlepas dari templating yang menarik serta informatif.

Di Laravel, selain kemudahannya dalam membuat sebuah sistem mailing bahkan dengan template yang sudah tersedia, akan tetapi yang menjadi pertanyaan, bagaimana jika kita ingin menggunakan template yang sesuai keinginan?

Baca Juga: Mudahnya Membuat Queue Mail di Laravel 5

Custom Template

Sebelum mencari tahu bagaimana component dari template email notification yang telah disediakan oleh Laravel, hal yang perlu dilakukan terlebih dahulu adalah membuat notification nya itu sendiri. Melalui terminal, jalankan command berikut:

php artisan make:notification Daftar

Command diatas akan meng-generate sebuah class yang diletakkan di : app/Notifications/Daftar.php, kemudian perhatikan bagian berikut:

public function via($notifiable)
{
    return ['mail'];
}
​
public function toMail($notifiable)
{
    return (new MailMessage)
        ->line('The introduction to the notification.')
        ->action('Notification Action', url('/'))
        ->line('Thank you for using our application!'); 
}

Secara default, notification channel adalah mail (Selain itu juga tersedia nexmo, slack dan database), tapi pada kesempatan kali ini yang akan dibahas adalah mail templating, jadi biarkan default dengan nilai mail. Pada method selanjutnya, terdapat syntax untuk membuat teks email menggunakan method seperti line() dan action() yang nantinya akan dimuat dalam template HTML.

Lalu, bagaimana cara mengirimkan notification tersebut? Untuk pengujiannya, buat Closure function, buka routes/web.php kemudian masukkan code berikut:

Route::get('/notif', function() {
    $user = \App\User::first();
    $user->notify(new \App\Notifications\Daftar);
});

Apa yang telah kita lakukan diatas masih menggunakan template yang telah disediakan oleh Laravel, sebab kita belum melakukan perubahan apapun yang berkaitan dengan HTML. Pertanyaannya, dimana template tersebut bisa ditemukan? Secara default, template tersebut tidak diletakkan di dalam direktori resources/views. Jadi, untuk menemukannya gunakan command berikut:

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

Buka file resources/views/vendor/notifications/email.blade.php, kemudian mari kita lihat apa yang kita temukan didalamnya:

@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level == 'error')
# Whoops!
@else
# Hello!
@endif
@endif
​
{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}
​
@endforeach
​
{{-- Action Button --}}
@isset($actionText)
<?php
    switch ($level) {
        case 'success':
            $color = 'green';
            break;
        case 'error':
            $color = 'red';
            break;
        default:
            $color = 'blue';
    }
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endisset
​
{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}
​
@endforeach
​
{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
Regards,<br>{{ config('app.name') }}
@endif
​
{{-- Subcopy --}}
@isset($actionText)
@component('mail::subcopy')
If you’re having trouble clicking the "{{ $actionText }}" button, copy and paste the URL below
into your web browser: [{{ $actionUrl }}]({{ $actionUrl }})
@endcomponent
@endisset
@endcomponent

Ternyata file tersebut hanya berisi perintah untuk memanggil component lainnya yang telah didefinisikan. Adapun component yang perlu diperhatikan sebagaimana yang telah disebutkan didalam dokumentasi Laravel:

  1. Button

@component('mail::button', ['url' => $url, 'color' => 'green'])
View Invoice
@endcomponent
  1. Panel Component

@component('mail::panel')
This is the panel content.
@endcomponent
  1. Table Component

@component('mail::table')
| Laravel       | Table         | Example  |
| ------------- |:-------------:| --------:|
| Col 2 is      | Centered      | $10      |
| Col 3 is      | Right-Aligned | $20      |
@endcomponent

Penjelasan: @component adalah blade syntax yang digunakan untuk memanggil component lainnya yang berisi HTML yang telah didefinisikan

Wait, lalu untuk membuat custom template secara kesuluruhan bagaimana? Sedangkan code HTML secara lengkap belum kita temukan? Untuk menemukkannya, jalankan command berikut:

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

Nah!, Component dari semua elemen yang digunakan dalam mail template tersebut sudah dapat diedit sesuai keinginan, sebagai contoh untuk melakukan perubahan pada button, buka file button.blade.php, lalu tambahkan custom class atau apapun yang ingin kamu modifikasi:

<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <a href="{{ $url }}" class="button button-{{ $color or 'blue' }}" target="_blank">{{ $slot }}</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Kamu juga dapat memodifikasi component lainnya dengan custom style kamu sendiri sehingga template email notification sesuai dengan yang kamu inginkan.

Baca Juga: Berkenalan Dengan Spring Boot

Kesimpulan

Membuat custom email template akan memberikan pengalaman yang menarik bagi user ketika mendapatkan notifikasi dari aplikasi yang digunakannya, sebab e-mail merupakan sarana untuk menyampaikan informasi, maka harus tampak menarik dan informatif agar user memiliki gairah untuk menerima informasi tersebut.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #8: Manage Customers Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Pelanggan menjadi bagian yang penting dari sebuah perusahaan laundry, maka fitur yang akan dikerjakan pada serial ini adalah sebuah fitur untuk mengelola pelanggan. Adapun schema yang dirancang dimana...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #7: Push Notification Expenses Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Dalam setiap kegiatan berwirausaha pasti terdapat biaya biaya yang harus dikeluarkan untuk menjalankan operasional dari usaha tersebut, maka dalam aplikasi ini, kita tidak hanya akan mencatat transaks...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #6: Role & User Permissions Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Sambil menikmati secangkir kopi ini, kutuliskan serial lanjutan membuat Aplikasi Laundry menggunakan Laravel 5.8 & Vue.js dengan metode SPA (Single Page Application) yang telah memasuki serial ke-6 ny...

Komentar