Menu Zamknij

Blade — шаблон Laravel 8

Что такое 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 стили. 

Откройте папку public/css, там у нас находиться файл app.css, предлагаю вам его заменить на мой , что бы у нас получился одинаковый результат, скачать можно здесь.

Хорошо, теперь создадим папку 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.

В следующем посте создадим свой контроллер и научим наше приложение записывать данные из нашей формы в базу данных.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

>