Урок 3. Первая форма на Laravel

На этом уроке из серии уроков по Laravel 8 мы займемся возможностью для других отправлять задачи в созданную на первом уроке таблицу задач. Зачем? Да просто так. Во-первых, создайте новый маршрут в routes/web.php файле:

Route::get('/submit', function () {
    return view('submit');
});

Далее нам нужно создать submit.blade.php шаблон в файле resources/views/submit.blade.php со следующей шаблонной загрузочной разметкой:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel с upread.ru</title>
</head>
<body>
<div class="container">
        <div class="row">
            <h1>Отправка</h1>
        </div>
        <div class="row">
            <form action=" " method="post">
                @csrf
                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        Ошибка!
                    </div>
                @endif
                <div class="form-group">
                    <label for="title">Название</label>
                    <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" placeholder="Title" value="{{ old('title') }}" required >
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary">Отправить!</button>
            </form>
        </div>
    </div>
</body>
</html>

Кстати, нам нужен бустрап, чтобы все в Laravel 8 выглядело получше:

composer require laravel/ui

npm install && npm run dev

Теперь в верстку добавим:

<link href="/css/app.css" rel="stylesheet">
<script src="js/app.js"></script>

Выглядит вот примерно так:

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

                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        Ошибка!
                    </div>
                @endif

Каждое отдельное поле формы проверяет наличие ошибок проверки, отображает сообщение об ошибке и выводит класс has-error.

Если пользователь отправляет неверные данные, маршрут сохранит проверку в сеансе и перенаправит пользователя обратно в форму. Функция {{ old('title') }} заполнит исходные данные. Если пользователь забыл отправить одно из полей, другие поля, содержащие данные, будут заполнены после сбоя проверки и появления ошибок.

Если поле содержит ошибку, директива @error предоставляет переменную сообщения об ошибке, которую можно использовать в блоке директивы:

@error('title')
    <div class="invalid-feedback">{{ $message }}</div>
@enderror

Другой способ проверки и удаления ошибок включает переменную $error, предоставляемую представлению после сбоя проверки и перенаправления:


@if($errors->has('title'))
    <div class="invalid-feedback">{{ $errors->first('title') }}</div>
@endif

Директива @error использует ту же переменную под капотом, не стесняйтесь использовать любой метод, который вы предпочитаете.

Отправка формы

Имея форму на месте, мы готовы обрабатывать отправку и проверку данных формы на сервере. Вернувшись в routes/web.php файл, создайте другой маршрут для запроса POST:


Route::post('/submit', function (Request $request) {
    $data = $request->validate([
        'title' => 'required|max:10',
    ]);
	
	$link = new App\Link($data);
	$link->save($data['title']);
	
    return redirect('/submit');
});

Примечание: убедитесь, что вы добавили use Illuminate\Http\Request в верхней части страницы web.php.

Этот маршрут немного сложнее, чем другие.

Во-первых, мы вводим объект Illuminate\Http\Request, который содержит данные POST и другие данные о запросе.

Затем мы используем метод validate() запроса для проверки данных формы. Метод validate был введен в Laravel 5.5; используется для проверки. В качестве бонуса проверенные поля возвращаются в переменную $data, и мы можем использовать их для заполнения нашей модели.

Если проверка завершается неудачно, создается исключение, и маршрут возвращает пользователю исходные входные данные и ошибки проверки.

Как правило, вам придется делать следующее, это просто добавляет немного синтаксического сахара:

$link = new \App\Link($data);
$link->save();

return $link;

Теперь непосредственно пишем в базу даных

namespace App;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;

class Link extends Controller
{	
	
	public function save($name)
    {	
		DB::insert('INSERT INTO tasks (id, name, created_at, updated_at) VALUES (?, ?, ?, ?)', [NULL, $name, NULL, NULL]);
	}
	  
}

Вообще, в этот пункт надо бы добавить модель для проверки данных, но пока опустим для простоты понимания.

Итак, мы создали форму и научились записывать в базу данных информацию из этой формы, предварительно проверяя её.

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, уроки по Laravel, laravel, php, базы данных

Помогите сайту

Программирование up

Мои услуги