• 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 !

Mis à jour le 24/04/2019

Créez un formulaire HTML

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

Dans ce chapitre, nous allons commencer à réaliser notre application web. Nous allons débuter par une partie sur le fonctionnement de HTTP. Je vais prendre le temps de revenir sur la méthode  doGet  de  HttpServlet. Nous réaliserons ensuite un formulaire de saisie.

Notre application

Notre application va se composer d'un formulaire permettant la saisie d'une facture :

Formulaire facture
Formulaire facture

Le formulaire n'est pas pratique, mais, pour notre exercice, il sera largement suffisant. Si vous comprenez la démarche pour créer un formulaire simple comme celui-ci, vous serez capable de créer tout type de site web. Pour en apprendre plus sur l'expérience utilisateur, un cours est présent sur OpenClassrooms.

En validant, la facture est générée :

Facture web Leblanc
Facture web Leblanc

GET

On va commencer par générer une nouvelle classe héritant de  HttpServlet  appelée  BillServlet.

package com.cursan.homeshop.web;

import javax.servlet.http.HttpServlet;

public class BillServlet extends HttpServlet {

}

On ajoute le mapping de cette  Servlet  avec l'URL  /bill  dans 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>Bill</servlet-name>
        <servlet-class>com.cursan.homeshop.web.BillServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>Bill</servlet-name>
        <url-pattern>/bill</url-pattern>
    </servlet-mapping>
</web-app>

On surcharge la méthode  init  et  doGet de  BillServlet .

package com.cursan.homeshop.web;

import javax.servlet.http.HttpServlet;

public class BillServlet extends HttpServlet {

    @Override
    public void init() throws ServletException {
        super.init();
    }

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

À quoi servent ces 2 méthodes exactement ?

  • init : C'est la méthode qui va être appelée par Jetty quand il va instancier un objet de type  HttpServlet. Cette méthode est utilisée une fois au début. Elle permet d'initialiser le contexte. Nous allons nous en servir pour générer la liste des produits disponibles.

  • doGet : Si vous reprenez le message HTTP du cours précédent, il commençait par  GET /page.html HTTP/1.0 ....  GET  est un verbe HTTP. Il signifie "donne-moi telle page". La méthode  doGet dans les  HttpServlet sert à gérer les messages de type GET. Il existe plusieurs verbes HTTP qui peuvent être gérés via les méthodes associées (POST →  doPost , PUT →  doPut , etc.).

Quand votre navigateur charge une page web, il a la possibilité de rajouter des paramètres libres.

http://www.mapage.com?param1=value1&param2=value2

On a :

  • http://  → on précise qu'on utilise HTTP

  • www.mapage.com  → le nom de domaine

  • ?  → on commence la liste des paramètres par  ?

  • param1  → le nom du premier paramètre

  • =  → on assigne une valeur à  param1

  • value1  → la valeur assignée

  • &  → on sépare chaque paramètre avec  &

  • On recommence pour chaque paramètre.

On peut récupérer dans  doGet  les paramètres en faisant req.getQueryString() . Cette méthode retourne une chaîne de caractères contenant l'ensemble des paramètres. S'il n'y a pas de paramètre, la méthode retourne  null.

On va procéder ainsi :

  • On vérifie s'il y a des paramètres ou non.

  • S'il n'y en a pas, on affiche le formulaire.

  • L'utilisateur saisit les informations et valide le formulaire.

  • Cette action actualise la page en ajoutant des paramètres (les valeurs du formulaire).

  • Cette fois-ci, il y a des paramètres ; on affiche donc la facture correspondante.

Le formulaire

Commençons par la première étape :

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html");
    if (req.getQueryString() == null)
        displayForm(resp);
    else
        displayBill(req, resp);
}

La première ligne resp.setContentType("text/html");  précise que l'on va utiliser du HTML pour notre réponse. Ensuite, on regarde s'il y a des paramètres présents. En fonction, on affiche le formulaire ou la facture.

Pour générer le formulaire, il faut la liste des produits (elle est affichée avant le formulaire). Nous allons nous servir de la méthode  init  pour cela.

public class BillServlet extends HttpServlet {
    List<Product> products = new ArrayList<Product>();

    @Override
    public void init() throws ServletException {
        Product cafe = new Product("Philips HD7866/61", "Philips SENSEO Quadrante, Noir - 1 ou 2 tasses", 79.99);
        Product tv = new Television("TV Samsung UE49MU6292", "Smart TV LED incurvée 49\"", 599, 49, "LED");
        Fridge fridge = new Fridge("BEKO TSE 1042 F", "Réfrigérateur BEKO 130L - Classe A+ - blanc", 189, 130, false);
        products.add(cafe);
        products.add(tv);
        products.add(fridge);
    }
    
    ...
    
}

 On va pouvoir utiliser  products  dans   displayForm  pour afficher les produits. 

   private void displayFrom(HttpServletResponse resp) throws IOException {
        for (int i = 0; i < products.size(); i++) {
            Product product = products.get(i);
            resp.getWriter().println(
                    "<b>" + i + " - " + product.getName() + "</b> : " + product.getPrice() + "<br/>" +
                    product.getDescription() + "<br/><br/>");
        }
        String form = "<form action=\"bill\">" +
                "<b>nom complet :</b> <input name=\"fullname\"/><br/>" +
                "<b>adresse :</b> <input name=\"address\"/><br/><br/>" +
                "<b>livraison :</b> <br/>" +
                "à domicile : <input type=\"radio\" name=\"deliveryMode\" value=\"direct\"/><br/>" +
                "express : <input type=\"radio\" name=\"deliveryMode\" value=\"express\"/><br/>" +
                "point relais : <input type=\"radio\" name=\"deliveryMode\" value=\"relay\"/><br/>" +
                "à retirer : <input type=\"radio\" name=\"deliveryMode\" value=\"takeAway\"/><br/>" +
                "<b>Informations livraison</b> (relay et express) : <input name=\"deliveryInfo\"/><br/><br/>" +
                "<b>liste produits </b> (produit:quantité, un produit par ligne) : <br/>" +
                "<textarea name=\"products\"></textarea><br/>" +
                "<input type=\"submit\"/>" +
                "</form>";
        resp.getWriter().println(form);
    }
  • Dans la boucle, on affiche les produits.  <b>valeur</b>  sert à mettre en gras  valeur  en HTML.  <br />  sert à faire un retour à la ligne en HTML.

  • On affiche ensuite le formulaire.

Allez sur la page http://localhost:8080/bill.

Votre formulaire s'affiche :soleil: !

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