Tutoriel – Créer un site web avec Java [Partie I]

Pour mon premier article de la rubrique Codes, j’ai décidé de vous proposer un petit tutoriel pour créer votre premier site internet à l’aide du langage de programmation Java ! Avec quelques lignes de code, vous apprendrez à créer une page d’accueil et une page de connexion. Vous apprendrez à utiliser les servlets et les pages JSP (JavaServer Pages).

!! Remarque !!
Cet article s’adresse aux débutants en programmation. Il s’agit  d’une introduction au développement web à l’aide du langage Java. Pour les développeurs plus avancés, d’autres tutoriels viendront sans doute plus tard !

Partie I : Installation de l’environnement de développement et première pages JSP

1. Installation d’Eclipse, de Java et de Tomcat

Première étape : avant de commencer à taper du code à tout va, il faut installer un IDE (Integrated  Development Environnement), c’est-à-dire un logiciel qui va nous permettre d’écrire nos pages de code et de les tester. Pour créer des servlets et des pages JSP, on va utiliser Eclipse qui est un éditeur puissant et gratuit, et plus précisément sa version Entreprise. Pour se faire, il suffit de le télécharger directement sur www.eclipse.org, rubrique downloads.

Il n’est pas nécessaire d’installer Eclipse pour pouvoir l’utiliser. Il suffit de décompresser l’archive quelque part sur votre disque dur et de créer un raccourci du fichier eclipse.exe sur votre bureau ! Maintenant, il faut aussi installer un kit de développement Java (ou JDK), nécessaire pour faire fonctionner votre code. Téléchargez-le en vous connectant au site http://java.sun.com section download javaSE ou bien en cliquant ici. Une fois fait, installez-le sur votre ordinateur.

Enfin, il faut récupérer Apache Tomcat, un conteneur de servlets qui va vous permettre de tester votre application. Même procédure qu’Eclipse, téléchargez la dernière version sur tomcat.apache.org, section download (la version core fera l’affaire). Décompressez ensuite l’archive quelque part sur votre disque dur et c’est tout ^^ !

2. lancement d’Eclipse et création d’un nouveau projet.

Cliquez donc sur le raccourci Eclipse que vous avez créé sur votre bureau pour lancer l’IDE. Le logiciel vous demandera la première fois d’indiquer un espace de travail (workspace) dans lequel seront stockés tous vos projets.  Vous avez maintenant face à vous la page d’accueil d’Eclipse. Elle contient plusieurs liens vers des pages d’aide concernant les diverses technologies que vous pouvez utiliser avec Eclipse J2EE. Cliquez sur la petite croix de l’onglet Welcome pour fermer cette page et faire apparaître l’interface principale.

L’ensemble des parties qui composent l’interface que vous voyez forme une perspective. Regardez la petite icône Java EE en haut à droite. Si vous passez la souris dessus, une bulle texte indiquera Java EE perspective. Une perspective est composée de vues. Chaque cadre de l’interface est une vue. Par exemple, à gauche, l’onglet Project Explorer est une vue. Dans Eclipse, il existe plusieurs perspectives pré-configurées qui disposent de leur propre lot de vues et qui correspondent à un type de projet ou une façon de travailler. Pour afficher d’autres perspectives ou ajouter des vues à la perspective actuelle, cliquez sur l’onglet Windows du menu supérieur puis naviguez dans les sous menus Show View et Open Perspective.

Ouvrons maintenant notre premier projet. Cliquez sur File > New > Dynamic Web project …

Indiquez le nom de votre projet. Laissez toutes les autres options par défaut et cliquez sur Finish… Votre projet apparaît maintenant dans la vue Project Explorer. Remarquez qu’il est composé de plusieurs dossiers. Les plus importants pour nous sont le dossier Java Ressources : src qui contiendra nos classes Java et nos Servlets ainsi que le dossier WebContent qui accueillera nos pages JSP et les autres fichiers nécessaires à la conception du site (feuille de style CSS, images, etc.).

3. Création de votre première page JSP

Maintenant que le projet est démarré, nous allons créer notre première page JSP. une page JSP (pour JavaServer Page) est un fichier html qui peut contenir du code Java, qu’on insère dans des balises. Pour les connaisseurs, ça ressemble au PHP.

Pour créer une nouvelle page JSP, faites un clic droit sur le dossier WebContent puis cliquez sur New > JSP … Si JSP n’apparaît pas dans la liste, sélectionnez Other… et cherchez JSP. Indiquez le nom de votre page puis cliquez sur Finish… Votre page apparaît maintenant dans la vue Project Explorer, sous le dossier WebContent, et son contenu s’affiche dans l’éditeur. L’exercice va consister à créer un formulaire de login et à afficher un message de bienvenue sur une autre page en cas de succès. Si le login ou le mot de passe est vide, on renvoie sur la page de login. Sinon, on affiche le message d’accueil et un lien pour se déconnecter.

Dans la page JSP que vous venez de créer, copiez le code suivant entre les balises

:

<h3>Formulaire de connexion</h3>
        
<div>
        <form action="LoginServlet" method="post">
                login : <input type="text" name="login" />
                password : <input type="password" name="password" />
                <input type="submit" value="connexion" />
        </form>
</div>

Vous voyez que le formulaire utilise la méthode post pour envoyer les données vers LoginServlet, qui sera notre première servlet. Retenez bien les propriétés name des deux champs INPUT. Elles seront utiles pour récupérer les informations entrées par l’utilisateur.

4. Création de notre première Servlet

Maintenant que le formulaire de login est crée, il va falloir utiliser une servlet pour traiter les informations de ce formulaire. Pour ce faire, faites un clic droit sur le dossier Java Resources de votre projet et cliquez sur Servlet… À la ligne Class Name, indiquez le nom que vous avez mis à l’attribut action de votre formulaire, LoginServlet dans mon exemple. Indiquez également un nom de Package. Les packages permettent d’organiser vos classes en groupes et sous-groupes. Vous pouvez les classer par fonctionnalité ou par plugin (si vous développez plusieurs plugins dans votre projet). C’est très utile lorsque vous travaillez sur un projet qui contient plusieurs dizaines de classes. Cliquez sur Next. Dans la fenêtre suivante, vous pouvez renseigner une description pour votre servlet et changer son url-pattern. L’url-pattern d’une servlet, c’est le nom qu’elle portera dans la barre d’adresse de votre navigateur. Par défaut, l’url-pattern prend le nom de la servlet comme valeur. Ainsi pour appeler notre servlet, il suffit de tapper l’adresse suivante :

http://localhost:8080/MyFirstWebProject/LoginServlet

Cependant, vous pouvez tout à fait changer cet url-pattern pour lui donner plus de sens. Nous verrons un peu plus tard comment configurer manuellement les url-pattern de toutes nos servlets. Cliquez à nouveau sur Next. Vous avez maintenant sous les yeux la liste des méthodes disponibles pour votre Servlet. Les méthodes doGet() et doPost() sont cochées par défaut. Ce sont les deux méthodes que nous utiliserons pour écrire notre code. Vous pouvez implémenter les autres méthodes en cochant simplement leur case respective. Chaque méthode a son utilité et il suffit de lire la documentation java pour apprendre à les utiliser

Votre servlet et votre package nouvellement créés apparaissent dans le dossier Java Resources. À cette étape de l’exercice, il est possible que vous ayez des parties du code qui soient soulignées en rouge, indiquant un problème. Il se peut que la classe HttpServlet ne soit pas reconnue. Pour remédier à ce problème, allez dans le dossier d’installation du serveur TOMCAT sur votre disque dur et dans le dossier, faites un copier du fichier servlet-api.jar. Retournez dans Eclipse et  dans le dossier WebContent > WEB-INF > lib, faites un clic droit et collez votre fichier. Ensuite cliquez droit dessus et sélectionnez Build Path > Add to Build Path… Il ne devrait plus y avoir de problème.

Maintenant, nous allons écrire le code qui va récupérer les informations postées par le formulaire html et les traiter. Ouvrez votre fichier LoginServlet.java en double-cliquant dessus (s’il n’est pas déjà ouvert dans l’éditeur) et positionnez-vous dans la méthode doPost(). Copiez le code suivant :

String login = request.getParameter("login");
String password = request.getParameter("password");
                
if(!login.isEmpty() && !password.isEmpty()){
        User currentUser = new User();
        currentUser.setLogin(login);
        currentUser.setPassword(password);
                        
        request.getSession().setAttribute("user", currentUser);
        request.getRequestDispatcher("content.jsp").forward(request, response);
                        
} else {
        response.sendRedirect("home.jsp");
}

Vous voyez qu’on récupère la valeur des champs du formulaire grâce à la méthode getParameter() de l’objet Request. Si les champs du formulaire ne sont pas vides, alors on créé un objet de type User qu’on enregistre ensuite en session pour pouvoir le récupérer sur les autres pages JSP du site ! Enfin, on renvoie le tout vers la page content.jsp. En revanche, si l’utilisateur n’a pas remplit tous les champs du formulaire, on le renvoie à la page de login.

Bien sûr, il faut créer la classe User. Pour celà, faites un clic droit sur le dossier Java Resources et sélectionnez Class. Indiquez un package et le nom de classe User puis cliquez sur Finish… Voici le code de cette classe :

public class User {

        private String login, password;
        
        public User(){
                this.login = "anonyme";
                this.password = "default";
        }

        public String getLogin() {
                return login;
        }

        public void setLogin(String login) {
                this.login = login;
        }

        public String getPassword() {
                return password;
        }

        public void setPassword(String password) {
                this.password = password;
        }
}

5. Suite et fin de l’exercice

Il reste encore quelques pages à créer. Ajoutez une page content.jsp à votre projet (dans le dossier WebContent) et copiez le code suivant entre les deux balises <BODY></BODY> de la page :

<%
        if(request.getSession().getAttribute("user") == null){
                out.print("Vous n'êtes pas connecté. Cliquez <a href=\"home.jsp\">ici</a> pour vous authentifier");
                        
        } else {
                User currentUser = (User) request.getSession().getAttribute("user");
                out.print(String.format("Bonjour visiteur ! Tu es connecté en tant que : %s", currentUser.getLogin()));
                out.print("<br />");
                out.print(String.format("Ton mot de passe est : %s", currentUser.getPassword()));
                out.print("<p><a href=\"LogoutServlet\">Déconnexion</a></p>");
        }
%>

Ensuite, créez une nouvelle Servlet que vous appellerez LogoutServlet et dans la méthode doGet(), copiez le code suivant :

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getSession().invalidate();
        response.sendRedirect("home.jsp");
}

Il reste quelques manipulations à faire. Pour commencer, il faut configurer votre projet pour que lorsque vous vous connecterez à votre site, la page d’accueil soit la page du formulaire, ici appelée home.jsp. Pour celà, double-cliquez sur le fichier web.xml dans le dossier WebContent > WEB-INF. Cliquez ensuite sur l’onglet source en bas de l’éditeur. Le fichier web.xml permet de configurer plusieurs paramètres de votre application web tels que les pages d’accueil possibles, les url-pattern de vos servlets ou encore des variables d’environnement. Cherchez donc la partie <welcome-file-list> et placez-y en tête votre page de formulaire.

<welcome-file-list>
        <welcome-file>home.jsp</welcome-file>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
</welcome-file-list>

N’oubliez pas de sauvegarder ! Une fois fait, dans la vue Project Explorer, faites un clic droit puis cliquez sur New > Other > Server. Choisissez un serveur tomcat v6.0 puis cliquez sur Finish. Votre serveur devrait apparaître dans la vue Server, sous la vue éditeur. Si tout s’est bien passé, vous devriez maintenant pouvoir lancer votre application pour la tester Faites un clic droit sur le nom de votre projet et sélectionnez  Run As… > Run on Server et cliquez sur Finish….

Un onglet de navigateur devrait s’ouvrir dans la vue éditeur, avec votre formulaire de connexion. Il ne vous reste plus qu’à tester votre application ^^ !

Ça y est , vous avez créé votre premier petit site web avec Java  ^^ ! Ce n’est qu’un début et il y a encore beaucoup de choses à voir pour rendre votre site plus dynamique et plus intéressant. Mais nous verrons tout ça dans une seconde partie de ce tutoriel . En attendant, entraînez-vous et faites des recherches sur internet ^^. Voici deux sites qui pourraient pour fournir beaucoup d’aide et de documentation :

http://javaweb.developpez.com/

http://www.javafr.com/

Et enfin, vous pouvez téléchargez le projet complet crée dans ce tutoriel. Des commentaires ont été inclus dans les pages JSP et les Servlets pour vous aider à comprendre le code. Il vous suffit de décompresser l’archive dans votre workspace puis, dans la vue Project Explorer d’Eclipse, faire un clic droit puis import > Existing project in workspace… Pensez aussi à réimporter la librairie servlet-api.jar dans le dossier lib, au cas ou vous auriez des problèmes avec la classe HttpServlet.

Mots-clés : eclipse, j2ee, Java, JSP, Servlet, tutoriel