Laravel tutorial: Mengirim notifikasi user menggunakan gmail

Salah satu fitur unggulan Laravel yang menjadi favorit saya adalah kemampuan bawaanya untuk mengirim email. Fitur ini bisa dikembangkan lebih lanjut untuk berbagai keperluan seperti mengirim link lupa password, notifikasi pembaruan sistem atau promosi produk.

Sebagai permulaan, mari kita belajar membuat fitur sederhana untuk mengirim pesan email sederhana untuk mengetahui konsep dasar nya. Hal pertama yang perlu disiapkan adalah 2 alamat email yang valid untuk kita melakukan uji coba. Pada kesempatan ini Saya menggunakan 2 alamat gmail yang masing-masing berperan sebagai sender dan receiver.

Sender: myofficespot25@gmail.com
Receiver: ahyasw@gmail.com

Persiapan

Jika Anda menggunakan provider gmail sebagai sender, jangan lewati step ini. Yang perlu diketahui, gmail menerapkan fitur keamanan yang cukup ketat sehingga ada beberapa konfigurasi yang perlu disesuaikan pada akun gmail Anda agar dapat kita terapkan sebagai mail server.

Aktifkan 2-step Verification

Login kedalam akun gmail yang akan Anda gunakan sebagai sender/pengirim. Selanjutnya pada menu profile, klik Manage your Google Account atau kunjungi tautan berikut ini.

Perhatikan pada daftar menu disebelah kiri. Klik pada opsi Security dan perhatikan 2-step Verification sudah diaktifkan. Untuk mengaktifkan menu ini Anda akan diminta memasukan nomor handphone. Ikuti langkah-langkah nya hingga muncul tnanda centang seperti pada gambar dibawah ini.

Buat App Passwords

App password ini merupakan semacam jalur khusus yang diperlukan agar aplikasi Laravel yang dibuat dapat berinteraksi dengan layanan gmail, sehingga memerlukan authentikasi tambahan agar dapat terhubung satu sama lain.

Anda dapat mengakses halaman ini melalui alamat berikut ini.

Setelah itu masukan nama aplikasi ang ingin dibuatkan password secara spesifik. Saya memakai nama “Tutorial mengirim email dengan Laravel”. Klik tombol Create untuk men-generate password, lalu akan muncul pop-up yang berisikan 16 karakter password. Jangan lupa untuk segera mencatat password tersebut karena pop-up hanya muncul satu kali saja. Password inilah yang nantinya akan dimasukan kedalam konfigurasi Laravel. Ingat,

Setelah tergenerate akan muncul 16 digit karakter password seperti berikut ini:

dehj sair jzxy depl

Pengembangan

Untuk pembuatan project email sender ini saya menggunakan Laravel versi 7.4. Cara instalasi selengkapnya bisa Anda baca pada artikel berikut.

Buat Routes

Buka file routes/web.php dan tambahkan kode dibawah ini:

Route::group(['middleware'=>'auth'], function(){
    Route::get('/email', 'SendingEmailController@index');
    Route::post('/email/send', 'SendingEmailController@send')->name('email.send');
});

Buat class Mailable

php artisan make:mail SendingEmailNotification

Perintah diatas akan membuat file baru pada direktori App\Mail\SendingEmailNotification.php Buka file tersebut kemudian tambahkan kode berikut ini:

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class SendingEmailNotification extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public $details;
    
    public function __construct($details)
    {
        $this->details = $details; //variable yang dikirim dari controller
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        //masukan subject email yang diperlukan
        //email menggunakan template yang sudah kita buat
        return $this->subject('Testing mengirim email dengan Laravel')->view('email.template');
    }
}

Buat Template email

Template email ini bermanfaat agar tampilah email yang dikirim lebih menarik bagi pembaca sehingga tidak terkesan kaku dan monoton.

Buat file baru pada resources/views/email dan beri nama template.blade.php. Selanjutnya buka file tersebut dan tambahkan kode dibawah ini:

<!doctype html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Simple Transactional Email</title>
    <style media="all" type="text/css">
    /* -------------------------------------
    GLOBAL RESETS
------------------------------------- */
    
    body {
      font-family: Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      line-height: 1.3;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }
    
    table {
      border-collapse: separate;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
      width: 100%;
    }
    
    table td {
      font-family: Helvetica, sans-serif;
      font-size: 16px;
      vertical-align: top;
    }
    /* -------------------------------------
    BODY & CONTAINER
------------------------------------- */
    
    body {
      background-color: #f4f5f6;
      margin: 0;
      padding: 0;
    }
    
    .body {
      background-color: #f4f5f6;
      width: 100%;
    }
    
    .container {
      margin: 0 auto !important;
      max-width: 600px;
      padding: 0;
      padding-top: 24px;
      width: 600px;
    }
    
    .content {
      box-sizing: border-box;
      display: block;
      margin: 0 auto;
      max-width: 600px;
      padding: 0;
    }
    /* -------------------------------------
    HEADER, FOOTER, MAIN
------------------------------------- */
    
    .main {
      background: #ffffff;
      border: 1px solid #eaebed;
      border-radius: 16px;
      width: 100%;
    }
    
    .wrapper {
      box-sizing: border-box;
      padding: 24px;
    }
    
    .footer {
      clear: both;
      padding-top: 24px;
      text-align: center;
      width: 100%;
    }
    
    .footer td,
    .footer p,
    .footer span,
    .footer a {
      color: #9a9ea6;
      font-size: 16px;
      text-align: center;
    }
    /* -------------------------------------
    TYPOGRAPHY
------------------------------------- */
    
    p {
      font-family: Helvetica, sans-serif;
      font-size: 16px;
      font-weight: normal;
      margin: 0;
      margin-bottom: 16px;
    }
    
    a {
      color: #0867ec;
      text-decoration: underline;
    }
    /* -------------------------------------
    BUTTONS
------------------------------------- */
    
    .btn {
      box-sizing: border-box;
      min-width: 100% !important;
      width: 100%;
    }
    
    .btn > tbody > tr > td {
      padding-bottom: 16px;
    }
    
    .btn table {
      width: auto;
    }
    
    .btn table td {
      background-color: #ffffff;
      border-radius: 4px;
      text-align: center;
    }
    
    .btn a {
      background-color: #ffffff;
      border: solid 2px #0867ec;
      border-radius: 4px;
      box-sizing: border-box;
      color: #0867ec;
      cursor: pointer;
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      padding: 12px 24px;
      text-decoration: none;
      text-transform: capitalize;
    }
    
    .btn-primary table td {
      background-color: #0867ec;
    }
    
    .btn-primary a {
      background-color: #0867ec;
      border-color: #0867ec;
      color: #ffffff;
    }
    
    @media all {
      .btn-primary table td:hover {
        background-color: #ec0867 !important;
      }
      .btn-primary a:hover {
        background-color: #ec0867 !important;
        border-color: #ec0867 !important;
      }
    }
    
    /* -------------------------------------
    OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
    
    .last {
      margin-bottom: 0;
    }
    
    .first {
      margin-top: 0;
    }
    
    .align-center {
      text-align: center;
    }
    
    .align-right {
      text-align: right;
    }
    
    .align-left {
      text-align: left;
    }
    
    .text-link {
      color: #0867ec !important;
      text-decoration: underline !important;
    }
    
    .clear {
      clear: both;
    }
    
    .mt0 {
      margin-top: 0;
    }
    
    .mb0 {
      margin-bottom: 0;
    }
    
    .preheader {
      color: transparent;
      display: none;
      height: 0;
      max-height: 0;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      mso-hide: all;
      visibility: hidden;
      width: 0;
    }
    
    .powered-by a {
      text-decoration: none;
    }
    
    /* -------------------------------------
    RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
    
    @media only screen and (max-width: 640px) {
      .main p,
      .main td,
      .main span {
        font-size: 16px !important;
      }
      .wrapper {
        padding: 8px !important;
      }
      .content {
        padding: 0 !important;
      }
      .container {
        padding: 0 !important;
        padding-top: 8px !important;
        width: 100% !important;
      }
      .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
      }
      .btn table {
        max-width: 100% !important;
        width: 100% !important;
      }
      .btn a {
        font-size: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
      }
    }
    /* -------------------------------------
    PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
    
    @media all {
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass,
      .ExternalClass p,
      .ExternalClass span,
      .ExternalClass font,
      .ExternalClass td,
      .ExternalClass div {
        line-height: 100%;
      }
      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }
      #MessageViewBody a {
        color: inherit;
        text-decoration: none;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
      }
    }
    </style>
  </head>
  <body>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td> </td>
        <td class="container">
          <div class="content">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">

              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper">
                    <h3>{{$details['title']}}</h3>
                    <p>{{$details['body']}}</p>
                    
                    <p>Good luck! Hope it works.</p>
                </td>
              </tr>

              <!-- END MAIN CONTENT AREA -->
              </table>

            <!-- START FOOTER -->
            <div class="footer">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-block">
                    <span class="apple-link">Ahyas Widyatmaka Company Inc, 7-11 Commercial Ct, Belfast BT1 2NB</span>.
                  </td>
                </tr>
                <tr>
                  <td class="content-block powered-by">
                    Powered by <a href="ahyasw.com">ahyasw.com</a>
                  </td>
                </tr>
              </table>
            </div>

            <!-- END FOOTER -->
            
        </div>
        </td>
        <td> </td>
      </tr>
    </table>
  </body>
</html>

Buat Controller

php artisan make:controller SendingEmailController

Setelah file controller berhasil dibuat dengan nama SendingEmailController.php, buka file tersebut dan tambahkan kode dibawah ini:

<?php

namespace App\Http\Controllers;

use App\Mail\SendingEmailNotification;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;

class SendingEmailController extends Controller
{
    public function index(){
        return view('email.index');
    }

    public function send(Request $request){
        $request->validate([
            'tujuan' => 'required|email',
            'message' => 'required'
        ],[
            'tujuan.required' => 'Tujuan tidak boleh kosong',
            'tujuan.email' => 'Alamat email tidak valid',
            'message.required' => 'Alamat email tidak valid',
        ]);

        $details = [
            'title' => 'Tutorial mengirim notifikasi email',
            'body' => $request->message
        ];

        Mail::to($request->tujuan)->send(new SendingEmailNotification($details));

        return redirect()->back()->with('success', 'Email berhasil dikirim');
    }
}

Uji coba

Buka halaman untuk mengirim email di <your_host>/email kemudian akan muncul tampilan seperti dibawah ini. Masukan tujuan alamat email(gmail) yang akan dikirim, selanjutnya masukan pesan yang diinginkan. Klik kirim dan pesan Anda akan dikirimkan ke email tujuan. Oh, iya pastikan saat mellakukan proses ini Anda terkoneksi dengan internet.