Créer un blog – les pages
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', ], ], ],
On doit avoir du nouveau dans le menu :
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') @endsection
On 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 !
2 commentaires
Michel
Suivant votre conseil, je suis allé voir du côté de CKEditor et la gestion des fichiers excel est possible depuis la version 4.7. et par défaut sur la 5.0.
Depuis ces versions il est donc possible de copier/coller directement des fichiers excel ou même de pouvoir y travailler dessus puiqu’il existe aussi un module qui gère spreadsheet et compatible avec laravel 8 disent ils.
Cependant est il possible d’intéger une des ces versions dans le blog sans tout casser ?
Pour les images, à la fermeture de mon Laragon, il m’est signalé une erreur mémoire qui dit que sur le fichier hppd la mémoire ne peut pas être à read. Je vais essayer de trouver ce fichier….pour voir.
bestmomo
Dans le blog on charge la version standard 4.15.1, donc ça devrait marcher.