Laravel Framework : Membuat Landing Page dengan Laravel dan Vue JS

Landing page merupakan platform digital marketing yang dapat sangat berpengaruh positif pada bisnis ketika dioptimasi dengan baik. Banyak orang mencari cara membuat landing page yang baik. Berbagai platform digunakan untuk membuat landing page.

Namun, apakah anda sudah pernah mendengan Laravel 8 dan Vue.js? Para developer tentunya sudah tidak asing lagi dengan aplikasi ini.

Di artikel ini kami akan memaparkan cara membuat landing page dengan Laravel dan Vue.js.

Persyaratan Membuat Landing Page Laravel

Sebelum melakukan tutorial ini anda perlu memenuhi 4 syarat berikut:

• Pengalaman menggunakan Laravel (lebih baik jika pengalaman menggunakan versi 8.0) dan Vue.js (lebih baik jika pengalaman menggunakan seri 3.x)
• Akun SendGrid versi gratis atau berbayar
• Composer yang terinstal secara menyeluruh
• cURL
• Node.js dan npm
• PHP 7.4 (dengan cURL, mbstring, intl, dan ekstensi OpenSSL yang terinstall dan sudah diaktifkan)
• Laravel installer

Flowchart Sistem

Sebelum anda menyelami cara membuat landing page, anda perlu memahami gambaran besar tentang user flow aplikasinya.

Landing page memungkinkan user sign up untuk mendapatkan notifikasi tentang tawaran-tawaran yang akan datang. Contoh berikut merupakan toko fiksi yang akan membantu menjadi ilustrasi penjelasan. Sebut saja toko ini "Toko PHP"

Aplikasi ini akan memiliki dua rute, / dan /signup. Kedua rute tersebut akan ditangani oleh pengendali tunggal yang dinamakan LandingPageController.

Ketika user menggunakan rute biasa ( / ) mereka akan melihat formulir yang meminta mereka menyediakan alamat email sehingga mereka dapat sign up untuk menerima notifikasi dari Toko PHP.

Formulir ini akan divalidasi baik dari klien maupun server. Jika validasi  klien sukses maka alamat email akan dikirim sebagai JSON object pada server. Jika validasi dari server sudah berhasil maka user akan teregistrasi dan email akan dikirimkan untuk mengonfirmai registrasi.

Pada tahap ini sebuah respon JSON akan dikirim ke klien untuk mengonfirmasi sign up yang sukses. Ketika klien menerima notifikasi ini, formulir di atas akan tersembunyi dan akan ada pesan yang berisi konfimasi.

Jika validasi dari sisi server gagal atau jika user tidak bisa subscribe, akan ada sebuah respon JSON yang dikirimkan ke user. Respon ini akan memberikan penjelasan bahwa prosesnya gagal, termasuk juga alasannya.

Membuat Aplikasi Backend

Lakukan Bootstrap pada Aplikasi Laravel

Hal pertama yang perlu kita lakukan adalah mem-bootstrap aplikasi Laravel baru. Untuk melakukannya, pakai perintah dibawah ini. Anda juga bisa mengunakan metode lain.

Aplikasi yang sudah di-bootstrap akan dibuat di direktori baru yang bernama landing-page. Ubah ke direktori tersebut dan mulai aplikasi untuk mengecek apakah semua berjalan sebagaimana mestinya. Untuk melakukan hal tersebut gunakan perintah di bawah ini. Aplikasi tersebut akan tersedia di localhost port 8000.

Jika aplikasinya sudah berjalan anda akan melihat halaman yang mirip dengan tangkapan layar berikut. Hentikan aplikasi dengan menekan Ctrl + c.

Install Paket yang Dibutuhkan

Dengan aplikasi yang di bootstrap kita akan menginstall dua paket:

• s-ichikawa/laravel-sendgrid-driver: untuk mengirim email melalui SendGrid. Tahap ini dilakukan karena Laravel tidak menyediakan email transport native untuk SendGrid.
• sendgrid/sendgrid: untuk memasukkan daftar kontak kita ke SendGrid.

Untuk menginstalnya, gunakan perintah berikut di root directory proyek anda.

Buat API Key

Sealnjutnya anda perlu mensuplai aplikasi tadi dengan SendGrid API key milik anda. Untuk melkukannya, setalah log in ke SendGrid, navigasikan ke "Settings -> API Keys". Setelah itu:

1. Klik "Create API Key"
2. Beri nama API Key
3. Terima izin "Full Access" API key
4. Klik "Create and View"

Setelah API key selesai dibuat, salin untuk tahap selanjutnya.

Lalu, buka file .env di root direktori proyek anda dan masukkan pasangan key/value dibawah sampai akhir file. Ganti YOUR-KEY-HERE dengan API key yang sudah anda salin. Update juga dua key di file MAIL-MAILER ke sendgrid dan MAIL_FROM_ADDRESS ke alamat email pilihan anda.

Catatan: Alamat email harus didaftarkan sebagai "Verified" pada tabel "Single Sender Verification" di Sender Authentification.

Buat Mailable

Sekarang kita akan membuat sebua Mailable yang menyimpan judul email, mengatur tampilan untuk merender pada badan email, dan menspesifikasi transport email untuk digunakan. Untuk melakukan semua itu anda perlu melakukan perintah dibawah ini pada root direktori proyek anda.

File baru bernama Subscribed.php akan dibuat di app/Mail. Copy dan paste kode dibawah, di tempat kode file yang ada.

Sebagian besar tindakan di Mailable terjadi di metode build. Metode ini diikuti beberapa metode lain seperti:

• Template untuk merender untuk membuat badan email (view)
• Judul email (subject)

Metode build diselesaikan dengan sendgrid, email dikirim dengan SendGrid transport.

Buat Landing Page Controller

Nah, sekarang saatnya anda membuat sebuah pengendali untuk menangani permintaan ke dua rute aplikasi. Untuk melakukan hal tersebut, lakukan perintah dibawah. Ketika perintah sudah lengkap, sebuah file baru bernama LandingPageController.php akan sudah ada di app/Hyyp/Controllers.

Dengan file yang sudah dibuat, buka app/Http/Controllers/LandingPageController.php dan masukkan dua metode ke dalamnya. Pertama, metode show dari contoh dibawah, kemudian metode signup.

Setelah itu masukkan statement berikut untuk metode signup.

Dari sini kita akan lompat langsung ke penjelasan metode signup. Metode ini mulai menggunakan Laravel's Validator Facade untuk memvalidasi data yang terkirim di permintaan dengan cara memanggil $request -> all (), melawan sebuah validasi rulesat, dengan hasil yang tersimpan di $validator.

Untuk lulus validasi, badan permintaan harus berisi elemen bernama email yang nilainya adalah alamat email yang sah. Selain itu, ada tambahan lagi aturan validasi Request For Comment (RFC) dan Domain Name System (DNS) khusus email. Alasannya adalah:

• Validasi RFC: memastikan bahwa email valid sesuai dengan email RFC. Namun, meskipun lolos validasi tersebut email mungkin tidak dapat dirutekan secara universal, contohnya matthew atau matthew@lan.
• Validasi DNS: memastikan bahwa alamat email tidak berisi nama DNS tingkat atas yang dicadangkan, atau mDNS, dan ruang nama DNS pribadi, seperti test, local, lan, intranet, dan internal.

Jika hasil panggilan metode fails berubah menjadi false, objek JSON yang dikembalikan berisi daftar kesalahan validasi formulir. Hal ini dapat diatsi dengan memanggil metode error $validator. Selain itu, kode status respons diatur ke 422 untuk menunjukkan bahwa permintaan tidak dapat diproses.

Namun, jika validasi berhasil, tambahkan alamat email ke daftar kontak. Untuk melakukannya, objek SendGrid baru dibuat. Objek ini memerlukan kunci API SendGrid yang diambil dari variabel lingkungan 'SENDGRID_API_KEY'.

Setelah itu, sebuah permintaan PUT dikirim ke endpoint /marketing/contacts/ API SendGrid. Untuk permintaan itu, serangkaian kontak diteruskan, meskipun hanya dengan satu kontak dimana kami menentukan alamat email kontak baru.

Jika kode status respons bukan 202 maka ada yang tidak beres. Jika ini terjadi, respons JSON dikembalikan ke klien yang berisi tiga properti:

• status diubah ke false
• message diubah ke "subscription failed"
• reason, diinisialisasi dengan kesalahan yang dikembalikan dari panggilan API SendGrid

Jika user sudah berhasil ditambahkan ke daftar kontak, saatnya untuk mengirim email konfirmasi. Untuk melakukan itu, ada dua metode pada Laravel's Mail Facade: to untuk mengatur penerima dan send untuk mengirim email.

Penerima diambil dari alamat email yang dikirim di badan permintaan, dengan mudah diambil dengan memanggil metode input $request. Sisa properti email ditentukan di Subscribed, objek Mailable yang kita buat sebelumnya, yang diteruskan ke metode send Mail facade.

Upaya mengirim email dibungkus dengan blok try/catch untuk berjaga-jaga jika ada masalah pengiriman email, contohnya mencoba mengirim dari alamat email yang tidak terdaftar sebagai "Verified" di tabel "Single Sender Verification".

Jika kesalahan tertangkap, respons JSON dikembalikan ke klien yang berisi tiga properti, mirip dengan sebelumnya:

• status diubah ke false
• message diubah ke "registration failed"
• reason, diinisialisasi dengan pesan pengecualian

Sampai disini semua tahap telah berhasil, sekarang saatnya untuk memberi tahu user. Kode melakukannya dengan mengembalikan respons JSON, tetapi kali ini hanya dengan dua properti: status diubah ke true dan pesan diatur ke "registration completed".

Tahap ini memang sepele, namun efektif!

Catatan: ada cara yang lebih dapat dipertahankan untuk mengkodekan metode controller, tetapi untuk tujuan contoh, saya telah menyertakan semua panggilan yang diperlukan dalam isi metode signup.

Buat Template yang Diperlukan

Sekarang saatnya membuat template yang akan digunakan oleh aplikasi. Di bawah resources/views, kita akan membuat dua direktori (email dan layout) dan tiga file (landing.blade.php, email/subscribed.blade.php, dan layouts/app.blade.php).

Berikut adalah representasi visual dari struktur file & direktori yang akan kita buat.

Jalankan perintah di bawah ini untuk membuat struktur file dan direktori.

Catatan: Jika Anda menggunakan Microsoft Windows, tanda -p tidak diperlukan, dan perintah sentuh tidak ada, jadi coba perintah berikut sebagai gantinya.

Update Resources/Views/Layouts/App.blade.php

Buka resources/views/layouts/app.blade.php dan paste kode di bawah ini ke dalamnya. Sebagian besar merupakan kode template Laravel yang cukup standar yang dapat Anda temukan di resources/views/welcome.blade.php.

Namun, dua tag terakhir di bagian kepala perlu diperhatikan. Di sini, kita menautkan stylesheet CSS yang akan dibuat nanti di tutorial dan menyimpan token CSRF, yang akan dibuat Laravel sebagai tag meta.

Kita tidak akan membahas resources/views/landing.blade.php dan resources/views/email/subscribed.blade.php sekarang, karena akan dibahas nanti dalam tutorial.

Update Tabel Routing

Kita hanya perlu membuat dua perubahan pada tabel routing. Kita perlu mengubah pengendali rute default dan menambahkan rute baru untuk menangani pendaftaran. Untuk melakukan itu, ganti rute yang ada di route/web.php dengan kode di bawah ini.

Masukkan juga statement berikut untuk LandingPageController

Update Konfigurasi Laravel

Dengan rute yang ditentukan, sekarang kita perlu memperbarui tiga file konfigurasi inti Laravel: config/cors.php, config/mail.php, dan config/services.php.

Update config/cors.php

File pertama yang perlu kita update adalah config/cors.php. Hal ini dilakukan agar request XHR yang akan kita buat di frontend Vue.js berhasil membuat request ke backend aplikasi Laravel.

Untuk mengaktifkannya, perbarui paths array elemen dalam array yang dikembalikan di config/cors.php, sehingga cocok dengan kode contoh di bawah ini.

Update config/mail.php

Selanjutnya, kita perlu memperbarui config/mail.php untuk mendaftarkan sendgrid sebagai transport email yang valid. Untuk melakukannya, tambahkan konfigurasi di bawah ini ke array elemen mailer di akhir daftar transport yang ada.

Update config/services.php

Perubahan terakhir yang harus kita lakukan adalah config/services.php untuk mendaftarkan sendgrid sebagai layanan dengan DI Container Laravel. Untuk melakukannya tambahkan konfigurasi di bawah ini di akhir array yang dikembalikan dalam file.

Buat Aplikasi Vue.js

Dalam cara membuat landing page di artikel ini, ketika backend aplikasi sudah selesai, saatnya membuat aplikasi Vue.js frontend. Sebelum melakukannya, instal beberapa dependensi.

Untuk menginstalnya jalankan perintah di bawah ini di direktori root proyek.

1. npm install axios vue vue-form vue-loader vue-template-compiler
2. npm install --save-dev laravel-mix lodash mix-tailwindcss postcss tailwindcss

Update resource/views/landing.blade.php

Konten lengkap resources/views/email/landing.blade.php cukup panjang sehingga tidak dicantumkan di artikel ini. Anda dapat menemukannya di repositori GitHub untuk proyek ini. Salin dan tempel konten ke dalam template.

Pertama, mari visualisasikan apa yang terjadi dalam file.

Ada aplikasi Vue.js kecil yang disebut app, yang terdiri dari dua bagian:

1. Formulir halaman arahan yang dilihat pengguna ketika mereka pertama kali mendarat di halaman
2. Konfirmasi pasca-pengiriman yang muncul sebagai pengganti formulir setelah pengiriman formulir berhasil.

Mari kita mulai dengan formulir halaman arahan yang terdiri dari dua bagian:

1. Header dan deskripsi pemasaran untuk meyakinkan pembaca agar memberikan alamat email mereka.
2. Formulir yang dapat diisi dan dikirimkan oleh pengguna yang dapat membuat kesalahan saat pengiriman formulir gagal validasi atau permintaan sisi server gagal.

Bagian langsung di bawah ini adalah bagian satu. Tidak banyak, kecuali untuk direktif v-show yang secara kondisional menampilkan elemen jika submitted diatur ke true.

1. async subscribeUser() {
2. let URL = '//signup'
3. await fetch(
4. URL,
5. {
6. method: 'POST',
7. headers: {
8. 'Content-Type': 'application/json',
9. 'Accept': 'application/json',
10. "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
11. },
12. body: JSON.stringify(this.form),
13. })
14. .then(resp => {
15. if (resp.ok) {
16. return resp.json()
17. } else {
18. throw Error(`Request rejected with status ${resp.status}`);
19. }
20. })
21. .then(data => {
22. // Hide the form and display the post-subscribe DOM element
23. this.submitted = data.status;
24. empty
25. // Clear the email string submitted by the user
26. this.form.email = '';
27. })
28. .catch(err => console.log(err));
29. }
30. }
31. };

Bagian berikutnya menggunakan komponen Vue.js kustom, error-item, untuk mengurangi jumlah kode yang diperlukan dalam template dan membuat rendering kesalahan lebih mudah dipertahankan. Kami akan segera membahas komponen ini.

Bagian ini menggunakan direktif v-if untuk merender elemen secara kondisional berdasarkan ada tidaknya kesalahan. Ia menggunakan atribut @submit.prevent Vue.js untuk meneruskan kontrol proses pengiriman formulir normal ke metode processForm. Proses ini menggunakan arahan CSRF Laravel Blade untuk membuat token CSRF di bidang formulir tersembunyi.

Satu hal lain yang perlu diperhatikan adalah direktif v-model di bidang input email, v-model="form.email" menciptakan pengikatan dua arah antara elemen formulir dan properti form.email dalam kode JavaScript. Detailnya akan dibahas di teks selanjutnya.

Catatan: Kami akan menggunakan namespace form.email untuk membuat penamaan lebih intuitif daripada email.

1. <div class="ml-4 mt-4 mr-4 text-gray-600 dark:text-gray-400 text-sm"id="signup-form">
2. <div v-if="errors.length > 0" class="bg-red-300 rounded-md p-4">
3. <span>Please correct the following error(s):</span>
4. <error-item v-for="item in errors" v-bind:error="item"></error-item>
5. </div>
6. <form action="/signup" method="post" name="signup-form"
7. enctype="application/x-www-form-urlencoded"
8. @submit.prevent="processForm">
9. @csrf
10. <input class="rounded-lg border-4 mt-2 p-4 border-yellow-500 text-2xl max-w-full w-full"
11. name="email"
12. placeholder="Please enter your email address"
13. type="email"
14. v-model="form.email"
15. >
16. <button class="max-w-full w-full mt-2 border-2 bg-yellow-500 p-6 rounded-lg text-white text-2xl font-bold capitalize shadow" type="submit">Sign up</button>
17. </form>
18. </div>
19. </div>

Bagian terakhir berisi pesan konfirmasi yang akan ditampilkan ketika formulir berhasil dikirimkan. Kita dapat membuatnya secara sederhana hanya dengan menentukan header dan body text. Bagian terakhir berisi pesan konfirmasi yang akan ditampilkan ketika formulir berhasil dikirimkan. Kita dapat membuatnya tetap sederhana hanya dengan menentukan header dan body text.

1. <div v-show="submitted">
2. <div class="flex items-center" id="header">
3. <div class="ml-4 mr-4 mb-4 text-3xl leading-7 font-bold">Thanks for signing up </div>
4. </div>
5. <div class="ml-4 mr-4 mt-2 text-gray-600 dark:text-gray-400 text-lg" id="body">
6. Check your inbox shortly for an email from us.
7. </div>
8. <div class="ml-4 mr-4 mt-2 text-sm">
9. <a href="/" class="underline text-blue-600">Start over</a>
10. </div>
11. </div>
12. </div>

Buat Kode JavaScript

Selanjutnya, mari kita masuk ke JavaScript yang akan menggerakkan frontend. Agak panjang, jadi salin kode dari repositori GitHub dan tempel di tempat kode yang ada di resources/js/app.js. Kemudian, mari kita melangkah melaluinya.

Kode dimulai dengan mendefinisikan sendGridApp, yang menjadi dasar dari aplikasi Vue.js kami, yang berisi 3 properti data:

• errors: daftar kesalahan validasi formulir
• form.email: menyimpan alamat email yang diberikan pengguna
• submitted: menentukan apakah formulir telah berhasil dikirim atau tidak. Jika diatur ke false, formulir akan ditampilkan. Jika diatur ke true, maka pesan konfirmasi akan ditampilkan menggantikan formulir.

Selanjutnya, kita mendefinisikan metode sendGridApp. Dimulai dengan processForm, ini dipicu saat formulir dikirimkan, memeriksa apakah email telah disetel. Jika belum, itu menetapkan pesan kesalahan dan mengembalikan false, sehingga pengiriman formulir berhenti. Jika sudah, maka ia akan memanggil subscribeUser untuk berlangganan pengguna ke daftar.

1. async subscribeUser() {
2. let URL = '//signup'
3. await fetch(
4. URL,
5. {
6. method: 'POST',
7. headers: {
8. 'Content-Type': 'application/json',
9. 'Accept': 'application/json',
10. "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
11. },
12. body: JSON.stringify(this.form),
13. })
14. .then(resp => {
15. if (resp.ok) {
16. return resp.json()
17. } else {
18. throw Error(`Request rejected with status ${resp.status}`);
19. }
20. })
21. .then(data => {
22. // Hide the form and display the post-subscribe DOM element
23. this.submitted = data.status;
24. empty
25. // Clear the email string submitted by the user
26. this.form.email = '';
27. })
28. .catch(err => console.log(err));
29. }
30. }
31. };

subscribeUser membuat permintaan POST ke /signup, dengan badan JSON yang berisi JSON-encoded copy dari form tersebut.

Header permintaan penting untuk diperhatikan. Ini karena mereka memastikan bahwa Laravel menafsirkan permintaan sebagai permintaan XHR, bukan pengiriman formulir normal (Content-Type dan Accept), dan bahwa permintaan itu valid karena memiliki token CSRF (X-CSRF-TOKEN).

Jika membangun aplikasi sisi server murni hanya menggunakan template Blade maka hanya perlu menyertakan direktif @csrf Blade, dan Blade akan menyelesaikan sisanya. Namun, hal tersebut tidak sesederhana JavaScript.

Kode menggunakan metode Promise's then untuk mengambil JSON dalam respons (jika permintaan berhasil) atau untuk melempar Kesalahan (jika tidak berhasil). Jika permintaan berhasil, metode then digunakan.

Di sini setelan submitted diubah ke true. Hal tersebut mengakibatkan beberapa hal:

• Menyembunyikan formulir
• Menampilkan pesan konfirmasi
• Menghapus alamat email yang dimasukkan dalam formulir

Terakhir, jika terjadi kesalahan, kesalahan akan ditangkap dan dicatat ke konsol.

Akhirnya, aplikasi Vue.js baru dibuat, bernama app, dengan const yang baru saja kita definisikan. Kode pembuatan aplikasi mendefinisikan komponen kecil untuk merender kesalahan formulir dan pemasangan aplikasi.

Buat Stylesheet

Selanjutnya, di resources/css/app.css, tambahkan kode di bawah ini,  mencakup base, components, dan utilities, dan membuat beberapa gaya dasar tambahan untuk beberapa elemen yang umum di seluruh template tampilan.

1. @tailwind base;
2. @tailwind components;
3. @tailwind utilities;
4. kosong
5. @layer base {
6. .h1 {
7. @apply ml-4 mr-4 mb-4 text-3xl leading-7 font-bold;
8. }
9. .body-text {
10. @apply ml-4 mr-4 mt-2 text-gray-600 text-lg;
11. }
12. .content {
13. @apply relative flex justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0;
14. }
15. .button-orange {
16. @apply max-w-full w-full mt-2 border-2 bg-yellow-500 p-6 rounded-lg text-white text-2xl font-bold capitalize shadow;
17. }
18. .link {
19. @apply underline text-blue-600;
20. }
21. .form-wrapper {
22. @apply ml-4 mt-2 mr-4 text-gray-600 text-sm;
23. }
24. .form-email {
25. @apply rounded-lg border-4 mt-2 p-4 border-yellow-500 text-2xl max-w-full w-full;
26. }
27. .form-errors {
28. @apply bg-red-300 rounded-md p-4;
29. }
30. }

Update resources/views/email/subscribed.blade.php

Konten lengkap resources/views/email/subscribed.blade.php tidak disertakan karena cukup panjang. Anda dapat menemukannya di repositori GitHub untuk proyek ini. Salin dan tempel isinya ke dalam template.

Sekarang, mari kita menelusuri bagian file yang paling relevan.

Template memperluas resource/views/layouts/app.blade.php, dengan mengatur konten untuk bagian content saat dirender. Kontennya sendiri relatif sederhana, hanya berterima kasih kepada pengguna yang telah berlangganan, dan diakhiri dengan memberi pengguna tautan untuk berhenti berlangganan.

1. <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
2. <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
3. <div class="p-6">
4. <div class="flex items-center" id="header">
5. <h1 class="h1">Thank you for subscribing!</h1>
6. </div>
7. <div class="body-text" id="body">
8. Thanks for subscribing. You're now on the list to be one of the first to find out when the thing we're making is available.
9. </div>
10. <footer class="mt-6">
11. <div class="mb-4">
12. <h3 class="font-bold underline">The Little PHP Shop.</h3>
13. <span class="italic">Here to look after all your PHP needs.</span><br>
14. </div>
15. <div class="flex">
16. <address class="flex-col">
17. (e) <ahref="mailto:info@thelittlephpshop.com">info@thelittlephpshop.com</a><br>
18. (t): <a href="tel:+17123456789">+17123456789</a><br>
19. (a): 123 Kerrigan St, Frenchville, Qld 4701, Australia
20. </address>
21. </div>
22. </footer>
23. </div>
24. </div>
25. </div>
26. @endsection

Bangun Aplikasi Frontend

Pada titik ini, kami hampir siap untuk menguji aplikasi. Namun, sebelum itu perlu dibangun frontend dan file pendukungnya. Laravel Mix membuat ini cukup mudah. Untuk memulai, perbarui satu file konfigurasi dan membuat file konfigurasi kedua.

Update webpack.mix.js

Karena Laravel Mix dibundel dengan Laravel, file konfigurasinya, webpack.mix.js, sudah tersedia dan berisi konfigurasi dasar.

Namun, perlu ada dua tambahan. Penambahan pertama mendukung Laravel Mix untuk komponen file tunggal Vue.js. Penambahan kedua mendukung Tailwind CSS. Tambahkan perubahan yang disorot di bawah ini ke webpack.mix.js.

Buat tailwind.config.js

Karena yang digunakan adalah Tailwind CSS untuk menata gaya frontend dan karena kita baru saja menambahkan dukungan untuk itu ke file konfigurasi Laravel Mix, kita perlu menyediakan file konfigurasi tailwind.config.js agar dapat dibangun dengan benar.

Buat file baru bernama tailwind.config.js di direktori root proyek, lalu salin dan tempel kode di bawah ini ke dalamnya.

Kode ini menginstruksikan PostCSS untuk mengurai semua file PHP, Blade, JavaScript, dan Vue.js di direktori di atas dan untuk membuat daftar semua style Tailwind CSS yang ditemukan di dalamnya. Dengan menggunakan daftar itu, ia menghapus semua style yang tidak digunakan dari lembar gaya CSS Tailwind default, menghasilkan lembar gaya berukuran sekitar 20.5KB.

Hal terebut berguna karena file default yang tidak terkompresi berukuran 3566.2Kb. Ukuran itu terlalu besar untuk situs web yang diharapkan berkinerja baik.

Dengan file di tempat dan dikonfigurasi, di terminal di direktori root proyek, jalankan perintah di bawah ini.

Perintah ini menjalankan Laravel Mix dengan memberitahunya ke:

• Menghasilkan public/js/app.js dari resources/js/app.js
• Menghasilkan public/css/app.css dari resources/css/app.css

Hanya butuh beberapa detik untuk melengkapi dan merender program berikut ke terminal.

Tes Aplikasinya

Hal paling penting setelah anda mengetahui cara membuat landing page dan mempraktekkannya adalah mengetes hasilnya. Ketika semua kode sudah terpasang dan tersambung, saatnya untuk menguji apakah rangkaian tersebut berfungsi dengan baik. Untuk melakukannya, jalankan aplikasi dengan menggunakan perintah di bawah ini.

Kemudian, buka http://localhost:8000 di browser pilihan Anda. Sebelum mengisi formulir, buka Developer Tools dan ubah ke tab Console. Kalau semua sudah siap, isi formulir dengan alamat email yang valid.

Anda akan melihat formulir akhirnya disembunyikan dan digantikan oleh pesan konfirmasi. Periksa kotak masuk Anda untuk email konfirmasi. Kemudian, lihat daftar Semua Kontak Anda, untuk konfirmasi bahwa pengguna berhasil berlangganan. Jika berhasil, Anda akan melihatnya terdaftar, mirip dengan tangkapan layar di bawah ini.

Sekarang, coba lagi dengan mengklik tautan "Start over" dan kirimkan formulir tanpa memasukkan alamat email atau setelah memasukkan alamat email yang tidak valid. Anda akan melihat pesan kesalahan yang berlaku ditampilkan.

Nah, begitulah cara membuat landing page dengan Laravel, Vue.js, dan SendGrid.

Bagi anda pelaku bisnis yang ingin membuat landing page dengan lebih praktis tanpa repot belajar cara membuat landing page , Jasa Pembuatan Lading Page Ardata dapat menjadi alternatif anda.