RAPPORT DE STAGE

Application web
Boutique en ligne

1
 SOMMAIRE

I. Introduction p.04

II. Présentation p.05

III. Conception

• Diagramme Cas d’utilisation p.08

• Diagramme de classe p.09

• Persistance des données p.10

IV. Développement

• Étude du besoin p.13

• La création du projet p.14

• Les classes persistantes p.15

• La couche DAO p.21

• La couche Métier p.23

• La couche Web p.24

V. Conclusion p.43

2
 Application web

Boutique Moroccoshop

3
 Introduction

La formation de Concepteur Développeur d’Application à l’Afpa de Paris m’amène à réaliser

un stage pour une durée de huit semaines. Ce stage est l’opportunité pour moi d’appréhender le
métier du développeur informatique et de mettre en exergue mes connaissances acquises durant la
formation.

A travers ce mémoire, je vous présente un projet E-commerce. Une application de boutique en ligne
qui utilise la technologie Java EE et Spring Boot. C’est un projet pour lequel j’ai défini les objectifs
suivants :

 Produire un back-office que se veut de gérer une base de données d’une boutique en
ligne via une interface intuitive,

 produire un Front-End,

 apporter des solutions nouvelles,

 utiliser des fonctionnalités afin de suivre l’évolution du site en question.

Ce mémoire que je vous expose, s’échelonnera sur trois parties. Dans un premier temps, je ferai
une présentation du projet en passant par les technologies choisis et l’étude du besoin. Vient la
phase de conception et réalisation du projet où là, je présenterai mes différentes productions. Enfin,
j’aborderai en conclusion mon expérience de ce stage.

4
 Présentation

Entreprise

Ma période en milieu professionnel s’est réalisée au sein d’une micro-entreprise. C’est un

entrepreneur informatique qui a créé son entreprise il y a deux ans et qui a accepté de me confier
une mission dans le cadre de mon projet professionnel. En cause de la crise sanitaire apparue cette
année 2020, le télétravail s’est imposé comme la règle. Des objectifs ont donc été définis pour
chaque semaine.

Description du projet

Le projet consiste à développer un projet de commerce en ligne ayant une partie Back-office
pour l’administration du site et une partie Front-end pour le client.

L’application se définit sur une architecture N-tiers :

 Une couche présentation qui est l’interface homme-machine (IHM)

 Une couche traitement qui traite la logique de l’application

 Une couche des données relative à la persistance des données

Le Back-End comprend :

 Un Serveur web

 Une base de donnée SQLserveur

 Un Back-office pour administrer la boutique en ligne

Le Font-End permet au client de visualiser, consulter et acheter des produits.

Choix des Technologies

Pour développer une telle application, un choix des technologies à utiliser doit se faire. Tanto
pour la conception tanto pour la réalisation, mes choix ont été les suivants :

 Pour la conception du projet, j’ai fait le choix du language UML.

5
 L’IHM (Interface Homme Machine) a été faite en html5, CSS, javaScript et Bootstrap.

 Eclips a été mon environnement de développement (IDE) :

 L’application est codée en langage JAVA sur la plateforme JAVA EE.

 Comme Framework côté serveur, j’ai utilisé Spring boot pour principalement spring MVC
et spring data.

 Pour la couche persistance des données, j’ai choisi JPA avec une implémentation Hiber-
nate, le module Spring data de Spring Boot et Sql Server pour la base de données.

6
Étude du besoin

Le besoin consiste à la création d’une boutique en ligne pour un client souhaitant

commercialiser des produits venant du Maroc comme de l’huile d’argan, du savon noir, des
vêtements traditionnels etc...

Ma mission première est avant tout de conceptualiser l’application, travailler sur la partie Back-End
pour développer un back-office qui servira à gérer les produits en fonction des catégories. Le
back-office doit passer par une authentification.

Enfin, il faut développer un Front-End qui permettra à un utilisateur de visualiser et acheter un

produit.

7
 Conception

Diagramme Cas d’utilisation

8
Diagramme de classes

9
Persistance des données

L’API JDBC permet un accès simple et rapide à un grand nombre de bases de données. En
Java EE (Java Entreprise Edition), il y a une couche par abstraction au-dessus de JDBC appelée
JPA (Java Persistence API). De cette dernière, découlent plusieurs implémentations comme Eclips
Link, Hibernate ou encore Open JPA.

Dans ce projet, j’ai choisi d’utiliser Hibernate qui est un ORM (Objet Reationnal Mapping) pour le
langage de programmation Java.

Un ORM a pour objectif de faire le lien entre le monde de la base de données et le monde Objet.
Avec JPA, la description du mapping entre la classe et la table peut être faite en utilisant les anno-
tations ou un fichier XML de mapping.

Dans ce projet, j’ai utilisé le système des annotations :

Afin que JPA puisse faire le lien entre un objet Java et la base de données, les classes sont
définies en tant qu’entité JPA avec l’annotation @Entity. Cette dernière doit également comporter
au moins un attribut déclaré comme clé primaire à l’aide de l’annotation @Id.
Voici un exemple de deux classes (Produit et Catégorie) avec les annotations JPA.
On voit l’annotation @ManyToOne qui sert à mapper la table Produit avec la table Catégorie.

Classes produit

10
Classes catégorie

11
Affichage de La base de donnée SQLSERVER MoroccoShop

Affichage de la table produit

Affichage de la table Categorie

12
 Développement

Étude du besoin

L’application possède plusieurs packages:

 Un Package DAO contenant les interfaces JPA pour l’accès aux données,

 un package Entity contenant les classes persistantes,

 un package Métier pour le traîtement et la gestion logique des données,

 un package Web contenant les contrôleurs,

 un package configuration contenant une classe pour la sécurité de

l’application.

Le Font-End permet au client de visualiser, consulter et acheter des produits

Afin de coder une bonne application, faciliter la mise à jour et son maintenance, il faut
absolument la répartir en plusieurs couches. J’ai coupé l’application en trois couches:

- Couche Web (avec en complément le design pattern Modèle Vue Controleur)

- Couche Métier pour les fonctionnalités métier

- Couche DAO pour communiquer avec la base de données.

13
La Création du projet

J’ai installé le framwork spring boot et commencé par créer un projet Spring Starter Project
en utilisant l’outil de gestion de projet Apache Maven.

Maven est un outil de gestion de projet qui automatise certaines tâches et gère les dépendances vis
à vis des bibliothèques nécessaires au projet. Maven reconnaît un projet qu’il gère par trois para-
mètres : groupeID, artifactID et le numéro de version.

La création du projet par Maven m’a demandé de renseigner ces trois paramètres et de choisir les
dépendances pour le besoin de l’application. Les dépendances sont gérées dans un fichier xml
pom.xml. C’est dans ce dernier qu’on rajoute ou supprime une dépendance pour que maven met en
place la bibliothèque correspondante dans son repository.

Fichier pom.xml

14
 Des configurations doivent être apporter pour le bon fonctionnement de l’application avec Spring
boot. Pour ce faire, J’ai ajouté des commandes au fichier application.properties. C’est dans ce der-
nier que se fait la configuration de spring boot où on répertorie la datasource, le numéro de port
etc...

L’application spring boot utilise un serveur tomcat embarqué qui est un conteneur web de servlets.

Fichier application.properties

Les classes persistantes

j’ai créé un package nommé Entity. Ce package intègre différentes classes avec notamment
leurs attribues, un constructeur ainsi que les getters et les setters pour l’encapsulation. J’ai ensuite
utilisé Hibernate avec le jeux des annotations afin de rendre les classes persistantes.

15
Je vous expose un exemple de classes persistantes :

Classe produit

16
Classe Catégorie

17
Classe Adresse

18
Classe ligne de commande

19
Classe panier

20
La couche DAO

J’ai créé un package que j’ai nommé DAO. Ce dernier contient les interfaces qui héritent de
l’interface JPA Repository de SpringData. Cela va faciliter les échanges avec la base de données.

Pour un produit par exemple, je vais faire de la manière suivante:

Une interface nommée “ProduitRepository” extends de JpaRepository<T, ID> avec pour T l’objet
concerné et ID comme type identifiaction choisi.

L’interface va hériter de toutes les méthodes de type CRUD. Mais on peut aussi ajouter des
méthodes personnalisées, par exemple, j’avais besoin de récupérer un produit par mot clé ou des
produits selectionnés etc.

21
Interface ProduitRepository

22
La couche métier

Cette couche va me permettre de mettre en évidence les fonctionnalités métiers. Elle per-
mettera aussi de séparer d’une façon claire le code métier du code technique.

Interface couche métier

23
La couche web

J’ai créé un package Web au sein duquel j’ai introduit deux classes. Afin d’indiquer à Spring
qu’une classe est un contrôleur, il faut ajouter l’annotation @controler. Un premier contrôleur con-
cerne la partie Back-office et un second la partie Internaute.

L’application respecte le design pattern MVC (modèle vue contrôleur). Le contrôleur appelle la
couche métier et DAO pour alimenter le modèle avant de le renvoyer à la vue.

En Spring un contrôleur est composé d’actions qui renvoient à des vues.

J’ai réalisé plusieurs actions comme :

→ Lister les produits et les catégories,

→ enregistrer les produits en fonction d’une catégorie,

→ enregistrer une catégorie. Etc…

Injection des dépendances et propriétés

24
Contrôleur → catégories

25
26
Contrôleur → produits

27
28
 Le modèle MVC est un disign pattern intégrant dans sa méthodologie la partie Vues. Ce
sont des pages en HTML ayants une communication avec le contrôleur via le modèle.

Autrement dit, ce sont des interfaces homme-machine utilisant le moteur de template Thymeleaf
avec les technologies CSS, Bootstrap et javaScript.

Je vous expose les vues du BACK-OFFICE et s’en suivra celles du Front-End:

L’accès au Back-office requière une authentification avec Spring Sécuritiy

29
La page accueil du Back-office

30
31
32
La page qui liste les catégories avec un lien supprimer et éditer

33
34
La page qui liste les produits avec un lien supprimer et éditer

35
36
La page formulaire pour ajouter un nouveau produit

37
La page formulaire pour ajouter une catégorie de produit

38
La page accueil du Front-End

39
La page qui liste les produits de la catégorie Huile

40
La page lien pour voir le produit en détail et l’ajouter au panier

41
La page panier

42
 Conclusion

L’informatique est une technique et un savoir-faire qui au-delà de la théorie demande une
pratique quotidienne.

Grâce à ce stage, j’ai pu mettre en place un site me permettant de comprendre les subtilités tech-
niques à la réalisation d’une application.

En effet, j’ai pu augmenter mes capacités à conceptualiser, développer et gérer un réel projet infor-
matique.

Je peux dire que l’expérience de ce stage a fait émerger en moi un esprit de conquête, celui d’ap-
prendre encore plus de nouvelles technologies et de pouvoir monter en compétences.

J’ai par ailleurs pris en compte que ce métier est fait pour moi puisque au-delà d’une profession,
l’informatique est une passion et un quotidien.

Ce stage m’a donc confirmé à quel point la pratique à réaliser des projets informatique reste la
meilleure façon d’augmenter ses compétences.

43