2011

WORKSHOP
30/04/2011
TUTORIEL DU WORKSHOP N°1

APPLICATION WEB EN JEE6

JAVA SERVER FACES

JAVA PERSISTENCE ANNOTATION

KHECHINE KHALED
ESSAIT
30/04/2011
 2 WORKSHOP

Notre but est de créer une application web qui permet gérer une bibliothèque. La première phase du
projet c’est la Conception. Voici le modèle conceptuel de données :

Suivez ces étapes à fin de créer le modèle physique de données :

Cliquez sur Outil ensuite sur Générer un Modèle Physique de données :

 3 WORKSHOP

Ensuite choisissez MySQL 5.0 comme SGBD et cliquer sur OK:

 4 WORKSHOP

Power AMC va ensuite générer le MPD :

 5 WORKSHOP

Maintenant on va générer le script SQL :

Cliquer sur Générer la base de données :

Spécifier la répertoire où vous voulez enregistrer le script et valider par ok ; Power AMC va ensuite
s’occuper du reste 

Script SQL généré :

/*==============================================================*/
/* Nom de SGBD : MySQL 5.0 */
/* Date de création : 01/05/2011 00:30:10 */
/*==============================================================*/

drop table if exists AUTEUR;

drop table if exists ECRIRE;

drop table if exists EDITEUR;

drop table if exists EXEMPLAIRE;

drop table if exists THEME;

drop table if exists TITRE;

 6 WORKSHOP

/*==============================================================*/
/* Table : AUTEUR */
/*==============================================================*/
create table AUTEUR
(
REF_AUTEUR int not null,
NOM_AUTEUR char(20),
PREN_AUTEUR char(20),
BIOGRAPHIE char(20),
primary key (REF_AUTEUR)
);

/*==============================================================*/
/* Table : ECRIRE */
/*==============================================================*/
create table ECRIRE
(
REF_AUTEUR int not null,
ISBN int not null,
primary key (REF_AUTEUR, ISBN)
);

/*==============================================================*/
/* Table : EDITEUR */
/*==============================================================*/
create table EDITEUR
(
CODE_EDITEUR int not null,
RAISON_SOCIALE char(20),
primary key (CODE_EDITEUR)
);

/*==============================================================*/
/* Table : EXEMPLAIRE */
/*==============================================================*/
create table EXEMPLAIRE
(
ISBN int not null,
NUM_EXEMPL int not null,
CODE_EDITEUR int not null,
PRIX_EXEMPL float(8,2),
DATE_AQUISITION date,
primary key (ISBN, NUM_EXEMPL)
);

/*==============================================================*/
/* Table : THEME */
/*==============================================================*/
 7 WORKSHOP

create table THEME

(
CODE_THEME int not null,
NOM_THEME char(20),
primary key (CODE_THEME)
);

/*==============================================================*/
/* Table : TITRE */
/*==============================================================*/
create table TITRE
(
ISBN int not null,
CODE_THEME int not null,
NOM_TITRE char(50),
RESUME_TITRE char(100),
DATE_PUBLICATION date,
DUREE_MAX_EMP int,
primary key (ISBN)
);

alter table ECRIRE add constraint FK_ECRIRE foreign key (REF_AUTEUR)

references AUTEUR (REF_AUTEUR) on delete restrict on update restrict;

alter table ECRIRE add constraint FK_ECRIRE2 foreign key (ISBN)

references TITRE (ISBN) on delete restrict on update restrict;

alter table EXEMPLAIRE add constraint FK_CORRESPONDRE foreign key (ISBN)

references TITRE (ISBN) on delete restrict on update restrict;

alter table EXEMPLAIRE add constraint FK_EDITER foreign key (CODE_EDITEUR)

references EDITEUR (CODE_EDITEUR) on delete restrict on update restrict;

alter table TITRE add constraint FK_ASSOCIER foreign key (CODE_THEME)

references THEME (CODE_THEME) on delete restrict on update restrict;
 8 WORKSHOP

Maintenant on va passer à la création de la base de données. On va utiliser le SGBD MySQL server,

pour ce fait on aura besoin du WampServer que vous devez l’installez.

Double click sur l’icone du WampServer afin de le lancer ensuite on va vérifier que ce dernier à lancer
les services ou non, s’il est en ligne alors pas de soucis, sinon on doit cliquer sur « put online »

Ensuite on va ouvrir le Localhost avec un simple clic :

 9 WORKSHOP

L’interface suivante va être affichée :

Cliquer sur « phpmyadmin » à fin d’accéder à l’interface ci-dessous :

 10 WORKSHOP

Maintenant on va créer notre base de données, il nous suffit de donner un nom à notre base de
données et de cliquer sur « Créer », on va la donner comme nom : « workshop »

La base de données sera créée par la suite :

Après la création de la base on va créer les table en introduisant le script SQL déjà générer, pour ce
fait cliquez sur l’onglet SQL :
 11 WORKSHOP

Faites Coller le script dans la console et cliquez sur exécuter :

 12 WORKSHOP

Nos tables vont être par la suite créées :

Vous pouvez visualiser le contenu de ces tables en cliquant sur leur nom :

Maintenant, On va passer à la création de notre application :

 13 WORKSHOP

On commence avec un nouveau projet :

On choisit par la suite Java Web/Web Application :

L’interface suivante va s’afficher :

Donner un nom à votre projet et cliquer sur Next:

 14 WORKSHOP

Cliquer sur Next une autre fois :

 15 WORKSHOP

Ensuite on va choisir les frameworks qu’on va les utiliser ; pour notre cas on va utiliser un seul
framework (Java Server Faces) alors cocher le et cliquer sur finish :

Netbeans va nous générer notre projet et il va nous ouvrir la page index.xhtml :

 16 WORKSHOP

L’étape qu’on va faire par la suite c’est l’ajout d’un fichier de configuration pour les page JSF ; pour ce
fait un clic droit sur « Web Page » New/other

On va choisir Java Server Faces/JSF Faces Configuration et cliquer sur Next par la suite :
 17 WORKSHOP

Maintenant cliquer sur finish :

NetBeans va par la suite nous ouvrir faces-config.xml :

 18 WORKSHOP

Un clic droit pour créer une nouvelle page web :

 19 WORKSHOP

On choisit JSF Page :

On va nommer cette page « authentification » et cliquer sur finish :

 20 WORKSHOP

Maintenant on va faire la liaison entre les page web :

 21 WORKSHOP

Faites modifier « case1 » par « ok » et ajouter un autre cas de navigation nommée « ko » :

 22 WORKSHOP

Maintenant on va modifier le fichier web.xml afin que la première page interrogé par l’utilisateur de
l’application soit la page d’authentification, un double clic sur web.xml pour ouvrir le fichier :

Cliquer sur l’onglet « Pages » :

 23 WORKSHOP

Et faite modifier le champ Welcome Files par « faces/authentification.xhtml »

Cliquer sur Ctrl+s pour enregistrer le fichier.

 24 WORKSHOP

Maintenant on va insérer du code dans la page d’authentification afin de créer le formulaire :

Codes sources de la page authentification.xhtml

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Authentification</title>
<h:outputStylesheet name="css/jsfcrud.css"/>
</h:head>
<h:body>

<h:form id="loginForm">

<table border="0">
<tr>
<td>
<h:outputText value="login"/>
</td>
<td>
<h:inputText id="login" rendered="true" value="#{userBean.login}"/>
</td>

</tr>

<tr>
<td>
<h:outputText value="password"/>
</td>
<td>
<h:inputSecret id="password" rendered="true" value="#{userBean.password}"/>
</td>

</tr>
</table>
<blockquote>
<h:commandButton id="submit" action="#{userBean.verifier()}" value="connecter"/>
</blockquote>

</h:form>

</h:body>
</html>
 25 WORKSHOP

Et ensuite on va modifier aussi la page index.xhtml par ce code source :

Codes sources de la page index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Accueil</title>
</h:head>
<h:body>
Hello <h:outputText value="#{userBean.login}" rendered="true" style="color: red"/> you have
successfully logged in
</h:body>

</html>

Par la suite on va passer à la création d’une JavaBean classe. Pour ce fait on va créer un nouveau java
package
 26 WORKSHOP

On va le donner comme nom « com.workshop.jsfBean »

Dans le nouveau package on va créer une nouvelle classe Jsf Managed Bean :
 27 WORKSHOP

On va la donner comme nom « UserBean »

 28 WORKSHOP

Maintenant faites cocher l’option « Add data to the configuration file » ensuite cliquer sur finish
 29 WORKSHOP

Voici la classe java que nous venant de l’ajouter :

On va dans un premier lieu, ajouter les propriétés à la classe :

 30 WORKSHOP

Ensuite on va utiliser l’option Insert Code

Cliquer ensuite sur « constructor »

 31 WORKSHOP

Cocher tout :

Par la suite avec la même option on va insérer « Getter and Setter » :

 32 WORKSHOP

Faites cocher login et password :

 33 WORKSHOP

Codes sources de l’UserBean.java :

NB : la méthode colorée en rouge doit être ajoutée à la main :

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.workshop.jsfbean;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
/**
*
* @author Khaled
*/
public class UserBean {
private String login;
private String password;
/** Creates a new instance of UserBean */
public UserBean() {
}
public UserBean(String login, String password) {
this.login = login;
this.password = password;
}

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;
}

public String verifier(){

if("workshop".equals(getLogin())&&"ok".equals(getPassword()))
return "ok";
FacesContext facesContext=FacesContext.getCurrentInstance();
FacesMessage facesMessage=new FacesMessage("Veuillez vérifier vos données correctement");
facesContext.addMessage("loginForm", facesMessage);
return "ko";
}

}
 34 WORKSHOP

Maintenant on va exécuter notre projet :

L’interface de l’authentification va s’afficher :

 35 WORKSHOP

En cliquant sur le bouton « connecter » la page index va s’afficher dans le cas de coordonnées
valides et un message de validation va s’afficher :

On va retourner à notre projet maintenant pour générer les entités Java à partir de la base de
données. On va utiliser pour ce fait l’API « JPA » (java persistence annotation)

NB : pour plus d’info concernant cet API vous pouvez googler « JPA » :p

Tout d’abord on va créer un nouveau package intitulé « com.workshop.jpaEntities »

 36 WORKSHOP

Ensuite on va créer les entités Classes générées à partir de la base de données :

Après un simple clic sur « Entity Classes from Database » l’interface ci-dessous va s’afficher :
 37 WORKSHOP

L’étape suivante consiste à établir la relation avec la base de données, pour ça on va choisir dans la
liste déroulante du champ « data source » l’option « New data source »
 38 WORKSHOP

L’interface ci-dessous va s’afficher, à ce stade on va donner un nom pour notre « JNDI » on va

attribuer comme nom « workshopBase », ensuite pour le champ « Database Connection » on va
choisir dans la liste déroulante « new database Connection »

L’étape suivante consiste à choisir le driver qui doit être adéquat à le SGBD utilisé; pour notre cas on
va choisir « MySQL (connector/J driver »
 39 WORKSHOP

Ensuite on va donner le schéma d’accès du driver.

NB : vous allez trouvez trouver ce driver ci-joint avec ce tuto.

Après de valider, cette interface va s’afficher :

 40 WORKSHOP

La seule chose à modifier dans cette interface c’est le champ « Database » ; on va modifier « mysql »
par le nom de notre base de données « workshop» déjà crée

Cliquer sur « Test Connection » pour vérifier que la connection est établie ensuite sur Next et enfin
sur Finish
 41 WORKSHOP

Maintenant notre connexion est bien établie il ne reste que de valider en cliquant sur «ok »

L’API JPA est un API ORM (object-relational mapping) ; c’est ce qu’on est en train de faire
maintenant, JPA va nous mapper les différents tables de la base de données :
 42 WORKSHOP

On va cliquer sur Add All ensuite sur Next:

 43 WORKSHOP

Ensuite il ne reste que de valider avec un autre Next car on ne va rien modifier :

Et enfin cliquez sur Finish :

 44 WORKSHOP

L’API JPA va nous générer automatiquement le code des entités Java.

Maintenant on va utiliser le Framework JSF une autre fois, mais dans ce stade on ne va rien saisir
comme code car le JSF 2.0 fournit une génération automatique des pages JSF qui font les opérations
CRUD (Create/Read/Update/Destroy).

Pour ce fait, on va faire un click droit sur le « web pages » /New/Other

 45 WORKSHOP

Ensuite choisir JSF Pages From Entity Classes ensuite il suffit de cliquer sur Next ;

Ensuite l’interface ci-dessous va être affichée :

 46 WORKSHOP

Cliquez sur ADD ALL :

Cliquez par la suite sur Next et enfin sur finish:

 47 WORKSHOP

Notre IDE va nous générer par la suite les pages xhtml de CRUD automatiquement ainsi une
Template et un fichier de style en cascade (jsfcrud.css) :
 48 WORKSHOP

Il ne reste maintenant que d’ajouter une ligne de code dans le fichier « authentification.xhtml » créé
précédemment afin qu’il prend le même style d’affichage que les fichiers générés automatiquement ;
alors le code source de ce fichier va être comme suit :

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Authentification</title>
<h:outputStylesheet name="css/jsfcrud.css"/>
</h:head>
<h:body>
<h:form id="loginForm">
<table border="0">
<tr>
<td>
<h:outputText value="login"/>
</td>
<td>
<h:inputText id="login" rendered="true" value="#{userBean.login}"/>
</td>

</tr>
<tr>
<td>
<h:outputText value="password"/>
</td>
<td>
<h:inputSecret id="password" rendered="true" value="#{userBean.password}"/>
</td>

</tr>
</table>
<blockquote>
<h:commandButton id="submit" action="#{userBean.verifier()}" value="connecter"/>
</blockquote>

</h:form>

</h:body>
</html>
 49 WORKSHOP

Maintenant il nous reste que de runner notre projet. Ci-dessous vous trouver quelques interfaces du
projet.

Page d’authentification :

En cas de saisir un login ou un password erroné un message d’erreur s’affiche :

 50 WORKSHOP

Dans l’autre cas (cas de bien saisie) la page d’accueil s’affiche ; on trouve dedans les liens qui nous
permet de faire la gestion de la bibliothèque :

Interface de liste des auteurs :

 51 WORKSHOP

Interface de création d’un nouvel auteur :

Merci bien et à bientôt.