Mini projet Développement Web
Gestionnaire de produits
Présenté par :
Année académique : 2021/2022
1
INTRODUCTION
➢ Mise en page de l’application
➢ Fonctionnalités de l’application : explication des codes sources
➢ Justification des ajouts apportés
CONCLUSION
2
INTRODUCTION
Notre application web est une application présentant des produits pharmaceutiques
fréquemment utilisés dans notre vie quotidienne. L’objectif du développement de
cette application est de faire ressortir notre capacité à programmer une interface
web via le HTML, le CSS, le Bootstrap et d’enregistrer des fonctionnalités comme
ajouter un produit, supprimer un produit, modifier un produit, afficher la liste des
produits et les informations des produits dans une base de données en PHP et
MySQL.
Dans le but de mieux organiser les éléments constituants l’application, nous avons
dressé un plan reparti comme suit :
❖ Mise en page de l’application
❖ Fonctionnalités de l’application : explication des codes sources
❖ Justification des ajouts apportés
❖ Bilan sur la portée de notre projet
3
I. Mise en page de l’application
Dans cette partie nous allons vous présenter les différentes pages de notre projet,
leurs structures, accompagné d’explications détaillées sur la mise en forme de
chaque page.
Tout d’abord nous allons vous montrer comment accéder au site web de notre page
via l’adresse http.
1. Procédure d’accès à la page d’accueil de notre site
Pour accéder à la page d’accueil de notre site, voici comment nous avons procéder :
D’abord nous avons créé une base de données nommée pharmashop, puis en
cliquant sur l’icône « importer » pour importer la structure et le contenu de toute la
base de données : c’est un fichier .sql nommé pharmashop.
Ensuite nous avons créer un dossier nommé pharmacyShop-main dans le repertoire
htdocs de xampp qui contient tous les fichiers sources du projet. Voici un aperçu de
notre dossier racine.
4
Ci-dessous, quelques illustrations sur comment importer le contenu du fichier
pharmashop.sql
5
Après cette importation du fichier .sql nous pouvons maintenant accéder à l’onglet
de notre site web par l’url : http://localhost/pharmacyShop-main/
Une fois l’url lancé voici la page principale de notre projet :
6
En cliquant sur le lien proche de l’icône d’une pharmacie « pharmaShop » nous
avons la page d’accueil de notre site qui présente l’accueil, A propos de Nous,
Menu, Nos Experts, Que disent nos Clients, le Contact et le footer de notre page
‘Copyright 2022 SAN JUAN FARMACIA pharmacy website. Tous droits réservés.’
7
➢ Pharmashop
➢ A propos de Nous
8
➢ Menu
➢ Nos Experts
9
➢ Que disent nos Clients
➢ Contact
10
➢ Footer
2. Présentation de la page réservée à l’administrateur
Cette page n’est accessible que par l’administrateur de la page qui doit
obligatoirement s’authentifier pour avoir l’accès. Pour se faire il doit entrer son
login et son mot de passe correct. Pour cette page, notre login et notre mot de passe
sont enregistrés dans la base de données phpMyAdmin. Voici une illustration :
Une fois ces identifiants correctement renseignés, nous pouvons avoir accès aux
informations enregistrées dans la base de données comme les identifiants de chaque
produit, leur nom, le prix, la description, la quantité et édition pour modifier ou
ajouter des informations supplémentaires sur n’importe quel produit.
11
Voici la barre déroulante permettant à l’administrateur de pouvoir s’authentifier :
Après l’interface pour l’authentification :
La page d’entrée aux informations insérées dans la base de données :
12
3. Présentation des pages pour les fonctionnalités du projet
Voici la barre contenant les principales fonctionnalités demandées par le projet :
13
L’option Nouveau permet à l’utilisateur d’ajouter un produit à sa convenance en
entrant des informations sur les champs comme l’image du produit, le nom du
produit, le prix, la description, la quantité souhaitée. En cliquant sur l’option
« Ajouter un nouveau produit » l’ajout se fera automatiquement dans la table
‘produits’ de la base de données. Voici une illustration :
Ensuite, le résultat après l’ajout du nouveau produit :
14
Le produit a été correctement ajouté à la base de données.
Voici quelques liens d’images de produits pour vous faciliter l’ajout :
https://www.seneplus.com/sites/default/files/raw_photos/190320-chloroquine-
covid-m.jpeg
https://th.bing.com/th/id/OIP.DpXtTTHyD_K9ZaBGetDEfwHaEj?w=277&h=180
&c=7&r=0&o=5&pid=1.7
https://th.bing.com/th/id/OIP.nmTTQpfLS-
mQfVE_SyNmYwHaE8?pid=ImgDet&rs=1
https://th.bing.com/th/id/R.e0a52abeaec9b6b78e9b3aff0b20d71e?rik=2Jc%2bTT4
D%2fAG46A&pid=ImgRaw&r=0
L’onglet Suppression permet de supprimer un produit en entrant son identifiant
(son id). Voici une illustration :
15
En cliquant sur « Supprimer le produit » deux fois nous supprimons l’élément visé
de la base de données. Comme résultat, nous remarquons la disparition du produit
sélectionné dans la liste des produits.
L’onglet « Se déconnecter » une fois appuyer permet à l’utilisateur de se
déconnecter de la base de données et de revenir à l’accueil.
➢ Modification des informations d’un produit : elle est réalisée grâce à la
commande « Editer ». Voici une illustration :
16
II. Fonctionnalités de l’application : explication des codes sources
1. code source Afficher.php
Il permet d’afficher l’intégralité des produits enregistrés dans la base de données
conformément à l’énoncé du projet. Pour se faire, nous avons reparti 4 sections
dans des <div class="container-fluid"> subdivisés en <a class="navbar-brand"
href="../">pharmaShop</a>, <a class="nav-link active" style="font-weight : bold;"
aria-current="page" href="../admin/afficher.php">Produits</a>, <a class="nav-
link" aria-current="page" href="../admin/">Nouveau</a> et <a class="nav-link"
href="supprimer.php">Suppression</a>. Ces quatre sections sont reliées entre elles
par des liens pour l’accès aux fonctionnalités demandées.
17
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="../">pharmaShop</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" style="font-weight: bold;"
aria-current="page" href="../admin/afficher.php">Produits</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page"
href="../admin/">Nouveau</a>
</li>
<li class="nav-item">
<a class="nav-link" href="supprimer.php">Suppression</a>
</li>
</ul>
La section Connecté en tant que : est réalisée grâce à un <div style > qui permet
d’afficher le nom de l’utilisateur connecté grâce à la variable $nom qui est
récupérée lors de son authentification dans la base de données.
Se déconnecter est réalisée grâce à une classe liée au script destroy.php pour la
fermeture de la session de l’utilisateur.
18
<div style="margin-right: 500px">
<h5 style="color: #545659; opacity: 0.5;">Connecté en
tant que: <?= $nom ?></h5>
</div>
<a class="btn btn-danger d-flex" style="display: flex;
justify-content: flex-end;" href="destroy.php">Se deconnecter</a>
</div>
Le corps de la page est matérialisé dans une table qui contient une panoplie de
fonctionnalités traitées dans la balise < ? php.
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">image</th>
<th scope="col">nom</th>
<th scope="col">prix</th>
<th scope="col">Description</th>
<th scope="col">quantite</th>
<th scope="col">Editer</th>
</tr>
</thead>
<tbody>
<?php foreach($produits as $produit): ?>
<tr>
<th scope="row"><?= $produit->id ?></th>
<td>
<img src="<?= $produit->image ?>" style="width:
50%">
</td>
<td><?= $produit->nom ?></td>
<td style="font-weight: bold; color: green;"><?=
$produit->prix ?>Fcfa</td>
<td><?= substr($produit->description, 0, 100);
?>...</td>
19
<td style="font-weight: bold; color: green;"><?=
$produit->quantite ?></td>
<td><a href="editer.php?id=<?= $produit->id
?>"><i class="fa fa-pencil" style="font-size:
30px;"></i></a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
2. code source editer.php
Cette fonctionnalité permet à l’utilisateur de modifier les informations d’un produit.
Elle est matérialisée par un formulaire contenant les sections demandées.
<?php foreach ($leProduit as $produit): ?>
<form method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-
label">L'image du produit</label>
<input type="name" class="form-control" name="image"
value="<?= $produit->image ?>" required>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Nom
du produit</label>
<input type="text" class="form-control" name="nom"
value="<?= $produit->nom ?>" required>
</div>
<div class="mb-3">
20
<label for="exampleInputPassword1" class="form-
label">Prix</label>
<input type="number" class="form-control" name="prix"
value="<?= $produit->prix ?>" required>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-
label">Description</label>
<textarea class="form-control" name="desc" required><?=
$produit->description ?></textarea>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-
label">quantite</label>
<input type="number" class="form-control" name="quantite"
value="<?= $produit->quantite ?>" required>
</div>
<button type="submit" name="valider" class="btn btn-
success">Enregistrer</button>
</form>
<?php endforeach; ?>
Chaque élément entré dans le formulaire est vérifié grâce aux fonctionnalités isset
et ! empty pour éviter le remplissage de champ vide
if(isset($_POST['valider']))
{
if(isset($_POST['image']) AND isset($_POST['nom']) AND
isset($_POST['prix']) AND isset($_POST['desc']) AND
isset($_POST['quantite']))
{
21
if(!empty($_POST['image']) AND !empty($_POST['nom']) AND
!empty($_POST['prix']) AND !empty($_POST['desc'])AND
!empty($_POST['quantite']))
3. code source supprimer.php
Il est réalisé par l’apport de l’identifiant du produit qui doit correspondre à la liste
des identifiants disponibles pour la suppression. On vérifie d’abord si l’identifiant
existe dans la liste puis s’il existe on procède à la suppression du produit demandé.
Notons qu’elle est réalisée en fournissant deux fois l’identifiant et en cliquant deux
fois sur « Supprimer le produit ».
<?php
if(isset($_POST['valider']))
{
if(isset($_POST['idproduit']))
{
if(!empty($_POST['idproduit']) AND
is_numeric($_POST['idproduit']))
{
$idproduit = htmlspecialchars(strip_tags($_POST['idproduit']));
try
{
supprimer($idproduit);
}
catch (Exception $e)
{
$e->getMessage();
}
}
}
}
?>
22
4. code source login.php
Il permet à l’administrateur de se connecter à la base de données pour avoir accès
aux fonctionnalités du projet. On vérifie au préalable si les champs login et mot de
passe correspondent aux identifiants renseignés dans la base de données au niveau
de la table « admin ».
<?php
if(isset($_POST['envoyer']))
{
if(!empty($_POST['email']) AND !empty($_POST['motdepasse']))
{
$login = htmlspecialchars(strip_tags($_POST['email'])) ;
$motdepasse =
htmlspecialchars(strip_tags($_POST['motdepasse']));
$admin = getAdmin($login, $motdepasse);
if($admin){
$_SESSION['xRttpHo0greL39'] = $admin;
header('Location: admin/afficher.php');
}else{
header('Location: index.php');
}
}
}
?>
5. code connexion.php
Il permet d’avoir accès à la base de données nommée pharmashop pour le
traitement de l’url http://localhost/pharmacyShop-main/
23
<?php
try {
$access=new
pdo("mysql:host=localhost;dbname=pharmashop;charset=utf8",
"root", "");
$access->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
} catch (Exception $e)
{
$e->getMessage();
}
?>
III. Justification des ajouts apportés
Comme ajout, notons que nous avons eu recours à des fonctionnalités du
« Bootstrap » pour attribuer dynamiquement la couleur des boutons.
Conclusion
En somme ce mini-projet de développement web nous a permis d’approfondir nos
connaissances sur le php, la gestion d’une base de données sur MySQL et le design
grâce au Bootstrap. Notons aussi que la programmation en langage de
développement web demande un temps minutieux pour la conception et la
réalisation.
24
INGC1®2022
25
