Exemple d’architecture MVC avec servlets, JSP et MySQL

exemple d’architecture MVC avec servlets, JSP et MySQL

  • Objectifs

    • Connaitre le MVC – Model View Controller
    • Etre capable de créer un formulaire d’authentification en MVC avec servlets, JSP et MySQL
    1. Rappel

      1. Qu’est-ce qu’une architecture Model View Controller?
        • Exemple d'architecture MVC avec servlets, JSP  et MySQL

        • 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
        • Il est conseillé de séparer les différents composants dans une structure de répertoire standard comme indiqué dans la section suivante
        • Dans une application Java EE:
          • la couche Modèle est constituée d’objets Java ;
          • la couche Vue est constituée de pages JSP ;
          • la couche Contrôle est constituée de servlets.




    2. 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
    3. 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.
    4. 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:
        • Exemple d'architecture MVC avec servlets, JSP  et MySQL

        • 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
        • L’un des avantages des packages est que nous allons y gagner en lisibilité dans notre package par défaut, mais aussi que les classes mises dans un package sont plus facilement transportables d’une application à l’autre.
        • Pour créer un nouveau package, effectuer un clic droit puis New > Package.

      5. Créer la classe ConnexionBean.java qui agit comme Modèle
        • Cette classe de modèle contient les méthodes getter et setter de nom d’utilisateur et de mot de passe qui sont membres du formulaire de la page connexion.
          • Sélectionnez le package "com.mvc.bean" que vous avez créé, clic droit puis New – Class.
          • Nommez la classe Connexion en commençant le(s) nom(s) par une majuscule " ConnexionBean"
          • Cliquez sur le bouton Finish.
          • La classe a été ajoutée au package et le code généré automatiquement par Eclipse est visible dans la fenêtre de l’éditeur de code:
          • package com.mvc.bean;
            
            public class ConnexionBean {
            		
            }
          • Déclarez deux variables de type String privées
          • private String BeanUserName;
            private String BeanPassword;
          • Pour ajouter des accesseurs à la classe, choisissez dans le menu (ou clic droit) l’option Source puis Generate Getters and Setters.
          • Cochez ensuite les cases BeanUserName et BeanPassword puis validez.
          • Exemple d'architecture MVC avec servlets, JSP et MySQL

        • Notre classe sera
        • package com.mvc.bean;
          
          public class ConnexionBean {
          	private String BeanUserName;
          	public String getBeanUserName() {
          		return BeanUserName;
          	}
          	public void setBeanUserName(String beanUserName) {
          		BeanUserName = beanUserName;
          	}
          	public String getBeanPassword() {
          		return BeanPassword;
          	}
          	public void setBeanPassword(String beanPassword) {
          		BeanPassword = beanPassword;
          	}
          	private String BeanPassword;
          	
          }

      6. Créer la classe ConnexionDAO.java qui agit comme Modèle

      7. Créer la classe Servlet ConnexionServlet.java qui agit comme couche controller
        • Exemple d'architecture MVC avec servlets, JSP et MySQL

      8. Créer la classe ConnexionDB.java qui agit comme Modèle
    5. 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





    Abonnez vous à notre chaîne YouTube gratuitement