Comment créer un blog avec Laravel et MySQL

Laravel est un framework d'application Web avec un routage expressif, une syntaxe élégante et une puissante collection d'outils. Il a été créé par Taylor Otwell en 2011 et est depuis l'un des frameworks PHP les plus populaires.

Dans cet article, nous allons apprendre à créer un blog avec Laravel.

Avant de commencer, Les pré-requis:

Avant de continuer à suivre la formation, vous devez installer ces outils sur votre machine: - PHP => Xampp, PhpMyAdmin - Composer - Laravel

Générer un nouveau projet

composer create-project --prefer-dist laravel/laravel mon-blog

Cette commande va créer un dossier appelé 'mon-blog' sur votre machine.
Si tout se passe bien, vous obtenez un résultat quelque chose comme suit:

> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .......................................................... DONE
  laravel/sanctum ....................................................... DONE
  laravel/tinker ........................................................ DONE
  nesbot/carbon ......................................................... DONE
  nunomaduro/collision .................................................. DONE
  nunomaduro/termwind ................................................... DONE
  spatie/laravel-ignition ............................................... DONE

81 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

> @php artisan key:generate --ansi

   INFO  Application key set successfully.

Je vous conseille d'ouvrir le projet avec votre éditeur de code ou IDE. Moi, j'utilise Visual studio code. Entrez dans le dossier mon-blog: cd mon-blog et démarrez le serveur avec php artisan serve.

Voici le résultat de la commande :

❯ php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

Rendez-vous au http://localhost:8000

Saviez-vous qu'il est possible de devenir développeur Larvael en 12 semaines seulement? Rejoignez le Bootcamp

Configurer une base de données

Maintenant il est temps de configurer notre base de données. Rendez-vous dans votre espace PhpMyadmin et créer une base de données vide.

Ouvrez le fichier .env de votre projet et changez le nom de votre base de données, nom d'utilisateur et le mot de passe et le port.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306 # port
DB_DATABASE=blog_laravel # nom de la base
DB_USERNAME=root # nom d'utilisateur
DB_PASSWORD= # mot de passe

Créer la table avec la migration

Ouvrez le terminal et tapez cette commande:

php artisan make:model Article --migration

❯ php artisan make:model Article --migration

   INFO  Model created successfully.

   INFO  Created migration [2022_09_23_075446_create_articles_table].

La commande va créer deux fichiers: databases/migrations/2022_X_X_XXXXX_create_articles_table.php et app/Models/Article.php.

Ouvrez le fichier de migration et ajouter les colonnes de notre table comme suit :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->text('titre'); // nouveau
            $table->text('content'); // nouveau
            $table->string('auteur'); // nouveau
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
};

Ensuite, nous allons migrer les données pour les synchroniser avec la base. Ouvrez un terminal et tapez cette commande php artisan migrate:

❯ php artisan migrate

   INFO  Preparing database.

  Creating migration table ......................................... 27ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table ............................. 27ms DONE
  2014_10_12_100000_create_password_resets_table ................... 21ms DONE
  2019_08_19_000000_create_failed_jobs_table ....................... 20ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ............ 50ms DONE
  2022_09_23_075446_create_articles_table ........................... 9ms DONE

Rendez-vous au niveau du Phpmyadmin et actualisez la page.

Note: Je vous conseille d'ouvrir deux terminaux différents: 1) pour le serveur php artisan serve 2) pour les autres commandes.

Créer le contrôleur

Tapez cette commande pour créer votre contrôleur php artisan make:controller ArticleController

❯ php artisan make:controller ArticleController

   INFO  Controller created successfully.

Ouvrez le contrôleur dans app/Http/Controllers/ArticleController.php et ajuster les codes ci-après:

<?php
// ArticleController.php

namespace App\Http\Controllers;


use App\Models\Article;
use Illuminate\Http\Request;


class ArticleController extends Controller
{

    /**
     * Affiche la liste des articles
     */
    public function index()
    {

        $articles = Article::all();
        return view('article.index', compact('articles'));

    }


    /**
     * return le formulaire de création d'un article
     */
    public function create()
    {

        return view('article.create');

    }


    /**
     * Enregistre un nouveau article dans la base de données
     */
    public function store(Request $request)
    {

        $request->validate([
            'titre'=>'required',
            'content'=> 'required',
            'auteur' => 'required'
        ]);


        $article = new article([
            'titre' => $request->get('titre'),
            'content' => $request->get('content'),
            'auteur' => $request->get('auteur')
        ]);


        $article->save();
        return redirect('/')->with('success', 'article Ajouté avec succès');

    }


    /**
     * Affiche les détails d'un article spécifique
     */

    public function show($id)
    {

        $article = Article::findOrFail($id);
        return view('article.show', compact('article'));

    }


    /**
     * Return le formulaire de modification
     */

    public function edit($id)
    {

        $article = Article::findOrFail($id);

        return view('article.edit', compact('article'));

    }


    /**
     * Enregistre la modification dans la base de données
     */
    public function update(Request $request, $id)
    {

        $request->validate([

            'titre'=>'required',
            'content'=> 'required',
            'auteur' => 'required'

        ]);




        $article = article::findOrFail($id);
        $article->titre = $request->get('titre');
        $article->content = $request->get('content');
        $article->auteur = $request->get('auteur');
        $article->update();

        return redirect('/')->with('success', 'article Modifié avec succès');

    }




    /**
     * Supprime le article dans la base de données
     */
    public function destroy($id)
    {

        $article = Article::findOrFail($id);
        $article->delete();

        return redirect('/')->with('success', 'article Supprimé avec succès');

    }

}

Créer les routes / urls

Nous allons créer des routes en utilisant le groupe des routes avec la fonction contrôleur de Laravel 9.

Ouvrez le fichier web.php et ajoutez ce code :

<?php

use App\Http\Controllers\ArticleController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::controller(ArticleController::class)->group(function () {

    Route::get('/', 'index');
    Route::get('/article/create', 'create');
    Route::get('/article/{id}', 'show');
    Route::get('/article/{id}/edit', 'edit');


    Route::post('/article', 'store');
    Route::patch('/article/{id}', 'update');
    Route::delete('/article/{id}', 'destroy');

});

Visitez votre application et visualisez l'erreur qui s’est affichée. C'est dû au fait que, nous n'avons pas encore créé les vues(templates).

Créer les vues avec BladeBlade c'est le système de templating de Larvale(template engine).

Créez un dossier appelé article dans resources/views/ et ajouter les fichiers suivants: create.blade.php, edit.blade.php, index.blade.php et show.blade.php

Ensuite, Créez un autre dossier layouts et ajouter le fichier app.blade.php

Ajoutez ce code sur le fichier layouts/app.blade.php:

<!DOCTYPE html>
<html lang="fr">
    <head>

        <title>Creer un blog avec Laravel pour débutant : insérer, Lire, modifier et supprimer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>

    <body>

        <div class="container mt-5">
            @yield('content')
        </div>

    </body>

</html>

Comme vous le voyez, nous avons ajouté Bootstrap comme Framework css.

Nous allons modifier les autres fichiers comme suit :

• article/index.blade.php

@extends('layouts.app')

@section('content')

    <div class="row">

        <div class="col-lg-10">
            <h2>Mon blog avec Laravel</h2>
        </div>

        <div class="col-lg-2">
            <a class="btn btn-success" href="{{ url('article/create') }}">Ajouter un article</a>
        </div>

    </div>



    @if ($message = Session::get('success'))

        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>

    @endif



<div class="container">
    <div class="row">
        @foreach ($articles as $index => $article)
        <div class="col-md-4">
            <div class="card card-body">
                <a href="{{ url('article/'. $article->id) }}">
                <h2>
                        {{ $article->titre }}
                    </h2>
                </a>
            <p>Ecrit par: {{ $article->auteur }} | date: {{ $article->created_at }}</p>
            <a href="{{ url('article/'. $article->id) }}" class="btn btn-outline-primary">En savoir plus</a>
            </div>
        </div>
        @endforeach
    </div>
</div>


@endsection

• article/create.blade.php

@extends('layouts.app')


@section('content')

    <h1>Ajouter un article</h1>


    @if ($errors->any())

        <div class="alert alert-danger">

            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach

            </ul>

        </div>

    @endif

    <form action="{{ url('article') }}" method="POST">
        @csrf

        <div class="form-group mb-3">
            <label for="titre">Titre:</label>
            <input type="text" class="form-control" id="titre" placeholder="Entrez un titre" name="titre">
        </div>

        <div class="form-group mb-3">

            <label for="content">Ajouter le contenu:</label>
            <textarea name="content" id="content" cols="30" rows="10" class="form-control"></textarea>

        </div>


        <div class="form-group mb-3">
            <label for="auteur">Ajouter auteur:</label>
            <input type="auteur" class="form-control" id="auteur" placeholder="auteur" name="auteur">
        </div>


        <button type="submit" class="btn btn-primary">Enregister</button>

    </form>

@endsection

• article/show.blade.php

@extends('layouts.app')


@section('content')

<div class="container">

    <div class="row">
        <div class="col-md-12">
            <h1>{{ $article->titre }}</h1>
            <p class="lead">{{ $article->content }}</p>

            <div class="buttons">
                <a href="{{ url('article/'. $article->id .'/edit') }}" class="btn btn-info">Modifier</a>
                <form action="{{ url('article/'. $article->id) }}" method="POST" style="display: inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Supprimer</button>
                </form>

            </div>
        </div>
    </div>
</div>
</div>


@endsection

• article/edit.blade.php

@extends('layouts.app')


@section('content')


    <h1>Modifier article: {{ $article->titre }}</h1>


    @if ($errors->any())

        <div class="alert alert-danger">

            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>

        </div>

    @endif

    <form method="post" action="{{ url('article/'. $article->id) }}" >
        @method('PATCH')
        @csrf


        <div class="form-group mb-3">

            <label for="titre">Titre:</label>
            <input type="text" class="form-control" id="titre" placeholder="Entrer titre" name="titre" value="{{ $article->titre }}">

        </div>

        <div class="form-group mb-3">

            <label for="content">Ajouter le contenu:</label>
            <textarea name="content" id="content" cols="30" rows="10" class="form-control">{{ $article->content }}</textarea>

        </div>

        <div class="form-group mb-3">

            <label for="auteur">Auteur:</label>
            <input type="text" class="form-control" id="auteur" placeholder="Entrer auteur" name="auteur" value="{{ $article->auteur }}">

        </div>


        <button type="submit" class="btn btn-primary">Enregistrer</button>

    </form>

@endsection

Tester l'application

Nous venons de créer une application Blog avec PHP et Laravel.

Démarrez le serveur avec php artisan serve puis visitez la page d'accueil: http://localhost:8000

Nous allons modifier le fichier layouts/app.blade.php pour ajouter une barre de navigation.

<!DOCTYPE html>
<html lang="fr">
    <head>

        <title>Creer un blog avec Laravel pour débutant : insérer, Lire, modifier et supprimer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>

    <body>
        <nav class="navbar navbar-expand-lg bg-light">
            <div class="container">
              <a class="navbar-brand" href="/">Mon blog</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/">Accueil</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        <div class="container mt-5">
            @yield('content')
        </div>

    </body>

</html>

Vous avez aimé cet article ? Rejoignez le Bootcamp

Si vous voulez aller plus loin, inscrivez-vous à notre prochaine cohorte.