วิธีสร้างหน้า Landing Page ด้วย Laravel, Vue.js และ Twilio SendGrid

อัพเดทตารางเส้นทาง

เราต้องทำการเปลี่ยนแปลงเพียง 2 รายการในตารางเส้นทาง: เพื่อเปลี่ยนตัวจัดการเส้นทางเริ่มต้นและเพิ่มเส้นทางใหม่เพื่อจัดการการลงชื่อสมัครใช้ ในการทำเช่นนั้น ให้แทนที่เส้นทางที่มีอยู่ใน routes/web.php ด้วยรหัสด้านล่าง

เพิ่มคำสั่งการใช้งานสำหรับ LandingPageController ด้วย:

อัปเดตการกำหนดค่าของ Laravel

ด้วยเส้นทางที่กำหนดไว้ ตอนนี้เราจำเป็นต้องอัปเดตไฟล์การกำหนดค่าหลักของ Laravel 3 ไฟล์: config/cors.php , config/mail.php และ config / services.php

อัปเดต config/cors.php

ไฟล์แรกที่เราต้องอัปเดตคือ config /cors.php ทั้งนี้เพื่อให้ คำขอ XHR ที่เราทำในส่วนหน้า Vue.js สามารถส่งคำขอไปยังแอป Laravel แบ็คเอนด์ได้สำเร็จ

หากต้องการเปิดใช้งาน ให้อัปเดตอาร์เรย์ขององค์ประกอบ paths ธในอาร์เรย์ที่ส่งคืนใน config/cors.php เพื่อให้ตรงกับโค้ดตัวอย่างด้านล่าง

อัปเดต config/mail.php

ต่อไป เราต้องอัปเดต config/mail.php เพื่อลงทะเบียน sendgrid เป็นการส่งจดหมายที่ถูกต้อง ในการดำเนินการดังกล่าว ให้เพิ่มการกำหนดค่าด้านล่างในอาร์เรย์ขององค์ประกอบ mailers ที่ส่วนท้ายของรายการการขนส่งที่มีอยู่

อัปเดต config/services.php

การเปลี่ยนแปลงขั้นสุดท้ายที่เราต้องทำคือ config/services.php เพื่อลงทะเบียน sendgrid เป็นบริการกับคอนเทนเนอร์ Dependency Injection (DI) ของ Laravel โดยเพิ่มการกำหนดค่าด้านล่างที่ส่วนท้ายของอาร์เรย์ที่ส่งคืนในไฟล์

สร้างแอปพลิเคชัน Vue.js

ตอนนี้เราได้สร้างส่วนหลังของแอปพลิเคชันแล้ว ก็ถึงเวลาสร้างแอปพลิเคชัน Vue.js ส่วนหน้า ก่อนที่เราจะสามารถทำได้ เราต้องติดตั้งการพึ่งพาหลายรายการ

ดีใจที่มีไม่มากนัก แค่ Vue.js และ Laravel Mix พร้อมรองรับ Tailwind CSS , PostCSS และ Lodash เพื่อทำให้การสร้างส่วนหน้าง่ายขึ้น

ในการติดตั้ง ให้รันคำสั่งด้านล่างในไดเร็กทอรีรากของโครงการ

อัปเดตทรัพยากร/มุมมอง/landing.blade.php

ฉันไม่ได้รวมเนื้อหาทั้งหมดของ ทรัพยากร/views/email/landing.blade.php เนื่องจากเนื้อหาค่อนข้างยาวและจะใช้พื้นที่มากเกินไปในบทความนี้ คุณสามารถค้นหาได้ ในที่เก็บ GitHub สำหรับโครงการนี้ คัดลอกและวางเนื้อหาลงในเทมเพลต

ฉันจะดำเนินการในส่วนที่เกี่ยวข้องมากที่สุดของไฟล์ อันดับแรก เราจะนึกภาพสิ่งที่เกิดขึ้นในไฟล์เพื่อให้เห็นคุณค่าของสิ่งที่เกิดขึ้นได้ง่ายขึ้น

เรากำลังสร้างแอปพลิเคชัน Vue.js ขนาดเล็กที่เรียกว่า app ประกอบด้วย 2 ส่วน:

1. 1. แบบฟอร์มแลนดิ้งเพจที่ผู้ใช้เห็นเมื่อเข้าสู่เพจครั้งแรก
   2. การยืนยันหลังการส่งที่ปรากฏแทนที่แบบฟอร์มหลังจากส่งแบบฟอร์มสำเร็จแล้ว

มาเริ่มกันที่แบบฟอร์มหน้า Landing Page ประกอบด้วย 2 ส่วนคือ

1. 1. ส่วนหัวและคำอธิบายการตลาดเพื่อโน้มน้าวให้ผู้อ่านระบุ ที่อยู่อีเมล
   2. แบบฟอร์มที่ผู้ใช้สามารถกรอกและส่ง ซึ่งสามารถแสดงข้อผิดพลาดเมื่อส่งแบบฟอร์มไม่ผ่านการตรวจสอบหรือคำขอฝั่งเซิร์ฟเวอร์ล้มเหลว

ส่วนด้านล่างโดยตรงเป็นส่วนที่หนึ่ง ไม่มีอะไรมาก ยกเว้น V-show directive ซึ่งจะแสดงองค์ประกอบตามเงื่อนไขหาก submitted เป็น true

ส่วนถัดไปใช้คอมโพเนนต์ Vue.js แบบกำหนดเอง error-item เพื่อลดจำนวนโค้ดที่จำเป็นในเทมเพลตและเพื่อให้การแสดงข้อผิดพลาดสามารถบำรุงรักษาได้มากขึ้น เราจะพูดถึงองค์ประกอบนี้ในไม่ช้า

ส่วนนี้ใช้ คำสั่ง V-if เพื่อแสดงองค์ประกอบตามเงื่อนไขว่ามีข้อผิดพลาดหรือไม่ มันใช้แอตทริบิวต์ @submit.prevent ของ Vue.js เพื่อส่งผ่านการควบคุมของกระบวนการส่งแบบฟอร์มปกติไปยังเมธอด processForm ใช้ คำสั่ง Blade CSRF ของ Laravel เพื่อแสดงโทเค็น CSRF ในฟิลด์แบบฟอร์มที่ซ่อนอยู่

อีกสิ่งหนึ่งที่น่าสังเกตคือ คำสั่ง V-model ในฟิลด์อินพุตอีเมล v-model="form.email" ซึ่งจะสร้างการเชื่อมโยง 2 ทางระหว่างองค์ประกอบของแบบฟอร์มและคุณสมบัติ form.email ในโค้ด JavaScript เราจะกลับมาที่นี่ในไม่ช้า

หมายเหตุ: ส่วนสุดท้ายมีข้อความยืนยันที่จะแสดงเมื่อส่งแบบฟอร์มสำเร็จ เราสามารถทำให้มันง่ายโดยเพียงแค่ระบุข้อความส่วนหัวและเนื้อหา

สร้างโค้ด JavaScript

ต่อไป เราจะทำงานผ่าน JavaScript ที่จะขับเคลื่อนส่วนหน้า มีความยาวเล็กน้อย ดังนั้นให้คัดลอกโค้ด จากที่เก็บ GitHub และวางแทนโค้ดที่มีอยู่ใน resources /js/app.js แล้วเราจะผ่านมันไปได้

รหัสเริ่มต้นด้วยการกำหนด sendGridApp ซึ่งเป็นพื้นฐานของแอปพลิเคชัน Vue.js ของเราและมีคุณสมบัติข้อมูล 3 อย่าง:

• • errors : นี่คือรายการข้อผิดพลาดในการตรวจสอบแบบฟอร์ม
  • form.email : ใช้สำหรับเก็บอีเมลที่ผู้ใช้ระบุ
  • submitted : กำหนดว่าส่งแบบฟอร์มสำเร็จหรือไม่ หากเป็น false แบบฟอร์มจะแสดงขึ้น หากเป็น true ข้อความยืนยันจะแสดงแทนแบบฟอร์ม

ต่อไป เราจะกำหนดเมธอดของ sendGridApp เริ่มต้นด้วย processForm ซึ่งถูกเรียกจากการส่งแบบฟอร์ม เราสามารถตรวจสอบว่าอีเมลมีการตั้งค่าไว้หรือไม่ หากไม่มี มันจะตั้งค่าข้อความแสดงข้อผิดพลาดและส่งกลับค่าเท็จเพื่อให้การส่งแบบฟอร์มหยุดลง หากมี จะเรียก subscribeUser เพื่อสมัครสมาชิกผู้ใช้ในรายการ

subscribeUser ส่งคำขอ POST ไปยัง /signup โดยมีเนื้อหา JSON ซึ่งมีสำเนาของแบบฟอร์มที่ส่งที่เข้ารหัส JSON

ส่วนหัวของคำขอมีความสำคัญที่ควรทราบ นี่เป็นเพราะพวกเขารับรองว่า Laravel ตีความคำขอเป็นคำขอ XHR ไม่ใช่การส่งแบบฟอร์มปกติ ( Content-Type และ Accept ) และคำขอนั้นถูกต้องเพราะมีโทเค็น CSRF ( X-CSRF-TOKEN )

หากเรากำลังสร้างแอปพลิเคชันฝั่งเซิร์ฟเวอร์โดยใช้เทมเพลต Blade เท่านั้น เราจะต้องรวม คำสั่ง CSRF ของ Blade เท่านั้น และ Blade จะทำส่วนที่เหลือเอง อย่างไรก็ตาม JavaScript ไม่ได้ค่อนข้างง่ายนัก

รหัสใช้วิธี then ของ Promise เพื่อดึง JSON ในการตอบกลับ (หากคำขอสำเร็จ) หรือแสดงข้อผิดพลาด (หากไม่สำเร็จ) หากคำขอสำเร็จ จะ then เมธอดถัดไป

ในที่นี้ มันกำหนดให้ submitted เป็นจริง ซึ่งทำหลายสิ่ง:

• • ซ่อนแบบฟอร์ม
  • แสดงข้อความยืนยัน
  • ล้างที่อยู่อีเมลที่ป้อนในแบบฟอร์ม

สุดท้าย หากมีสิ่งผิดปกติเกิดขึ้น จะตรวจพบข้อผิดพลาดและบันทึกลงในคอนโซล

ในที่สุด แอป Vue.js ใหม่จะถูกสร้างขึ้น ซึ่งมีชื่อว่า app โดยมี const ที่เราเพิ่งกำหนด โค้ดการสร้างแอปกำหนดส่วนประกอบขนาดเล็กสำหรับการแสดงข้อผิดพลาดของฟอร์มและติดตั้งแอป

สร้างสไตล์ชีต

ถัดไป ใน ทรัพยากร/css/app.css ให้เพิ่มโค้ดด้านล่าง ประกอบด้วยสไตล์ base components และ utilities ของ Tailwind และสร้าง สไตล์พื้นฐานเพิ่มเติมหลายแบบ สำหรับองค์ประกอบบางอย่างที่เหมือนกันในเทมเพลตมุมมอง

อัปเดตทรัพยากร/มุมมอง/อีเมล/subscribed.blade.php

ฉันไม่ได้รวมเนื้อหาทั้งหมดของ ทรัพยากร/views/email/subscribed.blade.php เนื่องจากเนื้อหาค่อนข้างยาวและจะใช้พื้นที่มากเกินไปในบทความนี้ คุณสามารถค้นหาได้ใน ที่เก็บ GitHub สำหรับโครงการนี้ คัดลอกและวางเนื้อหาลงในเทมเพลต

ตอนนี้ เราจะพูดถึงส่วนที่เกี่ยวข้องมากที่สุดของไฟล์

เทมเพลตจะขยาย ทรัพยากร/views/layouts/app.blade.php โดยการตั้งค่าเนื้อหาสำหรับส่วน content เมื่อแสดงผล เนื้อหานั้นค่อนข้างง่าย เพียงแค่ขอบคุณผู้ใช้ที่สมัครรับข้อมูลและสิ้นสุดโดยให้ลิงก์สำหรับยกเลิกการสมัครแก่ผู้ใช้

สร้างแอปพลิเคชันส่วนหน้า

ณ จุดนี้ เราเกือบจะพร้อมที่จะทดสอบแอปแล้ว อย่างไรก็ตาม เราต้องสร้างส่วนหน้าและไฟล์สนับสนุนก่อนจึงจะทำได้ เป็นเรื่องที่น่า ยินดี Laravel Mix ทำให้เรื่องนี้เป็นเรื่องเล็กน้อย ในการเริ่มต้น เราต้องอัปเดตไฟล์การกำหนดค่าหนึ่งไฟล์ และสร้างไฟล์การกำหนดค่าไฟล์ที่สอง

อัปเดต webpack.mix.js

เนื่องจาก Laravel Mix มาพร้อมกับ Laravel ไฟล์การกำหนดค่า webpack.mix.js จึงพร้อมใช้งานและมีการกำหนดค่าพื้นฐาน

อย่างไรก็ตาม เราต้องเพิ่ม 2 รายการเข้าไป การเพิ่มครั้งแรกสนับสนุน Laravel Mix สำหรับคอมโพเนนต์ไฟล์เดียวของ Vue.js การเพิ่มครั้งที่ สอง รองรับ Tailwind CSS เพิ่มการเปลี่ยนแปลงที่ไฮไลต์ด้านล่าง ใน webpack.mix.js

สร้าง tailwind.config.js

เนื่องจากเราใช้ Tailwind CSS เพื่อจัดรูปแบบส่วนหน้า และเนื่องจากเราเพิ่งเพิ่มการรองรับให้กับไฟล์การกำหนดค่าของ Laravel Mix เราจึงต้องจัดหา ไฟล์การกำหนดค่า tailwind.config.js เพื่อสร้างอย่างถูกต้อง

สร้างไฟล์ใหม่ชื่อ tailwind.config.js ในไดเร็กทอรีรากของโปรเจ็กต์ จากนั้นคัดลอกและวางโค้ดด้านล่างลงในไฟล์

สิ่งนี้แนะนำ ให้ PostCSS แยกวิเคราะห์ไฟล์ PHP, Blade, JavaScript และ Vue.js ทั้งหมดในไดเร็กทอรีด้านบน และสร้างรายการสไตล์ Tailwind CSS ทั้งหมดที่ค้นพบในนั้น เมื่อใช้รายการดังกล่าว จะตัดสไตล์ที่ไม่ได้ใช้ออกจากสไตล์ชีต CSS ของ Tailwind เริ่มต้น โดยสร้างสไตล์ชีตขนาดประมาณ 20.5 KB

ซึ่งมีประโยชน์เนื่องจากไฟล์เริ่มต้นที่ไม่มีการบีบอัด มี ขนาด 3566.2KB มันใหญ่เกินไปสำหรับเว็บไซต์ที่ต้องการประสิทธิภาพ

เมื่อไฟล์อยู่ในตำแหน่งและกำหนดค่าแล้ว ในเทอร์มินัลในไดเรกทอรีรากของโปรเจ็กต์ ให้รันคำสั่งด้านล่าง

คำสั่งนี้รัน Laravel Mix โดยบอกให้:

1. 1. สร้าง public/js/app.js จาก แหล่งข้อมูล/js/app.js
   2. สร้าง public/css/app.css จาก แหล่งข้อมูล/css/app.css

ใช้เวลาเพียงไม่กี่วินาทีในการดำเนินการให้เสร็จสิ้นและแสดงผลต่อไปนี้ไปยังเครื่องเทอร์มินัล

ทดสอบการใช้งาน

เมื่อโค้ดอยู่ในตำแหน่งและต่อสายทั้งหมดแล้ว ก็ถึงเวลาทดสอบว่ามันทำงานอย่างถูกต้อง ในการทำเช่นนั้น ให้เริ่มแอปพลิเคชันโดยใช้คำสั่งด้านล่าง

จากนั้นเปิด http://localhost:8000 ในเบราว์เซอร์ที่คุณเลือก ก่อนกรอกแบบฟอร์ม ให้เปิด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และเปลี่ยนเป็น แท็บ คอนโซล เมื่อพร้อมทุกอย่างแล้ว ให้กรอกแบบฟอร์มด้วยที่อยู่อีเมลที่ถูกต้อง

คุณควรเห็นแบบฟอร์มที่ซ่อนอยู่และแทนที่ด้วยข้อความยืนยัน ตรวจสอบกล่องจดหมายของคุณสำหรับอีเมลยืนยัน จากนั้น ดู รายชื่อผู้ติดต่อทั้งหมด ของคุณ เพื่อยืนยันว่าผู้ใช้สมัครสำเร็จแล้ว หากสำเร็จ คุณจะเห็นรายการดังกล่าว คล้ายกับในภาพหน้าจอด้านล่าง

ลองอีกครั้งโดยคลิกลิงก์ "เริ่มต้นใหม่" และส่งแบบฟอร์มโดยไม่ต้องป้อนที่อยู่อีเมลหรือหลังจากป้อนที่อยู่อีเมลที่ไม่ถูกต้อง คุณควรเห็นข้อความแสดงข้อผิดพลาดที่เกี่ยวข้องปรากฏขึ้น

นั่นคือวิธีสร้างหน้า Landing Page โดยใช้ Laravel 8, Vue.js และ Twilio SendGrid

เราได้ก้าวผ่านวิธีการเปลี่ยนไซต์ Laravel 8 มาตรฐานหุ้นเป็นหน้า Landing Page พื้นฐาน ซึ่งสามารถลงทะเบียนผู้ใช้ในรายชื่อส่งเมลเมื่อพวกเขาส่งที่อยู่อีเมล

แม้ว่าเราจะไม่ได้เน้นเรื่องนี้มากนัก แต่เรายังได้ใช้ Laravel Mix และ Tailwind CSS เพื่อปรับปรุงกระบวนการสร้างส่วนหน้าที่กำหนดเองและมีประสิทธิภาพสำหรับแอปพลิเคชันของเรา

หากคุณต้องการทราบเพิ่มเติมเกี่ยวกับสิ่งที่ทำให้หน้า Landing Page ยอดเยี่ยม โปรดดูบทความ นี้ จาก Copyblogger มิฉะนั้น คุณสามารถค้นหาโค้ดทั้งหมดสำหรับแอปพลิเคชันที่เราสร้างในซีรีส์นี้ ได้ GitHub

Matthew Setter เป็นโปรแกรมแก้ไข PHP ในทีม Twilio Voices และ (โดยธรรมชาติ) เป็นผู้พัฒนา PHP เขายังเป็นผู้เขียน Mezzio Essentials อีกด้วย เมื่อเขาไม่ได้เขียนโค้ด PHP เขากำลังแก้ไขบทความ PHP ที่ยอดเยี่ยมที่ Twilio คุณสามารถหาเขาได้ที่ [email protected] และเขาคือ settermjd บน Twitter และ GitHub