Exemple Java JSP JSTL avec Bootstrap
POJO
package fr.ronanlefichant.mywebapp;
public class Contact {
private String avatar;
private String firstName;
private String lastName;
private String email;
private String phone;
public Contact(String avatar, String firstName, String lastName, String email, String phone) {
this.avatar = avatar;
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phone = phone;
}
public String getAvatar() {
return avatar;
}
public String getFirstName() {
return firstName;
}
public String getLastName() {
return lastName;
}
public String getEmail() {
return email;
}
public String getPhone() {
return phone;
}
}Servlet
package fr.ronanlefichant.mywebapp;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ContactServlet
Adresse de la Servlet : http://localhost:8080/mywebapp/contacts */
@WebServlet("/contacts")
public class ContactServlet extends HttpServlet {
private static final long serialVersionUID = 1 L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/* Création de la liste */
List < Contact > contacts = Arrays.asList(
new Contact("avatars/avatar1.png", "Jane", "Doe", "jane.doe@email.com", "0600000000"),
new Contact(null, "John", "Doe", "john.doe@email.com", "0600000001"),
new Contact("avatars/avatar2.png", "Sherlock", "Holmes", "sherlock.holmes@email.com", "0600000002"),
new Contact("avatars/avatar3.png", "Betty", "Wayne", "betty.wayne@email.com", "0600000003"),
new Contact("avatars/avatar4.png", "Mary", "Smith", "mary.smith@email.com", "0600000004"));
/* Ajoute un attribut contacts pour récupérer la liste des contacts en JSTL */
request.setAttribute("contacts", contacts);
/* Redirection vers la JSP contacts */
RequestDispatcher rd = getServletContext().getRequestDispatcher("/contacts.jsp");
rd.forward(request, response);
}
}JSP / JSTL
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>Mes contacts</title>
<%-- CDN Bootstrap --%>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<%-- fichier style.css --%>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Mes contacts</h1>
<div class="row">
<!-- Pour chaque personne. Récupération de la liste contacts -->
<c:forEach items="${requestScope.contacts}" var="contact">
<div class="col-lg-4 col-md-6">
<div class="card contact-card">
<c:choose>
<%-- Si avatar existe --%>
<c:when test="${contact.getAvatar() != null}">
<%-- On affiche l'avatar --%>
<img class="card-img-top rounded-circle avatar" src="<c:out value="${ contact.getAvatar() }" />" alt="Avatar" />
</c:when>
<c:otherwise>
<%-- Sinon on affiche l'avatar par défaut --%>
<img class="card-img-top rounded-circle avatar" src="resources/default-avatar.png" alt="Default Avatar" />
</c:otherwise>
</c:choose>
<div class="card-body">
<h5 class="card-title">
<%-- On affiche le prénom et le nom avec un espace --%>
<c:out value="${ contact.getFirstName() } ${ contact.getLastName() }" />
</h5>
<p class="card-text">
<%-- On affiche l'email --%>
<c:out value="${ contact.getEmail() }" />
</p>
<p class="card-text">
<%-- On affiche le téléphone --%>
<c:out value="${ contact.getPhone() }" />
</p>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
</body>
</html>.contact-card {
width: 18rem;
margin-top: 50px;
margin: 50px auto auto auto;
}
.avatar {
width: 100px;
margin: 0 auto;
}RĂ©sultat
Arborescence des ressources du projet :
Commentaires
Enregistrer un commentaire