TP d’applications web n° 2 : pages web statiques

Construction d’une première page HTML (statique)

Le but de cette partie est de mettre en œuvre quelques balises HTML. Nous allons écrire une page d’accueil pour une bibliothèque avec deux rubriques statiques, le catalogue des ouvrages et les horaires d’ouverture.

Créez un répertoire bibliotheque.
Dans ce répertoire, créez un fichier bibliotheque.html et sa structure de base : élément <html> contenant un en-tête et un corps.
Ajoutez un titre dans l’en-tête. Vérifiez que ce titre s’affiche comme titre de l’onglet si vous ouvrez le fichier HTML dans un navigateur.
En utilisant des titres (balises <h1>, <h2>, etc.) hiérarchisez votre page pour faire apparaître les parties « catalogue » et « horaires d’ouverture ».
Ajoutez 3 ou 4 livres dans votre catalogue en utilisant des balises de listes énumérées. Les ouvrages ont un titre, un nom d’auteur et une année.
Donnez des horaires sous forme d’un tableau.

Liens hypertextes

Liens vers des fragments de page : une URL de la forme adresse_page#identifiant permet de pointer sur l’élément de la page dont l’identifiant (attribut id) vaut « identifiant ». La partie adresse_page peut être vide s’il s’agit de la page actuelle. Pour pouvoir tester ces liens il peut être nécessaire de réduire la fenêtre de votre navigateur, dans la mesure où la page comprend peu de texte.
1. Ajoutez en bas de page un lien pour pouvoir remonter directement en haut.
2. Ajoutez un menu en haut de page permettant de se diriger vers chacune des rubriques.
Lien externe : ajoutez un lien vers le site web de l’Ensimag.

Mise en page

Créez une feuille de style CSS dans un fichier séparé et ajoutez le lien dans l’en-tête de votre page HTML. Apportez quelques modifications à la mise en page. Par exemple, vous pouvez ajouter de la couleur, gérer le positionnement des titres...
On souhaite que les titres des ouvrages soient affichés en italique. Modifiez le code de la page HTML de façon à pouvoir identifier les titres au moyen d’un sélecteur CSS, et ajoutez le style approprié à la feuille de style.

Déploiement d’une page statique sur un serveur web

Jusqu’ici nous n’avons accédé à notre page que directement via le système de fichiers (URL en file://), et non en passant par le web. On va maintenant la mettre en ligne, sur le serveur tomcat.

Première possibilité : via netbeans

Attention, la version de maven intégrée à Netbeans 8 ne fonctionne plus. Si vous utilisez Netbeans 12 il n’y a pas de problème (pour les versions intermédiaires nous n’avons pas testé). Pour utiliser Netbeans 8 il faut donc avoir installé séparément une version plus récente de maven (c’est le cas sur les machines de l’ensimag) et configurer de la façon suivante :

Aller dans Tools > Options
Choisir Java en haut puis l’onglet Maven
Remplacer Maven Home en choisissant Browse et le dossier d’installation de maven (/usr/share/maven à l’ensimag).

Dans netbeans, créer un nouveau projet Maven/Web Application, en choisissant comme serveur celui que vous avez configuré précédemment et comme version de Java : Java EE 7 Web.

Sous « web pages » dans le projet, un fichier index.html ou index.jsp par défaut a été créé. Dans l’onglet Files, vous pouvez voir que ce fichier se trouve dans src/main/webapp. Remplacez-le par le vôtre. Vous pouvez également créer des fichiers HTML et CSS en choisissant « new file » dans le menu, et éditer ces fichiers dans netbeans. Ajoutez le fichier css que vous aviez créé, puis testez le déploiement de ces fichiers sur le serveur Tomcat, en choisissant « Run Project » (flèche verte). En principe, cela doit démarrer Tomcat, puis lancer firefox en le dirigeant vers l’adresse du site : http://localhost:8080/nomduprojet/

Les pages sont maintenant accessibles sur le réseau : vous pouvez également tester l’accès à celles de votre voisin. Attention : lorsque vous modifiez quelque chose, pour tester il vous faudra désormais redéployer le projet et rafraîchir la page dans le navigateur, car celui-ci peut garder l’ancienne version en cache.

Deuxième possibilité : en ligne de commande maven

Pour créer un projet web avec maven, utilisez :
/usr/bin/mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo.archetypes -DarchetypeArtifactId=webapp-javaee7
GroupId correspond à une classification du projet (ex. : fr.ensimag) . ArtifactId est le nom du projet.

Il est ensuite nécessaire d'éditer le fichier pom.xml pour y ajouter le plugin de déploiement vers tomcat, comme décrit dans les instructions de configuration.

Vous pouvez ensuite placer vos pages web dans src/main/webapp (à la place du fichier index.jsp ou index.html par défaut) et les envoyer sur le serveur par la commande : mvn tomcat:deploy (après une modification, utiliser à la place tomcat:redeploy). Comme avec netbeans, elles seront accessibles via l’URL http://localhost:8080/nomduprojet/