[Java] Créer une Jsp avec un bean qui récupère des Inputs HTML – Créer une Jsp-Jstl qui se connecte à Mysql

Introduction


A la recherche d’exemples JAVAEE de JSP exploitables et les plus simples possible, je suis tombé sur ce très bon site en Anglais :

http://www.tutorialspoint.com/jsp/index.htm

Il nous fait en particulier découvrir la librairie de Tag JSTL. Pour intégrer des librairies à Eclipse c’est méga simple, il faut copier coller à partir du bureau Windows les fichiers .jar des librairies dans le répertoire WebContent/WEB-INF/lib d’une projet WEB Eclipse .

Mon but est d’apprendre les technologies des années 2000 afin de pouvoir éventuellement comprendre un code datant de ces années là, voir même de créer quelque chose avec cette technologie, vu qu’elle est pas mal (UML et OBJET). Certaines personnes disent qu’il faut privilégier le système JSP sans frameworks, qui est plus simple pour certains projets.

  1. Une page HTML transmets par le biais d’un formulaire des variables à un BEAN (Classe JAVA), ensuite, une JSP affiche les données provenant de ce même BEAN :

HTML -> BEAN -> JSP

Dans cet exercice, pas de connexion SQL, C’est juste une réception de données directe provenant d’un formulaire. Le prérequis est juste que le serveur Web Tomcat tourne en arrière plan et soit intégré à Eclipse.

  • On lance Eclipse
  • On crée un nouveau Dynamic Web Project qu’on appelle web2 (FILE/New/…)

On fait un clic droit sur webContent-> New HTML puis on crée le fichier info.html :


<html>

<head>
<title>Besoin de plus d'informations</title>
</head>

<body>
	<h1>Plus d'informations</h1>
	S'il vous plait, utilisez ce formulaire pour indiquer quel cours vous préférez.

	<div class="un">

		<form method="get" action="reponse.jsp">
		  <br><input type="radio" name="courses" value="Java Programming"> Prog Java
		  <br><input type="radio" name="courses" value="Java Web Development"> Développement Java Web
		  <br><input type="radio" name="courses" value="J2EE Development"> J2EE Development
		  <br><input type="radio" name="courses" value="XML Introduction"> Introduction à XML
		  <br><input type="radio" name="courses" value="XML Schema"> XML Schema
		  <br><input type="radio" name="courses" value="Web Services"> Web Services

		  <p>Prénom: 	<input type="text" 		name="firstName">
		  <br>Nom: 		<input type="text" 		name="lastName">
		  <br>Email: 	<input type="text" 		name="email">
		  <br>Age : 	<input type="number" 	name="age">

		  <p><input type="submit" name="Submit">
		</form>

	</div>
</body>
</html>

<style>
.un{
	background-color:lightgrey;
}
</style>

Si on clique droit sur ce nouveau fichier HTML/Run as server, on voit cela dans le navigateur :

kuykuykuykuy

Ensuite, dans Eclipse, on clique droit sur le répertoire « Java Resource » de notre projet WEB et on créé une classe qui s’appelle Bean 

Malheureusement, j’ai pas eu le temps de la traduire pour que cela fasse mieux, tant pis …

Ce Bean va stocker les variables provenant de notre formulaire . On voit que c’est pour l’instant bien propre et structuré …

package web2;

public class Bean
{
  public String getFirstName() {
    return firstName;
  }
  public void setFirstName(String firstName) {
    this.firstName = firstName;
  }

  public String getLastName() {
    return lastName;
  }
  public void setLastName(String lastName) {
    this.lastName = lastName;
  }

  public String getCourses() {
    return courses;
  }
  public void setCourses(String courses) {
    this.courses = courses;
  }

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public Integer getAge() {
    return age;
   }

  public void setAge(Integer age) {
	 this.age = age;
   } 

  private String firstName;
  private String lastName;
  private String email;
  private String courses;
  private Integer age;
}

Notre bean n’est pas exécuté par la page HTML, c’est la JSP suivante qui l’appelle.
dans Eclipse, dans notre projet Web, on fait un clic droit sur le répertoire WebContent, puis on fait new JSP.

On colle le code suivant à l’intérieur :


<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<jsp:useBean id="RequeteInfo" scope="session" class="web2.Bean"></jsp:useBean>
<jsp:setProperty name="RequeteInfo" property="*"></jsp:setProperty>

<html>
<head>
	<title>Merci de votre réponse</title>
</head>

<body>

	<h1>Merci de votre réponse</h1>
	<p>nom initial 	= <%=RequeteInfo.getFirstName() %></p>
	<p>Courses 		= <%=RequeteInfo.getCourses() 	%></p>
	<p>Age 			= <%=RequeteInfo.getAge() 		%></p>

</body>
</html>

Voilà, désormais finalement, si l’on renseigne le formulaire dans le navigateur , puis qu’on clique sur le bouton « soumettre la requête », on voit que les données qu’on a écrit dans les champs input sont « stockées  » par le Bean JAVA, puis que la JSP affiche la page suivante, avec nos variables :

k

 

 

Créer une Jsp qui se connecte à Mysql en utilisant la librairie JSTL:

La librairie JSTL permet de simplier le code lorsque l’on accès à une Base de donnée dans la JSP. Cela rappelle un peu le ng-repeat de AngularJs par exemple.

  1. Créer une base de données comme indiqué ici :http://www.tutorialspoint.com/jsp/jsp_database_access.htm
  2. Créer un dynamic web project dans eclipse appelé web3
  3. Glisser-déposer toutes les librairies en .jar dans le répertoire WebContent/WEB-INF:

ça comprends le jar mysql-connector et tous les 4 jars présents sur cette page :

http://tomcat.apache.org/download-taglibs.cgi

Ensuite, tout siplement créer une JSP et coller le code suivant dedans :

<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
 
<html>
<head>
<title>SELECT Operation</title>
</head>
<body>
 
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
     url="jdbc:mysql://localhost:3306/test"
     user="root"  password="root"></sql:setDataSource>

<sql:update dataSource="${snapshot}" var="result">
INSERT INTO Employees VALUES (104, 2, 'Nuha', 'Ali');
</sql:update> 



<sql:query dataSource="${snapshot}" var="result">
SELECT * from test.employees;
</sql:query>
 
<table border="1" width="100%">
<tr>
   <th>Emp ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Age</th>
</tr>
<c:forEach var="row" items="${result.rows}">
<tr>
   <td><c:out value="${row.id}"></c:out></td>
   <td><c:out value="${row.first}"></c:out></td>
   <td><c:out value="${row.last}"></c:out></td>
   <td><c:out value="${row.age}"></c:out></td>
</tr>
</c:forEach>
</table>
 
</body>
</html>

Ensuite, lorsque l’on fait un clic droit sur la jsp puis run on server, on peut voir que la table se peuple correctement :

Sans titre 6

Publicités