Comment créer un blog dans Laravel

Laravel est un framework d’application web PHP doté d’une syntaxe expressive et élégante. Il dispose d’une vaste bibliothèque de paquets et prend en charge une grande partie du travail de programmation, ce qui vous permet de vous concentrer sur votre créativité.

L’une des utilisations créatives de Laravel est la construction d’un blog personnel. Ce tutoriel décrit comment utiliser Laravel pour créer et publier un blog sur Kinsta.

Pour un aperçu du projet, consultez le code complet du projet.

Pré-requis

Pour suivre ce tutoriel, assurez-vous d’avoir les éléments suivants :

• Un serveur web. Ce tutoriel utilise XAMPP.
• Un compte sur GitHub, GitLab ou Bitbucket pour publier le code de votre application.
• Laravel installé.
• Un compte MyKinsta actif pour l’hébergement de l’application. Inscrivez-vous pour un essai gratuit si vous n’en avez pas déjà un.

Assurez-vous que les services Apache et MySQL fonctionnent dans le panneau de contrôle XAMPP. Si ce n’est pas le cas, cliquez sur le bouton Démarrer de chaque service dans la colonne Actions. Votre panneau de contrôle XAMPP devrait ressembler à ceci :

Par défaut, MySQL/MariaDB fonctionne sur le port 3306. Prenez note du port si vous le changez.

Si vous utilisez un serveur web autre que XAMPP, assurez-vous que vous utilisez Apache ou un autre logiciel serveur et que vous avez installé le serveur MariaDB sur votre machine locale.

Démarrage rapide avec phpMyAdmin

1. Une fois que MySQL et Apache fonctionnent, allez dans votre navigateur.
2. Ouvrez phpMyAdmin et collez http://localhost/phpmyadmin/. Il devrait afficher ce qui suit :

phpMyAdmin est un outil de gestion de base de données pour MySQL et MariaDB.

Créer un nouveau projet Laravel

Vous pouvez maintenant commencer à créer le blog en utilisant Laravel. Pour ce tutoriel, nous avons utilisé un ordinateur fonctionnant sous Windows.

1. Accédez au terminal ou à l’interface de ligne de commande (CLI) de votre machine.
2. Créez un projet Laravel appelé blog à l’aide de la commande laravel new blog.
3. Ouvrez le répertoire blog de votre projet avec la commande cd blog.
4. Ensuite, ouvrez le répertoire dans votre éditeur de code.
5. Pour vérifier que vous avez bien construit le projet, exécutez php artisan serve dans votre terminal ou CMD.
6. Cliquez sur la sortie de l’adresse locale pour la transmettre au navigateur. Le navigateur doit afficher la page d’accueil par défaut de Laravel, illustrée ci-dessous :

Configurer la base de données

Créez et configurez la base de données en retournant à phpMyAdmin dans votre navigateur et en créant une base de données appelée blog.

1. Pour créer la base de données, dans l’onglet Bases de données, saisissez « blog » dans le champ Créer une base de données.
2. Cliquez ensuite sur Créer.

3. Ensuite, mettez à jour la connexion à la base de données dans votre fichier .env à la racine de votre projet de blog. Remplacez les valeurs DB_DATABASE et DB_PASSWORD par celles que vous avez créées.

Les détails de la connexion doivent ressembler à ceci :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

Les autres détails de connexion à la base de données restent les mêmes que dans le fichier .env. Si vous modifiez une valeur de connexion, par exemple en changeant DB_PORT de 3306 à 3307 pendant la configuration, assurez-vous de la mettre à jour dans le fichier .env.

Créer la table Posts

Ensuite, créez un modèle de base de données et migrez les modifications.

1. Dans votre terminal, exécutez php artisan make:model Post -mc pour créer un modèle appelé Post, une table appelée posts, un fichier de migration et un contrôleur.

2. Vérifiez le répertoire database/migrations et ouvrez le fichier de migration que vous venez de créer. Il a le format suivant : YYYY_MM_DD_ID_create_posts_table.php.
3. Dans la méthode up() du fichier de migration, créez un schéma avec les attributs title, description et image.

public function up() {
  Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title')->nullable();
    $table->text('description')->nullable();
    $table->string('image')->nullable();
    $table->timestamps();
  });
}

4. Maintenant, allez dans votre terminal et migrez les changements en utilisant php artisan migrate, comme indiqué ci-dessous :

5. Allez dans phpMyAdmin dans votre navigateur, où vous verrez la table posts :

Comment créer des contrôleurs

L’ajout de vues et de contrôleurs permet de mettre en œuvre votre logique pour l’ensemble de la base de données. Les vues sont les interfaces utilisateur qui affichent les objets de données du modèle. Les contrôleurs gèrent le flux d’exécution des données entre le modèle et les vues.

1. Avant de créer les fichiers Blade, exécutez npm install, suivi de npm run dev dans votre terminal. La première commande installe les paquets npm requis. La seconde commande démarre un serveur de développement Vite.
2. Allez dans le répertoire app/Http/Controllers, ouvrez le fichier PostController.php et créez une méthode de contrôleur index. La méthode contrôleur rend un texte simple au navigateur. Pour ce faire, ajoutez le code suivant à la classe PostController:

public function index() {
  $post = "Laravel Tutorial Series One!";
  return view('posts.index', ['post'=>$post]);
}

Cette méthode transmet $post comme variable de contexte à la section views du modèle d’index Blade. $post contient le texte à afficher, qui, ici, dit « Laravel Tutorial Series One ! » Vous remplacerez ce texte par la boucle des articles plus tard.

3. Créez deux nouveaux répertoires dans le répertoire resources/views: layouts et posts.
4. Dans le répertoire layouts , créez un fichier app.blade.php. Les autres fichiers Blade en hériteront.
5. Copiez ce code dans app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog</title>
  <!-- Styles →
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<!-- Navbar →
<header>
  <nav class="navbar bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('posts.index') }}">Mini-Blog</a>
    </div>
  </nav>
</header>


<!-- Body -->
<body>
  @yield('content')
</body>


<!-- Footer -->
<footer class="footer mt-auto py-3 bg-dark">
  <div class="container d-lg-flex justify-content-between">
    <span class="text-light">Mini-Blog © 2023</span>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"  integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</html>

En utilisant ce code HTML, vous importez Bootstrap version 5.2.3 et Vite pour regrouper les actifs JavaScript et CSS. La page générée comporte un en-tête avec une barre de navigation et un pied de page avec les scripts appelés en dessous. Dans le corps de la page, le contenu dynamique est rendu à partir d’autres fichiers Blade à l’aide de @yield('content').

Le répertoire posts contient les fichiers Blade pour la mise en œuvre des opérations de création et de lecture.

6. Dans le répertoire posts , créez un fichier Blade appelé index.blade.php et ajoutez le code suivant :

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <h1>Blog list</h1>
  </div>
  <hr>
  <p>The Blog 1 - {{ $post }}</p>
</div>
@endsection

Ce code s’étend à partir du fichier app.blade.php de la page de présentation. Lorsqu’il est rendu dans le navigateur, il affiche le contenu de chaque article de blog ainsi que la barre de navigation et le pied de page hérités du fichier app.blade.php dans le répertoire layouts. Entre les balises de section, vous transmettez le contenu du contrôleur à rendre dans le navigateur lorsque vous exécutez l’application.

7. Définissez la route dans le répertoire routes. La définition de la route permet le chargement automatique par RouteServiceProvider dans le répertoire App/Providers. La classe RouteServiceProvider est responsable du chargement des fichiers de routes de l’application.
8. Dans le fichier routes/web.php, importez PostController en utilisant use AppHttpControllersPostController.
9. Ensuite, définissez la route en ajoutant Route::resource('posts', PostController::class); au fichier routes/web.php.
10. Le serveur de développement Vite étant toujours en cours d’exécution, utilisez php artisan serve pour exécuter l’application dans votre terminal.
11. Avec votre navigateur, ouvrez http://127.0.0.1:8000/posts pour voir votre nouvelle liste d’articles de blog.

La page devrait ressembler à ce qui suit :

Dans la section suivante, nous définissons les méthodes du contrôleur pour l’affichage de tous les articles, la création d’un article et le stockage d’un article. Ensuite, nous ajoutons leurs routes et créons les fichiers Blade dans les sections correspondantes.

Créer la page des articles de blog

Créez des articles de blog en saisissant un titre, en ajoutant une description et en téléverseant une image. Affichez ensuite vos articles dans un ordre séquentiel.

1. Dans le répertoire app/Models, ouvrez le fichier Post.php.
2. Dans la classe Post, sous le bloc de code use HasFactory;, ajoutez protected $fillable = ['title', 'description', 'image'];.

Ce code protège les attributs de votre modèle contre les assignations de masse.

3. Dans votre fichier app/Http/Controllers/PostController.php, importez le modèle Post en utilisant use AppModelsPost;.
4. Remplacez les méthodes de contrôleur index et create créées précédemment dans la classe PostController par le code ci-dessous :

// Show all posts
public function index() {
  $posts = Post::orderBy('created_at', 'desc')->get();
  return view('posts.index', ['posts' => $posts]);
}
    
// Create post
public function create() {
  return view('posts.create');
}

Dans la méthode index que vous venez de créer, l’application PHP récupère tous les articles, les classe par ordre chronologique et les stocke dans une variable posts. Dans la vue de retour, les articles passent dans le fichier index.blade.php en tant que variable contextuelle dans le répertoire views/posts. La méthode create renvoie un fichier create.blade.php et le place dans le répertoire views/posts si un utilisateur tente de créer un nouveau message.

5. Créez une méthode de contrôleur store en utilisant le code ci-dessous (pour stocker les articles de blog dans la base de données). Ajoutez ce code à la classe PostController sous les méthodes de contrôle index et create.

// Store post
public function store(Request $request) {
  // validations
  $request->validate([
    'title' => 'required',
    'description' => 'required',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $post = new Post;

  $file_name = time() . '.' . request()->image->getClientOriginalExtension();
  request()->image->move(public_path('images'), $file_name);

  $post->title = $request->title;
  $post->description = $request->description;
  $post->image = $file_name;

  $post->save();
  return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

La méthode store gère les requêtes du client concernant les données contenues dans son corps, elle prend donc request en argument. Ensuite, vous validez les champs utilisés lors de la création d’un article et créez une instance post à partir du modèle Post. Les données des champs saisis sont ensuite affectées à l’instance créée et sauvegardées. La page redirige vers la vue index avec un texte flash indiquant « Post created successfully ».

Ajouter des routes à vos articles

Pour enregistrer les routes dans votre fichier web.php:

1. Dans le répertoire routes à la racine de votre projet, ouvrez le fichier web.php.
2. Enregistrez les routes des méthodes du contrôleur en remplaçant le code existant par celui-ci :

<?php

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

Route::resource('/', PostController::class)->names([
  'index' => 'posts.index',
  'create' => 'posts.create',
  'store' => 'posts.store',
  'show' => 'posts.show',
]);

Ce contrôleur utilise ces routes pour créer, stocker et afficher vos objets de données.

Création des fichiers Blade

Pour créer les vues, revenez à la classe PostController:

1. Dans le répertoire resources/views/posts, créez un fichier Blade appelé create.blade.php et ajoutez le code ci-dessous :

@extends('layouts.app')
@section('content')
<div class="container">
  <h1>Add Post</h1>
  <section class="mt-3">
    <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
      @csrf
      <!-- Error message when data is not inputted -->
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <div class="card p-3">
        <label for="floatingInput">Title</label>
        <input class="form-control" type="text" name="title">
        <label for="floatingTextArea">Description</label>
        <textarea class="form-control" name="description" id="floatingTextarea" cols="30" rows="10"></textarea>
        <label for="formFile" class="form-label">Add Image</label>
        <img src="" alt="" class="img-blog">
        <input class="form-control" type="file" name="image">
      </div>
      <button class="btn btn-secondary m-3">Save</button>
    </form>
  </section>
    
</div>
@endsection

Dans ce code, create.blade.php hérite du contenu de app.blade.php dans le répertoire layouts à l’aide de @extends('layouts.app'). Ce contenu comprend un en-tête, une barre de navigation et un pied de page. Après avoir ajouté le texte Add Post dans la balise h1, vous avez créé un formulaire avec la méthode post qui contient l’action {{route('posts.store')}}.

Le code enctype="multipart/form-data" permet de téléverser des images et csrf protège votre formulaire contre les attaques inter-sites. Ensuite, les messages d’erreur affichent des entrées de champ non valides et utilisentfield attributes pour créer des libellés et des entrées pour le formulaire.

2. Remplacez maintenant le code du fichier index.blade.php par le code ci-dessous pour afficher tous les articles du blog :

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <a class="btn btn-secondary float-end mt-3" href="{{ route('posts.create') }}" role="button">Add Post</a>
    <h1>Mini post list</h1>
  </div>
    
  <hr>
  <!-- Message if a post is posted successfully -->
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
  @endif
         @if (count($posts) > 0)
    @foreach ($posts as $post)
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-2">
              <img class="img-fluid" style="max-width:50%;" src="{{ asset('images/'.$post->image)}}" alt="">
            </div>
            <div class="col-10">
              <h4>{{$post->title}}</h4>
            </div>
          </div>
          <p>{{$post->description}}</p>
          <hr>
        </div>
      </div>
    @endforeach
  @else
    <p>No Posts found</p>
  @endif
</div>
@endsection

Ce code ajoute un bouton Add Post. Lorsqu’il est cliqué, il crée un article et transmet les données éventuelles dans le corps de la page. La condition if vérifie s’il y a des données dans la base de données. Si c’est le cas, elle passe. Dans le cas contraire, le message « No Posts found » s’affiche.

Structurer vos pages

Vous pouvez maintenant exécuter votre application à l’aide de php artisan serve pour créer et afficher des articles de blog. Ouvrez <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a >, et la page devrait ressembler à ceci :

Si vous ajoutez un article, il apparait comme suit :

Déployer votre blog Laravel sur Kinsta

Pour déployer et tester votre application Laravel en utilisant le service d’hébergement d’applications de Kinsta:

1. Créez un fichier .htaccess.
2. Placez le code dans un dépôt.
3. Créez une base de données.
4. Configurez un projet sur MyKinsta.
5. Construire et déployer votre blog.

Créer un fichier .htaccess

Dans le dossier racine du projet, créez un fichier appelé .htaccess et ajoutez le code suivant :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

Ce code redirige les requêtes de votre application vers public/index.php dans le déploiement.

Transférer votre code dans un dépôt

Créez un dépôt pour votre projet et publiez le code. Vous pouvez utiliser GitHub, GitLab ou Bitbucket pour héberger votre code et le déployer sur MyKinsta.

Configurer la base de données dans votre tableau de bord MyKinsta

Pour créer une base de données sur MyKinsta :

1. Cliquez sur le bouton Ajouter un service et sélectionnez Base de données.
2. Saisissez les détails de votre base de données comme indiqué ci-dessous. Notez que pour que votre déploiement soit réussi, vous devez laisser le nom d’utilisateur de la base de données comme valeur par défaut.

Les détails incluent le nom de la base de données, le nom d’affichage, le type de base de données, la version, le nom d’utilisateur de la base de données, l’emplacement du centre de données et la taille. Cette démonstration utilise MariaDB pour la base de données, et la taille est Db3 (1 CPU / 4Go de RAM / 10Go d’espace disque 65 USD / mois). Vous pouvez choisir le type et la taille de la base de données qui correspondent à vos besoins spécifiques.

3. Cliquez sur Continuer.
4. Confirmez votre coût mensuel et votre mode de paiement, puis cliquez sur Créer une base de données.

Configurer le projet sur MyKinsta

Pour déployer votre application sur MyKinsta :

1. Cliquez sur le tableau de bord.
2. Cliquez sur Ajouter un service et sélectionnez Application, comme indiqué ci-dessous :

MyKinsta vous redirige vers la page Ajouter une application.

1. Dans la section Sélectionner une branche, sélectionnez votre dépôt GitHub, puis cochez la case Ajouter le déploiement sur le commit.
2. Dans les détails de base, entrez le nom de l’application et sélectionnez l’emplacement du centre de données pour votre application.
3. Puisque Laravel a besoin d’une clé d’application pendant le déploiement, dans la carte Variables d’environnement, ajoutez une clé APP_KEY comme clé 1. Vous pouvez utiliser la clé APP_KEY définie dans votre fichier .env local ou utiliser un générateur de clé Laravel en ligne pour en obtenir une.
4. Cliquez sur Continuer.
5. Sélectionnez les ressources de construction (CPU et RAM) pour votre application. Cette démonstration utilise la machine de construction standard (1 CPU / 4 Go de RAM) – 0.02 USD / minute.
6. Ne décochez pas le bouton radio Configurer automatiquement l’image du conteneur.
7. Cliquez sur Continuer.
8. Dans la page Configurer vos processus, vous pouvez modifier la taille du pod et l’instance de votre application en cochant ces cases. Cette démonstration utilise les valeurs par défaut.
9. Cliquez sur Continuer.
10. Enfin, cliquez sur le bouton Confirmer le moyen de paiement pour lancer le déploiement de votre application. En cliquant sur ce bouton, vous accédez également à la page Détails du déploiement pour voir l’état d’avancement de votre déploiement.

Construire et déployer votre application

Une fois la base de données et l’application hébergées, connectez la base de données à votre application et créez-la pour la déployer.

Pour connecter la base de données, utilisez les connexions externes de votre base de données hébergée. Dans l’onglet Info de votre base de données hébergée, vous voyez Connexions externes, comme indiqué ci-dessous :

1. Sur la page Réglages de l’application déployée, accédez à la carte Variable d’environnement.
2. Cliquez sur Ajouter une variable d’environnement pour ajouter les connexions externes de votre base de données hébergée avec la valeur correspondante. Utilisez les mêmes variables que vous avez dans votre fichier .env.

Cette capture d’écran est pratique si vous envisagez de marquer les variables env que vous avez modifiées manuellement pour les différencier des autres.

APP_URL est l’URL de votre application hébergée, et DB_CONNECTION est mysql.

1. Rendez-vous sur la page Réglages de votre application.
2. Dans la carte Buildpack, ajoutez PHP et Node.js comme build packs. Comme il s’agit d’une application PHP, vous devez ajouter le build pack PHP en dernier.
3. Cliquez sur Déployer maintenant pour reconstruire votre application.

Ensuite, ajoutez un processus qui migrera la base de données.

1. Allez dans l’onglet Processus sur la page de votre application hébergée.
2. Sélectionnez Créer un processus sur la carte Processus d’exécution.
3. Saisissez Migration comme nom, Worker en arrière-plan comme type et php artisan migrate --force comme commande de démarrage. Vous pouvez laisser les valeurs par défaut pour la taille du pod et les instances.
4. Sélectionnez Continuer pour créer le processus. Cette action déclenche une nouvelle compilation et redéploie l’application.
5. Dans l’onglet Domaines de votre application, cliquez sur le lien de votre application. Vous pouvez voir qu’elle est maintenant opérationnelle.
6. Notez que l’application de blog déployée sur MyKinsta n’affiche aucun article. Créez un nouvel article en saisissant son titre, en ajoutant une description et en choisissant une image.

Résumé

Laravel permet de développer rapidement un blog simple. Son chargement rapide des pages, son architecture de contrôleur robuste et sa sécurité compétente permettent d’améliorer facilement les performances d’une application. Parallèlement, MyKinsta vous permet de publier et de livrer vos applications web rapidement et efficacement. Le modèle de tarification flexible de MyKinsta est basé sur l’utilisation, ce qui élimine les coûts cachés.

Lorsque Kinsta héberge votre application Laravel, elle s’exécute sur la Google Cloud Platform sur leur Premium Tier, ce qui la rend aussi rapide que possible. Kinsta inclut également une protection et une atténuation DDoS de niveau entreprise avec Cloudflare et des pare-feu avancés pour tenir les acteurs malveillants à distance, et bien plus encore.

Commencez dès maintenant votre essai gratuit d’hébergement d’applications pour rationaliser le développement et l’hébergement de vos applications web !

Marcia Ramos Kinsta

Je suis le responsable de l'équipe éditoriale chez Kinsta. Je suis un passionné d'open source et j'adore coder. Avec plus de 7 ans de rédaction technique et de modification pour l'industrie technologique, j'adore collaborer avec les gens pour créer des contenus clairs et concis et améliorer les flux de travail.

• LinkedIn