Cách tạo biểu mẫu liên hệ Laravel và gửi email bằng SendGrid
Laravel là một framework PHP open-souce , miễn phí, dựa trên Symfony và được sử dụng để tạo các ứng dụng web. SendGrid là một nhà cung cấp SMTP dựa trên cloud cho phép bạn gửi email mà không cần phải duy trì server email.Có một biểu mẫu liên hệ trên trang web giúp khách truy cập liên hệ trực tiếp với bạn dễ dàng hơn. Để biểu mẫu liên hệ của bạn hoạt động chính xác và gửi email, bạn cần có server SMTP. Hướng dẫn này sẽ sử dụng SendGrid và dịch vụ SMTP miễn phí của họ để chuyển các email được gửi từ biểu mẫu liên hệ trên trang web đến hộp thư đến.
Trong hướng dẫn này, bạn sẽ thêm biểu mẫu liên hệ vào ứng dụng Laravel hiện có và cấu hình nó để gửi email qua SMTP bằng SendGrid.
Yêu cầu
Nếu bạn chưa cài đặt ứng dụng Laravel, bạn cần những thứ sau:
- Truy cập vào server Ubuntu 20.04 với quyền là user không phải root có quyền sudo và firewall hoạt động được cài đặt trên server của bạn. Để cài đặt những điều này, vui lòng tham khảo Hướng dẫn cài đặt server ban đầu cho Ubuntu 20.04 của ta .
- LEMP được cài đặt trên server của bạn theo Cách cài đặt Nginx, MySQL và PHP trên Ubuntu 20.04 .
- Trình soạn thảo để cài đặt Laravel và các phụ thuộc của nó. Bạn có thể cài đặt Composer theo hướng dẫn của ta về Cách cài đặt Composer trên Ubuntu 20.04 .
- Đã cài đặt và cấu hình Laravel trên server của bạn. Nếu bạn chưa cài đặt Laravel, bạn có thể làm theo hướng dẫn Cách cài đặt và cấu hình Laravel với Nginx trên Ubuntu 20.04 của ta .
Sau khi bạn đã cài đặt ứng dụng Laravel của bạn , bạn cũng cần những thứ sau:
- Một account SendGrid. Bạn có thể truy cập trang đăng ký SendGrid để đăng ký một account SendGrid miễn phí.
- Tên domain đã đăng ký đầy đủ được trỏ đến server của bạn. Hướng dẫn này sẽ sử dụng
your_domainxuyên suốt. Bạn có thể mua domain trên Namecheap , nhận một domain miễn phí trên Freenom hoặc sử dụng công ty đăng ký domain mà bạn chọn. Đối với DigitalOcean, bạn có thể làm theo phần giới thiệu này về DigitalOcean DNS để biết chi tiết về cách thêm chúng.
Bước 1 - Tạo danh tính người gửi
SendGrid yêu cầu bạn xác minh quyền sở hữu domain của bạn trước khi cho phép bạn bắt đầu gửi email. Để xác minh domain của bạn, hãy truy cập account SendGrid, sau đó đi tới Trang tổng quan và nhấp vào Xác thực domain của bạn .
Thao tác này sẽ đưa bạn đến một trang mà bạn cần chỉ định server lưu trữ DNS của bạn và chọn xem bạn có muốn gắn nhãn các liên kết cho domain của bạn hay không. Thương hiệu liên kết email cho phép bạn đặt tất cả các liên kết được sử dụng để theo dõi nhấp chuột trong email tới domain của bạn thay vì từ sendgrid.net .
Sau đó nhấp vào Tiếp theo và trên trang tiếp theo, chỉ định domain của bạn.
Cuối cùng, bạn cần thêm các bản ghi DNS do SendGrid cung cấp để hoàn tất quá trình xác minh của chúng.Để biết thêm thông tin về cách quản lý bản ghi DNS của bạn, bạn có thể đọc hướng dẫn này về Cách tạo, chỉnh sửa và xóa bản ghi DNS .
Khi bạn đã thêm các bản ghi DNS vào vùng DNS của bạn , hãy quay lại SendGrid và nhấn nút Xác minh .
Với SendGrid danh tính được xác nhận, bạn cần phải tạo một khóa API, mà bạn sẽ sử dụng trong Laravel bạn .env file .
Từ menu bên trái, nhấp vào Khóa API và sau đó nhấp vào nút Tạo Khóa API . Để bảo mật, hãy đặt Quyền đối với khóa API thành Quyền truy cập có giới hạn .
Sau đó, cuộn xuống và thêm quyền Gửi thư .
Cuối cùng, nhấp vào nút Tạo & Xem để lấy khóa API của bạn. Khóa API sẽ chỉ hiển thị một lần, vì vậy hãy nhớ ghi chú nó ở một nơi an toàn.
Đến đây bạn đã cấu hình domain của bạn bằng SendGrid và tạo khóa API, bạn sẽ cấu hình chi tiết SMTP cho ứng dụng Laravel của bạn .
Bước 2 - Cấu hình chi tiết SMTP
Tệp .env trong Laravel được sử dụng để lưu trữ các tùy chọn cấu hình khác nhau cho môi trường ứng dụng của bạn. Vì thường có một số thông tin nhạy cảm trong file .env , chẳng hạn như chi tiết kết nối database của bạn, bạn không nên commit file .env với quyền kiểm soát nguồn.
Nếu bạn đã hoàn thành hướng dẫn yêu cầu , bạn cần phải ở trong folder /var/www/travellist để truy cập file .env của bạn :
- cd /var/www/travellist
Sau đó, sử dụng editor yêu thích của bạn, mở file .env :
- nano .env
Có nhiều biến cấu hình trong file .env — trong hướng dẫn này, bạn sẽ chỉ thay đổi các biến MAIL .
Để làm như vậy, hãy tìm cài đặt MAIL_ và cấu hình các biến như sau, thêm khóa API đã sao chép của bạn vào sendgrid_api_key và cập nhật các trường được đánh dấu khác nếu cần:
. . . MAIL_MAILER=smtp MAIL_HOST=smtp.sendgrid.net MAIL_PORT=587 MAIL_USERNAME=apikey MAIL_PASSWORD=sendgrid_api_key MAIL_ENCRYPTION=tls . . . Danh sách sau đây chứa tổng quan về các biến phải được cập nhật để ứng dụng Laravel của bạn bắt đầu sử dụng server SendGrid SMTP:
-
MAIL_HOST: Tên server SendGrid SMTP, sẽ được sử dụng để gửi email. -
MAIL_PORT: Cổng SMTP TLS bảo mật của SendGrid. -
MAIL_USERNAME: Tên user SendGrid của bạn. Theo mặc định, nó làapikeycho tất cả các account . -
MAIL_PASSWORD: Khóa API SendGrid của bạn. -
MAIL_ENCRYPTION: Giao thức mã hóa thư. Trong trường hợp này, bạn sẽ sử dụng TLS vì nó bảo mật nội dung email trong quá trình chuyển giữa các server .
Lưu và thoát khỏi file .
Với cài đặt SMTP của bạn đã sẵn sàng, bạn đã sẵn sàng tiếp tục và cấu hình bộ điều khiển liên hệ của bạn .
Bước 3 - Tạo bộ điều khiển
Tiếp theo, bạn sẽ tạo một bộ điều khiển sẽ xử lý các yêu cầu POST và GET cho trang biểu mẫu liên hệ của bạn.
Bạn sẽ sử dụng tuyến GET để trả về trang HTML chứa biểu mẫu liên hệ của bạn và tuyến POST sẽ xử lý các lần gửi biểu mẫu liên hệ.
Để tạo bộ điều khiển có tên ContactController trong Laravel, hãy sử dụng lệnh artisan sau:
- php artisan make:controller ContactController
Sau khi chạy lệnh, bạn sẽ nhận được kết quả sau:
OutputController created successfully. Lệnh này sẽ tạo một bộ điều khiển mới tại app/Http/Controllers/ContactController.php .
Chạy phần sau để chỉnh sửa file ContactController.php :
- nano app/Http/Controllers/ContactController.php
Đầu tiên, bạn sẽ bao gồm mặt tiền Laravel Mail để bạn có thể sử dụng chức năng thư trong bộ điều khiển mới của bạn . Một mặt tiền trong Laravel là một lớp cung cấp quyền truy cập vào các tính năng Laravel khác nhau. Để biết thêm thông tin về các mặt tiền Laravel, hãy xem tài liệu chính thức về Mặt tiền Laravel .
Để bao gồm mặt tiền Laravel Mail thêm những thứ sau:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Mail; . . . Sau đó, thêm phương thức sẽ xử lý các yêu cầu GET của bạn và trả về chế độ xem trang liên hệ:
. . . class ContactController extends Controller { public function contact(){ return view('contact'); } } Cuối cùng, hãy thêm một phương thức sẽ xử lý các yêu cầu POST và gửi các email:
... class ContactController extends Controller { public function contact(){ return view('contact'); } public function contactPost(Request $request){ $this->validate($request, [ 'name' => 'required', 'email' => 'required|email', 'comment' => 'required' ]); Mail::send('email', [ 'name' => $request->get('name'), 'email' => $request->get('email'), 'comment' => $request->get('comment') ], function ($message) { $message->from('youremail@your_domain'); $message->to('youremail@your_domain', 'Your Name') ->subject('Your Website Contact Form'); }); return back()->with('success', 'Thanks for contacting me, I will get back to you soon!'); } } Trong các dòng được đánh dấu, bạn cần thay đổi một số biến, như sau:
$message->from(' youremail@your_domain ');: Thay đổiyouremail@your_domainbằng địa chỉ email thực của bạn.$message->to('youremail@your_domain', 'Your Name'):$message->tovà$message->fromkhông nhất thiết phải khớp nhau. Bạn cũng có thể thay đổi$message->tobằng một địa chỉ email khác mà bạn muốn nhận tất cả các câu hỏi về biểu mẫu liên hệ của bạn .subject(' Your Website Contact Form ');: Bạn cũng có thể thay đổi chủ đề email bằng cách chỉnh sửa thư bên trong phương thứcsubject.
Lưu ý : $message->from(' youremail@your_domain '); địa chỉ cần trùng với domain mà bạn đã sử dụng với SendGrid.
Sau khi bạn hoàn thành các chỉnh sửa này, sau đây sẽ là file ContactController.php đầy đủ của bạn:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Mail; class ContactController extends Controller { public function contact(){ return view('contact'); } public function contactPost(Request $request){ $this->validate($request, [ 'name' => 'required', 'email' => 'required|email', 'comment' => 'required' ]); Mail::send('email', [ 'name' => $request->get('name'), 'email' => $request->get('email'), 'comment' => $request->get('comment') ], function ($message) { $message->from('youremail@your_domain'); $message->to('youremail@your_domain', 'Your Name') ->subject('Your Website Contact Form'); }); return back()->with('success', 'Thanks for contacting me, I will get back to you soon!'); } } Lưu và thoát khỏi file của bạn sau khi bạn hoàn thành các chỉnh sửa của bạn .
Bộ điều khiển Liên hệ của bạn có hai phương pháp:
-
contact(): Phương thức này trả về mẫu dạng xem Blade liên hệ của bạn, mẫu này sẽ giữ trang HTML của bạn có bố cục HTML cho biểu mẫu liên hệ của bạn. Blade là công cụ tạo khuôn mẫu đi kèm với Laravel. Trong các dạng xem mẫu Blade của bạn, bạn có thể thêm cấu trúc HTML của bạn cùng với mã PHP và cú pháp Blade. -
contactPost(): Phương thức này xử lý tất cả các lần gửi biểu mẫu liên hệ — nơi bạn xử lý xác thực đầu vào và gửi email.
Bạn xử lý xác thực bên trong phương thức contactPost() với phương thức $this->validate() . Bên trong phương thức xác thực, bạn chỉ định rằng name , email và comment là bắt buộc. Bằng cách đó, user của bạn sẽ không thể gửi câu hỏi về biểu mẫu liên hệ trống hoặc không đầy đủ. Để biết thêm thông tin về cách xác thực Laravel hoạt động, hãy xem tài liệu xác thực Laravel chính thức .
Khi xác thực thành công, phương thức Mail::send() xây dựng nội dung và chủ đề email của bạn và sau đó gửi email đi.
Cuối cùng, nếu email được gửi thành công, bạn sẽ trả về một thông báo thành công hiển thị cho user của bạn.
Bạn đã cài đặt bộ điều khiển liên hệ của bạn và bây giờ có thể chuyển sang các tuyến GET và POST .
Bước 4 - Tạo các tuyến đường
Các tuyến Laravel cho phép bạn tạo các URL thân thiện với SEO cho ứng dụng của bạn . Bằng cách sử dụng các tuyến Laravel, bạn có thể định tuyến các yêu cầu ứng dụng của bạn đến các bộ điều khiển cụ thể, nơi bạn xử lý logic ứng dụng của bạn .
Bạn sẽ tạo hai tuyến đường trong file routes/web.php mình để sử dụng các phương pháp bạn đã cài đặt ở bước trước.
Đầu tiên, bạn sẽ tạo một tuyến GET ánh xạ tới phương thức contact của bạn trong ContactController . Phương thức này chỉ trả về dạng xem Blade contact của bạn. Mở routes/web.php bằng lệnh sau:
- nano routes/web.php
Thêm tuyến GET ở cuối file :
Lưu ý : Nếu bạn tuân theo các yêu cầu , bạn sẽ có nội dung khác nhau trong file routes/web.php . Bạn có thể thêm các tuyến đường của bạn vào cuối file này theo hướng dẫn trong hướng dẫn này.
<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/contact', 'ContactController@contact')->name('contact'); Bây giờ, bạn sẽ thêm một lộ trình POST và ánh xạ nó tới phương thức contactPost của bạn, phương thức này sẽ xử lý việc gửi biểu mẫu liên hệ user của bạn:
<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/contact', 'ContactController@contact')->name('contact'); Route::post('/contact', 'ContactController@contactPost')->name('contactPost'); Khi đã sẵn sàng Bộ điều khiển và Định tuyến, bạn có thể lưu và thoát khỏi file của bạn , sau đó tiến hành bước tiếp theo, nơi bạn sẽ chuẩn bị các chế độ xem Blade của bạn .
Bước 5 - Tạo Blade Views
Trong bước này, bạn sẽ bắt đầu bằng cách tạo một dạng xem trong ứng dụng sẽ chứa biểu mẫu liên hệ HTML của bạn. Nó sẽ có ba trường đầu vào:
- Trường nhập với loại văn bản cho địa chỉ email của user
- Trường nhập với loại văn bản cho tên của user
- Vùng văn bản cho comment
Tạo một file có tên là resources/views/contact.blade.php :
- nano resources/views/contact.blade.php
Sau đó thêm nội dung sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Form with Laravel and SendGrid</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> <div class="container"> @if(session('success')) <div class="alert alert-success"> {{ session('success') }} </div> @endif <form method="POST" action="/contact"> @csrf <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}"> <label for="email">Email address</label> <input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter your email"> <span class="text-danger">{{ $errors->first('email') }}</span> </div> <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}"> <label for="name">Name</label> <input name="name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Your name"> <span class="text-danger">{{ $errors->first('name') }}</span> </div> <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}"> <label for="exampleInputPassword1">Comment</label> <textarea name="comment" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> <span class="text-danger">{{ $errors->first('comment') }}</span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html> Đây là một biểu mẫu HTML có phương thức POST đến /contact route. Khi ai đó điền vào biểu mẫu liên hệ, nó sẽ được xử lý bằng phương thức contactPost của bạn.
Thẻ <link> bên trong thẻ <head> được sử dụng để bao gồm Bootstrap. Bạn đang sử dụng một số kiểu cho biểu mẫu HTML. Bạn có thể thay đổi kiểu của biểu mẫu để nó phù hợp với thiết kế của trang web . Để biết thêm thông tin về cách tạo kiểu cho trang web , bạn có thể xem trang tài nguyên CSS của ta .
Biểu mẫu được bao bọc trong các <div> khác nhau với các lớp từ Bootstrap. Bạn đang sử dụng các <div> để tạo cấu trúc của biểu mẫu liên hệ. Để biết thêm thông tin về cách hoạt động của <div> , hãy xem hướng dẫn Cách sử dụng <div>, phần tử Phân chia nội dung HTML .
Lưu và thoát khỏi file này.
Chế độ xem tiếp theo mà bạn sẽ tạo là chế độ xem email của bạn.
Mở file resources/views/email.blade.php :
- nano resources/views/email.blade.php
Sau đó thêm nội dung sau:
Inquiry from: {{ $name }} <p> Email: {{ $email }} </p> <p> Message: {{ $comment }} </p> Điều này chứa nội dung email sẽ được gửi đến những user hoàn thành biểu mẫu liên hệ của bạn. Lưu và thoát khỏi file .
Với việc tạo kiểu và chế độ xem hoàn tất, bạn đã sẵn sàng tiếp tục và kiểm tra biểu mẫu liên hệ.
Bước 6 - Kiểm tra Biểu mẫu liên hệ
Để kiểm tra biểu mẫu liên hệ, hãy truy cập http:// your_domain /contact qua trình duyệt của bạn.
Bạn sẽ thấy biểu mẫu Bootstrap HTML mà bạn đã tạo ở bước trước.
Hoàn thành tất cả các trường bắt buộc và nhấn nút Gửi . Bạn sẽ nhận được một thông báo màu xanh lá cây rằng tin nhắn đã được gửi thành công.
Bạn có thể kiểm tra biểu mẫu bằng cách gửi nó mà không cần điền vào bất kỳ trường nào. Xác thực mà bạn đã thêm vào bộ điều khiển của bạn sẽ nắm bắt được điều đó và nó sẽ thông báo cho bạn rằng các trường không được để trống.
Cuối cùng, bạn có thể kiểm tra account email của bạn và đảm bảo bạn đã nhận được email thử nghiệm và bạn có thể thấy nó trong hộp thư đến của bạn .
Kết luận
Đến đây bạn đã thêm thành công biểu mẫu liên hệ vào trang web Laravel hiện có của bạn .
Bạn cũng có thể tìm thêm thông tin trong tài liệu chính thức của Laravel .
Để đảm bảo biểu mẫu liên hệ của bạn được bảo mật, bạn có thể cài đặt certificate SSL cho trang web của bạn theo hướng dẫn của ta về Cách bảo mật Nginx bằng Let's Encrypt .
Để tìm hiểu thêm về Laravel, hãy xem bộ sưu tập các tài nguyên Laravel của ta .
Các tin liên quan
