ECOLE SUPERIEURE MULTINATIONALE DES

TELECOMMUNICATIONS
******************

RAPPORT DU PROJET DE : Développement web

THEME : Gestion de produits

MEMBRES DU GROUPE : PROFESSEUR :

Lassana DEMBE Abdoulaye DIENG
Galyam Boubacar Georges OUEDRAOGO

ANNEE ACADEMIQUE: 2021-2022

 Plan du travail

I. Introduction

II. La présentation du fonctionnement de l’application à travers les différentes fonctionnalités

III. Conclusion

I. INTRODUCTION :
 Un projet de développement web étant un ensemble d’actions coordonnées et implémentées dans le
but de développer un produit fonctionnant avec les exigences répondant ainsi à un besoin spécifique.
Pour notre cas, il s’agit d’un mini projet de gestion des produits (Location de voitures).

II. La présentation du fonctionnement de l’application à travers les différentes fonctionnalités :

Il s’agit des détails de manière explicite le rôle de chaque fonctionnalité intégrée dans le code pour le
fonctionnement de l’application en intégralité.

Ces différentes fonctionnalités sont les suivantes :

1) Connexion :

Cette page est la page principale qui contient le code de connexion à notre base de données à
l’intérieur de cette page, on a déclaré quatre (4) variables à savoir : serveur (le non du serveur), user
(le nom de l’utilisateur), pw (pour mot de passe) et bdd (le nom de notre base de données).

Toutes les autres pages qui seront créés vont appelés la page connexion à travers le lien suivant :
« require_once(‘connexion.php’) »

Voici le code correspondant :

2) Index :

Dans cette partie, on a créé une barre de recherche qui permet à l’utilisateur d’exprimer son besoin de
voiture, on a aussi ajouté une vidéo de présentation des voitures (une fonctionnalité supplémentaire)
qui se joue lorsque l’utilisateur est en train de faire la recherche de voiture dans la barre de recherche.

On a créé le bouton Login qui permet à l’utilisateur de se connecter à la page d’accueil (tableau de
bord) pour pouvoir accéder aux autres fonctionnalités (ajouter, détails, modifier, supprimer). Le code
correspondant à cette partie est la suivante :
Après l’exécution de ces codes ci-dessus, on obtient l’interface suivant :
 3) Login :

Il s’agit là, lorsque Ce bouton est appuyé, ça nous dirige vers la page de connexion demandant ainsi de
renseigner le nom de l’utilisateur et son mot de passe.

Alors deux conditions s’y pose :

- Si le mot de passe est correct, l’utilisateur accèdera à la page d’accueil pour pouvoir modifier,
supprimer, ou ajouter de voitures ;

- Si le mot de passe est incorrect, le message « Login ou mot de passe invalide lui sera
affiché ».

Voici le code correspondant :

Après l’exécution du code ci-dessus en cliquant sur le bouton Login, on obtient l’interface suivant :

Après avoir effectué la procédure de connexion tout en mettant correctement le nom de l’utilisateur et
le mot de passe (on rappelle qu’on a créé deux utilisateurs à savoir : aly avec 1234 comme son mot de
passe et NIANG avec 0000 comme son mot de passe), on accède au tableau de bord.

4) Tableau de bord :

Cette partie contient les différents paramètres indiqués dans le cahier de charge tels que : ajouter,
détails, modifier, supprimer.

Voici ce code y compris celui du pied de page :

Voici l’interface qui s’affiche :
Etant au niveau du tableau de bord, on voit la liste de toutes les voitures enregistrées, un pied de
page sur lequel s’affiche un message de marketing pour la société et on a la possibilité d’en ajouter
plus, de voir tous les détails, de modifier et de supprimer une ou des voitures si on le souhaite.

Après avoir effectué les différents paramètres, on peut quitter le tableau de bord juste en cliquant sur
« Déconnexion » en bas de la photo de profil de l’utilisateur connecté.

3-1) Ajouter :

Cette partie nous permet d’ajouter plus de voitures juste en cliquant l’icône ci-dessus en donnant les
informations nécessaires de la voiture (immatriculation, marque, prix et la photo).

Si toutes les informations sont correctement renseignées le message suivant s’affiche « insertion de
donnée validée » et le message suivant « échec d’insertion de donnée » dans le cas contraire.

Voici le code correspondant ainsi :

L’interface obtenu est la suivante :

3-2) Détails :

Ici, nous obtenons tous les détails sur les voitures (quantité, immatriculation, marque, prix, photo)
seulement en cliquant sur l’icône ci-dessus.

Voici le code correspondant :

3-3) Pied de page (footer) :

Cette partie contient le code qui permet de mettre en bas de la page les différents messages de
marketing de la société. Voici le ce code ci-dessous :
L’interface qu’on obtient à la suite de la combinaison de ces deux codes est la suivante :

3-3) Modifier :

Dans cette partie, on peut modifier cette caractéristique de la voiture tels que : la marque, le prix ainsi
que la photo mais on ne peut pas modifier l’immatriculation, car l’immatriculation est définie comme
notre clé primaire.

Si les différents champs sont remplis, on obtient le message suivant « Mis à jour des données
validés » et le message suivant dans le cas contraire « Echec de modification de donnée ».

Voici le code correspondant :

Voici l’interface correspondant :

3-4) Supprimer :

Cette partie permet supprimer immédiatement la voiture concernée dans la base de données des en
cliquant sur l’icône ci-dessus. Si la suppression se fait correctement, le message suivant s’affiche
« Suppression a été correctement effectuée » et le message suivant « la suppression a échoué »
dans le cas contraire.

Voici le code correspondant :

III. CONCLUSION :

En guise de conclusion, on peut dire que ce mini-projet que nous venons de réaliser nous a permis
d’apprendre de nombreuses connaissances sur le développement web.

Ça nous a permis aussi de savoir comment combiner PHP, HTML et CSS afin de donner un produit
final (site) et de connaître leurs rôles spécifiques pour la réalisation d’un tel projet.