REPUBLIQUE TUNISIENNE

MINESTRE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE

DIRECTION GENERALE DES ETUDES TECHNOLOGIQUES

Institut Supérieur des Etudes Technologiques
De Siliana

Département Technologie informatique

Rapport de Conception de Site web

Réalisé par :Inoubli Hiba

Année universitaire : 2023 /2024

1
 Remerciement

Je tiens tout d’abord à remercier très chaleureusement Mme Hela pour son encadrement,
son aide, son attention et sa gentillesse tout au long de semestre, qui a fait de ces trois mois
un moment très plaisant et intéressant.

Un spécial dédicace à ma famille et surtout mon père décédé pour leurs sacrifices et m’avoir
jamais cessé de croire en moi...

2
 Table des matières

Chapitre 1 : Représentation du projet .................................................................................................... 1

I. Introduction : ............................................................................................................................... 1
II. Etude de l’existant : ..................................................................................................................... 1
III. Critique de l’existant : ............................................................................................................. 1
IV. Solution à prévoir : .................................................................................................................. 1
V. OBJECTIFS : .................................................................................................................................. 2
VI. Spécification des besoins :....................................................................................................... 2
1. Besoins fonctionnels :.............................................................................................................. 2
2. Besoin non fonctionnels : ........................................................................................................ 3
Chapitre 2 : Etude de cas ......................................................................................................................... 4
I. Introduction : ............................................................................................................................... 4
II. Diagramme de Cas d’utilisation :................................................................................................. 4
1. Définition : ............................................................................................................................... 4
2. Concepts de base :................................................................................................................... 4
3. Diagramme de cas d’utilisation initial : ................................................................................... 5
4. Raffinement des cas d’utilisation : .......................................................................................... 6
III. Diagramme de Classe : ............................................................................................................ 9
IV. Diagramme de séquence : ..................................................................................................... 11
Chapitre 3 : les Tâches Effectuées ......................................................................................................... 13
I. Introduction : ............................................................................................................................. 13
II. Les étapes de la réalisation : ..................................................................................................... 13
1. Outils du développement & logiciels : .................................................................................. 13
III. Les Interfaces Réalisées : ....................................................................................................... 14
Conclusion générale .............................................................................................................................. 17

3
 Liste Des Figures

Figure 1:Diagramme Use Case géneral .................................................................................................. 5

Figure 2:Diagramme de cas d’utilisation « Authentification » ............................................................. 6
Figure 3: diagramme Use Case "s'inscrire" ............................................................................................ 7
Figure 4:Gérer les utilisateurs ................................................................................................................ 7
Figure 5: raffiner le cas d’utilisation « se désinscrire » ......................................................................... 8
Figure 6:Diagramme de Cas d'utilisation globale .................................................................................. 9
Figure 7:Diagramme de classe <<S'inscrire>> ........................................................................................ 9
Figure 8:Gérer les utilisateurs .............................................................................................................. 10
Figure 9:Diagramme de classe globale................................................................................................. 10
Figure 10:Diagramme de séquence « Authentification » .................................................................... 11
Figure 11:Diagramme de déploiement globale .................................................................................. 12
Figure 12:Logo JavaScript ..................................................................................................................... 13
Figure 13:Logo MYSQL .......................................................................................................................... 13
Figure 14:Logo PHP ............................................................................................................................... 13
Figure 15:Logo CSS ................................................................................................................................ 13
Figure 16:Logo Mamp ........................................................................................................................... 13
Figure 17:Logo VSCode ......................................................................................................................... 13
Figure 18:Page d'accueil ....................................................................................................................... 14
Figure 19:Page de connexion ............................................................................................................... 14
Figure 20:Page de Registration............................................................................................................. 15
Figure 21:Page Admin ........................................................................................................................... 15
Figure 22:Page panier ........................................................................................................................... 16

4
 Liste Des Tableaux

Tableau 1:les acteurs de notre projet .................................................................................................... 4

Tableau 2:Raffinement du sous cas d’utilisation « Ajouter un user» ................................................... 6
Tableau 3:Raffinement du sous cas d’utilisation « Ajouter un user ou admin» .................................. 7
Tableau 4: Raffinement du cas d’utilisation « S’inscrire» ..................................................................... 7
Tableau 5:Raffinement du cas d’utilisation « Se désinscrire» .............................................................. 8

5
 Chapitre 1 : Représentation du projet
I. Introduction :
Dans ce chapitre, nous amenés de développer un site web e-commerce qui nous permet
l’achat des cactus en ligne. À ce point nous posons la problématique avec le présentant de la
situation actuel du marché, le critique de l’existant c’est pour la proposition d’une solution.
II. Etude de l’existant :
On effectue un projet d’intégration. Au cours de l’étude du processus de l’achat des cactus, on
a pu relever quelques problèmes concernant le gaspillage de temps, la fatigue et on trouve un
problème de transport à chaque fois qu’on veut acheter le produit de décoration…

III. Critique de l’existant :

On constate :
 la perte du temps au niveau de choisir l’article qui l’on veut acheter…
 Redondance.
 Problème de transport.
 Manque de disponibilité de l’article après la visite de boutique.

IV. Solution à prévoir :

Pour résoudre ces différents problèmes, nous proposons les solutions suivantes :
 Développer un site web e-commerce pour offrir des services gratuits à aux utilisateurs.
 L’envoi des messages à l’administrateur pour réclamer ou acheté un produits dans le
site.
 Les droits d’accès sont bien spécifiques en séparant l’espace clients de l’espace
administrateur.
 Gestion des clients.
 Gestion de la base de données avec sécurité surtout aux niveaux des données des
clients (Avec la méthode de Hachage).
 Contrôle des messages crées par les clients.
 Gestion des produits.
 Gestion de l’administrateur.

1
V. OBJECTIFS :
La mise en place d’un site web permet:
 Le Suivi des messages envoyés par les contacts
 Les Différentes taches gérer par le client :
 Inscription
 Authentification
 Envoi des messages
 consulter des produits
 Envoi de message à l’administrateur
 Les Différentes taches gérer par l’administrateur:
 Authentification
 Gestion des clients
 Gestion des messages créent par les clients
 Gestion des produits
 Inscription
 Ajouter un admin
 Ajouter un client
 Modifier utilisateur/admin
 Supprimer admin/utilisateur

VI. Spécification des besoins :

1. Besoins fonctionnels :
Mise en place d’un site Web qui permet l’achat des cactus en ligne.
Il doit satisfaire les principaux besoins fonctionnels qui se présentent dans les points suivants
:
 L’authentification d’utilisateur est obligatoire pour chaque ouverture de session.
 Protection du mot de passe des clients et l’administrateur contre toutes menaces.
 Contrôle des messages envoyés par les clients.
 Les fonctions de gestion des clients:
 La consultation des produits.
 Envoyer des messages.
 S’authentifier.
 S’inscrire.
 Les fonctions de gestion de l’administrateur:

2
  La consultation de la liste des contacts.
 Ajouter, Modifier, supprimer des contacts
 Gestion des produits.
 Gestion des produits :
 Ajout produits
 Supprimer produits
 Update produits

2. Besoin non fonctionnels :

L’application doit répond à tous ces critères :
Le site doit être performant, fiable et facile à utiliser.
Les taches doivent être indépendantes pour ne pas se bloquer à une phase spécifique.

Conclusion :
A travers ce chapitre, nous avons présenté le cadre du projet, identifié à atteindre et le travail à
faire. Compte tenu de cela, nous proposant les détails et sa conception du travail dans le
chapitre suivant.

3
 Chapitre 2 : Etude de cas

I. Introduction :
Ce chapitre a pour objectif de présenter la solution conceptuelle proposée. En d’autres termes,
il devrait répondre à la question comment faire. La conception est décrite par un ensemble de
diagrammes relevant soit du langage de modélisation UML.

II. Diagramme de Cas d’utilisation :

1. Définition :
Ce diagramme est destiné à représenter les besoins des utilisateurs par rapport au Système.
Il constitue un de diagrammes le plus structurants dans l’analyse d’un système.
 Acteur : représente un rôle joué par une personne qui interagit directement avec le
système étudié.
 Cas d’utilisation (use case) : représente un ensemble des séquences d’actions qui sont
réalisées par le système et qui produisent un résultat observable intéressant pour un acteur
particulier.
 L’utilisation d’un diagramme de cas d’utilisation s’avère indispensables pour décrire les
besoins fonctionnels :Ces diagrammes permettent de décrire l’interaction entre l’acteur et
le système.
 C’est l’image d’une fonctionnalité de système déclenchée en réponse à la stimulation d’un
acteur externe.

2. Concepts de base :

Acteurs de système :
Notre application fait intervenir deux acteurs compte tenu du déroulement et de
complémentarité des opérations qui sont :

Tableau 1:les acteurs de notre projet

Acteurs Description
L’administrateur :  Authentification ()
 Gestion des utilisateurs : ajouter (), modifier

4
 (), supprimer ().
 Consulter page d’acceuil.
 Gestion des produits ().
 Déconnexion.
Client:
Il bénéfice de la plupart des fonctions car il a la
possibilité de consulter et de gérer les différents
fonctionnalités :
 Créer un compte (s’inscrire)
 Authentification
 Consulter produits : Ajout au panier (),
Réclamer (), Commander ().
 Contacter l’admin

3. Diagramme de cas d’utilisation initial :

Figure 1:Diagramme Use Case géneral

5
Ce diagramme représente les différentes activités par l’administrateur afin de gérer et
contrôler leur application et les activités qui peut un client les effectués.
4. Raffinement des cas d’utilisation :
Nous allons détailler les cas d’utilisation les plus prioritaires en décrivant les scénarios de
base.
 Raffinement de cas d’utilisation « Authentification »

Figure 2:Diagramme de cas d’utilisation « Authentification »

 Raffinement de cas d’utilisation «Gestion des utilisateurs» comme indique la figure

suivante :
Après être authentifié, l’administrateur peut ajouter un user comme l’illustre le tableau :
Tableau 2:Raffinement du cas d’utilisation « Ajouter un user»

Cas d’utilisation Ajouter client

Acteurs Admin
Pré condition Admin authentifié
Post condition User ajouté
Scénario de base - L’administrateur saisit les informations sur le
user (nom, prenom, . . . ).
- L’administrateur clique sur le bouton «
S’inscrire». - Le système vérifie si un champ
obligatoire est manquant. - Le système
enregistre les données. - Le système affiche un
message de succès.
Exception -Si un champ manque le système affiche un
message d’erreur.

Après être authentifié, l’administrateur peut ajouter un user comme l’illustre le tableau 3 :

6
 Tableau 3:Raffinement du sous cas d’utilisation « Ajouter un user ou admin»

Cas d’utilisation Ajouter client

Acteurs Admin
Pré condition Admin/User authentifié
Post condition Admin/User ajouté
Scénario de base - L’administrateur saisit les informations sur
l’admin (nom, prenom, . . . ). - L’administrateur
clique sur le bouton « S’inscrire». - Le système
vérifie si un champ obligatoire est manquant. -
Le système enregistre les données. - Le système
affiche un message de succès.
Exception - Si un champ manque le système affiche un
message d’erreur.

 Raffinement du cas d’utilisation « S’inscrire» :

Nous allons raffiner le cas d’utilisation « S’inscrire » comme le montre la figure suivantes :

Figure 4:Gérer les utilisateurs

Figure 3: diagramme Use Case "s'inscrire"

L’user peut s’inscrire comme l’illustre le tableau suivant :

Tableau 4: Raffinement du cas d’utilisation « S’inscrire»

Cas d’utilisation S’inscrire

Acteurs Admin/User
Pré condition Admin/User inscrit
Scénario de base - Le user ou l’admin saisit les informations
(nom, prenom, . . . ).
- L’administrateur/User clique sur le bouton «
S’inscrire».

- Le système vérifie si un champ obligatoire est

manquant.
- Le système enregistre les données.
Exception Si un champ manque le système affiche un
message d’erreur.

7
 Raffinement du cas d’utilisation « Se désinscrire»

Figure 5: raffiner le cas d’utilisation « se désinscrire »

L’admin peut se désinscrire comme l’illustre le tableau suivant :

Tableau 5:Raffinement du cas d’utilisation « Se désinscrire»

Cas d’utilisation Ajouter client

Acteurs Admin ou bien user
Pré condition Admin/User authentifié
Post condition Admin/User désinscrit
Scénario de base - Le user saisit son nom. - L’administrateur
clique sur le bouton « Confirmer».
- Le système vérifie si le nom est incorrect.
- Le système enregistre les données. - Le
système affiche un message de succès.
Exception - Si un le nom est incorrecte le système affiche
un message d’erreur.

 Cas d’utilisation Final :

8
 Figure 6:Diagramme de Cas d'utilisation globale

III. Diagramme de Classe :

Le diagramme de classe fait partie de la vue dynamique. Il met l’accent sur les relations
spatiales entre les objets sous formes de classes.
 diagramme de classe « s'inscrire »

Figure 7:Diagramme de classe <<S'inscrire>>

9
Nous allons établir les diagrammes de classe pour le cas d’utilisation « Gérer les utilisateurs»

Figure 8:Gérer les utilisateurs

 Diagrammes de classe d’analyse « Ajouter User» :

 Ajouter contact : C’est une classe interface permettant aux admin d’ajouter des
nouveaux utilisateurs.
 La fonctionnalité qu’offre cette interface est : Ajouter admin ou user.
 Contrôle Gestion d’utilisateur : C’est une classe contrôle qui permet de gérer
toutes les opérations possibles sur les utilisateurs.
 Admin : C’est une classe entité contenant toutes les informations sur l’admin.
 User :. C’est une classe entité contenant toutes les informations sur le User.
 Diagramme de classe version globale :

Figure 9:Diagramme de classe globale

10
IV. Diagramme de séquence :
Les diagrammes de séquence montrent la séquence des interactions entre objets selon un point
de vue temporel (chronologique.
 Diagramme de séquence d’ « Authentification » :

Figure 10:Diagramme de séquence « Authentification »

Pré condition :
L’opération d’authentification doit être affichée.
Scénario normale :
1 : L’utilisateur doit saisir son nom d’utilisateur et mot de passe et demande l’accès à
l’application.
2 : Envoyer de nom d’utilisateur et mot de passe à la base des données.
3 : Un test doit être réalisé, celui d’existence et compatibilité du nom d’utilisateur et mot de
passe.
4 : Si les données correctes et le nom d’utilisateur et mot de passe existe, alors l’utilisateur
peut accéder à l’application.
5 : Si les données ne sont pas correctes et le nom d’utilisateur et mot de passe inexistant,
l’utilisateur doit soit ressayer le saisie, soit inscrire.
Post condition : L’utilisateur identifié.

11
  Diagramme de séquence globale :

Figure 11:Diagramme de déploiement globale

Conclusion :
Dans ce chapitre j’ai présenté mon application Web par les différents modèles et diagrammes
pour donner une idée globale pour rendre notre projet plus claire et compréhensive sur les
différentes cotés. Toutes ces taches vont être traduites sur des interfaces qu’on va représenter
dans le chapitre suivant.

12
 Chapitre 3 : les Tâches Effectuées
I. Introduction :
Après avoir placé notre projet dans son cadre général, une étape indispensable serait de
présenter l’environnement sur lequel se base un site web e-commerce « Cactus|Chez
Inoubliable ».
Dans ce chapitre, nous allons présenter les outils bureautiques tels que les notions de
fonctionnement d’un site web e-commerce élargir et bien maitriser nos connaissances.

II. Les étapes de la réalisation :

1. Outils du développement & logiciels :

Figure 13:Logo MYSQL Figure 12:Logo JavaScript

Figure 14:Logo PHP

Figure 17:Logo VSCode

Figure 15:Logo CSS
Figure 16:Logo Mamp

13
III. Les Interfaces Réalisées :
 Voici La page d’accueil de notre site :

Figure 18:Page d'accueil

Voici la page de connexion :

Si Vous êtes un admin ou un user cette interface est spécifique pour la connexion.

-Si l’utilisateur est l’admin :après la connexion ,il s’amène à la page d’amin ou il va faire les
différents taches(Ajouter user ou admin,Supprimer User ou Admin,Déconexion,Accéder à la page
d’accueil)

Figure 19:Page de connexion

14
Maintenant si vous n’avez pas encore un compte il suffit de taper sur Registrer.

Après vous vous trouvez dans la page suivante :

Figure 20:Page de Registration

Une fois que l’admin remplit ses informations et se connecter il se trouve dans la page de l’admin
comme se présente la figure suivante :

Figure 21:Page Admin

15
L’utilisateur consulte les produits de notre boutique en ligne et veut achetez un tel cactus, il suffit de
cliquer sur la bouton ajouter à la carte et passer au paiements.

Vous trouvez ci-dessous la page de panier :

Figure 22:Page panier

Conclusion :
Ce chapitre a été consacré à la phase de conception et la réalisation des applications. Nous y
avons présenté les démarches suivies pour la conception de notre système d’information, les
outils de développement utilisés ainsi que quelques interfaces.

16
 Conclusion générale

Pour conclure ce rapport, nous pouvons affirmer que ce projet se situe dans le

prolongement des années de formations suivies. Il plonge l'étudiant dans un monde novateur

où la pratique dépasse souvent la théorie. Une capacité d'autonomie est mise en avant pour

progresser et faire face à de nombreux problèmes.

Ce projet a pour objectif de présenter les différentes étapes de conception de cette

application web ainsi que ses différentes composantes.

La réalisation de ce projet, nous a permis de créer un système de gestion des données

concernant notre application e-mailing, ainsi que la conception, qui constitue une phase

importante dans la représentation des différentes fonctionnalités de l’application.

En effet, ce travail nous a permis d’un côté d’enrichir nos connaissances théoriques à

travers l’utilisation d’UML pour la conception orienté objet de systèmes d’informations, SQL

comme un SGBD, et PHP comme un langage de programmation, d’une autre coté d’améliorer

nos capacités de développement, afin d’en tirer profit dans le futur.

17