Pages web dynamiques en Java : JSP
Cette quête est la première d'une série "fil rouge" qui va te mener à la réalisation d'une application web que l'on appellera GithubTracker autour de l'API Github.
Tu vas commencer à présent par découvrir les technos de base Java utilisées pour la génération de pages web à proprement parler: JSP et JSTL.
Objectifs
- Prendre en main l'API JSP de Java
- Découvrir la librairie de tags JSTL
Initialise le projet GithubTracker
-
Commence par créer un nouveau projet maven web Java/JEE que tu peux nommer GithubTracker en suivant ce tutoriel.
-
Dans les settings d'Intellij, coche également, dans le sous menu Maven > Importing, la case "Import maven projects automatically".
-
Crée le répertoire src/main/java et définis le si besoin comme Sources root (clic droit puis Mark directory as). Crée ensuite le package fr.wildcodeschool.githubtracker dans ce répertoire. Il sera le package de base dans lequel tu définiras tes classes métiers.
-
Pour valider que tout fonctionne correctement, essaie à présent de modifier la jsp index.jsp et d'en redéfinir le titre : Github Tracker. Valide que tout est ok en affichant l'url http://localhost:8080 dans ton navigateur.
L'application GithubTracker est une application qui permet de suivre des githubers et d'afficher des statistiques github les concernant ou sur des repositories donnés. Pour représenter ce modèle de données basique:
-
Crée le package fr.wildcodeschool.githubtracker.model, et ajoutes-y la classe Githuber, un simple POJO, qui comme son nom l'indique, va représenter un membre Github, avec à minima, les attributs name, email, login, id et avatarUrl.
-
Ajoute également, dans le package fr.wildcodeschool.githubtracker.controller, la Servlet GithubersServlet, "mappée" sur l'url /githubers, qui va instancier une liste d'au moins 5 Githubers et envoyer cet objet vers la jsp githubers.jsp que tu vas également créer.
JSP
Comme tu l'as sans doute compris à présent, les JSPs java n'ont rien à voir avec les soldats du feu. Non, effectivement, ce sont plutôt les composants de base utilisés dans le monde Java pour générer/écrire des pages Web. Les Servlets, abordées précédemment, sont destinées à jouer le rôle de controleur dans une application Web Java, et ne sont pas adaptées à la génération de page web, à l'écriture de code HTML. En effet, la lourdeur d'écriture de code HTML depuis une classe Java a été à l'origine de la naissance des composants JSP. Ces derniers se sont inspirés des langages du web tels que PHP, pour rendre plus simple la production de code HTML dans un contexte Java, en "retournant la chaussette Servlet": la JSP permet d'écrire par défaut du code au format HTML, basé sur des tags HTML et autres, et, de manière exceptionnelle, d'y inclure du code Java (Et non pas l'inverse comme pour une Servlet). D'un point de vue technique, le composant JSP est transformé par le serveur d'application (Tomcat par exemple), lors du premier appel, en une classe Servlet, qu'il compile à la volée. Une fois transformée en classe Servlet puis compilée, le serveur utilise la classe générée comme n'importe quelle autre Servlet.
Directives
Les directives permettent de définir des instructions quant à la compilation de la JSP. Elles permettent principalement de définir des imports de classes et d'inclure d'autres ressources web (autre jsp, css, js, etc ...) utilisées par la page.
Pour essayer de créer une application au style sympa sans avoir à en définir tous les éléments de design, tu vas utiliser la librairie Bootstrap. Tu as deux manières de faire: Soit référencer les assets bootstrap comme indiqué dans le tuto de getbootstrap.com, soit télécharger les assets Bootstrap et les inclure à ton application comme indiqué ci-dessous:
Pour la première méthode
- contente-toi de suivre le tuto et à la limite de copier-coller le starter template sur getbootstrap.com.
Pour la seconde méthode,
-
Récupère la dernière version de bootstrap depuis le site getbootstrap.com.
-
Créée un répertoire bootstrap dans le répertoire web de ton appli et copie le contenu de l'archive téléchargée dedans.
Pour que toutes les pages de ton appli aient un header et une navigation homogènes, tu vas définir une nouvelle jsp, header.jsp, dans laquelle tu vas regrouper tous les éléments de début de page (****, <head> avec ses liens vers les fichier css et js de bootstrap) de ton application.
header.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
<%@include file="bootstrap/css/bootstrap.css" %>
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
-
Tu peux à présent te servir de cette jsp et l'inclure dans toutes les pages de ton application (index.jsp et githubers.jsp) à l'aide de la directive jsp:include, et en supprimant des pages tous les éléments redondant avec ceux que tu as placés dans header.jsp.
-
Vérifie que tout fonctionne en affichant ta page d'accueil et en validant, à l'aide de la console web (appuie sur F12 depuis chrome), que toutes tes requêtes vers des ressources (js, css) fonctionnent correctement.
-
Ajoute maintenant dans header.jsp, le code html définissant une navbar bootstrap, qui représentera le menu de ton application, disponible depuis toutes les pages de l'application
-
Fais pointer un des liens de la navbar vers ta page d'accueil, et un autre vers l'url githubers, et vérifie à nouveau que tout fonctionne comme escompté
Scriptlet
Une fois n'est pas coutume, tu vas commencer par "mal" faire les choses, c'est-à-dire, utiliser un scriptlet pour afficher des informations dans ta JSP. Un scriptlet est simplement un bloc de code java dans une jsp, dont tu délimites le début par "<%" et la fin par "%>". Dans une JSP , on utilise par défaut des tags HTML (ou autres tags issus de librairies) pour construire sa page web. Le scriptlet est un moyen qu'il faut, autant que faire se peut, éviter d'utiliser pour écrire son code jsp, justement parce qu'il correspond à du code java classique et qu'il casse donc le format "tag". Néanmoins, dans le monde du développement comme ailleurs, rien n'est jamais tout noir ou tout blanc, et tu vas, de temps en temps, être amené à utiliser ce moyen pour résoudre certaines problématiques.
Edite à présent githubers.jsp, et utilise un scriptlet pour afficher la liste des githubers qui t'est fournie par la Servlet GithubersServlet. Rappelle-toi que tu peux passer par un attribut de l'objet request pour communiquer des données entre une Servlet et une JSP, et qu'il est préférable d'utiliser si possible les classes css bootstrap.
JSTL
La JSTL ou Java Standard Tag Library est une librairie de tags fournie par la plateforme JEE. Elle permet d'utiliser des tags pour implémenter, dans une JSP, des structures de contrôles (boucles, if, etc ...), du formattage, des fonctions de manipulation de chaines et autres fonctions utilitaires. Bref, une librairie de tags utilitaires pour permettre de rester dans un format tag au niveau de la JSP.
Challenge
Afficher une liste "the right way"
Pour essayer de te rattraper de ton choix désastreux d'utiliser un scriptlet pour afficher la liste des githubers (humhum) , essaie d'utiliser la taglib JSTL dans ta jsp githubers.jsp, et d'utiliser les tags fournis (notamment de boucle) pour afficher "proprement" ces infos
Critères de validation
- l'url /githubers affiche la liste des githubers avec un style bootstrap (ainsi que la navbar)
- le code de la jsp githubers.jsp utilise les tags de la JSTL pour effectuer l'affichage
- le code se trouve sur une branche ( autre que master) d'un dépôt github dédié