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 !