9. Управление постами. Часть 1

Controller

Создаём PostController. Делаем тоже, что и что и с контроллером TagController . Копируем все из CategoryController, заменяем, добавляем новые элементы из https://adminlte.io/themes/v3/

View

Создаем вью resources/views/admin/posts/create.blade.php :

@extends('admin.layouts.layout');

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Создание статьи</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Главная</a></li>
                        <li class="breadcrumb-item active">Создание статьи</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <form action="{{ route('posts.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label for="title">Статья</label>
                    <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                           placeholder="Название" autocomplete="off" name="title">
                </div>
                <div class="form-group">
                    <label for="description">Цитата</label>
                    <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="3" id="description"
                              placeholder="Цитата ..."></textarea>
                </div>
                <div class="form-group">
                    <label for="content">Контент</label>
                    <textarea name="content" class="form-control @error('content') is-invalid @enderror" rows="3" id="content"
                              placeholder="Контент ..."></textarea>
                </div>
                <div class="form-group">
                    <label for="category_id">Категория</label>
                    <select name="category_id" id="category_id" class="form-control @error('category_id') is-invalid @enderror">
                        @foreach ($categories as $k => $v)
                            <option value="{{ $k }}">{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="tags">Тэги</label>
                    <select name="tags[]" id="tags" class="select2 @error('tags') is-invalid @enderror" multiple="multiple" data-placeholder="Выберите тэги"
                            style="width: 100%;">
                        @foreach ($tags as $k => $v)
                            <option value="{{ $k }}">{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="thumbnail">Выберите изображение</label>
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" name="thumbnail" class="custom-file-input @error('thumbnail') is-invalid @enderror" id="thumbnail">
                            <label class="custom-file-label" for="thumbnail">Выберите файл</label>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">Создать</button>
                </div>
            </div>
        </form>
    </section>
    <!-- /.content -->
@endsection

И index.blade.php :

@extends('admin.layouts.layout');

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Статьи</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Главная</a></li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <a href="{{ route('posts.create') }}">
            <button type="button" class="btn btn-primary">Добавить статью</button>
        </a>
        @if (!empty($posts->count()))
            <div class="card-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th style="width: 10px">id</th>
                        <th>Название</th>
                        <th>Категория</th>
                        <th>Тэги</th>
                        <th>Дата</th>
                        <th style="width: 50px">Действия</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($posts as $post)
                        <tr>
                            <td>{{ $post->id }}.</td>
                            <td>{{ $post->title }}</td>
                            <td>{{ $post->category->title }}</td>
                            <td>{{ $post->tags->pluck('title')->join(', ') }}</td>
                            <td>{{ $post->created_at }}</td>
                            <td style="display: flex;">
                                <a href="{{ route('posts.edit', ['post' => $post->id]) }}">
                                    <button type="submit" class="btn btn-success btn-sm mr-2"><i
                                                class="fas fa-edit"></i>
                                    </button>
                                </a>
                                <form method="post"
                                      action="{{ route('posts.destroy', ['post' => $post->id]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm"
                                            onclick="return confirm('Подтвердите удаление!')"><i
                                                class="fas fa-trash-alt"></i></button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                {{ $posts->links() }}
            </div>
        @else
            <div>Статей пока нет!</div>
        @endif
    </section>
    <!-- /.content -->
@endsection

Плагин select2

Скопируем файлы из папки AdminLTE/plugins папки select2 и select2-bootstrap4-theme в resources/assets/admin/plugins.

В файл resources/assets/admin/js/demo.js внесем код для инициализации select2 :

$('.select2').select2()

Подключим нужные нам стили и скрипты в webpack.min.js в том порядке, в котором они подключаются на исходной странице https://adminlte.io/themes/v3/pages/forms/advanced.html .

Также добавим файлы плагина bs-custom-file-input . Они нам понадобятся для формы загрузки картинки к посту. Чтобы вместо «Choose file…» отображалось название нашей картинки.

mix.scripts([
        'resources/assets/admin/plugins/jquery/jquery.min.js',
        'resources/assets/admin/plugins/bootstrap/js/bootstrap.bundle.min.js',
        'resources/assets/admin/plugins/bs-custom-file-input/bs-custom-file-input.js',
        'resources/assets/admin/plugins/select2/js/select2.full.js',
        'resources/assets/admin/js/adminlte.min.js',
        'resources/assets/admin/js/demo.js',
    ],
    'public/assets/admin/admin.js');

mix.styles([
        'resources/assets/admin/plugins/fontawesome-free/css/all.min.css',
        'resources/assets/admin/plugins/select2/css/select2.css',
        'resources/assets/admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.css',
        'resources/assets/admin/css/adminlte.min.css',
        'resources/css/app.css'
    ],
    'public/assets/admin/admin.css');

И добавим в скрипт resources/views/admin/layouts/layout.blade.php инициализацию скрипта bs-custom-file-input :

<script>
    $(function () {
        bsCustomFileInput.init();
    });
</script>

И соберем заново наши фронтэнд:

npm run dev