Mis à jour le 12/10/2018
  • 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Créez votre premier projet web

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Notre projet fonctionne ! Pour l'instant, nous avons simulé une facture dans le  main  de notre programme. Ce n'est pas très utile et difficilement utilisable.

Nous allons ajouter une interface web devant ce projet.

Avant de nous lancer dans du code concret, il est important que vous compreniez les bases du fonctionnement d'une page web et la communication client/serveur.

Je vous conseille vivement de regarder le cours comprendre le Web présent sur OpenClassrooms avant de commencer celui-ci. La partie sur le protocole HTTP est celle qui va vraiment nous intéresser ici.

Client / Serveur et HTTP

Que se passe-t-il quand un utilisateur arrive sur une page web ? Comment votre navigateur sait-il quoi afficher ?

Quand vous indiquez une adresse web à votre navigateur, celui-ci va envoyer un message à un ordinateur distant, appelé serveur. Le message est une simple chaîne de caractères qui respecte un protocole bien défini.

Voici un exemple de message :

GET /page.html HTTP/1.0 Host:GET /page.html HTTP/1.0
Host: example.com
Referer: http://example.com/
User-Agent: CERN-LineMode/2.15 libwww/2.17b3 example.com Referer: http://example.com/ User-Agent: CERN-LineMode/2.15 libwww/2.17b3 

Ce sont surtout les lignes 1 et 2 qui nous intéressent. Pour faire simple, on demande au serveur situé à l'adresse  example.com  de nous donner la page  page.html .

Nous travaillons côté backend. Nous allons devoir générer une page quand celle-ci nous est demandée par le navigateur. Rassurez-vous, tout l'aspect bas niveau du protocole HTTP est déjà inclus dans Java, dans un outil nommé Servlet !

Servlet

Depuis le début de ce cours, je vous dis que vous utilisez des outils de Java. C'est exact, mais ce n'est pas précis. Vous utilisez, plus exactement, des outils de Java SE : Java Standard Edition.

Il existe un ensemble d'autres outils appelés Java EE : Java Enterprise Edition.

Ces outils sont destinés à des applications de plus grande envergure : des applications pour les entreprises ! ;)

La plupart des outils inclus dans Java EE sont destinés aux applications web, réseaux et distribuées. Ces outils sont assez techniques et demanderaient chacun un chapitre entier pour que vous compreniez les bases.

Nous allons nous concentrer sur un outil de Java EE nommé Servlet. Les HttpServlet  permettent de gérer le protocole HTTP. C'est une simple classe dont il faut hériter pour pouvoir générer une page web.

Nous allons ajouter les Servlet de Java EE à nos dépendances via Maven. Si vous ne savez pas comment faire, jetez un coup d’œil à ce cours. Ajoutez ensuite cette dépendance : javax.servlet-api/3.1. La version 3.1 des Servlet provient de Java EE 7.

On va maintenant créer un package  com.cursan.homeshop.web . Dans ce package, ajoutez une classe  HelloWorldServlet . Faites hériter cette classe de HttpServlet . Enfin, utilisez le menu Code > Generate... pour Override la méthode  doGet.

Votre code doit ressembler à ceci :

package com.cursan.homeshop.web;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class HelloWorldServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req, resp);
    }
}

Les paramètres représentent :

  • HttpServletRequest req  : la requête HTTP reçue par votre serveur (par exemple le message GET de la première partie).

  • HttpServletResponse resp  : un objet permettant d'envoyer la réponse.

Pour retourner une chaîne de caractères dans votre page web, il suffit de faire :

package com.cursan.homeshop.web;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class HelloWorldServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().println("Hello OpenClassrooms !");
    }
}

Pourquoi utiliser un nouveau package ?

Les packages servent à structurer votre projet. En ayant un package dédié à la couche web de notre projet, on sait immédiatement où sont situés les Servlet. Il existe des bonnes pratiques sur la création des packages. Vous aurez l'occasion d'en apprendre plusieurs dans votre carrière. 

On aurait pu créer différents packages pour rassembler les objets du même univers :

  • com.cursan.homeshop.delivery  : pour la classe  Delivery  et ses 4 enfants ;

  • com.cursan.homeshop.product  : pour la classe  product  et tous ses enfants ;

  • com.cursan.homeshop.bill  : pour les classes  Bill  ,  Writer  et toutes les prochaines associées à la facturation.

Un conteneur

Nous avons une Servlet. Est-ce suffisant ? Vous vous doutez que non ! :lol: 

Les Servlet sont des composants techniques permettant de matérialiser une requête et une réponse.

Qui va se charger de créer un objet  HelloWorldServlet , puis d'alimenter  rep  et  resp  avec les bonnes valeurs ? Vous, dans le main ? Sûrement pas ! Il vous faudrait recoder toute la gestion de HTTP ! 

C'est un serveur d'application web Java qui va s'en occuper, plus exactement un conteneur de Servlet : c'est un programme qui va se charger de récupérer les messages HTTP. En fonction du contenu du message, le serveur utilisera la bonne Servlet.

Il existe de nombreux conteneurs :

Dans ce cours, nous allons utiliser Eclipse Jetty. C'est un serveur ultra léger, gratuit, libre, multiplateforme et complet. Quand vous aurez plus d'expérience avec cet outil, vous découvrirez qu'il est même possible de l'embarquer avec votre application !

Il existe plusieurs façons de l'installer. La documentation officielle l'explique très bien. Dans ce cours, nous allons utiliser un plugin maven.

 Pour ajouter le plugin Jetty à Maven, il suffit d'ajouter les balises suivantes au fichier pom.xml.

<plugin>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-maven-plugin</artifactId>
    <version>9.4.8.v20171121</version>
    <configuration>
        <scanIntervalSeconds>1</scanIntervalSeconds>
    </configuration>
</plugin>

À ce niveau votre pom.xml doit ressembler à cela :

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>groupId</groupId>
    <artifactId>homeShop</artifactId>
    <version>1.0-SNAPSHOT</version>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
                <version>3.7.0</version>
            </plugin>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.8.v20171121</version>
                <configuration>
                    <scanIntervalSeconds>1</scanIntervalSeconds>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
</project>

Importez les changements dans votre projet Maven (les 2 flèches en rond dans la vue Maven). Un nouveau plugin apparaît.

Plugin Jetty
Plugin Jetty

Dernière étape

Il reste une dernière étape pour qu'un projet Java soit reconnu comme un projet web. Il y a 2 modifications à faire. La première consiste seulement à ajouter la balise  <packaging>war</packaging>  au pom.xml.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>groupId</groupId>
    <artifactId>homeShop</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
   
    ...
    
</project>

Les projets web en Java portent l'extention .war et non .jar. 

La deuxième modification va servir à configurer la version des Servlet que vous utilisez. On va ajouter un nouveau fichier que Jetty va utiliser pour savoir comment travailler avec votre application.

Dans le dossier main, créez un nouveau dossier nommé webapp. C'est le dossier qui va servir à stocker tous les fichiers relatifs à votre site web (image, feuille de style, etc.).

Dans ce dossier, ajoutez un dossier WEB-INF. Ce dossier sert à préciser la configuration de votre application web.

Dans ce dossier, ajoutez un fichier nommé web.xml avec le contenu suivant :

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

</web-app>

Ce fichier sert pour l'instant à indiquer que l'on utilise les Servlet 3.1. Il va aussi nous servir à indiquer où sont nos Servlet et à quelle URL les relier.

La première chose à faire est de déclarer nos Servlet. Il faut préciser la classe du Servlet (avec son package) et un nom choisi arbitrairement. Ce qui donne :

<servlet>
    <servlet-name>HelloWorld</servlet-name>
    <servlet-class>com.cursan.homeshop.web.HelloWorldServlet</servlet-class>
</servlet>

Ensuite, il faut préciser vers quelle URL HelloWorld doit pointer. Cela se nomme un mapping :

<servlet-mapping>
    <servlet-name>HelloWorld</servlet-name>
    <url-pattern>/helloworld</url-pattern>
</servlet-mapping>

Voici maintenant votre fichier web.xml :

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>HelloWorld</servlet-name>
        <servlet-class>com.cursan.homeshop.web.HelloWorldServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>HelloWorld</servlet-name>
        <url-pattern>/test</url-pattern>
    </servlet-mapping>
</web-app>

Il ne vous reste plus qu'à lancer votre serveur Jetty en cliquant sur jetty:run.

jetty:run
jetty:run

Votre projet est prêt, la console affiche :

[INFO] No SessionScavenger set, using defaults
[INFO] Scavenging every 600000ms
[INFO] Started o.e.j.m.p.JettyWebAppContext@1a21f43f{/,file:///Users/cursan_a/IdeaProjects/homeShop/src/main/webapp/,AVAILABLE}{file:///Users/cursan_a/IdeaProjects/homeShop/src/main/webapp/}
[INFO] Started ServerConnector@24ff6692{HTTP/1.1,[http/1.1]}{0.0.0.0:8080}
[INFO] Started @6155ms
[INFO] Started Jetty Server
[INFO] Using Non-Native Java sun.nio.fs.PollingWatchService
[WARNING] Quiet Time is too low for non-native WatchService [sun.nio.fs.PollingWatchService]: 1000 < 5000 ms (defaulting to 5000 ms)

 Vous pouvez aller sur http://localhost:8080/test pour voir le résultat :) !

Hello OpenClassrooms
Hello OpenClassrooms

Pourquoi l'adresse est localhost:8080/test ?

  • localhost : signifie pour votre navigateur "cherche le site web en local, sur cet ordinateur".

  • 8080 : Il s'agit du port que vous utilisez. En réalité, quand vous allez sur un site web, celui-ci écoute sur le port 80. Le navigateur ne l'affiche pas. Si vous souhaitez plus d'informations sur ce qu'est exactement un port, consultez  ce cours .

  • /test : c'est le chemin précisé dans le mapping dans web.xml.

Exemple de certificat de réussite
Exemple de certificat de réussite