java ee - fnac-static.com · concevez et développez une application web responsive diplômée du...

ISB

N :

978-

2-40

9-01

096-

5

39 €

Java EEConcevez et développez une application web responsive

Diplômée du Master Interaction Homme-Machine, formation co- habilitée par l’Université Toulouse 3 et l’ENAC (Ecole Nationale de l’Avia-tion Civile), Christelle DAVEZAC exerce depuis une dizaine d’années le métier d’Ingénieur projet en Système d’information et en développement d’applications web, Java et Android. Passionnée par les nouvelles techno-logies, elle s’est spécialisée dans le développement IHM, le génie logiciel, l’ergonomie, la programmation objet et le développement d’applications Java. Elle est aujourd’hui chargée d’enseignement en développement Java, Web Java, en Responsive Web Design et en intégration Web PHP5/7 auprès de l’Université Toulouse 3. Ces différentes expériences lui per-mettent de transmettre aux lecteurs une expertise pointue de la concep-tion et du développement d’applica-tions web Java responsive.

Ce livre s’adresse aux développeurs qui souhaitent concilier développe-ment Java et Responsive Web Design (RWD) pour acquérir de nouvelles compétences sur le développement d’applications web ergonomiques. Des connaissances en programmation Java, en programmation orientée objet et quelques notions sur HTML et sur CSS sont nécessaires pour tirer le meilleur profit de cette lecture.

L’auteur commence par introduire ce qu’est le RWD, qui offre la possibilité de concevoir et développer une unique application web compatible avec différents types d’écran, puis présente les bases de Java EE, l’installa-tion de l’environnement de travail et l’utilisation d’une base de données. Il est ensuite question de l’utilisation du langage HTML5, des feuilles de styles CSS3 ou encore de JavaScript dans la conception d’une applica-tion Java.

Dans les chapitres qui suivent, l’auteur montre l’importance de s’interroger sérieusement sur la conception et l’ergonomie de l’application selon les différentes résolutions d’écran. Pour une application Java, l’enjeu princi-pal réside dans l’utilisation des Media Queries qui permettent la sélection pertinente des éléments et des informations à afficher en fonction du ter-minal.

Tout au long du livre, un fil rouge guide le lecteur dans la conception et le développement d’une application de gestion de prêt de livres. Il pourra ainsi mieux comprendre les différents mécanismes permettant de réaliser une application professionnelle responsive et ergonomique. L’auteur lui propose également de mettre en application les connaissances présen-tées au fil de la lecture à travers la réalisation de l’interface d’adminis-tration de l’application de gestion de prêt de livres. Une correction type sera proposée à la fin du livre.

Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.

Téléchargementwww.editions-eni.fr.fr

Sur www.editions-eni.fr :

b Le code source de l’appli-cation utilisée en exemple.

Java

EE

Con

ceve

z et

dév

elop

pez

une

appl

icat

ion

web

res

pons

ive

Pour plus d’informations :

Christelle DAVEZAC

Java EE Concevez et développez une application web responsive

Introduction • Les bases du Java EE • Installation : environnement de travail • Les bases de données avec Java EE • Conception d’une application Java EE • Utiliser les feuilles de style CSS3 • JavaScript • Prototypage d’une application responsive • Pensez votre application responsive • Application responsive et performante • Développez : application prêt de livres • Correction de l’exercice

Les chapitres du livre

1Table des matières

Chapitre 1Introduction

1. Le Responsive Web Design (RWD) . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2. Public . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3. Description de l’ouvrage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4. Présentation de l’application de prêt de livres . . . . . . . . . . . . . . . . . . 19

5. Mots de l’auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Chapitre 2Les bases du Java EE

1. Premiers pas avec Java EE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211.1 Principes d’application web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211.2 Architecture Java EE 7 standard . . . . . . . . . . . . . . . . . . . . . . . . . 221.3 Plateforme Java EE 7 : nouveautés. . . . . . . . . . . . . . . . . . . . . . . . 23

2. Technologies JSP et JavaBean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.1 Les JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.1.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.1.2 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.2 Les JavaBeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.2.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.2.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

2.3 Servlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3. Principes du design pattern MVC/MVC2. . . . . . . . . . . . . . . . . . . . . . 293.1 Design pattern MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.2 MVC2 avec Struts 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Les éléments à télécharger sont disponibles à l'adresse suivante : http://www.editions-eni.fr

Saisissez la référence ENI de l'ouvrage EIJAVRWD dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

lcroise

Tampon

2Concevez et développez une application web responsive

Java EE

4. Principe du framework Struts 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.1 Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.2 Fichiers de configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.2.1 Le fichier web.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.2.2 Le fichier struts.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

4.3 Arborescence d’un projet Java Struts 2 . . . . . . . . . . . . . . . . . . . . 34

Chapitre 3Installation : environnement de travail

1. Installation de Netbeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411.1 Installation du Java SE Development Kit . . . . . . . . . . . . . . . . . 41

1.1.1 Installation sous Linux (Ubuntu et Debian) . . . . . . . . . . 411.1.2 Installation sous Windows . . . . . . . . . . . . . . . . . . . . . . . . 42

1.2 lnstallation de Netbeans 8.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461.2.1 Installation sous Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . 461.2.2 Installation sous Windows . . . . . . . . . . . . . . . . . . . . . . . . 51

2. Installation de Struts 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542.1 Plug-ins Netbeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542.2 Ajout du plug-in Struts 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552.3 Création d'un projet Struts 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582.4 Arborescence d'un projet Struts 2 . . . . . . . . . . . . . . . . . . . . . . . . 63

3. Installation de GlassFish Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663.1 Serveur applicatif GlassFish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663.2 Serveur web frontal Apache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

4. Installation de PostgreSQL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

4.1.1 Sous Linux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.1.2 Sous Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

4.2 Ajout d'un pilote JDBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73


5. Installation de Maven, Git et Svn . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.1 Maven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.2 Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.3 SVN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Chapitre 4Les bases de données avec Java EE

1. Modélisation de la BD avec Java EE . . . . . . . . . . . . . . . . . . . . . . . . . . 811.1 Cahier des charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

1.1.1 Interface utilisateur : Front-end . . . . . . . . . . . . . . . . . . . . 821.1.2 Interface administrateur : Back-end . . . . . . . . . . . . . . . . . 82

1.2 IHM (Interface homme-machine) . . . . . . . . . . . . . . . . . . . . . . . . 831.3 Schéma UML2 : BD catalog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

1.3.1 Informations relatives aux livres . . . . . . . . . . . . . . . . . . . . 851.3.2 Informations relatives au catalogue . . . . . . . . . . . . . . . . . 871.3.3 Informations relatives aux utilisateurs . . . . . . . . . . . . . . . 881.3.4 Schéma de réservation d'un livre . . . . . . . . . . . . . . . . . . . . 891.3.5 Schéma global pour le catalogue . . . . . . . . . . . . . . . . . . . . 90

1.4 Script SQL de la base de données Catalog. . . . . . . . . . . . . . . . . . 92

2. Design pattern DAO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 942.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 942.2 Classe Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 952.3 Description des requêtes SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . 982.4 Implémentation du pattern DAO . . . . . . . . . . . . . . . . . . . . . . . . 992.5 Connexion DAO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

3. Connexion à la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1033.1 Pattern Singleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1033.2 Connexion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

4. Persistance des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1064.1 Ajout d'un auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1064.2 Modification d'un auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107


Java EE

4.3 Suppression d'un auteur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

5. Utilisation du framework Hibernate. . . . . . . . . . . . . . . . . . . . . . . . . 1105.1 Installation du plug-in sous Netbeans . . . . . . . . . . . . . . . . . . . 1105.2 Hibernate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1115.3 Équivalence Table/Objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

5.3.1 Classe Author encapsulant les données . . . . . . . . . . . . . 1125.3.2 Fichier XML correspondant . . . . . . . . . . . . . . . . . . . . . . . 1135.3.3 Configuration des propriétés de connexion . . . . . . . . . . 1135.3.4 Mise en œuvre sous Netbeans . . . . . . . . . . . . . . . . . . . . . 114

Chapitre 5Conception d'une application Java EE

1. HTML et HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1231.1 Les bases HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

1.1.1 Introduction à HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 1231.1.2 Les principales balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

1.2 HTML5 : les apports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1261.2.1 Nouvelles balises pour structurer un document. . . . . . . 1261.2.2 Nouveaux éléments pour le multimédia. . . . . . . . . . . . . 1281.2.3 Nouveaux éléments de formulaire . . . . . . . . . . . . . . . . . 1291.2.4 Nouveaux attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1291.2.5 Autres éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1301.2.6 API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

1.3 Structuration de ses pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1311.3.1 Bien structurer sa page . . . . . . . . . . . . . . . . . . . . . . . . . . . 1311.3.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

2. Conception des formulaires HTML5/JSP . . . . . . . . . . . . . . . . . . . . . 1342.1 Organisation des pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

2.1.1 Arborescence du répertoire JSP . . . . . . . . . . . . . . . . . . . . 1342.1.2 Inclusion des fichiers communs . . . . . . . . . . . . . . . . . . . 135


2.2 Formulaire HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1382.2.1 Structurer ses formulaires HTML5 . . . . . . . . . . . . . . . . . 1382.2.2 Messages d'erreur ou informatifs. . . . . . . . . . . . . . . . . . . 139

2.3 Mise en œuvre en HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.4 Formulaires HTML5 avec Struts 2 . . . . . . . . . . . . . . . . . . . . . . 144

2.4.1 Tags Struts 2 : formulaire . . . . . . . . . . . . . . . . . . . . . . . . 1442.4.2 Messages d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

2.5 Mise en œuvre : formulaire Struts 2 . . . . . . . . . . . . . . . . . . . . . 1502.5.1 Formulaire authentification adhérent. . . . . . . . . . . . . . . 1502.5.2 Formulaire d'ajout d'un adhérent . . . . . . . . . . . . . . . . . . 152

3. Traitement des données d’un formulaire . . . . . . . . . . . . . . . . . . . . . 1553.1 Gestion de l’accès aux données . . . . . . . . . . . . . . . . . . . . . . . . . 155

3.1.1 La balise <s:property/>. . . . . . . . . . . . . . . . . . . . . . . . . . 1553.1.2 La balise <s:url> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1563.1.3 La balise <s:date/> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1573.1.4 La balise <s:set> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

3.2 Itération, tri et condition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1583.2.1 Balise <s:iterator> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1583.2.2 Balise <s:sort/> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1583.2.3 Balise <s:if>, <s:else/> et <s:elseif/> . . . . . . . . . . . . . 159

4. Gestion des sessions utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1594.1 Définition d'une variable de session . . . . . . . . . . . . . . . . . . . . . 1604.2 Enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1604.3 Suppression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1604.4 Exemple complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

5. Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1645.1 Objet Java Cookie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1645.2 HTML Storage mieux que les cookies . . . . . . . . . . . . . . . . . . . . 165

5.2.1 Intérêt du HTML Storage . . . . . . . . . . . . . . . . . . . . . . . . 1655.2.2 Compatibilité des navigateurs . . . . . . . . . . . . . . . . . . . . . 1665.2.3 Objet localStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1665.2.4 Objet sessionStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167


Java EE

6. Envoi de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1676.1 Téléchargement d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

6.1.1 Balise <input>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1676.1.2 Balise <s:file/>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

6.2 Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Chapitre 6Utiliser les feuilles de style CSS3

1. Introduction à CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1731.1 Feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

1.1.1 Code CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1741.1.2 Définition d'une règle de style . . . . . . . . . . . . . . . . . . . . . 1741.1.3 Inclusion d'un fichier CSS . . . . . . . . . . . . . . . . . . . . . . . . 175

1.2 Application d'un style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1761.2.1 Sélection d'un élément avec son identifiant . . . . . . . . . . 1761.2.2 Sélection d'un élément d'après sa classe . . . . . . . . . . . . . 1771.2.3 Sélection d'un élément d'après son type . . . . . . . . . . . . . 1781.2.4 Autres sélecteurs ou pseudoclasses . . . . . . . . . . . . . . . . . 1781.2.5 Ordre de priorité des styles . . . . . . . . . . . . . . . . . . . . . . . 179

2. Apport du CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1812.1 Couleurs et images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

2.1.1 Couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1812.1.2 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

2.2 Effet de texte, bordures et dimensions . . . . . . . . . . . . . . . . . . . 1832.2.1 Effet de texte, police web. . . . . . . . . . . . . . . . . . . . . . . . . 1832.2.2 Bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1842.2.3 Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1852.2.4 Débordement de contenu . . . . . . . . . . . . . . . . . . . . . . . . 186

2.3 Multicolonnage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1872.4 Animations, transitions et transformations . . . . . . . . . . . . . . . 187

2.4.1 Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1872.4.2 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189


2.4.3 Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1912.5 Media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

3. Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1923.1 Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

3.1.1 Caractères et polices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1933.1.2 Couleurs et images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1953.1.3 Bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1963.1.4 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

3.2 Positionnement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1983.2.1 Marges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1983.2.2 Positionnement des éléments . . . . . . . . . . . . . . . . . . . . . 2003.2.3 Propriété display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2003.2.4 Propriétés top, right, bottom, left . . . . . . . . . . . . . . . . . . 2023.2.5 Propriété position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2043.2.6 Propriété float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2063.2.7 Propriété z-index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2083.2.8 Centrage horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2093.2.9 Centrage vertical. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

4. Mise en œuvre des feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . 2134.1 Formulaire d'authentification . . . . . . . . . . . . . . . . . . . . . . . . . . 2134.2 Feuille de style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

5. Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2175.1 Un plug-in responsive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

5.1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2175.1.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

5.2 Exemple Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

6. Frameworks CSS : Sass, Less . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2226.1 Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

6.1.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2236.1.2 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2276.1.3 Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2276.1.4 Imbrication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228


Java EE

6.1.5 Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2296.2 Less . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

6.2.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2306.2.2 Fichier Less . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2316.2.3 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2326.2.4 Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2336.2.5 Imbrication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2346.2.6 Opérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2346.2.7 Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Chapitre 7JavaScript

1. Introduction à JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2371.1 Un langage de programmation . . . . . . . . . . . . . . . . . . . . . . . . . 237

1.1.1 JavaScript, mais pas Java . . . . . . . . . . . . . . . . . . . . . . . . . 2371.1.2 Insertion de code JavaScript dans du HTML . . . . . . . . . 238

1.2 Possibilités avec JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

2. Les bases du JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2402.1 Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

2.1.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2402.1.2 Commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2412.1.3 Indentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2412.1.4 Noms de variables et de fonctions. . . . . . . . . . . . . . . . . . 242

2.2 Types simples, variables, expressions . . . . . . . . . . . . . . . . . . . . 2422.2.1 Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2422.2.2 Variables et opérateurs arithmétiques . . . . . . . . . . . . . . 2432.2.3 Autres opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2432.2.4 Concaténation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

2.3 Conditions, boucles et switch . . . . . . . . . . . . . . . . . . . . . . . . . . 2462.3.1 Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2462.3.2 Boucles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2462.3.3 Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248


2.4 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2482.4.1 Tableau à une dimension . . . . . . . . . . . . . . . . . . . . . . . . . 2482.4.2 Tableau multidimensionnel . . . . . . . . . . . . . . . . . . . . . . . 249

2.5 Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2492.5.1 Fonctions sans arguments . . . . . . . . . . . . . . . . . . . . . . . . 2492.5.2 Fonctions avec arguments . . . . . . . . . . . . . . . . . . . . . . . . 2502.5.3 Fonctions avec valeur retournée . . . . . . . . . . . . . . . . . . . 250

2.6 JavaScript et les objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2512.6.1 Objet String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2512.6.2 Objet Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

2.7 Interaction HTML/JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 2542.7.1 L'objet window et ses méthodes . . . . . . . . . . . . . . . . . . . 2542.7.2 L'objet document et ses méthodes. . . . . . . . . . . . . . . . . . 2562.7.3 Log et alerte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

2.8 Modification de propriétés CSS. . . . . . . . . . . . . . . . . . . . . . . . . 2592.9 Événements et objets HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . 260

2.9.1 Événements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2602.9.2 Méthode AddEventListener . . . . . . . . . . . . . . . . . . . . . . . 262

3. jQuery et jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2633.1 Librarie jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

3.1.1 Téléchargement de jQuery. . . . . . . . . . . . . . . . . . . . . . . . 2643.1.2 Inclusion de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

3.2 Fonctionnement de base de jQuery. . . . . . . . . . . . . . . . . . . . . . 2653.2.1 jQuery : la syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2653.2.2 Attendre que la page soit chargée . . . . . . . . . . . . . . . . . . 266

3.3 Sélection d'éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2673.3.1 Sélection à partir du nom de l’élément . . . . . . . . . . . . . . 2683.3.2 Sélection à partir de l'identifiant . . . . . . . . . . . . . . . . . . . 2693.3.3 Sélection à partir de la classe . . . . . . . . . . . . . . . . . . . . . . 2713.3.4 Filtres sur l’arborescence . . . . . . . . . . . . . . . . . . . . . . . . . 2723.3.5 Filtres de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2733.3.6 Filtres de visibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273


Java EE

3.4 Quelques méthodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2743.4.1 Récupérer et modifier le contenu HTML . . . . . . . . . . . . 2743.4.2 Récupérer ou modifier les propriétés CSS. . . . . . . . . . . . 2783.4.3 Récupérer ou modifier la classe CSS . . . . . . . . . . . . . . . . 280

3.5 Validation de formulaires avec jQuery . . . . . . . . . . . . . . . . . . . 2823.5.1 Récupération d'éléments des formulaires . . . . . . . . . . . . 2823.5.2 Méthodes utiles aux formulaires . . . . . . . . . . . . . . . . . . . 2833.5.3 Validation de formulaires. . . . . . . . . . . . . . . . . . . . . . . . . 284

3.6 Introduction à jQuery UI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2883.6.1 Récupération de la librairie jQuery UI . . . . . . . . . . . . . . 2883.6.2 Quelques méthodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

4. Angular JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2904.1 Installation de l'environnement. . . . . . . . . . . . . . . . . . . . . . . . . 2904.2 Bases pour créer une application . . . . . . . . . . . . . . . . . . . . . . . . 290

4.2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2904.2.2 Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2914.2.3 Contrôleur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2924.2.4 Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2934.2.5 Modèle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2934.2.6 Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2944.2.7 Data Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2944.2.8 Directives : éléments de formulaire. . . . . . . . . . . . . . . . . 2954.2.9 Propriétés Angular pour les formulaires . . . . . . . . . . . . . 295

4.3 Validation de formulaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Chapitre 8Prototypage d’une application responsive

1. Bonnes pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2991.1 Conception d'une application web . . . . . . . . . . . . . . . . . . . . . . 299

1.1.1 Conception participative . . . . . . . . . . . . . . . . . . . . . . . . . 3001.1.2 Agile et Scrum. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

1.2 Spécificités du Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302


2. Maquettes et outils. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3062.1 Croquis ou prototype fait main. . . . . . . . . . . . . . . . . . . . . . . . . 3062.2 Logiciels de maquettage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

2.2.1 Photoshop et Gimp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3072.2.2 PowerPoint ou LibreOffice Impress. . . . . . . . . . . . . . . . . 3092.2.3 Aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

2.3 Vidéos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3102.4 Page web statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3102.5 Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

2.5.1 IHM : Livres à la une : écran>1280 px . . . . . . . . . . . . . . 3112.5.2 IHM : Livres à la une : 800 px<écran<1280 px . . . . . . . 3122.5.3 IHM : Livres à la une : écran entre 400 px et 800 px . . . 3132.5.4 IHM : Livres à la une : écran < 400 px . . . . . . . . . . . . . . 314

3. Modélisation IHM et aspects cognitifs . . . . . . . . . . . . . . . . . . . . . . . 3163.1 Interface homme-machine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3163.2 Aspects cognitifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

3.2.1 Mémoire sensorielle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3173.2.2 Mémoire à court terme . . . . . . . . . . . . . . . . . . . . . . . . . . 3183.2.3 Processus d'apprentissage. . . . . . . . . . . . . . . . . . . . . . . . . 318

3.3 Modélisation des tâches utilisateurs . . . . . . . . . . . . . . . . . . . . . 3193.3.1 Théorie de Norman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3193.3.2 Exemple de modélisation par tâches . . . . . . . . . . . . . . . . 320

4. Ergonomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3214.1 Qu’est-ce que l’ergonomie ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3214.2 Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

4.2.1 Critères ergonomiques Scapin et Bastien . . . . . . . . . . . . 3224.2.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3244.2.3 Méthodes pour améliorer les IHM . . . . . . . . . . . . . . . . . 324

4.3 Ergonomie et caractère responsive . . . . . . . . . . . . . . . . . . . . . . 3254.3.1 Généralités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3254.3.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326


Java EE

5. Outils et plug-ins de test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3265.1 Outils. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

5.1.1 Redimensionnement avec le navigateur . . . . . . . . . . . . . 3275.1.2 Test sur différents terminaux . . . . . . . . . . . . . . . . . . . . . 3275.1.3 Outils en ligne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

5.2 Plug-ins de test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3305.2.1 Émulateur de Google Chrome . . . . . . . . . . . . . . . . . . . . . 3305.2.2 Émulateur de Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3315.2.3 Émulateur d'Opera Mobile. . . . . . . . . . . . . . . . . . . . . . . . 3325.2.4 Émulateur d'Internet Explorer 11 . . . . . . . . . . . . . . . . . . 332

Chapitre 9Pensez votre application responsive

1. Introduction aux Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3331.1 Types de médias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3351.2 Opérateurs logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3361.3 Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

2. Mise en œuvre des media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . 3392.1 Points de rupture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

2.1.1 Points de rupture majeurs/mineurs. . . . . . . . . . . . . . . . . 3402.1.2 Définition de points de rupture. . . . . . . . . . . . . . . . . . . . 342

2.2 Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3422.3 Compatibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

3. Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3533.1 Balise meta HTML viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . 3543.2 Règle CSS @viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

4. Menu responsive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3584.1 Menus classiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359

4.1.1 Menu horizontal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3594.1.2 Menu vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363


4.2 Menu « hamburger » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3664.2.1 Introduction au menu hamburger. . . . . . . . . . . . . . . . . . 3664.2.2 Principes de fonctionnement . . . . . . . . . . . . . . . . . . . . . . 367

5. Formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3695.1 Formulaire responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3695.2 Mise en œuvre d’un formulaire responsive. . . . . . . . . . . . . . . . 369

6. Images, graphiques et animations . . . . . . . . . . . . . . . . . . . . . . . . . . . 3726.1 Images, animations et graphiques adaptatifs . . . . . . . . . . . . . . 372

6.1.1 Débordement des images . . . . . . . . . . . . . . . . . . . . . . . . . 3726.1.2 Utilisation de la propriété max-height . . . . . . . . . . . . . . 373

6.2 Mise en œuvre d’une image adaptative. . . . . . . . . . . . . . . . . . . 373

7. Grilles flexibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3747.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

7.1.1 Principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3757.1.2 Grilles à 12 colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

7.2 Mise en œuvre d’une grille personnalisée . . . . . . . . . . . . . . . . . 3777.2.1 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3777.2.2 Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

8. Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3788.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3788.2 Principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

9. Typographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3829.1 Des polices éprouvées pour le Web . . . . . . . . . . . . . . . . . . . . . . 382

9.1.1 Polices fiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3829.1.2 Autres polices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

9.2 Lisibilité du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3849.2.1 Critères de lisibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3849.2.2 Mise en page du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . 384


Java EE

Chapitre 10Application responsive et performante

1. Interaction utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3871.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3871.2 HTML5 pour plus d’interactions. . . . . . . . . . . . . . . . . . . . . . . . 388

1.2.1 Nouvelles interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . 3881.2.2 Interaction hors ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

2. Message d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3902.1 Prévention des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3902.2 Détection des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391

2.2.1 Affichage des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3912.2.2 Aider à corriger les erreurs . . . . . . . . . . . . . . . . . . . . . . . . 393

3. Fenêtre modale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3933.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393

3.1.1 Utilisation d'une fenêtre modale . . . . . . . . . . . . . . . . . . . 3933.1.2 Sortie d'une fenêtre modale . . . . . . . . . . . . . . . . . . . . . . . 394

3.2 Concevoir une fenêtre modale. . . . . . . . . . . . . . . . . . . . . . . . . . 3953.2.1 Principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3953.2.2 Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

4. Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4004.1 Émulation de connexions moins rapides . . . . . . . . . . . . . . . . . 400

4.1.1 Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4014.1.2 Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

4.2 Optimisation de la performance . . . . . . . . . . . . . . . . . . . . . . . . 4024.2.1 Compression des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . 4024.2.2 Mise en cache de ressources . . . . . . . . . . . . . . . . . . . . . . . 403

4.3 Aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4044.3.1 Minification des fichiers. . . . . . . . . . . . . . . . . . . . . . . . . . 4044.3.2 Optimisation des images . . . . . . . . . . . . . . . . . . . . . . . . . 4064.3.3 localStorage versus cookies . . . . . . . . . . . . . . . . . . . . . . . 406


5. Référencement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4065.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4065.2 Amélioration du référencement. . . . . . . . . . . . . . . . . . . . . . . . . 407

5.2.1 Agir dans le HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4075.2.2 Stratégie de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Chapitre 11Développez : application prêt de livre

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

2. Spécifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4102.1 Partie front-end. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

2.1.1 Paramètres pour la mise en page . . . . . . . . . . . . . . . . . . . 4112.1.2 Consulter les livres par auteur . . . . . . . . . . . . . . . . . . . . . 4112.1.3 Consulter les livres recommandés . . . . . . . . . . . . . . . . . . 4122.1.4 Implémenter la recherche. . . . . . . . . . . . . . . . . . . . . . . . . 4132.1.5 Ajouter la table Mot-clé . . . . . . . . . . . . . . . . . . . . . . . . . . 4142.1.6 Concevoir le menu hamburger . . . . . . . . . . . . . . . . . . . . 414

2.2 Partie back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4152.2.1 Ajouter un auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4162.2.2 Consulter les auteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416

Chapitre 12Correction de l’exercice

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

2. La base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

3. Partie front-end. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4193.1 Consulter les livres par auteur . . . . . . . . . . . . . . . . . . . . . . . . . . 419

3.1.1 DisplayAllAuthor.jsp . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4193.1.2 stylesheet.css. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4213.1.3 header.jsp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4323.1.4 footer.jsp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434


Java EE

3.1.5 Book.java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4353.1.6 BookDAO.java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4393.1.7 DisplayAuthorAction.jsp . . . . . . . . . . . . . . . . . . . . . . . . . 4443.1.8 struts.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4443.1.9 SQLConstant.java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445

3.2 Afficher les livres recommandés . . . . . . . . . . . . . . . . . . . . . . . . 4463.2.1 index.jsp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4463.2.2 struts.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4483.2.3 BookAction.java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450

3.3 Implémenter la recherche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4513.3.1 SearchAction.java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4513.3.2 Autres fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

3.4 Concevoir le menu hamburger . . . . . . . . . . . . . . . . . . . . . . . . . 4533.4.1 index.jsp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4533.4.2 hamburger.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4533.4.3 stylesheet.css. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

4. Partie back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4544.1 Ajouter un auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454

4.1.1 Menu administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4544.1.2 administrationMenu.css . . . . . . . . . . . . . . . . . . . . . . . . . 4554.1.3 AdministrationIndex.jsp . . . . . . . . . . . . . . . . . . . . . . . . . 4594.1.4 AddNewAuthor.jsp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4614.1.5 AuthorDAO.java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4634.1.6 AuthorAction.java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

4.2 Consulter la liste des auteurs. . . . . . . . . . . . . . . . . . . . . . . . . . . 469

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

123

Chapitre 5

Conception d'une applicationJava EE

Conception d'une application Java EE

1. HTML et HTML5

1.1 Les bases HTML

Pour concevoir une application Java web responsive, il faut tout d'abordmaîtriser le langage HTML et connaître son fonctionnement.

1.1.1 Introduction à HTML

HTML (HyperText Mark-up Language) est un langage de balises qui permet destructurer les pages web. Les balises décrivent la façon dont les documents etleurs divers éléments devront être affichés.

Les balises sont interprétées par le navigateur afin de définir comment afficherla page pour l'utilisateur.

Tout document ou page HTML comporte une balise <html> et une baliseHTML fermante </html>. Il s'agit de l'élément racine du document.

lcroise

Tampon

© E

dit

ions

EN

I -

All r

ights

rese

rved


Java EE

Un document HTML5 doit a minima suivre la structure minimale requise ci-dessous :

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Main Title</title>

<link rel="stylesheet" href="style.css">

<script src="script.js"></script>

</head>

<body>

...



...

</body>

</html>

La balise <!doctype html> spécifie qu'il s'agit d'un document HTML etplus précisément, d'un document HTML5.

1.1.2 Les principales balises

Les principales balises relatives à la structure de base d'une page HTML sont :

– !doctype, qui indique les règles de mise en forme à appliquer par le navi-gateur.

– html, qui représente l'élément racine de la page.

– head, pour les informations d'en-tête utilisées soit par le navigateur (titre,balises meta…), soit par les éléments du corps (styles, scripts...).

– title, qui correspond au titre de la page affichée dans le navigateur.

– meta, pour les informations optionnelles relatives au descriptif du contenude la page, à son auteur et de nombreuses autres informations.

– link, qui correspond au lien vers des fichiers externes. La feuille de styleCSS est référencée de cette façon.

– script, qui contient du code JavaScript utilisé par la page (fonctions appe-lées lors de certains événements déclenchés par l'utilisateur, par exemple, leclic sur un bouton).

125Conception d'une application Java EEChapitre 5

– body, qui correspond au corps de la page contenant tous les éléments rela-tifs au rendu et à la présentation du document.

Voici quelques balises parmi les plus utilisées et contenues entre les balises<body> et </body> :

– La balise <div></div> peut être utilisée pour diviser un document en plu-sieurs sections. Elle peut contenir plusieurs éléments HTML.

– La balise <a></a> permet de créer un lien hypertexte.

– Les balises de type <h1></h1>, <h2></h2> jusqu'à <h6></h6> servent àintroduire le titre d'un contenu HTML.

– La balise <br></br> effectue un retour à la ligne.

– La balise <p></p> définit un paragraphe.

– La balise  réalise la mise en commentaire afin que le HTML nesoit pas interprété par le navigateur.

Voici un exemple d'utilisation des balises div, h1 et p :

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Main Title</title>

<link rel="stylesheet" href="style.css">

<script src="script.js"></script>

</head>

<body>

<div id="myId" Class="myClass">

<h1>div element</h1>

<p> First paragraph</p>

<p> Second paragraph</p>

<p> Third paragraph</p>

</div>

</body>

</html>

© E

dit

ions

EN

I -

All r

ights

rese

rved


Java EE

1.2 HTML5 : les apports

Les apports de HTML5 par rapport à HTML sont nombreux : du point de vuede la structuration des documents qui est plus cohérente, du point de vue del'ergonomie avec de nouveaux éléments multimédias qui, graphiquement,offrent des possibilités se rapprochant de Flash ou de Silverlight, du point devue du stockage des données avec le mode persistant hors connexion, et enfindu point de vue des nouvelles interfaces de programmation qui permettentd'utiliser nativement la géolocalisation et de glisser-déposer des objets.

1.2.1 Nouvelles balises pour structurer un document

HTML5 apporte de nouvelles balises qui permettent de structurer un docu-ment de façon plus cohérente et plus lisible.

En effet, auparavant, pour subdiviser un document, on utilisait principale-ment des balises <div>. HTML5 apporte en plus les nouvelles balises sui-vantes qui vont permettre de mieux structurer un document :

– La balise <header> se place en début de page. Elle correspond à l'en-tête dela page. Cette balise permet de structurer un document avec une meilleuresémantique pour les en-têtes de sections ou de pages.

– La balise <nav> correspond à une section possédant des liens de navigationprincipaux (généralement, elle désigne le menu principal de l'application).

– La balise <section> correspond à une section générique qui regroupe dessections traitant d'un même sujet.

– La balise <article> correspond à une section avec un contenu indépen-dant relative au traitement d'un sujet spécifique. Cette balise peut contenirune section d'en-tête, un pied de page et différentes sections.

– La balise <aside> correspond à une section dont le contenu apporte uncomplément d'information par rapport aux autres éléments les plusproches.

– La balise <footer> correspond à une section qui se place en fin de docu-ment, de section ou d'article. Le plus souvent, cette balise correspond aupied de page du document.

– La balise <main> spécifie le contenu principal d'un document.

127Conception d'une application Java EEChapitre 5

Voici un exemple de structure du document et d'imbrication des différentesbalises HTML5 évoquées ci-dessus :

<header>

header

<nav>

nav

</nav>

</header>

<section>

<article>

article 1

</article>

<article>

article 2

</article>

</section>

<aside>

aside

</aside>

<footer>

footer

</footer>

Par défaut, les éléments HTML se placent les uns sous les autres. Nous verronsdans les chapitres suivants l'importance du CSS pour agir sur la disposition deces éléments dans une page web.

© E

dit

ions

EN

I -

All r

ights

rese

rved


Java EE

Graphiquement, l'objectif sera de subdiviser le document HTML comme ledécrit le schéma ci-dessous :

1.2.2 Nouveaux éléments pour le multimédia

HTML5 fournit de façon native des outils multimédias par le biais de l'utilisa-tion des balises <video>, <audio> et surtout, <canvas>.

Il devient possible de lire des vidéos en HTML5 sans recourir à l'installationd'un plug-in.

L'élément <canvas> permet de réaliser des dessins et des animations interac-tives. Il fournit une surface de dessin.

Les éléments <video> et <audio> permettent d'insérer des vidéos et dessons dans les pages web.

Voici un exemple d'utilisation des éléments <video> et <canvas> :

<video src="myVideo.mp4" width="400" height="300"></video>

<canvas id="myCanvas"></canvas>

Pour l’élément <canvas>, par le biais d'instructions JavaScript, on pourracréer des formes et des couleurs, et manipuler les pixels dans la zonemyCanvas disponible avec la balise HTML5 <canvas>.

HEADER

NAV

SECTION

ARTICLEARTICLE

ASIDE

FOOTER

java ee - fnac-static.com · concevez et développez une application web responsive diplômée du...

Documents