Cara Kirim Email dengan Attachment di Laravel 8

Admin・ 18 Oktober 2021

9 min read ・ 4523 views

Laravel Email Attachment - Halo gaess 👋 Di artikel ini saya akan share cara mengirimkan email dengan attachment di laravel 8. Pada artikel ini, saya mensimulasikannya dengan membuat suatu fitur konfirmasi pembayaran manual sederhana. Jadi skenarionya, ketika user menginputkan data-data seperti nama, email, jumlah transfer, bank, nama pemilik rekening, tanggal transfer dan bukti transfer, kemudian user melakukan submit data, maka data-data tersebut akan dimasukkan ke table payment dan akan mengirimkan email ke admin yang berisi detail dari yang diinputkan user dan tambahan attachment berupa bukti transfer.

Baiklah, mari kita langsung saja ke koding untuk implementasi membuat kirim email dengan attachment di laravel 8. 👇 🚀

Step 1: Install Laravel

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

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

Kita akan memulainya dengan menginstall laravel terbaru. Untuk menginstall laravel, bisa menggunakan laravel installer atau bisa menggunakan composer seperti contoh di atas. Disini  saya akan menginstall laravel dengan nama project laravel-email-attachment. Kemudian, masuk ke direktori dengan perintah cd laravel-email-attachment.

Step 2: Setup Database

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

Langkah selanjutnya yaitu melakukan setup database. Disini sebagai contoh, saya akan membuat database baru dan menyesuaikannya di file .env seperti contoh di atas.

Step 3: Setup Sender

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

Kemudian di step ketiga yaitu melakukan setup email sender. Karena pada percobaan ini, kita akan mengirimkan email dengan gmail di laravel 8, jadi pada file .env juga perlu disesuaikan seperti contoh di atas.

Step 4: Membuat Model & Migration

php artisan make:model Payment -m

Kemudian, step keempat yaitu membuat model dan file migration. Seperti yang telah saya bahas di awal tadi, pada artikel ini saya akan share cara kirim email dengan attachment menggunakan sender gmail di laravel 8 dan akan disimulasikan dengan membuat fitur konfirmasi pembayaran secara manual. Jadi, kita akan membuat model dan file migration untuk membuat table payments dengan menjalankan perintah seperti di atas.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePaymentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('payments', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->string('bank');
            $table->string('bank_account');
            $table->integer('amount');
            $table->date('transfer_date');
            $table->string('photo');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('payments');
    }
}

Kemudian, buka file migration yang baru saja dibuat. Kemudian tambahkan column-column yang diperlukan seperti kode di atas.

Step 5: Setup Route

<?php

use App\Mail\PaymentEmail;
use App\Models\Payment;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::post('/', function () {

    $payment = new Payment();
    $payment->name          = request()->name;
    $payment->email         = request()->email;
    $payment->bank          = request()->bank;
    $payment->bank_account  = request()->bank_account;
    $payment->amount        = request()->amount;
    $payment->transfer_date = request()->transfer_date;

    $path = request()->file('photo')->store('payments');
    $payment->photo = $path;

    $payment->save();

    \Mail::to('admin@gmail.com')->send(new PaymentEmail($payment));

    return back();
});

Kemudian, buka file routes/web.php dan tambahkan route post seperti kode di atas. Disini kita menambahkan route post yang memproses data-data dari request untuk ditambahkan ke table payments dan mengirimkan email dengan class PaymentEmail dan berisikan detail dari yang diinputkan user ke email admin. Jadi, untuk admin@gmail.com di atas, silahkan ganti dengan email aktif kamu untuk mengetahui hasilnya nanti.

Step 6: Generate Mailable

php artisan make:mail PaymentEmail --markdown=emails.payment

Oke, step selanjutnya yaitu membuat mailable class. Jalankan perintah artisan seperti di atas untuk membuat mail class dengan nama PaymentEmail dan markdown mail yang terletak di direktori views/emails/payment.blade.php.

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use App\Models\Payment;
class PaymentEmail extends Mailable
{
    use Queueable, SerializesModels;

    public $payment;
    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct(Payment $payment)
    {
        $this->payment = $payment;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        $file = \Storage::path($this->payment->photo);

        return $this->from('mail@gmail.com')
                    ->markdown('emails.payment')
                    ->with([
                        'name'          => $this->payment->name,
                        'amount'        => $this->payment->amount,
                        'bank'          => $this->payment->bank,
                        'transfer_date' => $this->payment->transfer_date
                    ])
                    ->attach($file);
    }
}

Kemudian, buka file PaymentEmail.php yang terletak di direktori app/Mail dan sesuaikan kode yang ada dengan kode seperti di atas. Ganti mail.gmail.com dengan email yang kamu gunakan untuk mengirimkan email. Disini kita memparsing data dari yang diinputkan user ke mail dan menambahkan file attachment yang merupakan file bukti pembayaran yang juga diinputkan oleh user.

@component('mail::message')
# Dear Admin

Ada pembayaran baru dari <strong>{{ $name }}</strong> sejumlah <strong>{{ "Rp " . number_format($amount,2,',','.') }}</strong>, yang ditansfer pada tanggal <strong>{{ date('d F Y', strtotime($transfer_date)) }}</strong> dari Bank <strong>{{ $bank }}</strong>. Berikut ini bukti transfer dari <strong>{{ $name }}</strong>, mohon diperiksa ya.

Thanks,<br>
{{ config('app.name') }}
@endcomponent

Kemudian, buka file markdown mail yang juga telah kita generate sebelumnya. File tersebut ada di direktori resources/views/emails dengan nama payment.blade.php. Ubah kodenya menjadi seperti di atas.

Step 7: Setup View

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <title>How to Send Email with Attachment in Laravel 8</title>
    </head>
    <body>
        <div class="container my-5">
            <h1 class="fs-4 fw-bold mb-3 text-center">How to Send Email with Attachment in Laravel 8</h1>
            <div class="row">
                <form class="row g-3" action="/" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="col-md-6">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" id="name">
                    </div>
                    <div class="col-md-6">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" id="email">
                    </div>
                    <div class="col-md-6">
                        <label for="bank" class="form-label">Bank</label>
                        <input type="text" name="bank" class="form-control" id="bank">
                    </div>
                    <div class="col-md-6">
                        <label for="bank_account" class="form-label">Bank Account Name</label>
                        <input type="text" name="bank_account" class="form-control" id="bank_account">
                    </div>
                    <div class="col-md-6">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" name="amount" class="form-control" id="amount">
                    </div>
                    <div class="col-md-6">
                        <label for="transfer_date" class="form-label">Transfer Date</label>
                        <input type="date" name="transfer_date" class="form-control" id="transfer_date">
                    </div>
                    <div class="col-md-12">
                        <label for="Photo" class="form-label">Photo</label>
                        <input type="file" name="photo" class="form-control" id="Photo">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>

Terakhir, kita buat form untuk user malakukan konfirmasi pembayaran manual. Buka file welcome.blade.php, lalu ubah kodenya menjadi seperti di atas. Disini, kita hanya membuat form input sederhana menggunakan bootstrap 5.

Testing

Contoh email dengan attachment di laravel 8

Baiklah, sekarang mari kita test kirim email dengan attachment di laravel 8. Sebelumnya, silahkan jalankan laravel project dengan menjalankan perintah php artisan serve terlebih dahulu. Kemudian buka laravel project pada browser dan coba lakukan input data dan jangan lupa untuk upload file. Setelah klik submit, maka akan ada email masuk ke email yang kamu inputkan dan berisikan detail dari inputan dengan attachment file bukti pembayaran seperti gambar di atas.

Sekian artikel kali ini, semoga artikel ini bisa membantu dan sampai jumpa di artikel berikutnya. 👋 👨‍💻

📖 Documentation: Laravel Mail Attachments

⭐ Credit: Work illustrations by Storyset