Membuat Newsletter Subscribers dengan Laravel 8
Newsletter Subscribers Laravel - Di beberapa website, jika kita perhatikan ada banyak sekali yang menyediakan form subscribe (biasanya di bagian footer). Penyediakan form tersebut bertujuan untuk koleksi data email user yang ingin berlanggan berita dari website tersebut. Biasanya, pemilik website akan membuat email promosi dan akan mengirimkan atau mempublikasikan ke email-email yang terdaftar sebagai subscribers. Atau biasanya digunakan juga untuk mengirimkan notifikasi juga ada berita terbaru dari website tersebut.
Lalu, dari sisi teknis bagaimana cara membuat newsletter subscribers tersebut ? di artikel kali ini, kita akan mencoba membuat newsletter subscribers dengan laravel 8 dan menggunakan package dari Mydnic/laravel-subscribers.
Berikut ini adalah langkah-langkah bagaimana cara membuat newsletter subscriber dengan laravel 8 dan menggunakan package dari Mydnic/laravel-subscribers:
1. Langkah pertama kita awali dengan install laravel terlebih dahulu. Di artikel ini kita akan menjalankan proses install laravel via composer dengan cara membuka terminal kemudian masuk ke direktori dimana project laravel ingin diletakkan lalu jalankan command di bawah ini.
composer create-project laravel/laravel newsletterUntuk project percobaan ini akan kita beri nama newsletter.
2. Jika proses installasi sudah selesai. Masuk ke direktori project tersebut dengan command cd newsletter.
3. Langkah ketiga yaitu install package Mydnic/laravel-subscribers. Caranya bisa dengan menjalan command di bawah ini pada terminal.
composer require mydnic/laravel-subscribersDengan menjalankan command di atas, kita sudah berhasil menginstall package laravel subscribers pada project laravel kita.
4. Publish file migration untuk tabel subscribers. File migration tersebut masih belum terdapat di folder database/migration sehingga kita perlu mem-publish terlebih dahulu. Jalankan command di bawah ini untuk mem-publish file yang dibutuhkan.
php artisan vendor:publish --provider="Mydnic\Subscribers\SubscribersServiceProvider" --tag="subscribers-migrations"5. Buat database baru untuk project laravel subscribers ini. Seperti misalnya buat database dengan nama newsletter kemudian sesuaikan juga nama database di file .env atau lebih tepatnya di baris DB_DATABASE.
6. Jika langkah nomor 5 sudah dijalankan, sekarang jalankan php artisan migrate untuk memigrasi file-file migration ke database yang baru dibuat.
7. Hampir selesai. Sekarang kita beralih ke sisi tampilan. Sederhananya, kita hanya memerlukan satu form dan button untuk menambahkan data email subscriber. Secara sederhana, kode yang bisa digunakan untuk membuat form dan button tersebut bisa seperti di bawah ini.
<form action="{{ route('subscribers.store') }}" method="post">
@csrf
<input type="email" name="email">
<input type="submit" value="submit">
</form>
@if (session('subscribed'))
<div class="alert alert-success">
{{ session('subscribed') }}
</div>
@endifNamun di percobaan membuat newsletter subscribers dengan laravel 8 ini, kita akan menyesuaikan sedikit.
Buka file welcome.blade.php kemudian sesuaikan kodenya sehingga menjadi seperti ini.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
<form action="{{ route('subscribers.store') }}" method="post">
@csrf
@if (session('subscribed'))
<div class="alert alert-success">
{{ session('subscribed') }}
</div>
@endif
<label for="" class="text-white">Dapatkan berita terbaru via email</label>
<div class="input-group mb-3">
<input type="email" class="form-control" name="email">
<input type="submit" class="btn btn-primary" value="submit">
</div>
</form>
</div>
</body>
</html>sehingga ketika kita akses halaman home atau di url 127.0.0.1:port atau newsletter.test tampilannya akan seperti gambar di bawah ini.
8. Dan terakhir, tambahkan name pada
Route::get('/', function () {
return view('welcome');
});sehingga akan menjadi seperti di bawah ini.
Route::get('/', function () {
return view('welcome');
})->name('home');9. Selesai.
Untuk mencobanya, silahkan akses project membuat newsletter subscribers dengan laravel 8 ini dengan menjalankan server (php artisan serve). Pada form, silahkan input email valid (misal; nama@gmail.com), kemudian klik submit.
Jika berhasil, sekarang silahkan cek di database.
OK, email sudah berhasil didaftarkan.
Kita sudah berhasil membuat newsletter subscribers dengan laravel 8, namun terkadang user juga bisa berubah pikiran dan tidak ingin lagi berlangganan newsletter atau mau unsubscribe. Solusinya, kita bisa menambahkan link unsubscribe pada email atau dimanapun dengan kode di bawah ini.
<a href="{{ route('subscribers.delete', ['email' => $subscriber->email]) }}">unsubscribe</a>kode link tersebut akan men-generate link seperti /subscribers/delete?email=nama@gmail.com.
Demikian artikel kali ini yang telah membahas cara mudah membuat newsletter subscribers dengan laravel 8 dan package dari Mydnic/laravel-subscribers. Jika ada kritik, saran, masukan atau apapun yang ingin didiskusikan, silahkan tulis pada form komentar di bawah ini.
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 63168 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 30880 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 27868 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 27536 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 26620 views
Facebook 
Whatsapp 
Twitter 
Telegram