Что такое Blade?
Blade — это мощный шаблонизатор поставляемый с Laravel. Позволяющий использовать в своих шаблонах чистый код PHP.
Давайте посмотрим где находятся в Laravel все наши шаблоны. Для этого найдём папку resources/views . В папке views находится файл welcome.blade.php — это тот самый файл , который мы уже видели, когда запускали наше приложение в первый раз.
Теперь создадим в папке views наш первый шаблон. Назовём его task.blade.php (blade в названии файла говорит о том , что мы хотим использовать blade — шаблонизатор. Если напишем без данной приставки blade, то Laravel не поймёт, что это шаблон). Для того что бы вы увидели разницу, я создам ещё один файл без приставки blade.
Хорошо, мы создали первый шаблон. В нём теперь можем написать HTML разметку для нашей формы.
Разметка task.blade.php:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Задание</div>
<div class="card-body">
{{--Начало формы--}}
<form method="POST" action="" data-trp-original-action="">
@csrf
{{--Токен - обязательно нужно использовать в формах отправки данных--}}
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right">Название задания</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name_task" required>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right">Описание</label>
<div class="col-md-6">
<input type="text" class="form-control" name="desc" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
{{--Кнопка--}}
<button type="submit" class="btn btn-primary">
Сохранить
</button>
</div>
</div>
<input type="hidden" name="trp-form-language" value="pl"/></form>
{{--Конец формы--}}
</div>
</div>
</div>
</div>
</div>
Теперь что бы посмотреть, что у нас получилось, зайдём в папку routes и откроем файл web.php.
Здесь мы видим первый путь нашего приложения на шаблон welcome.blade.php. Как вы уже заметили, не нужно писать полное название шаблона, достаточно написать название до .blade.php и laravel понимает, что ему нужно найти blade шаблон с таким именем. Давайте вместо шаблона welcome, напишем наш шаблон task. После чего откроем терминал и пропишем две команды:
1. php artisan optimize (обновление приложения, сброс кэша и т.д.).
2. php artisan serve (запустим приложение в нашем локальном сервее).
<?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('/', function () {
return view('welcome'); //название шаблон welcome
});
Копируем ссылку, которую вернул нам терминал и вставляем в браузере. И вот какая форма у нас получилась. Но сейчас мы немного её преобразим и создадим главный шаблон в который мы будем подключать стили CSS. Для образца я буду использовать bootstrap стили.
Хорошо, теперь создадим папку layouts в папке resources/views. Теперь в папке layouts создадим шаблон app.blade.php :
Код для app.blade.php:
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel 8') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body data-rsssl="1">
<div id="app" >
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="/pl/{{ url('/') }}/">
Laravel 8 - Смотрим вместе с kodim.pl
</a>
</div>
</nav>
<main class="py-4">
<div class="container">
@yield('content')
</div>
</main>
</div>
</body>
</html>
Обратите внимание! Мы используем @yield(‘content’) — это своего рода метка, для наших «второстепенных» шаблонов. Которая говорит о том, что именно в данный div class=’container’ будет передаваться шаблон task.blade.php.
Давайте вернёмся к task.blade.php и скажем ему что всю его разметку, мы как бы положим в шаблон app.blade.php.
@extends('layouts.app')
{{--Пишем папку и название файла, в который поместим контент из @section--}}
@section('content')
{{--Так как мы в файле app.blade.php использовали @yield('content') - с названием content то и section дожен называться так же--}}
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Задание</div>
<div class="card-body">
{{--Начало формы--}}
<form method="POST" action="" data-trp-original-action="">
@csrf
{{--Токен - обязательно нужно использовать в формах отправки данных--}}
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right">Название задания</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name_task" required>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right">Описание</label>
<div class="col-md-6">
<input type="text" class="form-control" name="desc" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
{{--Кнопка--}}
<button type="submit" class="btn btn-primary">
Сохранить
</button>
</div>
</div>
<input type="hidden" name="trp-form-language" value="pl"/></form>
{{--Конец формы--}}
</div>
</div>
</div>
</div>
</div>
{{--И в конце не забываем закрыть нашу секцию--}}
@endsection
Теперь давайте посмотрим, какая форма у нас получилась. Открываем браузер и переходим по ссылке http://127.0.0.1:8000.
Другое дело, так гораздо лучше! Теперь мы построили, своего рода фундамент и посмотрели, как работает шаблонизатор blade.
В следующем посте создадим свой контроллер и научим наше приложение записывать данные из нашей формы в базу данных.
