JSP

Exemple d'architecture MVC avec servlets, JSP et MySQL

Un cours complet pour maîtriser Exemple d'architecture MVC avec servlets, JSP et MySQL.

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

Objectifs

Connaitre le MVC - Model View Controller
Etre capable de créer un formulaire d'authentification en MVC avec servlets, JSP et MySQL

Rappel
1. Qu'est-ce qu'une architecture Model View Controller?
  - Model-View-Controller (MVC) (pattern design) est un modèle utilisé en génie logiciel pour séparer la logique d'application de l'interface utilisateur. Comme son nom l'indique, le modèle MVC a trois couches.
  - contrôleur
    - Le contrôleur sert d'interface entre la vue et le modèle. Le contrôleur intercepte toutes les demandes entrantes.
    - Le contrôleur (Servlet) sert d'interface entre les vues et le modèle.
    - Cette couche gère les requêtes HTTP et les envoie à la couche modèle appropriée pour le traitement des données, et une fois que les données sont traitées et renvoyées au contrôleur, puis affichées sur la couche Afficher .
  - Model
    - Le modèle représente l'état de l'application, c'est-à-dire les données. Il peut également avoir une logique métier.
    - La vue représente la présentation, c'est-à-dire l'interface utilisateur (interface utilisateur).
    - Une vue (JSP) peut être n'importe quelle représentation de sortie de données, comme un graphique ou un diagramme, généralement une page HTML ou JSP.
    Les fonctions
    
    Controller Model Vue
  - Analyse des requêtes de l’utilisateur
  - Mise en place des traitements
  - Mise en place de la présentation
  Effectue les traitements – couche métier Effectue les traitements – couche métier
2. Caractéristiques du modèle
  - Il sépare la couche de présentation de la couche métier
  - Le contrôleur effectue l'action d'invoquer le modèle et d'envoyer des données à View
  - Le modèle ne sait même pas qu'il est utilisé par une application Web ou une application de bureau
3. Outils et environnement de développement
  - La création d'une application web avec Java EE s'effectue généralement à l'aide d'un Environnement de Développement Intégré, très souvent raccourci à l'anglaise en IDE. C'est un logiciel destiné à faciliter grandement le développement dans son ensemble.
  - J'utiliserai l'IDE Eclipse tout au long de ce tutoriel. Ce n'est pas le seul existant, c'est un outil puissant, gratuit, libre, multiplateforme et massivement utilisé en entreprise,.
  - Téléchargement et installation D'Eclipse
  - Téléchargement et installation de Tomcat
4. Structure du dossier de projet
  - L'image ci-dessous représente la structure finale du dossier du projet
  - Dans notre application revisionMVC, nous avons quatre pages JSP dans lesquelles header.jsp et footer.jsp sont inclus, et nous avons quatre fichiers java dans une est une Servlet.
  - Pour implémenter le modèle de conception MVC basé sur le Web, nous allons créer des classes Login.java et ConnexionServlet.java qui agiront comme notre couche modèle . De plus, ConnexionServlet.java agit également en tant que classe Controller.
5. Réalisation
  1. commencer par créer un projet Web dynamique dans Eclipse IDE "revisionMVC"
  2. Créer les deux pages JSP header.jsp et footer.jsp et les enregistrer sous "WebContent/fichiers"
  3. Créer la page "connexion.jsp" qui agit comme vue
    - Le début de la page sera l'appel de la page header.jsp et la dernière ligne de la page sera l'appel de la page footer.jsp
    - Chercher un formulaire de connexion Bootstrap et l’implémenter dans le body de la page comme le montre l'image suivant:
    - Le code de la page est le suivant:
      - Les informations de connexion sont transmises à ConnexionServlet à partir de la page Connexion.jsp. Lorsque vous cliquez sur le bouton Connexion, la demande est transmise à la page qui est mentionnée dans la balise d'action du formulaire.<form action="ConnexionServlet" method="post">
```
<%@ include file="fichiers/header.jsp" %>
<style>
.html{min-height: 560px;}
</style>
    <body translate="no">

<div class="form html">
<div class="form-toggle"></div>
<div class="form-panel one">
<div class="form-header">
<h1>Se connecter</h1>
</div>
<div class="form-content">
<form action="ConnexionServlet" method="post">
<div class="form-group">
<label for="username">Utilisateur</label>
<input type="text" id="username" name="username" required="required">
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password" required="required">
</div>
<div class="form-group">
<label class="form-remember">
<input type="checkbox">Se souvenir de moi
</label><a class="form-recovery" href="#">Mot de passe oublié?</a>
</div>
<div class="form-group">
<button type="submit">S'identifier</button>
</div>
</form>
</div>
</div>
<div class="form-panel two">
<div class="form-header">
<h1>Créer un compte</h1>
</div>
<div class="form-content">
<form action="CreerServlet" method="post">
<div class="form-group">
<label for="username">Utilisateur</label>
<input type="text" id="username" name="username" required="required">
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password" required="required">
</div>
<div class="form-group">
<label for="cpassword">Confirmer mot de passe</label>
<input type="password" id="cpassword" name="cpassword" required="required">
</div>
<div class="form-group">
<label for="email">Address Email</label>
<input type="email" id="email" name="email" required="required">
</div>
<div class="form-group">
<button type="submit">S'enregistrer</button>
</div>
</form>
</div>
</div>
</div>
<script id="rendered-js">
 $(document).ready(function () {
  var panelOne = $('.form-panel.two').height(),
  panelTwo = $('.form-panel.two')[0].scrollHeight;

  $('.form-panel.two').not('.form-panel.two.active').on('click', function (e) {
    e.preventDefault();

    $('.form-toggle').addClass('visible');
    $('.form-panel.one').addClass('hidden');
    $('.form-panel.two').addClass('active');
    $('.form').animate({
      'height': panelTwo },
    200);
  });

  $('.form-toggle').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('visible');
    $('.form-panel.one').removeClass('hidden');
    $('.form-panel.two').removeClass('active');
    $('.form').animate({
      'height': panelOne },
    200);
  });
});
      //#

  $('.form-toggle').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('visible');
    $('.form-panel.one').removeClass('hidden');
    $('.form-panel.two').removeClass('active');
    $('.form').animate({
      'height': panelOne },
    200);
  });
});
      //# sourceURL=pen.js
      </script>
</body>
<%@ include file="fichiers/footer.jsp" %>
```
  4. Création des packages
  5. Pour ajouter des accesseurs à la classe, choisissez dans le menu (ou clic droit) l’option Source puis Generate Getters and Setters.
  6. Cochez ensuite les cases BeanUserName et BeanPassword puis validez.
  7. Notre classe sera
6. Créer la classe Servlet ConnexionServlet.java qui agit comme couche controller
7. Base de donnée
  - Pour les classes crées précédemment, nous avons utilisé le serveur de base de données MySQL pour lire les informations utilisateur.
  - Vous devez inclure le fichier JAR dépendant (mysql-connector-java.jar) pour vous connecter au serveur MySQL.se référer au article suivant
  - Le nom de la base de données est gestiondesnotes et le nom de la table est users
  Sommaire du cours JSP