Tutorial Membuat Fitur Verifikasi Email Pada Formulir Registrasi di Laravel

Selamat pagi, siang, sore, dan malam.
Kembali lagi dengan mimin di turtorial laravel 5.* setelah sekian lama tidak berkecimpung dilaravel karena pekerjaan saat ini yang tidak menggunakan laravel. hahaha
Mungkin saya ketinggalan info seputar laravel nih guys, makanya mohon info-info jika ada yang kurang dan jika ada hal-hal yang baru tulis aja dikolom komentar.

Baik langsung saja. Hari ini saya akan mendemonstrasikan bagaimana cara membuat verikasi email ketika mengisi form register dengan judul artikel "Tutorial Membuat Fitur Verifikasi Email Pada Formulir Registrasi di Laravel". 

Saya akan menunjukan bagaimana cara membuat sebuah antrian di laravel 5.* untuk verifikasi email dengan menggunakan integrasi Auth RegisterController. Selain itu, saya juga akan menunjukan cara menambahkan proses pengiriman email ke antrian agara proses aplikasi kalian lebih cepat.

Pada tutorial kali ini, saya menggunakan database untuk pekerjaan antrian. Namun, kalian dapat menggunakan Redist atau driver lainnya, seperti yang didefinisikan dalam dokumen resminya.

Saya tidak akan menerangkan bagaimana cara untuk menginstall laravel, jika masih bingung coba pergi ke dokumentasi di web resminya. Jika sudah siap gunakan Auth default bawaan dari laravel dengan memasukan perintah

php artisan make:auth

Siapkan Table

Mari kita mulai menambahkan table dalam database yang sudah dipersiapkan. Kita akan menambaghkan table user dan table queue yang akan digunakan sebagai table antrian.

Memperbagarui Table User
Kalian bisa cek file migration di direktori database/migrations. Update kodenya dengan kode dibawah ini:

public function up()
{
   Schema::create('users', function (Blueprint $table) {
      $table->increments('id');
      $table->string('name');
      $table->string('email')->unique();
      $table->string('password');
      $table->tinyInteger('verified')->default(0);
      $table->string('email_token')->nullable();
      $table->rememberToken();
      $table->timestamps();
   });
}

Kita hanya menambahkan field table verified sebagai tanda sudah diverifikasi dan token_email untuk token.

Menambahkan Table Queue

Mari sekarang tambahkan table untuk queue jobs dan failed jobs. Untuk itu jalankan perintah

php artisan queue:jobs
php artisan queue:failed_jobs

perintah tersebut akan menambahkan file di folder migrations untuk penambahan table.

Table Migrations

Setelah semua sudah siap, kita tinggal import ke database, dengan menuliskan perintah migrate:

php artisan migrate

Setelah selesai kalian bisa melihat table telah dibuat di database yang kalian hendaki.

Update file .env

Sekarang saya akan memperbaharui file .env dengan email dan informasi driver antrian. Agar kalian tidak menggunakan email sungguhan dan agar tidak menjadi spam di inbox email. Saya menyarankan kalian untuk menggunakan mailtrap.io. Mailtrap.io ini adalah server SMTP palsu bagi pengembang untuk kebutuhan testing, melihat dan berbagi email yang dikirim dari lingkungan pengembang dan pementasan tanpa menjebak pelanggan nyata.

Coba kalian daftar, jika sudah, masuk ke Demo Inbox, copy username dan passwordnya masukan ke file .env

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=8d09d128965b83
MAIL_PASSWORD=4819d81da2f23e
MAIL_ENCRYPTION=null

Membuat Mail dan View Untuk Email Verifikasi
Karena kita sudah menyiapkan SMTP untuk mengirim email, saatnya membuat class email yang akan mengembalikan view dan token yang akan dikirim dengan isi email. Jalankan perintah artisan berikut untuk membuat setup email:

php artisan make:mail EmailVerification

Setelah perintah selesai, folder baru dengan nama Mail beserta file class EmailVerification akan dibuat di dalam folder app. Ini adalah file yang perlu kalian hubungi ketika kalian perlu mengirim email.

Update Class EmailVerification

Class ini hadir dengan dua metode. Yang pertama adalah constructor() dan yang kedua adalah build() yang akan melakukan sebagian besar pekerjaan. Ini mengikan view dengan email. Kalian akan mengirim token user beserta view sehingga user bisa diverifikasi. Untuk ini tambahkan tambahkan variabel baru yang dilindungi dengan nama $user. 

protected $user

Sekarang tambahkan parameter $user baru di constructor dan menyampaikan ke variabel class $user

public function __construct($user)
{
    $this->user = $user;
}

Selanjutnya, update metode build() sehingga bisa mengembalikan view beserta token user.

public function build()
{
   return $this->view('email.email')->with([
   'email_token' => $this->user->email_token,
   ]);
}

Membuat Email Template

Untuk membuat template email, buat folder baru di dalam folder view dengan nama email lalu buat file baru di dalam folder ini dengan nama email.blade.php file ini akan berisi template sederhana sebagai berikut:

<h1>Click the Link To Verify Your Email</h1>
Click the following link to verify your email
<a href="{{url('/verifyemail/'.$email_token)}}">Verify</a>

View untuk email sekarang sudah selesai. Selanjutnya, kalian akan membuat antrian baru yang akan mengirim email ke pengguna terdaftar.

Membuat Queue Jobs SendEmailVerification

Sekarang jalankan perintah artisan berikut untuk membuat queue jobs baru 

php artisan make:job SendEmailVerification

Saat perintah selesai, folder baru dengan nama Jobs muncul di dalam folder app bersama dengan class SendVerificationEmail. Sekarang kalian edit file ini sehingga bisa digunakan untuk mengirim email.

Pertama tambahkan Mail dan EmailVerification namespaces di dalamnya.

use Mail;

use App\Mail\EmailVerification;

Tambahkan juga variabel $user sama dengan yang dibuat di file EmailVerifivication. Selanjutnya, tambahkan parameter baru $user di contruct() dan berikan nilainya ke variabel class $user.

protected $user
public function __contruct($user)
{
   $this->user = $user;
}

atur proses pengiriman email di dalam metode handle()

public function handle()
{
   $email = new EmailVerification($this->user);
   Mail::to($this->user->email()->send($email);
}

function handle() adalah membuat contoh template verifikasi email yang dikirimkan ke Mail untuk mengirim email pengguna.

Update Auth Registration

Sebelum memulai, tambahkan 'email_token' dalam array yang diisi di model user.

protected $fillable = [
   'name', 'email', 'password', 'email_token',
];

Sekarang buka file RegistrationController.php dan tambahkan namespaces 

use Illuminate\Auth\Events\Registered;
use Illuminate\Http\Request;
use App\Jobs\SendVerificationEmail;

Tambahkan juga di function create() email_token

protected function create(array $data)
{
    return User::create([
       'name' => $data['name'],
       'email' => $data['email'],
       'password' => bcrypt($data['password']),
       'email_token' => base64_encode($data['email']),
    ]);
}

Untuk token email, saya telah menggunakan pengkodean base64_encode untuk alamat email pengguna. Selanjutnya saya akan menambahkan dua fungsi baru berikut didalamnya

public function register(Request $request)
{
   $this->validator($request->all())->validate();
   event(new Registered($user = $this->create($request->all())));
   dispatch(new SendVerificationEmail($user));
   return view('verification');
}

public function verify($token)
{
   $user = User::where('email_token', $token)->first();
   $user->verified = 1;
   if($user->save())
   {
      return view('emailconfirm', ['user' => $user]);
   }
}

Apa yang telah saya lakukan adalah mengesampingkan metode induk register() dan menambahkan dua baris baru di dalamnya:

dispatch(new SendVerificationEmail($user));
return view('verification');

Dengan cara ini, email dikirimkan ke antrian dan alih-alih langsung masuk ke pengguna, dan saya mengarahkan kembali ke halaman lain yang akan meminta untuk memverifikasi emailnya agar bisa melanjutkan. Selanjutnya saya telah membuat metode verify() baru yang akan memverifikasi pengguna dan tokennya. Selanjutnya, saya akan membuat view yang saya panggil dalam dua metode ini. 

Buatlah file baru di folder views dengan nama emailconfirm.blade.php dan salin kode berikut didalamnya: 

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Registration Comfirmation</div>
                <div class="panel-body">
                    Your email is successfully verified. Click here to <a href="{{url('/login')}}">login</a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

Pada titik ini kode sudah lengkap dan siap digunakan. Mari kita coba. Tambahka route berikut di file web.php untuk memverifikasi user:

Route::get('/verifyemail/{token}', 'Auth\RegisterController@verify');

Saatnya Menguji Verifikasi Email

Pada command prompt, jalankan perintah berikut untuk mulai antrian

php artisan queue:work

dan tambahkan tab baru di command prompt lalu jalankan server dengan perintah

php artisan serve

Biarkan jendela dari command prompt terbuka dan buka halaman register di tab lain. Isi form dan daftarkan user baru. Setelah mengklik tombol Register, kalian akan melihat bahwa halaman konfirmasi registrasi terbuka dengan cepat karena dikirim ke antrian. Untuk melihat email yang masuk, kalian bisa membukanya di mailtrap.io

Tutorial ini sudah selesai, semoga bermanfaat. Sampat ketemu di tutorial selanjutnya, keep learn and share. Terimakasih