Introduction

Ce document détaille les étapes de configuration et de développement d'une application web simple basée sur les frameworks SpringMVC et MyBatis pour effectuer des opérations CRUD (Create, Read, Udpate, Delete) sur une table d'étduiants. L'environnement de développement utilisé est IntelliJ IDEA.

Environnement et Prérequis

• JDK 1.8
• IntelliJ IDEA 2019.2
• Tomcat 8.0.53
• MySQL 8.0.13
• Apache Maven 3.5.4

Schéma de Base de Données

Nous créons une table nommée eleve avec les champs suivants pour stocker les informations des élèves.

CREATE TABLE IF NOT EXISTS `eleve` (
    `id` INT AUTO_INCREMENT PRIMARY KEY,
    `nom_complet` VARCHAR(50) NOT NULL,
    `genre` VARCHAR(10),
    `date_naissance` DATE,
    `filiere` VARCHAR(30),
    `ville_residence` VARCHAR(50)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Initialisation du Projet Maven

Créez un nouveau projet Maven dans IntelliJ IDEA en utilisant l'archetype maven-archetype-webapp. Configurez ensuite la structure de répertoires standards pour une application Spring MVC.

src/main/java
    com.exemple.demo
        config
        controleur
        service
        dao
        modele
        dto
src/main/resources
    spring
    mapper
    application.properties

Configuration des Dépendances Maven

Le fichier pom.xml doit inclure les dépendances esentielles pour Spring, MyBatis, et la connectivité base de données.

<dependencies>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.10.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.6</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.25</version>
    </dependency>
    <!-- Autres dépendances nécessaires (Servlet API, Jackson, etc.) -->
</dependencies>

Configuration des Fichiers XML

web.xml

Configurez le DispatcherServlet de Spring et l'écouteur de contexte d'application.

<servlet>
    <servlet-name>appServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/spring-context.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>appServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

spring-context.xml

Ce fichier centralise la configuration des composants, l'annotation-driven et les ressources statiques.

<context:component-scan base-package="com.exemple.demo" />
<mvc:annotation-driven />
<mvc:resources mapping="/static/**" location="/static/" />

<!-- Configuration du DataSource et du SqlSessionFactory -->
<bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource" destroy-method="close">
    <property name="driverClassName" value="${jdbc.driver}" />
    <property name="url" value="${jdbc.url}" />
    <property name="username" value="${jdbc.user}" />
    <property name="password" value="${jdbc.password}" />
</bean>

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource" />
    <property name="mapperLocations" value="classpath:mapper/*.xml" />
</bean>

Couches Applicatives

Modèle (Entity)

Classe représentant un enregistrement de la table eleve.

public class Eleve {
    private Integer id;
    private String nomComplet;
    private String genre;
    private LocalDate dateNaissance;
    private String filiere;
    private String villeResidence;
    // Constructeurs, Getters, Setters
}

DAO (Data Access Object)

Interface définissant les opérations d'accès aux données.

public interface EleveDao {
    List<Eleve> obtenirTous(int decalage, int limite);
    int compterTotal();
    int inserer(Eleve eleve);
    int mettreAJour(Eleve eleve);
    int supprimerParId(int id);
    Eleve obtenirParId(int id);
}

Mapper MyBatis

Fichier XML contenant les requêtes SQL correspondantes aux méthodes du DAO.

<mapper namespace="com.exemple.demo.dao.EleveDao">
    <select id="obtenirTous" resultType="Eleve">
        SELECT * FROM eleve LIMIT #{decalage}, #{limite}
    </select>
    <insert id="inserer" parameterType="Eleve">
        INSERT INTO eleve (nom_complet, genre, date_naissance, filiere, ville_residence)
        VALUES (#{nomComplet}, #{genre}, #{dateNaissance}, #{filiere}, #{villeResidence})
    </insert>
</mapper>

Service

Couche métier intermédiaire entre le contrôleur et le DAO.

@Service
public class EleveService {
    @Autowired
    private EleveDao eleveDao;

    public List<Eleve> listerEleves(int page, int taillePage) {
        int decalage = (page - 1) * taillePage;
        return eleveDao.obtenirTous(decalage, taillePage);
    }

    public boolean ajouterEleve(Eleve eleve) {
        return eleveDao.inserer(eleve) > 0;
    }
    // Autres méthodes métier
}

Contrôleur

Point d'entrée pour les requêtes HTTP. Il gère le routage et délègue au service.

@RestController
@RequestMapping("/api/eleves")
public class EleveControleur {
    @Autowired
    private EleveService eleveService;

    @GetMapping
    public ResponseEntity<Map<String, Object>> lister(
            @RequestParam(defaultValue = "1") int page,
            @RequestParam(defaultValue = "10") int taille) {
        
        List<Eleve> liste = eleveService.listerEleves(page, taille);
        int total = eleveService.obtenirCompteurTotal();
        
        Map<String, Object> reponse = new HashMap<>();
        reponse.put("donnees", liste);
        reponse.put("pageActuelle", page);
        reponse.put("totalElements", total);
        
        return ResponseEntity.ok(reponse);
    }

    @PostMapping
    public ResponseEntity<String> creer(@RequestBody Eleve eleve) {
        boolean succes = eleveService.ajouterEleve(eleve);
        return succes ? ResponseEntity.ok("Création réussie") 
                      : ResponseEntity.badRequest().body("Échec de la création");
    }
    // Autres endpoints pour mise à jour et suppression
}

Interface Utilisateur (JSP)

Une page JSP simple pour afficher et gérer les données. Elle utilise JSTL pour itérer sur la liste des élèves et Bootstrap pour la mise en page.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nom</th>
            <th>Genre</th>
            <th>Date de Naissance</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${eleves}" var="el">
            <tr>
                <td>${el.id}</td>
                <td>${el.nomComplet}</td>
                <td>${el.genre}</td>
                <td>${el.dateNaissance}</td>
                <td>
                    <button class="btn btn-sm btn-info" onclick="modifier(${el.id})">Modifier</button>
                    <button class="btn btn-sm btn-danger" onclick="supprimer(${el.id})">Supprimer</button>
                </td>
            </tr>
        </c:forEach>
    </tbody>
</table>

Le JavaScript associé utilise AJAX pour communiquer avec les points d'accès de l'API REST, permettant des opérations de création, modification et suppression sans rechargement de la page.