Nous avons dans le précédent article codé les contacts et les liens sociaux. On a vu qu'avec le code déjà mis en place précédemment maintenant ça devient très facile à coder. Dans le présent article on en arrive au terme de cette série. On va s'intéresser à la partie CMS du blog avec les pages. Il ne nous restera plus qu'à ajouter un détail au tableau de bord et on aura fini !
Vous pouvez télécharger le code final de cet article ici.
Les pages
Les routes
Pour les routes on a une ressource et on va utiliser toutes les actions sauf show :
Route::prefix('admin')->group(function () {
...
Route::middleware('admin')->group(function () {
...
// Pages
Route::resource('pages', BackResourceController::class)->except(['show']);Ces routes sont évidemment réservées à l'administrateur et on utilise une nouvelle fois notre contrôleur de ressource.
Le tableau
On crée la Datatable :php artisan datatables:make Pages
<?php
namespace App\DataTables;
use App\Models\Page;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;
class PagesDataTable extends DataTable
{
use DataTableTrait;
public function dataTable($query)
{
return datatables()
->eloquent($query)
->editColumn('action', function ($page) {
return $this->button(
'page',
$page->slug,
'success',
__('Show'),
'eye',
'',
'_blank'
). $this->button(
'pages.edit',
$page->id,
'warning',
__('Edit'),
'edit'
). $this->button(
'pages.destroy',
$page->id,
'danger',
__('Delete'),
'trash-alt',
__('Really delete this page?')
);
})
->rawColumns(['action']);
}
public function query(Page $model)
{
return $model->newQuery();
}
public function html()
{
return $this->builder()
->setTableId('pages-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Blfrtip')
->lengthMenu();
}
protected function getColumns()
{
return [
Column::make('title')->title('Titre'),
Column::make('slug')->title('Slug'),
Column::computed('action')->title(__('Action'))->addClass('align-middle text-center'),
];
}
protected function filename()
{
return 'Pages_' . date('YmdHis');
}
}La configuration
Les titres
Dans app/config/titles on ajoute les titres pour les pages :'pages' => [
'index' => 'Pages',
'create' => 'Page Creation',
'edit' => 'Page Edit',
],Le menu
Dans app/config/menu on ajoute les items pour les pages :'Pages' => [
'icon' => 'file',
'role' => 'admin',
'children' => [
[
'name' => 'All pages',
'role' => 'admin',
'route' => 'pages.index',
],
[
'name' => 'Add',
'role' => 'admin',
'route' => 'pages.create',
],
[
'name' => 'fake',
'role' => 'admin',
'route' => 'pages.edit',
],
],
],
L'aspect
On a tout en place pour afficher le tableau dans l'administration :
Là aussi la suppression doit fonctionner, de même que le bouton pour voir la page qui renvoie tout simplement dans le frontend.
Ajouter ou modifier une page
La validation
On crée un form request pour la validation :
php artisan make:request Back\PageRequest
On eéutilise la règle Slug qu'on avait déjà prévue pour les articles et les catégories :
<?php
namespace App\Http\Requests\Back;
use Illuminate\Foundation\Http\FormRequest;
use App\Rules\Slug;
class PageRequest extends FormRequest
{
public function authorize()
{
return true;
}
public function rules()
{
$id = basename($this->url());
return $rules = [
'title' => 'required|max:255',
'body' => 'required|max:65000',
'slug' => ['required', 'max:255', new Slug, 'unique:posts,slug,' . $id],
];
}
}Pour la règle unique du slug on prévoit d'éviter l'enregistrement en cours en cas de modification.
La vue
On crée une vue pour le formulaire :
On utilise encore nos composants :
@extends('back.layout')
@section('main')
<form
method="post"
action="{{ Route::currentRouteName() === 'pages.edit' ? route('pages.update', $page->id) : route('pages.store') }}">
@if(Route::currentRouteName() === 'pages.edit')
@method('PUT')
@endif
@csrf
<div class="row">
<div class="col-md-12">
<x-back.validation-errors :errors="$errors" />
@if(session('ok'))
<x-back.alert
type='success'
title="{!! session('ok') !!}">
</x-back.alert>
@endif
<x-back.card
type='info'
:outline="true"
title=''>
<x-back.input
title='Title'
name='title'
:value="isset($page) ? $page->title : ''"
input='text'
:required="true">
</x-back.input>
<x-back.input
title='Slug'
name='slug'
:value="isset($page) ? $page->slug : ''"
input='text'
:required="true">
</x-back.input>
<x-back.input
title="Body"
name='body'
:value="isset($page) ? $page->body : ''"
input='textarea'
rows=10
:required="true">
</x-back.input>
</x-back.card>
<button type="submit" class="btn btn-primary">@lang('Submit')</button>
</div>
</div>
</form>
@endsection
@section('js')
@include('back.shared.editorScript')
@endsectionOn fait la différentiation entre la création et la modification pour rendre le formulaire utilisable pour les deux actions.
Comme on a besoin d'un éditeur de texte pour le contenu de la page on utilise encore CKEditor et on insère la vue qui contient le script de paramétrage de l'éditeur.
Pour la création le formulaire est vierge :
Pour la modification le formulaire est renseigné avec les valeurs de la page sélectionnée :
Vérifiez la validation :
Et que tout se passe bien :
Evidemment on peut ajouter des images dans le contenu comme pour les articles :
Le tableau de bord
Sur notre tableau de bord on fait apparaître des fiches pour nouveaux utilisateurs, articles, contacts et commentaires (lorsqu'il y en a) :
Mais on n'avait pas renseigné les liens pour les afficher parce qu'on n'avait pas encore toutes les routes. Mais maintenant on peut le faire. On ajoute le ien dans le composant back.box :
<a href="{{ route($route) }}" class="small-box-footer">@lang('More info') <i class="fas fa-arrow-circle-right"></i></a>Un simple clic sur "En savoir plus" permet d'aller directement dans le tableau des nouveaux éléments de la catégorie choisie.
Conclusion
On en est arrivés à la fin de cette série d'articles sur la création d'un blog. On pourrait sans doute améliorer encore certaines choses et ajouter des fonctionnalités. Il doit bien aussi trainer quelques bugs. Si vous avez des suggestions pour poursuivre ce projet de façon intéressante je suis à l'écoute !
Par bestmomo
Nombre de commentaires : 2