Содержание
скрыть
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