src/main/webapp/WEB-INF/createArticle.jsp

@@ -20,7 +20,7 @@
             <p class="error-message">${errorMessage}</p>
         </c:if>
 
-        <form action="<c:url value="/createArticle"/>" method="post">
+        <form action="<c:url value="/back/createArticle"/>" method="post">
             <div>
                 <label for="title">Titre</label>
                 <input type="text" id="title" name="title" placeholder="Le titre de l'article" value="<c:out value="${requestScope.article.title}" />">

src/main/webapp/WEB-INF/jspf/Footer.jsp

@@ -24,4 +24,5 @@
             vous n'êtes pas connecté.
         </c:otherwise>
     </c:choose>
+            <c:if test="${sessionScope.user.id == 1}"> et vous êtes administrateur</c:if>
 </div>

src/main/webapp/WEB-INF/jspf/Header.jsp

@@ -55,12 +55,12 @@
                 <li><a href="<c:url value='/login'/>">Connexion</a></li>
                 </c:when>
                 <c:otherwise>
-                    <c:if test="${sessionScope.user.id == 1}">
-                    <li><a href="<c:url value='/createArticle'/>">Créer un article</a></li>
-                    </c:if>
                 <li><a href="<c:url value='/logout'/>">Se deconnecter</a></li>
                 <li><a href="<c:url value='/profile'/>">Mon compte</a></li>
                 </c:otherwise>
             </c:choose>
+            <c:if test="${sessionScope.user.id == 1}">
+            <li><a href="<c:url value='/back/createArticle'/>">Créer un article</a></li>
+            </c:if>
     </ul>
 </nav>

src/main/webapp/rsc/css/Style.css

@@ -77,7 +77,7 @@ input[type=submit]:hover , input[type=reset]:hover{
 }
 
 
-.container {
+.containerArticle {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
@@ -169,3 +169,102 @@ textarea {
     padding: 20px;
     text-align: center;
 }
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    padding-bottom: 40px;
+}
+
+.pagination ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.pagination ul li {
+    margin-right: 5px;
+}
+
+.pagination ul li.disabled a {
+    color: #ccc;
+    cursor: not-allowed;
+    text-decoration: none;
+}
+
+.pagination ul li.active a {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+    text-decoration: none;
+}
+
+.pagination ul li a {
+    display: block;
+    padding: 5px 10px;
+    color: #007bff;
+    background-color: #fff;
+    border: 1px solid #007bff;
+    text-decoration: none;
+}
+
+.pagination ul li a:hover {
+    background-color: #007bff;
+    color: #fff;
+    text-decoration: none;
+}
+
+.article-container {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+}
+
+#pageArticle > h2 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+#pageArticle > .sub {
+    font-size: 1rem;
+    color: gray;
+    margin-bottom: 1rem;
+}
+
+#pageArticle > div {
+    font-size: 1.2rem;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+}
+
+#pageArticle > .pagingArticle {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2rem;
+}
+
+#pageArticle > a {
+    font-size: 1.2rem;
+    color: black;
+    text-decoration: none;
+    border: 1px solid black;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    transition: all 0.2s ease-in-out;
+    
+}
+
+#pageArticle > a:hover {
+    background-color: black;
+    color: white;
+}
+#pageArticle > .disabled {
+    color: gray;
+    border-color: gray;
+    pointer-events: none;
+    opacity: 0.6;
+}
\ No newline at end of file