Back to backend
Single All 30 Oktober 2017 5 min

Tutorial Laravel 5.4 — Mengirim Email

Halo semua! Kali ini gue mau ngajarin kalian cara mengirim email pake Laravel 5.4. Pada tutorial lain mungkin aja ngajarinnya pake…

Tutorial Laravel 5.4 — Mengirim Email

Image Halo semua! Kali ini gue mau ngajarin kalian cara mengirim email pake Laravel 5.4. Pada tutorial lain mungkin aja ngajarinnya pake MAILTRAP. Disini gue akan langsung ngajarin pake GMAIL

MAILTRAP itu apa? itu sebuah third party email yang engga akan ngirimin email kalian ke client, tapi ke server kalian.

Loh kok gitu? Ya emang gitu, tujuannya biar kalian tau format tulisan email kalian udah sesuai dengan keinginan kalian atau belom. Nah sebelum kita mulai pastiin sob lo pake template yang udah gue sediain disini. Kemari Kalo udah cus kita lanjutkeun! Pertama, pastiin lo buat controller baru, berinama Email.

php artisan make:controller Email Kalo udah sisipin fungsi ini

use Mail; //Jangan lupa import Mail di paling atas
public functionsendEmail(Request $request){try{Mail::send('email', ['nama' => $request->nama, 'pesan' => $request->pesan],function($message)use($request){$message->subject($request->judul);$message->from('donotreply@kiddy.com', 'Kiddy');$message->to($request->email);});returnback()->with('alert-success','Berhasil Kirim Email');}catch(Exception $e){returnresponse (['status' =>false,'errors' => $e->getMessage()]);}}

Thanks to aganArvin Rashedayang udah ngingetin import Mail. Nah sebelum lanjut gue jelasin dulu

  • Mail::send berarti kita akan mengirim email
  • (‘email’, kita akan menggunakan template email berbentuk HTML yang udah gue siapin nanti
  • [‘nama’ => $request->nama] berarti kita akan sisipin fungsi nama yang diambil dari tulisan $request->nama
  • return back()->with berarti kita akan kembali ke halaman yang sama. Okeh lanjut! Kalo udah sekarang kita lari keresources -> views. Buat file baru disana berinamaemail.blade.php Paste kode PHP & HTMLnya dibawah ini
<!doctype html><html><head><meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Boardicle Email</title><style>/* -------------------------------------GLOBAL RESETS------------------------------------- */img {border: none;-ms-interpolation-mode: bicubic;max-width: 100%; }body {background-color: #f6f6f6;font-family: sans-serif;-webkit-font-smoothing: antialiased;font-size: 14px;line-height: 1.4;margin: 0;padding: 0;-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: sans-serif;font-size: 14px;vertical-align: top; }/* -------------------------------------BODY & CONTAINER------------------------------------- */.body {background-color: #f6f6f6;width: 100%; }/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */.container {display: block;Margin: 0 auto !important;/* makes it centered */max-width: 580px;padding: 10px;width: 580px; }/* This should also be a block element, so that it will fill 100% of the .container */.content {box-sizing: border-box;display: block;Margin: 0 auto;max-width: 580px;padding: 10px; }/* -------------------------------------HEADER, FOOTER, MAIN------------------------------------- */.main {background: #ffffff;border-radius: 3px;width: 100%; }.wrapper {box-sizing: border-box;padding: 20px; }.content-block {padding-bottom: 10px;padding-top: 10px;}.footer {clear: both;Margin-top: 10px;text-align: center;width: 100%; }.footer td,.footer p,.footer span,.footer a {color: #999999;font-size: 12px;text-align: center; }/* -------------------------------------TYPOGRAPHY------------------------------------- */h1,h2,h3,h4 {color: #000000;font-family: sans-serif;font-weight: 400;line-height: 1.4;margin: 0;Margin-bottom: 30px; }h1 {font-size: 35px;font-weight: 300;text-align: center;text-transform: capitalize; }p,ul,ol {font-family: sans-serif;font-size: 14px;font-weight: normal;margin: 0;Margin-bottom: 15px; }p li,ul li,ol li {list-style-position: inside;margin-left: 5px; }a {color: #3498db;text-decoration: underline; }/* -------------------------------------BUTTONS------------------------------------- */.btn {box-sizing: border-box;width: 100%; }.btn > tbody > tr > td {padding-bottom: 15px; }.btn table {width: auto; }.btn table td {background-color: #ffffff;border-radius: 5px;text-align: center; }.btn a {background-color: #ffffff;border: solid 1px #3498db;border-radius: 5px;box-sizing: border-box;color: #3498db;cursor: pointer;display: inline-block;font-size: 14px;font-weight: bold;margin: 0;padding: 12px 25px;text-decoration: none;text-transform: capitalize; }.btn-primary table td {background-color: #3498db; }.btn-primary a {background-color: #3498db;border-color: #3498db;color: #ffffff; }/* -------------------------------------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; }.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; }hr {border: 0;border-bottom: 1px solid #f6f6f6;Margin: 20px 0; }/* -------------------------------------RESPONSIVE AND MOBILE FRIENDLY STYLES------------------------------------- */@media only screen and (max-width: 620px) {table[class=body] h1 {font-size: 28px !important;margin-bottom: 10px !important; }table[class=body] p,table[class=body] ul,table[class=body] ol,table[class=body] td,table[class=body] span,table[class=body] a {font-size: 16px !important; }table[class=body] .wrapper,table[class=body] .article {padding: 10px !important; }table[class=body] .content {padding: 0 !important; }table[class=body] .container {padding: 0 !important;width: 100% !important; }table[class=body] .main {border-left-width: 0 !important;border-radius: 0 !important;border-right-width: 0 !important; }table[class=body] .btn table {width: 100% !important; }table[class=body] .btn a {width: 100% !important; }table[class=body] .img-responsive {height: auto !important;max-width: 100% !important;width: auto !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; }.btn-primary table td:hover {background-color: #34495e !important; }.btn-primary a:hover {background-color: #34495e !important;border-color: #34495e !important; } }</style></head><body class=""><table border="0" cellpadding="0" cellspacing="0" class="body"><tr><td>&nbsp;</td><td class="container"><div class="content"><!-- START CENTERED WHITE CONTAINER --><span class="preheader">Email Untuk Kamu !.</span><table class="main"><!-- START MAIN CONTENT AREA --><tr><td class="wrapper"><table border="0" cellpadding="0" cellspacing="0"><tr><td><p>Hi {{ $nama }}</p><p>Terimakasih telah mengirimkan email :)</p><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td> <div class="container"><center><p>Pesanmu Yaitu :</p></center><hr><center><p>{{ $pesan }}</p></center><hr><center><p>Telah Disampaikan! <br> Terimakasih telah menghubungi kami!</p></center></div></td></tr></tbody></table></td></tr></tbody></table>{{--<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>--}}{{--<p>Good luck! Hope it works.</p>--}}</td></tr></table></td></tr><!-- END MAIN CONTENT AREA --></table><!-- START FOOTER --><div class="footer"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="content-block"><span class="apple-link">Anak IT Inc</span>{{--<br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif">Unsubscribe</a>.--}}</td></tr><tr><td class="content-block powered-by">Powered by <a href="http://medium.com/@kiddy.xyz">Anak IT</a>.</td></tr></table></div><!-- END FOOTER --><!-- END CENTERED WHITE CONTAINER --></div></td><td>&nbsp;</td></tr></table></body></html>

Kenapa sepanjang ini? karena kita akan menggunakan template seperti dibawah ini, biar keren!

Image Sekarang buat file baru, berinamasend_email.blade.php,copy kodenya dibawah ini

@extends('base')@section('content')<!-- Main Section --><section class="main-section"><!-- Add Your Content Inside --><div class="content"><!-- Remove This Before You Start --><h1>Anak IT -  Send Email</h1>@if(\Session::has('alert-failed'))<div class="alert alert-failed"><div>{{Session::get('alert-failed')}}</div></div>@endif@if(\Session::has('alert-success'))<div class="alert alert-success"><div>{{Session::get('alert-success')}}</div></div>@endif<form action="{{ url('/sendEmail') }}" method="post">{{ csrf_field() }}<div class="form-group"><label for="email">Email:</label><input type="email" class="form-control" id="email" name="email"></div><div class="form-group"><label for="nama">Nama:</label><input type="text" class="form-control" id="name" name="nama"/></div><div class="form-group"><label for="judul">Judul:</label><input type="text" class="form-control" id="judul" name="judul"/></div><div class="form-group"><label for="pesan">Pesan:</label><textarea class="form-control" id="pesan" name="pesan"></textarea></div><div class="form-group"><button type="submit" class="btn btn-md btn-primary">Send Email</button></div></form></div><!-- /.content --></section><!-- /.main-section -->@endsection

Kalo sudah sekarang kita benerin routes kita, masuk keroutes->web.phpdan tambahin routes dibawah ini

//emailRoute::get('/email',function() {returnview('send_email');});Route::post('/sendEmail', 'Email@sendEmail');

Udah? eits tunggu dulu men kita harus config data kita dulu

Pastiin Email Google kalian enggak menggunakan two layer verification. Two layer verification itu merupakan fitur kalo kalian sign in di gmail nanti akan ngirim SMS dulu untuk memastikan yang login itu kalian / bukan (biar lebih aman). Kalo kalian pake two layer dipastikan akan gagal. Kalo udah paham sekarang saatnya edit file .env yang ada di root folder kalian, edit bagian MAIL

MAIL_DRIVER=smtpMAIL_HOST=smtp.gmail.comMAIL_PORT=587MAIL_USERNAME=emailkamu@gmail.comMAIL_PASSWORD="PASSWORD ELU"MAIL_ENCRYPTION=tls

udah? sekarang jangan lupa CTRL + S untuk ngesave dan langsung aja di gas

php artisan serve

kalo udah langsung cek ke

localhost:8000/email

Kalo udah berhasil nanti kaya gini

Image Setelah itu klik SEND EMAIL dan tunggu beberapa saat karena dia akan mengirimkan koneksi ke google, pastiin aja internet kalian lancar.

Image BOOM! Sudah berhasil, tunggu berkisar antara 1–5 menit kalo Google lagi alhamdulillah sih udah nyampe harusnya. Kalo udah sampe ntar gini

Image KABOOM! kamu berhasil membuat email dengan gaya marketing-marketing spam gitu yang sering ke email kamu, kamu juga bisa buat email verifikasi akun dengan ini loh :)

PERHATIAN:

Jika kalian perhatikan email berasal darimhudyaramadhana@gmail.com. Q: Kita bisa terus-terusan ngirim email? A: Berdasarkanhttps://support.google.com/a/answer/166852?hl=endikasitau sih batasan kita sehari ngirim email itu 2000. Kalo engga paling 500. Q: Kan kita udah nulis from donotreply@bacot.com kok ga pake from email itu ? A: Jadi gini mas/mba developer yang sedangbelajar, kalo pakeGRATISANa.k.a gmail ya emang gitu. Otomatis dari email yang digunakan kalian saat ngirim email. Intinya tutorial ini udah ngebuat agan bisa ngirim email. Q: Tapi saya maunya dari donotreply@domain-agan.com gan biar bisa keren aja gitu A: Oh gampang, agan punya hosting & domain sendiri, barudeh bisa gan. Agan juga bisa bayar ke penyedia API email seperti Mailgun, Mandrill, Sendgrid, dll. Q: CARANYA GIMANA GAN? A: Ikutin tutorial dibawah

  1. Pertama agan pastiin punya hosting nyewa! dimana? dimana kek! Jangan lupa beli domain juga!
  2. Lalu Agan masuk ke control panel agan
  3. Kalo udah cari fungsi Email Accounts, kalo belom punya, buat sendiri
  4. Kalo udah, klik Set Up Mail Accounts pada daftar email kalian di hosting
  5. Udah? Nanti tampilannya kaya gini

Image Tinggal agan edit isi file .ENV agan dan sesuaikan usernamenya sesuai email agan, passwordnya juga dan portnya sesuain sama outgoing server, baru deh agan bisa menggunakan email daridonotreply@domain-agan.com Okeh sekian dari gue ya! Semoga Membantu!

Artikel ini merupakan konten legacy dari blog Medium (Tahun 2017). Beberapa konsep atau sintaks mungkin sudah mengalami perubahan pada versi terbaru.