Ajout de la vue article

assets/styles/app.css

@@ -209,8 +209,21 @@ main h2 {
   color: rgb(34, 34, 34);
 }
 
+main h2 a {
+  color: rgb(34, 34, 34);
+  text-decoration: no;
+}
+
+main h2 a:hover {
+  color: rgb(20,20,20);
+}
+
 .article-by {
   display: block;
   font-size: 0.5em;
   color: gray;
+}
+
+.table-articles {
+  width: 100%;
 }

src/Controller/ViewController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Controller;
+
+use App\Entity\Article;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class ViewController extends AbstractController
+{
+    #[Route('/view/{id}', name: 'app_view')]
+    public function index(
+        Article $article
+    ): Response
+    {
+        return $this->render('view/index.html.twig', [
+          'article' => $article
+        ]);
+    }
+}

templates/article/_form.html.twig

@@ -4,5 +4,5 @@
 
 {{ form_start(form) }}
     {{ form_widget(form) }}
-    <button class="btn">{{ button_label|default('Sauvegarder') }}</button>
+    <button class="btn btn-success">{{ button_label|default('Sauvegarder') }}</button>
 {{ form_end(form) }}

templates/article/index.html.twig

@@ -1,11 +1,12 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Article index{% endblock %}
+{% block title %}Gestion des articles{% endblock %}
 
 {% block body %}
-    <h1>Article index</h1>
+<div>
+    <h1>gestion des articles</h1>
 
-    <table class="table">
+    <table class="table-articles">
         <thead>
             <tr>
                 <th>Id</th>
@@ -25,11 +26,11 @@
                 <td>{{ article.state | trans }}</td>
                 <td>
                     {% if is_granted('view', article) %}
-                    <a href="{{ path('app_article_show', {'id': article.id}) }}">show</a>
+                    <a href="{{ path('app_article_show', {'id': article.id}) }}">Voir</a>
                     {% endif %}
 
                     {% if is_granted('edit', article) %}
-                    <a href="{{ path('app_article_edit', {'id': article.id}) }}">edit</a>
+                    <a href="{{ path('app_article_edit', {'id': article.id}) }}">Editer</a>
                     {% endif %}
                 </td>
             </tr>
@@ -42,5 +43,7 @@
         </tbody>
     </table>
 
-    <a href="{{ path('app_article_new') }}">Create new</a>
+    <a class="btn btn-primary" href="{{ path('app_article_new') }}">Créer un nouvel article</a>
+
+</div>
 {% endblock %}

templates/article/show.html.twig

@@ -30,9 +30,9 @@
         </tbody>
     </table>
 
-    <a href="{{ path('app_article_index') }}">back to list</a>
+    <a href="{{ path('app_article_index') }}">Retour à la liste</a>
 
-    <a href="{{ path('app_article_edit', {'id': article.id}) }}">edit</a>
+    <a href="{{ path('app_article_edit', {'id': article.id}) }}">Editer</a>
 
     {{ include('article/_delete_form.html.twig') }}
 {% endblock %}

templates/index/index.html.twig

@@ -8,11 +8,12 @@
     <section id="section-articles">
         {% for article in articles %}
             <article class="article-preview">
-                <h2>{{ article.title}}<span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h2>
+                <h2><a href="{{ path('app_view', {'id': article.id}) }}">{{ article.title}}</a><span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h2>
                 <div class="contenu">
                     {{ article.content | raw }}
                 </div>
             </article>
+            <a href="{{ path('app_view', {'id': article.id}) }}">Voir l'article</a>
         {% else %}
             <p class="remarque">Rien pour le moment</p>
         {% endfor %}

templates/view/index.html.twig

@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{article.title}}{% endblock %}
+
+{% block body %}
+
+<div>
+    <section>
+        <article class="article">
+            <h2>{{ article.title}}<span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h2>
+            <div class="contenu">
+                {{ article.content | raw }}
+            </div>
+        </article>
+    </section>
+</div>
+
+<a href="{{ path('app_index')}}">Retour au blog</a>
+
+{% endblock %}