作者选择了开源倡议作为写给捐赠计划的一部分接受捐赠。

介绍

Laravel是一个免费的开源PHP框架,基于Symfony(https://symfony.com)并用于创建Web应用程序。

在您的网站上有一个联系表让您的访客更容易直接与您联系,以便您的联系表格正常工作并发送电子邮件,您需要一个SMTP服务器。本教程将使用SendGrid和他们的免费SMTP服务,将从网站的联系表格发送的电子邮件发送到电子邮件收件箱。

在本教程中,您将添加一个联系表格到现有的Laravel应用程序,并配置它以使用SendGrid通过SMTP发送电子邮件。

前提条件

如果您尚未安装 Laravel 应用程序,您将需要以下内容:

访问 Ubuntu 20.04 服务器作为具有 sudo 特权的非根用户,并在您的服务器上安装一个活跃的防火墙。
LEMP 堆栈安装在您的服务器上,按照如何在 Ubuntu 20.04 上安装 Nginx、MySQL 和 PHP。
Laravel 已安裝並配置在您的伺服器上. 如果您尚未安裝 Laravel,您可以遵循我們的 [如何在 Ubuntu 20.04 上安裝和配置 Nginx 的 Laravel] 教程(https://andsky.com/tech/tutorials/how-to-install-and-configure-laravel-with-nginx-on-ubuntu-20-04)。

设置了 Laravel 应用程序后,您还需要以下内容:

您可以访问 SendGrid 注册页面注册免费的 SendGrid 帐户。 * 一个完全注册的域名指向您的服务器。本教程将使用你的_域名。您可以在 Namecheap购买域名,在 Freenom免费获得域名,或使用您选择的域名注册器。对于 DigitalOcean,您可以遵循此 DigitalOcean DNS 介绍以了解如何添加它们的详细信息。

步骤 1 – 创建发件人身份

SendGrid 要求您在允许您开始发送电子邮件之前验证您的域名所有权。若要验证您的域名,请访问您的 SendGrid 帐户,然后进入 ** 控制台** ,然后单击 ** 验证您的域 ** 。

这将带您到一个页面,您需要指定您的DNS主机,并选择是否想为您的域名品牌链接. 电子邮件链接品牌允许您将电子邮件中用于点击跟踪的所有链接设置为您的域名,而不是从sendgrid.net。

SendGrid choose DNS host

然后点击 ** 下一篇** ,然后在下一页,指定您的域名。

SendGrid specify your domain name

最后,您需要添加SendGrid提供的DNS记录以完成其验证过程. 有关如何管理DNS记录的更多信息,您可以阅读本教程在如何创建,编辑和删除DNS记录。

SendGrid verify DNS records

将 DNS 记录添加到您的 DNS 区域后,返回 SendGrid 并点击 ** 验证 ** 按钮。

随着您的SendGrid身份验证,您需要生成一个API密钥,您将在Laravel .env文件中使用。

从左侧的菜单中,单击API Keys,然后单击Create API Key按钮。

SendGrid Create API Key

之后,向下滚动并添加邮件发送权限。

SendGrid send mail permissions

最后,点击创建 & 查看按钮以获取您的 API 密钥. API 密钥只会可见一次,所以一定要在安全的地方注意。

现在你已经配置了你的域名与SendGrid,并生成了你的API密钥,你将配置你的Laravel应用程序的SMTP细节。

步骤 2 — 配置 SMTP 详细信息

Laravel 中的 .env 文件用于存储您的应用环境的各种配置选项. 由于在 .env 文件中通常有某些敏感信息,例如您的数据库连接详细信息,您不应该将 .env 文件交给源控制。

如果你完成了前提教程,你需要在 /var/www/travellist 目录中访问你的 .env 文件:

1cd /var/www/travellist

之后,使用您最喜欢的文本编辑器打开 .env 文件:

1nano .env

在.env 文件中有许多配置变量 - 在本教程中,您只会更改 'MAIL' 变量。

要做到这一点,找到MAIL_设置,并如下配置变量,在复制的API键中添加到sendgrid_api_key,并根据需要更新其他突出字段:

1[label .env]
2. . .
3MAIL_MAILER=smtp
4MAIL_HOST=smtp.sendgrid.net
5MAIL_PORT=587
6MAIL_USERNAME=apikey
7MAIL_PASSWORD=sendgrid_api_key
8MAIL_ENCRYPTION=tls
9. . .

下列列表概述了需要更新的变量,以便您的 Laravel 应用开始使用 SendGrid SMTP 服务器:

MAIL_HOST:将用于发送电子邮件的SendGrid SMTP主机名。 * MAIL_PORT:SendGrid安全的TLS SMTP端口. * MAIL_USERNAME:您的SendGrid用户名. 默认情况下,它是所有帐户的 apikey。 * MAIL_PASSWORD:您的SendGrid API密钥. * MAIL_ENCRYPTION:邮件加密协议. 在这种情况下,您将使用TLS,因为它在服务器之间传输期间保护电子邮件内容。

保存和退出文件。

有了 SMTP 设置,您已经准备好继续并配置您的联系人控制器。

步骤3 - 创建控制器

接下来,您将创建一个控制器,用于处理您的POST和GET请求,用于您的联系表单页面。

您将使用GET路线返回包含您的联系表单的HTML页面,而POST路线将处理联系表单提交。

若要在 Laravel 中创建名为ContactController的控制器,请使用以下手工命令:

1php artisan make:controller ContactController

运行命令后,您将收到以下输出:

1[secondary_label Output]
2Controller created successfully.

此命令将创建一个新的控制器在app/Http/Controllers/ContactController.php。

运行以下操作来编辑ContactController.php文件:

1nano app/Http/Controllers/ContactController.php

首先,您将包括Laravel邮件面板,以便您可以在新控制器中使用邮件功能。Laravel中的 _facade_是一个提供访问不同Laravel功能的类别。

要包括Laravel邮件面板,添加以下内容:

1[label app/Http/Controllers/ContactController.php]
2<?php
3
4namespace App\Http\Controllers;
5
6use Illuminate\Http\Request;
7use Mail;
8. . .

然后添加将处理您的GET请求的方法,并返回联系人页面视图:

1[label app/Http/Controllers/ContactController.php]
2. . .
3class ContactController extends Controller
4{
5        public function contact(){
6                return view('contact');
7        }
8}

最后,让我们添加一种方法来处理POST请求并发送电子邮件:

 1[label app/Http/Controllers/ContactController.php]
 2...
 3class ContactController extends Controller
 4{
 5        public function contact(){
 6                return view('contact');
 7        }
 8
 9    public function contactPost(Request $request){
10        $this->validate($request, [
11                        'name' => 'required',
12                        'email' => 'required|email',
13                        'comment' => 'required'
14                ]);
15
16        Mail::send('email', [
17                'name' => $request->get('name'),
18                'email' => $request->get('email'),
19                'comment' => $request->get('comment') ],
20                function ($message) {
21                        $message->from('youremail@your_domain');
22                        $message->to('youremail@your_domain', 'Your Name')
23                        ->subject('Your Website Contact Form');
24        });
25
26        return back()->with('success', 'Thanks for contacting me, I will get back to you soon!');
27
28    }
29}

在突出的行中,您需要更改一些变量,例如:

$message-> from('youremail@your_domain');: 使用您的电子邮件地址更改yourremail@ your_ domain 。
$message-' to('you remail@your_domain','your name'): " $sage-to " 和 " $sage-to " 不一定相符。您也可以将$message-> 的值改为另一个电子邮件地址,您希望收到您所有的联系表格查询。
主题(你的网址联系表); 也可以通过编辑subject方法内的信息来更改电子邮件主题。 .

<$>[注] **注: $message->from('youremail@your_domain'); 地址必须匹配您使用的SendGrid域名。

一旦你完成了这些编辑,以下将是你的完整的ContactController.php文件:

 1[label app/Http/Controllers/ContactController.php]
 2<?php
 3
 4namespace App\Http\Controllers;
 5
 6use Illuminate\Http\Request;
 7use Mail;
 8
 9class ContactController extends Controller
10{
11    public function contact(){
12        return view('contact');
13    }
14
15    public function contactPost(Request $request){
16        $this->validate($request, [
17                        'name' => 'required',
18                        'email' => 'required|email',
19                        'comment' => 'required'
20                ]);
21
22        Mail::send('email', [
23                'name' => $request->get('name'),
24                'email' => $request->get('email'),
25                'comment' => $request->get('comment') ],
26                function ($message) {
27                        $message->from('youremail@your_domain');
28                        $message->to('youremail@your_domain', 'Your Name')
29                                ->subject('Your Website Contact Form');
30        });
31
32        return back()->with('success', 'Thanks for contacting me, I will get back to you soon!');
33
34    }
35}

保存和退出你的文件,一旦你完成了编辑。

您的联系控制器有两种方法:

contact():此方法返回您的联系人 Blade 视图模板,该模板将包含您的 HTML 页面,该页面具有您的联系人表单的 HTML 布局. Blade 是与 Laravel 一起提供的模板引擎. 在您的 Blade 模板视图中,您可以添加您的 HTML 结构,以及 PHP 代码和 Blade 语法。 * contactPost(): 此方法处理所有联系人表单提交 - 在那里您处理输入验证并发送电子邮件。

您通过$this->validate()方法处理contactPost()方法内的验证。在验证方法中,您指定需要名称,电子邮件和评论。这样,您的用户将无法提交空白或不完整的联系表单请求。有关 Laravel 验证的更多信息,请参阅官方 Laravel 验证文件。

当验证成功时,邮件::发送()方法构建您的电子邮件体和主题,然后发送电子邮件。

最后,如果电子邮件已成功发送,您将返回成功消息,显示给您的用户。

您已经设置了联系控制器,现在可以转到GET和POST路径。

步骤4 - 创建路线

通过使用Laravel路径,您可以将应用程序请求路由到特定控制器,在那里您处理您的应用程序逻辑。

您将在您的routes/web.php文件中创建两个路径,以使用您在上一步设置的方法。

首先,您将创建一个GET路线,该路线将在您的ContactController中绘制到您的Contact方法,该方法只会返回您的Contact Blade 视图,然后使用以下命令打开routes/web.php:

1nano routes/web.php

在文件的底部添加GET路径:

<$>[注] 注 :如果你遵循前提条件,你将有不同的内容在你的 routes/web.php 文件. 你可以添加你的路由到这个文件的末尾按照本教程的指示。

 1[label routes/web.php]
 2<?php
 3use Illuminate\Support\Facades\Route;
 4
 5/*
 6|--------------------------------------------------------------------------
 7| Web Routes
 8|--------------------------------------------------------------------------
 9|
10| Here is where you can register web routes for your application. These
11| routes are loaded by the RouteServiceProvider within a group which
12| contains the "web" middleware group. Now create something great!
13|
14*/
15
16Route::get('/contact', 'ContactController@contact')->name('contact');

您现在将添加一个POST路线,并将其绘制到您的contactPost方法中,该方法将处理您的用户联系表格提交:

 1[label routes/web.php]
 2<?php
 3use Illuminate\Support\Facades\Route;
 4
 5/*
 6|--------------------------------------------------------------------------
 7| Web Routes
 8|--------------------------------------------------------------------------
 9|
10| Here is where you can register web routes for your application. These
11| routes are loaded by the RouteServiceProvider within a group which
12| contains the "web" middleware group. Now create something great!
13|
14*/
15Route::get('/contact', 'ContactController@contact')->name('contact');
16Route::post('/contact', 'ContactController@contactPost')->name('contactPost');

一旦你的控制器和路由准备好了,你可以保存和退出你的文件,然后继续到下一步,你将准备你的 Blade 视图。

步骤5 - 创建 Blade 视图

在此步骤中,您将开始在应用程序中创建一个视图,该视图将包含您的HTML联系表格,它将有三个输入字段:

输入字段为用户的电子邮件地址输入文字 * 输入字段为用户名输入文字 * 评论的文本区域

创建一个名为资源/视图/contact.blade.php的文件:

1nano resources/views/contact.blade.php

然后添加以下内容:

 1[label resources/views/contact.blade.php]
 2<!DOCTYPE html>
 3<html lang="en">
 4
 5<head>
 6    <meta charset="UTF-8">
 7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8    <title>Contact Form with Laravel and SendGrid</title>
 9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
10        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
11</head>
12
13<body>
14
15    <div class="container">
16        @if(session('success'))
17        <div class="alert alert-success">
18          {{ session('success') }}
19        </div>
20        @endif
21
22        <form method="POST" action="/contact">
23            @csrf
24            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
25                <label for="email">Email address</label>
26                <input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp"
27                    placeholder="Enter your email">
28                <span class="text-danger">{{ $errors->first('email') }}</span>
29            </div>
30            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
31                <label for="name">Name</label>
32                <input name="name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Your name">
33                <span class="text-danger">{{ $errors->first('name') }}</span>
34
35            </div>
36            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
37                <label for="exampleInputPassword1">Comment</label>
38                <textarea name="comment" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
39                <span class="text-danger">{{ $errors->first('comment') }}</span>
40            </div>
41            <button type="submit" class="btn btn-primary">Submit</button>
42        </form>
43    </div>
44
45</body>
46
47</html>

这是一个具有POST方法的HTML表格到/contact路径.当有人填写联系表格时,它将由您的contactPost方法处理。

标签中的<链接>标签被用来包含 Bootstrap. 您正在使用一些 HTML 表单的样式. 您可以更改表单的样式,以便它匹配您的网站的设计。有关如何样式化您的网站的更多信息,您可以查看我们的 CSS 资源页面。

该表单被包装在不同的

标签和 Bootstrap 类. 您正在使用

标签来创建联系人表单的结构. 有关

标签的工作更多信息,请参阅如何使用

,HTML 内容分区元素教程。

保存和退出此文件。

您创建的下一个视图是您的电子邮件视图。

打开资源/视图/email.blade.php文件:

1nano resources/views/email.blade.php

然后添加以下内容:

1[label resources/views/email.blade.php]
2Inquiry from: {{ $name }}
3<p> Email: {{ $email }} </p>
4<p> Message: {{ $comment }} </p>

此包含将发送给填写您的联系表格的用户的电子邮件内容. 保存和退出文件。

随着风格和视图的完成,你准备好前进并测试联系表格。

步骤6 - 测试联系表格

要测试联系表格,请通过您的浏览器访问http://your_domain/contact。

您将看到您在上一步创建的 Bootstrap HTML 表格。

填写所有必要的字段并点击提交按钮,您将收到一个绿色通知,即消息已成功发送。

Laravel contact form message

您可以通过提交表单来测试表单,而不填写任何字段. 您在控制器中添加的验证将捕捉到这一点,并告知您这些字段不应该是空的。

Laravel contact form validation

最后,您可以检查您的电子邮件帐户,并确保您收到测试电子邮件,并可以在您的收件箱中看到它。

结论

您现在已经成功地将联系表格添加到您的现有 Laravel 网站。

您还可以在官方Laravel文档中找到更多信息。

为了确保您的联系表格是安全的,您可以通过遵循我们的指南在 How To Secure Nginx with Let's Encrypt上为您的网站安装SSL证书。

要了解更多关于 Laravel 的信息,请参阅我们的 Laravel 资源收藏。

如何创建 Laravel 联系表单并使用 SendGrid 发送电子邮件

介绍