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 :
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 :
composer require symfony/orm-packInstallez également le bundle Maker pour simplifier la création de code :
composer require symfony/maker-bundle --devL’structure du code du projet doit ressembler à cela :
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 dossieruploads/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.
DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"gCréez ensuite la base de données et exécutez les migrations :
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.
php bin/console make:entity ArticlePersonnaliser 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
// 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 :
php bin/console make:controller ArticleControllerPersonnalisez le contrôleur pour ajouter des actions pour lister, afficher et créer des articles.
<?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 :
php bin/console make:Form ArticlePersonnalisez le formulaire (ArticleType.php) en ajoutant les champs title, content, createdAt et image.
<?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)
<!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)
{% 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)
{# 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é)
{# 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 :
composer require vich/uploader-bundle2. Configurez VichUploaderBundle :
Dans le fichier config/packages/vich_uploader.yaml, configurez VichUploaderBundle pour votre entité Article :
# 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\UniqidNamerdb_driver: Spécifie que vous utilisez Doctrine ORM.article_image: Cette section déclare le nom de votre mapping. (On retrouvearticle_imagedans 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 :
{# 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 :
synfony server:startTestez 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.
354 commentaires