Dmi3yy/Evo3.0RoutesAjaxFormWithValidator.md

## Evo3.0RoutesAjaxFormWithValidator.md

      
    Raw
  

              Evo3.0RoutesAjaxFormWithValidator.md
            
          
    #Laravel Routing, Request, Response, Validator
Ajax №5 или Laravel Routes для кастомных роутов и аякс запросов

Очень долгая история с вопросом как же правильно рабатать с Ajax в Evo вот методы которые предлагались ранеее:

Ajax №1 и №2 http://modx.im/blog/docs/1147.html - через index-ajax (удален с версий 1.0.8 так как не безопастный) и через снипет в отдельном документе
Ajax №3 http://modx.im/blog/triks/2096.html - через плагин на pageNotFound
Ajax №4 http://modx.im/blog/triks/2103.html - через отдельный php фаил

В Evo 3.0 предлагаем поставить точку в выборе правильного решения через Laravel Routes
C чего начать:

Ознакамливаемся с документацией Laravel Routing https://laravel.com/docs/8.x/routing,
Создаем файлик в /core/custom/routes.php и добавляем в него свои роуты
<?php
use Illuminate\Support\Facades\Route;
use EvolutionCMS\Main\Controllers\FormController;

//это для работы с ajax, ниже будет пример
Route::post('ajax_request', [FormController::class, 'form']);

//Простой пример по урлу /foo получим ответ Hello World
Route::get('foo', function () {
    return 'Hello World';
});
Валидация данных, Request, Response

Для понимание что это такое и зачем нужно рекомендую ознакомиться с документацией Laravel:

Validator: https://laravel.com/docs/8.x/validation#manually-creating-validators
Validation rules: https://laravel.com/docs/8.x/validation#available-validation-rules
Request: https://laravel.com/docs/8.x/requests
Response: https://laravel.com/docs/8.x/responses
А ниже расмотрим как это работает на примере

Пример простой формы

Создадим простую форму и напишем к ней обработку
1. Создадим базовый набор HTML шаблонов сущьностей

/views/home.blade.php - основной шаблон

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Hello, world!</title>
</head>
<body>

<div class="container">
    <h1>Hello, world!</h1>
    <div id="ajaxAuthForm">
        @include('partials.form')
    </div>
</div>

<script type="text/javascript">
    function send(form) {
            fetch('ajax_request', {
                method:'post',
                body: new FormData(form)
            })
            .then(res => res.json())
            .then(res => {
                document.querySelector('#ajaxAuthForm').innerHTML = res.output;
                Object.keys(res.errors).forEach((key) => {
                    document.querySelector(`[name='${key}']`).classList.add('is-invalid')
                });
                console.error(res.errors)
            })
            .catch(res => {
                console.error(res)
            });
        }
</script>

</body>
</html>
/views/partials/form.blade.php - форма

@if(isset($errors))
    @foreach($errors->all() as $message)
        <div class="alert alert-danger">{{ $message }}</div>
    @endforeach
@endif
<form name="test" onsubmit="send(this);return false;">
    <div class="form-group">
        <label for="name">Name</label>
        <input name="name" id="name" type="text" class="form-control" value="{{ $name ?? '' }}">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input name="email" type="text" id="email" class="form-control" value="{{ $email ?? '' }}">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
Ошибки мы можем обрабатывать как в Blade так и через JS
/views/partials/thanks.blade.php - Спасибо (сообщение отображаемое на экране если форма отправленна успешно)

<h2>Спасибо.</h2>
Имя: {{ $name }} <br>
Email: {{ $email }} <br>
<a href="/">Отправить еще 1 сообщение</a>
/views/partials/report.blade.php - Письмо (то что уходит в почту)

<h2>Сообщение с сайта</h2>
Имя: {{ $name }} <br>
Email: {{ $email }} <br>
2. Создаем новый пакет Main (можно использовать любой, как вам удобней)


Выполняем команду из папки core: php artisan package:create main
Или можем использовать свой готовый пакет, в целом не имеет значения, но проверяйте правильный ли Namespace

3. Создаем контроллер /core/custom/packages/main/src/Controllers/FormController.php

<?php
namespace EvolutionCMS\Main\Controllers;

use \Illuminate\Http\Request;

class FormController
{
    public function form(Request $request)
    {
        $validator = \Validator::make($request->all(), [
            'name' => ['required', 'min:5'],
            'email' => ['required', 'email:rfc,dns'],
        ], [
            'name.required' => 'Имя обязательное поле',
            'email.required' => 'Email обязательное поле',
            'name.min' => 'Имя не меньше 5 символов',
            'email.email' => 'Некоректный email'
        ]);

        if (!$validator->fails()) {
            $data = [
                'output' => \View::make('partials.thanks', $request)->toHtml()
            ];

            evolutionCMS()->sendmail([
                'from' => 'info@ddaproduction.com',
                'to' => 'dmi3yy@gmail.com',
                'subject' => 'test mail from evo 3.0',
                'body' => \View::make('partials.report', $request)->toHtml()
            ]);

        } else {
            $data = [
                'output' => \View::make('partials.form', $request)->withErrors($validator)->toHtml(),
                'errors' => $validator->errors(),
            ];
        }
        return \Response::json($data);
    }

}
Таким образом мы получаем простой и гибкий способ обработки любых форм, без использования каких либо сниппетов.
Так же рекомендую ознакомиться с документацией по работе с пользователями которая даст возможность по той же логике работать с пользователями: https://github.com/Ser1ous/docs/blob/master/ru/03_%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D1%83/06_DI_%D0%B2_Evolution_CMS/05_UserManager.md
Если сделали все правильно то результат будет вот таким: