×

Créé une application de blog avec Symfony6 et Bootstrap

Créé une application de blog avec Symfony6 et Bootstrap

Dans ce tutoriel, on va créé un blog avec Symfony6. La création d’un blog avec Symfony implique plusieurs étapes, notamment la configuration de la base de données, la création de modèles, la gestion des contrôleurs et des vues, ainsi que la mise en place de fonctionnalités d’authentification. Voici un tutoriel de base pour vous guider dans la création d’un blog simple avec Symfony 6 :

Étape 1 : Créez un Nouveau Projet Symfony

Si vous n’avez pas encore de projet Symfony 6, créez-en un en utilisant Composer :

Bash
composer create-project symfony/skeleton my_blog --webapp

Étape 2 : Installez les Dépendances Requises

Installez les bundles et les dépendances nécessaires pour votre projet de blog. Dans Symfony 6, Flex est utilisé pour simplifier l’installation des bundles. Par exemple, pour installer Doctrine, vous pouvez exécuter :

Bash
composer require symfony/orm-pack

Installez également le bundle Maker pour simplifier la création de code :

Bash
composer require symfony/maker-bundle --dev

L’structure du code du projet doit ressembler à cela :

Lua
my_blog/

├── assets/
│   ├── css/
│   ├── images/
│   └── js/

├── bin/

├── config/
│   ├── packages/
│   ├── routes/
│   └── ...

├── public/
│   ├── uploads/
│   └── ...

├── src/
│   ├── Controller/
│   ├── Entity/
│   ├── Form/
│   ├── Repository/
│   └── ...

├── templates/
│   ├── article/
│   └── ...

├── translations/

├── var/

├── vendor/

├── var/
│   ├── cache/
│   ├── log/
│   ├── sessions/
│   └── ...

├── .env
├── .env.local
├── .env.prod
├── .env.test
├── .gitignore
├── composer.json
├── phpunit.xml.dist
├── README.md
└── ...
  • src/ : C’est le dossier où se trouvent les fichiers source de votre application, y compris les contrôleurs, les entités, les formulaires, etc.
  • templates/ : Les modèles Twig utilisés pour afficher votre site web.
  • public/ : Les fichiers statiques accessibles publiquement, tels que les images, les fichiers CSS et JavaScript. Vous pouvez également y trouver le dossier uploads/ pour les fichiers téléchargés.
  • config/ : Les fichiers de configuration, y compris les routes, les services et d’autres paramètres de configuration.
  • var/ : Les fichiers temporaires générés par Symfony, tels que les fichiers de cache et de journalisation.
  • bin/ : Les scripts exécutables, tels que la console Symfony (bin/console).
  • vendor/ : Les dépendances installées via Composer.
  • .env : Le fichier d’environnement principal pour configurer les paramètres tels que la connexion à la base de données.

Cela dit, la structure exacte de votre projet Symfony dépendra de votre organisation spécifique, des bundles et des fonctionnalités que vous utilisez, et des conventions de votre équipe. Vous pouvez personnaliser la structure des dossiers pour répondre à vos besoins particuliers.

Étape 3 : Configurez la Base de Données

Configurez votre base de données dans le fichier .env en spécifiant la connexion à votre base de données. Puisque c’est un projet assez simple, on choisis d’utilisé une base de donné SQLite qui ne nécessite pas de configurations.

Bash
DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"g

Créez ensuite la base de données et exécutez les migrations :

Bash
php bin/console doctrine:database:create
php bin/console make:migration
php bin/console doctrine:migrations:migrate

Étape 4 : Créez l’Entité Article

Créez une entité Article avec des propriétés telles que title, content, createdAt, et Image.

Bash
php bin/console make:entity Article

Personnaliser l’entités Article en ajoutant le champs title, content, createdAt et image. On utilisera VichUploader pour gérer l’importation et l’stockage des images de l’article. L’installation et la configuration de VichUploader est expliquer plus loin dans ce tutoriel.

PHP
<?php
// src/Entity/Article.php
namespace App\Entity;
use Vich\UploaderBundle\Mapping\Annotation as Vich;
use Symfony\Component\HttpFoundation\File\File;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass="App\Repository\ArticleRepository")
 */
class Article
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private $title;

    /**
     * @ORM\Column(type="text")
     */
    private $content;

    /**
     * @ORM\Column(type="datetime")
     */
    private $createdAt;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private $image;

    /**
     * @Vich\UploadableField(mapping="article_images", fileNameProperty="image")
     * @var File|null
     */
    private $imageFile;
    // Constructeur
    public function __construct()
    {
        $this->createdAt = new \DateTime();
    }

    // Getters et Setters
    public function getId(): ?int
    {
        return $this->id;
    }

    public function getTitle(): ?string
    {
        return $this->title;
    }

    public function setTitle(string $title): self
    {
        $this->title = $title;

        return $this;
    }

    public function getContent(): ?string
    {
        return $this->content;
    }

    public function setContent(string $content): self
    {
        $this->content = $content;

        return $this;
    }

    public function getCreatedAt(): ?\DateTimeInterface
    {
        return $this->createdAt;
    }

    public function setCreatedAt(\DateTimeInterface $createdAt): self
    {
        $this->createdAt = $createdAt;

        return $this;
    }

    public function setImageFile(File $image = null)
    {
        $this->imageFile = $image;

        if ($image) {
            $this->updatedAt = new \DateTimeImmutable();
        }
    }

    public function getImageFile()
    {
        return $this->imageFile;
    }

    public function setImage($image)
    {
        $this->image = $image;
    }

    public function getImage()
    {
        return $this->image;
    }

    // Autres méthodes de l'entité
}

Étape 5 : Générez les Contrôleurs et les Vues

Utilisez Maker pour générer un contrôleur pour les articles et des vues associées :

Bash
php bin/console make:controller ArticleController

Personnalisez le contrôleur pour ajouter des actions pour lister, afficher et créer des articles.

PHP
<?php
// src/Controller/ArticleController.php

namespace App\Controller;
use App\Entity\Article; // Assurez-vous d'importer la classe Article
use App\Form\ArticleType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Request;
use App\Repository\ArticleRepository; 
use Doctrine\ORM\EntityManagerInterface;
class ArticleController extends AbstractController
{
    /**
     * @Route("/", name="article_list")
     */
    public function list(ArticleRepository $articleRepository)
    {
        // Récupérez la liste des articles depuis la base de données
        $articles = $articleRepository->findAll();

        return $this->render('article/index.html.twig', [
            'articles' => $articles,
        ]);
    }

    /**
     * @Route("/article/{id}", name="article_show")
     */
    public function show(Article $article)
    {
        // La variable $article est automatiquement injectée grâce à l'annotation
        return $this->render('article/show.html.twig', [
            'article' => $article,
        ]);
    }

    /**
     * @Route("/new", name="article_new")
     */
    public function new(Request $request, EntityManagerInterface $entityManager)
    {
        $article = new Article();

        // Créez un formulaire en utilisant ArticleType
        $form = $this->createForm(ArticleType::class, $article);

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {

            // Enregistrez l'article dans la base de données
            $entityManager->persist($article);
            $entityManager->flush();

            // Redirigez vers la page de détails de l'article nouvellement créé
            return $this->redirectToRoute('article_show', ['id' => $article->getId()]);
        }

        return $this->render('article/new.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

Étape 6 : Créez un formulaire pour l’ajou d’article

Utilisez Maker pour générer un formulaire pour les articles :

Bash
php bin/console make:Form Article

Personnalisez le formulaire (ArticleType.php) en ajoutant les champs title, content, createdAt et image.

PHP
<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use App\Entity\Article;

class ArticleType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title')
            ->add('content')
            ->add('imageFile', FileType::class, [
                'required' => false, // Permet de ne pas exiger un fichier à chaque édition
                'label' => 'Image (JPG, PNG, GIF)'
            ]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Article::class,
        ]);
    }
}

Étape 7 : Créez les Vues Twig

Créez des modèles Twig pour l’affichage des articles, de la liste des articles et du formulaire de création d’article. On ajoute bootstrap dans la page de base (base.html.twig) pour gérer le styles dans nos déferrents pages.

base.html.twig (Page de base)
Twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
        {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
    </head>
    <body>
        <div class="container mt-4">
            {% block body %}{% endblock %}
            {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
        </div>
    </body>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</html>
Index.html.twig (Page d’accueil du blog la liste des articles)
Twig
{% extends 'base.html.twig' %}

{% block body %}
    <h1>Liste des Articles</h1>
    <ul>
        {% for article in articles %}
            <li>
                <a href="{{ path('article_show', {'id': article.id}) }}">
                    {{ article.title }}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endblock %}
show.html.twig (Page de détails de l’article)
Twig
{# templates/article/show.html.twig #}

{% extends 'base.html.twig' %}

{% block body %}
    <h1>{{ article.title }}</h1>

    <img src="{{ vich_uploader_asset(article.image, 'imageFile') }}" alt="{{ article.title }}" />
    
    <p>{{ article.content|raw }}</p>
    
    <p>Publié le : {{ article.createdAt|date('d/m/Y H:i') }}</p>
    
    {# Ajoutez d'autres informations de l'article ici si nécessaire #}
    
    <a href="{{ path('article_list') }}">Retour à la liste des articles</a>
{% endblock %}
new.html.twig (Page de création d’une nouvel actualité)
Twig
{# templates/article/new.html.twig #}

{% extends 'base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block body %}
    <h1>Créer un nouvel article</h1>

{{ form_start(form) }}
    {{ form_widget(form) }}
    <button class="btn btn-success">{{ button_label|default('Enregistrer') }}</button>
{{ form_end(form) }}

    <a href="{{ path('article_list') }}">Retour à la liste des articles</a>
{% endblock %}

Étape 8 : installer et configurer VichUploader

Pour configurer VichUploaderBundle pour l’ajout d’images à un article dans Symfony, suivez ces étapes :

1. Installez VichUploaderBundle :

Si vous ne l’avez pas déjà fait, installez VichUploaderBundle via Composer :

Bash
composer require vich/uploader-bundle
2. Configurez VichUploaderBundle :

Dans le fichier config/packages/vich_uploader.yaml, configurez VichUploaderBundle pour votre entité Article :

YAML
# config/packages/vich_uploader.yaml

vich_uploader:
    db_driver: orm

    mappings:
        article_image:
            uri_prefix: '/uploads/articles'
            upload_destination: '%kernel.project_dir%/public/uploads/articles'
            namer: Vich\UploaderBundle\Naming\UniqidNamer
  • db_driver : Spécifie que vous utilisez Doctrine ORM.
  • article_image : Cette section déclare le nom de votre mapping. (On retrouve article_image dans le fichier Entité Article.php)
3. Affichage de l’Image dans les Vues :

Pour afficher l’image dans vos vues Twig, vous pouvez utiliser l’URL générée par VichUploaderBundle. Par exemple :

Twig
{# templates/article/show.html.twig #}

<img src="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.title }}" />

Avec ces étapes, vous devriez avoir configuré VichUploaderBundle pour l’ajout d’images aux articles.

Étape 9 : Testez Votre Blog

Taper la commande suivante pour lancer le server et voir le resulta de notre blog :

Bash
synfony server:start

Testez votre blog en ajoutant des articles et en les affichant.

Étape 10 : Déployez Votre Blog (Optionnel)

Si vous souhaitez partager votre blog avec le monde, envisagez de le déployer sur un serveur de production. Vous pouvez utiliser des services d’hébergement web ou des solutions d’infrastructure cloud comme AWS, Heroku ou DigitalOcean.

Ce tutoriel vous donne une base solide pour créer un blog simple avec Symfony 6. Vous pouvez personnaliser davantage votre blog en ajoutant des fonctionnalités supplémentaires, telles que la gestion des commentaires, des catégories d’articles, des images d’en-tête, etc., en fonction de vos besoins spécifiques. Consultez la documentation Symfony 6 pour plus d’informations sur chaque étape.

362 commentaires