src/Controller/PostController.php

@@ -6,15 +6,22 @@ use App\Repository\PostRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\HttpFoundation\Request;
 
 class PostController extends AbstractController
 {
+    private const POSTS_PER_PAGE = 10;
+
     #[Route('/', name: 'app_posts')]
-    public function index(PostRepository $repository): Response
+    public function index(PostRepository $repository, Request $request): Response
     {
-        $posts = $repository->findAll();
+        $page = $request->query->getInt('page', 1);
+        $posts = $repository->findPaginatedPosts($page, self::POSTS_PER_PAGE);
+        $maxPage = ceil($posts->count() / self::POSTS_PER_PAGE);
         return $this->render('post/index.html.twig', [
             'posts' => $posts,
+            'maxPage' => $maxPage,
+            'page' => $page,
         ]);
     }
 }

src/Repository/PostRepository.php

@@ -5,6 +5,7 @@ namespace App\Repository;
 use App\Entity\Post;
 use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
 use Doctrine\Persistence\ManagerRegistry;
+use Doctrine\ORM\Tools\Pagination\Paginator;
 
 /**
  * @extends ServiceEntityRepository<Post>
@@ -16,6 +17,20 @@ class PostRepository extends ServiceEntityRepository
         parent::__construct($registry, Post::class);
     }
 
+    /**
+     * @param int $page
+     * @param int $limit
+     * @return Paginator<Post>
+     */
+    public function findPaginatedPosts(int $page, int $limit): Paginator
+    {
+        $query = $this->createQueryBuilder('p')
+            ->setFirstResult(($page - 1) * $limit)
+            ->setMaxResults($limit);
+
+        return new Paginator($query, fetchJoinCollection: false);
+    }
+
 //    /**
 //     * @return Post[] Returns an array of Post objects
 //     */

templates/_pagination.html.twig

@@ -0,0 +1,24 @@
+{% set route = app.request.attributes.get('_route') %}
+<nav>
+    <ul class="pagination">
+        <li class="page-item {{ page < 2 ? 'disabled' }}">
+            <a class="page-link" href="{{ path(route, {'page': page - 1}) }}">Previous</a>
+        </li>
+        {% if page > 1 %}
+            <li class="page-item">
+                <a class="page-link" href="{{ path(route, {'page': page - 1}) }}">{{ page - 1 }}</a>
+            </li>
+        {% endif %}
+        <li class="page-item active" aria-current="page">
+            <a class="page-link">{{ page }}</a>
+        </li>
+        {% if page + 1 <= maxPage %}
+            <li class="page-item">
+                <a class="page-link" href="{{ path(route, {'page': page + 1}) }}">{{ page + 1 }}</a>
+            </li>
+        {% endif %}
+        <li class="page-item {{ page + 1 > maxPage ? 'disabled' }}">
+            <a class="page-link" href="{{ path(route, {'page': page + 1}) }}">Next</a>
+        </li>
+    </ul>
+</nav>

templates/base.html.twig

@@ -5,6 +5,7 @@
         <title>{% block title %}Welcome to Herbarium!{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
         {% block stylesheets %}
+            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
         {% endblock %}
 
         {% block javascripts %}

templates/post/index.html.twig

@@ -1,11 +1,20 @@
 {% extends 'base.html.twig' %}
-
 {% block title %}Posts!{% endblock %}
 
 {% block body %}
-{% for post in posts %}
-    <div class="card">
-        #{{ post.id }} trouvé le {{ post.foundDate | date("d/m/Y \\à H \\h") }}
+{% for post in posts.iterator %}
+    <div class="card" style="width: 42rem; margin: 20px 0 50px 100px;">
+        <div class="card-body">
+            <h5 class="card-title">{{ post.species ? post.species.vernacularName : 'Post' }}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{ post.foundDate | date("d/m/Y \\à H \\h") }}</h6>
+            <p class="card-subtitle mb-2 text-muted">{{ post.latitude }}, {{ post.longitude }}, {{ post.altitude }}m</p>
+            <p class="card-text">{{ post.commentary }}</p>
+        </div>
+        <div class="card-footer">
+            28 ❤️
+            128 💬
+        </div>
     </div>
 {% endfor %}
+{% include '_pagination.html.twig' %}
 {% endblock %}