Как создать форму на Laravel и SendGrid

10 марта, 2023 12:52 пп 75 views | Комментариев нет

| | Комментировать запись

Laravel — это бесплатный PHP-фреймворк с открытым исходным кодом для создания приложений, основанный на Symfony. SendGrid — это облачный SMTP-провайдер, который позволяет отправлять электронную почту без необходимости поддерживать почтовые серверы.

Наличие на вашем сайте формы обратной связи упрощает взаимодействие с вашими посетителями. Для правильной работы контактной формы и отправки электронной почты вам нужен SMTP-сервер. В этом туториале для доставки имейлов, отправленных из формы обратной связи сайта в ящик электронной почты, мы используем SendGrid и бесплатный сервис SMTP.

В этом мануале мы добавим форму обратной связи в приложение Laravel и настроим его для отправки имейлов через SMTP с помощью SendGrid.

Требования

Если у вас еще не настроено приложение Laravel, вам понадобится следующее:

  • Доступ к серверу Ubuntu, пользователь sudo и активный брандмауэр. Чтобы это настроить, обратитесь к мануалу по настройке сервера Ubuntu.
  • Установленный стек LEMP в соответствии с данным туториалом.
  • Composer для установки Laravel и его зависимостей. Установить Composer поможет этот мануал.
  • Установленный и настроенный Laravel на вашем сервере. Если Laravel у вас еще не установлен, вы можете обратиться к этому мануалу.

После настройки приложения Laravel, вам понадобится следующее:

  • Учетная запись SendGrid. Посетите страницу регистрации SendGrid, чтобы зарегистрировать бесплатный аккаунт.
  • Домен, указывающий на ваш сервер. В этом туториале он будет называться условно your_domain. Вы можете купить домен на Namecheap, получить его бесплатно на Freenom или использовать регистратор доменов на свое усмотрение. 

1: Создание идентификатора отправителя

Для того чтобы начать отправлять имейлы с помощью SendGrid, необходимо подтвердить владение вашим доменом. Для этого зайдите в свой аккаунт SendGrid, перейдите на панель управления (Dashboard) и нажмите “Authenticate your Domain”.

Вы перейдете на страницу, где нужно будет указать ваш DNS-хост и выбрать, хотите ли вы брендировать ссылки для своего домена. Цель брендирования ссылок в имейлах — заменить ссылки, которые обычно содержат домен sendgrid.net, на ссылки, которые будут содержать ваш домен.

Затем нажмите “Next” и на следующей странице укажите свой домен.

Наконец, вам нужно будет добавить DNS-записи, предоставленные SendGrid, чтобы завершить процесс их верификации. 

После добавления DNS-записи в зону DNS вернитесь в SendGrid и нажмите кнопку “Verify”.

Подтвердив SendGrid Identity, вам нужно сгенерировать ключ API, который вы будете использовать в файле .env приложения Laravel.

В меню слева выберите “API Keys”, а затем нажмите “Create API Key”. Для безопасности установите для “API Key Permissions” значение “Restricted Access”.

Затем прокрутите вниз и добавьте разрешения “Mail Send”.

Чтобы получить ключ API, нажмите “Create & View”. Этот ключ можно будет увидеть только один раз, поэтому обязательно сохраните его в надежном месте.

После настройки домена для SendGrid мы настроим данные SMTP для приложения Laravel.

2: Настройка деталей SMTP

Файл .env в Laravel используется для хранения параметров конфигурации среды вашего приложения. Поскольку в файле .env обычно содержится конфиденциальная информация (например, данные о подключении к БД), вы не должны добавлять файл .env в систему контроля версий.

Если вы выполнили предыдущий мануал, вам нужно перейти в каталог /var/www/travellist, чтобы получить доступ к файлу .env:

cd /var/www/travellist

Затем откройте файл .env с помощью любого текстового редактора:

nano .env

В файле .env есть много переменных конфигурации — в этом мануале мы изменим только MAIL_.

Для этого найдите параметры MAIL_ и настройте переменные следующим образом, добавив скопированный ключ API в sendgrid_api_key и при необходимости обновите другие выделенные поля:

. . .
MAIL_MAILER=smtp
MAIL_HOST=smtp.sendgrid.net
MAIL_PORT=587
MAIL_USERNAME=apikey
MAIL_PASSWORD=sendgrid_api_key
MAIL_ENCRYPTION=tls
. . .

Следующий список содержит обзор переменных, которые необходимо обновить, чтобы приложение Laravel начало использовать SMTP-сервер SendGrid:

  • MAIL_HOST: имя хоста SMTP-сервера SendGrid, которое будет использоваться для отправки имейлов.
  • MAIL_PORT: порт SMTP для безопасного TLS SendGrid.
  • MAIL_USERNAME: ваше имя пользователя SendGrid. По умолчанию для всех учетных записей устанавливается apikey.
  • MAIL_PASSWORD: ваш ключ API SendGrid.
  • MAIL_ENCRYPTION: протокол шифрования почты. В данном случае вы будете использовать TLS, так как он защищает содержимое имейлов во время передачи между серверами.

Сохраните и закройте файл.

После настройки SMTP-сервера всё готово для настройки контроллера контактов.

3: Создание контроллера

Далее мы создадим контроллер (Controller), который будет обрабатывать запросы POST и GET для страницы формы обратной связи.

Вы будете использовать маршрут GET для возврата HTML-страницы, которая содержит вашу форму обратной связи, а маршрут POST будет обрабатывать отправку этой формы.

С помощью команды artisan создадим контроллер под названием ContactController в Laravel:

php artisan make:controller ContactController

После выполнения команды вы получите следующий вывод:

Controller created successfully.

Эта команда создаст новый контроллер в app/Http/Controllers/ContactController.php.

Чтобы отредактировать файл ContactController.php, выполните следующую команду:

nano app/Http/Controllers/ContactController.php

Сначала необходимо подключить фасад (facade) Mail, чтобы была возможность использовать отправку имейлов в новом контроллере. Фасад в Laravel — это класс, который предоставляет доступ к функциям Laravel. Для получения дополнительной информации о фасадах ознакомьтесь с официальной документацией Laravel.

Чтобы подключить фасад Mail, добавьте следующий код:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Mail;
. . .

Затем добавим метод, который будет обрабатывать запросы GET и возвращать вид страницы контактов:

. . .
class ContactController extends Controller
{
        public function contact(){
                return view('contact');
        }
}

Теперь добавим метод, который будет обрабатывать запросы POST и отправлять имейлы:

...
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!');

    }
}

В выделенных строках вам нужно будет изменить некоторые переменные, как показано ниже:

  • $message->from(‘youremail@your_domain’);: замените youremail@your_domain на свой адрес электронной почты.
  • $message->to(‘youremail@your_domain’, Your Name’): $message->to и $message->from не обязательно должны совпадать. Вы также можете изменить значение $message->to на другой адрес электронной почты, на который вы хотели бы получать все запросы из формы обратной связи.
  • subject(‘Your Website Contact Form’);: вы можете изменить тему имейлов, отредактировав сообщение внутри метода subject.

Примечание: адрес $message->from(‘youremail@your_domain’); должен совпадать с доменом, который вы использовали в SendGrid.

После внесения этих изменений файл ContactController.php будет выглядеть следующим образом:

<?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!');
    }
}

Сохраните и закройте файл после редактирования.

В Contact Controller есть два метода:

  • contact(): этот метод возвращает Blade-шаблон представления контактной формы, который содержит макет HTML-страницы для формы обратной связи. Blade — это движок шаблонов, который поставляется с Laravel. В Blade-шаблонах вы можете добавлять свою HTML-структуру вместе с кодом PHP и синтаксисом Blade.
  • contactPost(): этот метод обрабатывает все запросы формы обратной связи, где вы проводите валидацию ввода и отправляете имейлы.

Вы выполняете проверку в методе contactPost() с помощью метода $this->validate(). Внутри метода validate вы указываете, что имя, электронная почта и комментарий являются обязательными. Таким образом, пользователи не смогут отправлять пустые или неполные запросы через вашу форму. Для получения дополнительной информации о валидации ознакомьтесь с официальной документацией Laravel.

Если валидация прошла успешно, метод Mail::send() создает тело и тему вашего имейла, а затем отправляет его.

При успешной отправке имейла форма возвращает уведомление об успешном завершении, которое отображается для ваших пользователей.

Мы настроили контроллер, теперь можно перейти к маршрутам GET и POST.

4: Создание маршрутов

Маршруты Laravel позволяют создавать SEO-оптимизированные URL-адреса для вашего приложения. С помощью маршрутов Laravel можно направлять запросы приложений на контроллеры, где обрабатывается логика приложения.

Мы создадим два маршрута в файле route/web.php, чтобы использовать методы, которые мы настроили на предыдущем этапе.

Сначала давайте создадим маршрут GET, который будет связан с методом contact в ContactController. Этот метод используется для отображения страницы contact, созданной с помощью шаблонизатора Blade. Откройте файл routes/web.php с помощью следующей команды:

nano routes/web.php

Добавьте маршрут GET в конец файла:

Примечание: если вы выполнили предварительные требования, то в файле routes/web.php у вас будут другие данные. Вы можете добавить маршруты в конец этого файла.

<?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');

Теперь добавим маршрут POST и свяжем его с методом contactPost, который будет обрабатывать отправленные пользователем данные.

<?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');

Теперь, когда Controller и маршруты готовы, вы можете сохранить и закрыть файл и перейти к следующему этапу, где мы подготовим представления Blade.

5: Создание представлений Blade

Начнем с создания представления в приложении, которое будет содержать HTML-форму обратной связи. В ней будет три поля ввода:

  • Поле для адреса электронной почты пользователя
  • Поле для имени пользователя
  • Текстовое поле для комментария

Создайте файл под названием resources/views/contact.blade.php:

nano resources/views/contact.blade.php

Затем добавьте следующее:

<!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>

Это HTML-форма с методом POST для маршрута /contact. Когда кто-то заполняет форму обратной связи, она будет обрабатываться методом contactPost.

Тег <link> внутри тега <head> используется для подключения Bootstrap. Для HTML-формы используются стили. Вы можете изменить её стиль, чтобы он соответствовал дизайну вашего сайта.

Форма заключена в теги <div> с классами из Bootstrap. Теги <div> используются для создания структуры формы. 

Читайте также: Как работает <div>, элемент разделения контента HTML

Сохраните и закройте этот файл.

Следующий этап — это представление электронной почты.

Откройте файл resources/views/email.blade.php:

nano resources/views/email.blade.php

Затем добавьте следующее:

Inquiry from: {{ $name }}
<p> Email: {{ $email }} </p>
<p> Message: {{ $comment }} </p>

Этот код содержит контент для письма, которое будет отправляться пользователям, заполнившим форму обратной связи. Сохраните и закройте файл.

Стилизация и представления готовы, теперь можно протестировать форму.

6: Тестирование формы обратной связи

Для тестирования в браузере перейдите по ссылке http:/your_domain/contact.

Вы увидите HTML-форму Bootstrap, которую мы создали на предыдущем этапе.

Заполните все обязательные поля и нажмите кнопку “Submit”. Вы получите уведомление об успешной отправке сообщения.

Вы можете протестировать форму, отправив ее, но при этом не заполняя ни одно из полей. Валидация, которую вы добавили в контроллер, обнаружит это и сообщит вам, что поля не могут быть пустыми:

Наконец, вы можете проверить свою электронную почту и убедиться, что вы получили тестовый имейл.

Подводим итоги

Вы успешно добавили форму обратной связи на свой сайт Laravel.

Дополнительную информацию можно найти в официальной документации Laravel.

Для обеспечения безопасности вы можете установить SSL-сертификат для своего сайта, следуя гайду по защите Nginx с помощью Let’s Encrypt.

Tags: , ,

Добавить комментарий