Scribd
Upload
5 views

TD2 Bootstrap 1

The document outlines an HTML and CSS project for a web application called 'Evente', which includes features for managing product sales and user authentication. It describes the structure of the application, including navigation, product listings, and modals for adding products and viewing order details. Additionally, it provides scripts for user login and a pharmacy product sales interface, demonstrating the use of Bootstrap for styling and layout.

Uploaded by

sanioumaroulatifa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

TD2 Bootstrap 1

The document outlines an HTML and CSS project for a web application called 'Evente', which includes features for managing product sales and user authentication. It describes the structure of the application, including navigation, product listings, and modals for adding products and viewing order details. Additionally, it provides scripts for user login and a pharmacy product sales interface, demonstrating the use of Bootstrap for styling and layout.

Uploaded by

sanioumaroulatifa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

UNIVERSITE DE TAHOUA

INSTITUT UNIVERSITAIRE DE TECHNOLOGIE


*****
Niveau : L2 IG Module : HTML et CSS Enseignant : ALMOU Bassirou

Exercice 1

Figure 1 : structure interne de l’application


Cette figure présente les différents fichiers contenus dans le dossier principale evente de l’application

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evente</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Entete de la page Web -->
<ul class="nav nav-tabs">
<li><a><span class="glyphicon glyphicon-home"></span>&nbsp;Ac-
cueil</a></li>
<li><a><span class="glyphicon glyphicon-list"></span>&nbsp;Com-
mandes</a></li>
<li><a><span class="glyphicon glyphicon-
grain"></span>&nbsp;Produits</a></li>
<li><a><span class="glyphicon glyphicon-stats"></span>&nbsp;Statis-
tiques</a></li>
</ul>
<!-- Fin entete de la page Web -->
<button class="btn btn-default btn-lg pull-right" data-target="#ajout-
Produit" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span>&nbsp;Ajouter
un produit</button>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr class="info">

1
<th>Numero</th>
<th>Jour</th>
<th>Montant TTC</th>
<th>Menu</th>
</tr>
</thead>
<tbody>

<tr>
<td>Numero de la commande</td>
<td>Jour</td>
<td>Montant</td>
<td>
<button class="btn btn-default" data-toggle="modal" data-
target="#detail"><span class="glyphicon glyphicon-eye-open"></span>&nbsp;Details</button>

<!-- -->
<div class="modal fade" id="detail" tabindex="-1" aria-hidden="true" role="dialog" la-
belledby="ajout">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">&times;

</div>
<div class="modal-body">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr class="info">
<th>Article</th>
<th>Prix</th>
<th>Qte</th>
<th>Montant</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lait</td>
<td>1500</td>
<td>2</td>
<td>3000</td>
</tr>

</tbody>
</table>
</div>
</div>
</div>
</div>

<a href="operation.php?nc=1&amp;act=1"><button class="btn btn-suc-


cess"><span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;Valider</button></a>
<a href="operation.php?nc=1&amp;act=0">

2
<button class="btn btn-warning"><span class="glyphicon glyphicon-thumbs-
down"></span>&nbsp;Rejeter</button></a>

</td>
</tr>

</tbody>
</table>
</div>
</div>
</div>

<!-- modal ajout produit -->


<div class="modal fade" id="ajoutProduit" tabindex="-1" aria-hidden="true" role="dialog"
labelledby="ajout">
<div class="modal-dialog">
<div class="modal-content modal-sm">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">&times;

</div>
<div class="modal-body">
<form name="insertion" method="POST" action="operation.php" enctype="multi-
part/form-data">
<input type="text" class="form-control" placeholder="Article" required
name="article">
<br>
<input type="number" min="100" class="form-control" placeholder="Prix de l'ar-
ticle" required name="prix">
<br>
<input type="file" name="photo">
<br>
<input type="checkbox" name="promo" value="1">&nbsp;En promotion ?
<br>
<input type="number" min="100" class="form-control" placeholder="Prix promo-
tion" required name="prixpromo">
<br>
<br>
<button class="btn btn-default btn-md btn-block" value="ajouter" name="enreg-
istrer">Enregistrer</button>
</form>
</div>
</div>
</div>
</div>
<!-- fin modal -->

</body>
</html>

3
Figure 2: Page d’accueil.html

 Cette page présente la liste des commandes. Trois boutons permettant respectivement d’avoir les details de la
commande, valider ou refuser une commande

 Une fois que l’utilisateur clique sur le bouton ‘Ajouter un produit’, la page modale d’ajout apparait

Figure 3 :Details de la commande

 Une fois que l’utilisateur clique sur le bouton ‘Details, la page modale de détails de la commande apparait

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>E-vente</title>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-12">
4
<button class="btn btn-primary btn-lg pull-right" data-target="#panier"
data-toggle="modal"><i class="glyphicon glyphicon-shopping-cart"></i>Panier</but-
ton><br><br>

<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">Blackberry 857</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="70" height="70" src="im-
ages/img1.jpg">
<label class="control-label"></label>
<form action="panier.php" method="POST">
<input type="number" class="form-control" name="qte" min="1"
value="1">

<input type="hidden" name="id" value="">


<input type="hidden" name="produit" value="">
<input type="hidden" name="prix" value="">
<input type="hidden" name="photo" value=""><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>

<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">Android Infinix</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="70" height="70" src="im-
ages/img2.jpg">
<label class="control-label"></label>
<form action="panier.php" method="POST">
<input type="number" class="form-control" name="qte" min="1"
value="1">

<input type="hidden" name="id" value="">


<input type="hidden" name="produit" value="">
<input type="hidden" name="prix" value="">
<input type="hidden" name="photo" value=""><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>

5
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">Nokia 366</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="70" height="70" src="im-
ages/img3.jpg">
<label class="control-label"></label>
<form action="panier.php" method="POST">
<input type="number" class="form-control" name="qte" min="1"
value="1">

<input type="hidden" name="id" value="">


<input type="hidden" name="produit" value="">
<input type="hidden" name="prix" value="">
<input type="hidden" name="photo" value=""><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>

</div>
</div>
</div>
<!-- Page modale du panier-->
<div class="modal fade" id="panier" tabindex="-1" aria-hidden="true" role="dialog" la-
belledby="ajout">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">&times;
</div>
<div class="modal-body">

<table class="table table-bordered table-striped">


<tr>
<th>Image</th>
<th>Produit</th>
<th>PU</th>
<th>Qte</th>
<th>THT</th>
<th>Menu</th>
</tr>

<tr>
<th><img class="img img-rounded" width="70" height="70" src="im-
ages/img1.jpg"></th>
<td>Android Infinix</td>
<td>45300</td>
6
<td>1</td>
<td>45300</td>
<td><a href="panier.php?ok=1&amp;id=">
<button class="btn btn-danger"><i class="glyphicon glyphicon-
trash"></i></button>
</a>
</td>
</tr>
<tr>
<td colspan="4">

<br>
<a href="commander.php?mnt=&amp;commander=ok">
<button class="btn btn-primary pull-right">Commander</button>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Fin de la page modale -->
</body>
</html>

Script de la page index.html


Résultat du script

Figure 4 : liste des produits articles en vente

Figure 5 : panier
Cette page modale présente le panier qui contient les articles choisis par le client

7
Exercice 2 : gestion simplifiée de la vente des produits pharmaceutiques

Figure 1 : index.html, page d’authentification de l’utilisateur

Cette page permet d’authentifier un utilisateur. Il saisit son compte et son mot de passe.

a. Script de la page d’authentification : index.html

<!DOCTYPE html>
<html>
<head>
<title>Magani Medical Center</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="margin-top:35px;">

<div class="container fluid">


<div class="row">
<div class="col-md-6 col-md-offset-4">
<p class="text-center"><img src="logo.png" class="img img-rounded"
width="160" height="160"></p>
<br /><br>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="login" class="col-md-3 control-label">Compte:</la-
bel>
<div class="col-md-6">
<input class="form-control" id="compte" type="text" place-
holder="Compte utilisateur">

</div>
</div>

8
<div class="form-group">
<label for="login" class="col-md-3 control-label">Mot de
passe:</label>
<div class="col-md-6">
<input class="form-control" id="compte" type="password"
placeholder="Mot de passe">

</div>
</div>

<div class="form-group">
<label for="login" class="col-md-3 control-label"></label>
<div class="col-md-6">
<button class="btn btn-primary btn-block" type="submit"
name="connexion" id="connexion" ><i class="glyphicon glyphicon-log-in"></i>&nbsp;Connex-
ion</button>

</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

b. Script de la page: accueil.html

<!DOCTYPE html>
<html>
<head>
<title>Magani Medical Center</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="col-md-12">
<!-- Barre de navigation-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="col-
lapse" data-target="#example-navbar-collapse">
<span class="sr-only">MMC</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MMC</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-col-
lapse">
9
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Ventes</a></li>
<li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" place-
holder="Recherche...">
</div>
<button type="submit" class="btn btn-default">Re-
chercher</button>
</form>
</li>

</ul>
</div>
</nav>
<!-- -->
<div class="col-md-8">

<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Tylenol</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img13.png">
<label class="control-label"><small>1550 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Nivaquine</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img12.png">
<label class="control-label"><small>230 FCFA</small></label>
<form action="" method="POST">

10
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<!-- -->
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Fervex</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img9.png">
<label class="control-label"><small>5650 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<!-- -->

<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Femannoze</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img4.png">
<label class="control-label"><small>3875 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">
11
<input type="hidden" name="id" value="1">
<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-
cart">&nbsp;Ajouter</i></button>
</form>

</ul>
</div>
</div>
</div>
<!-- -->
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Dolirhume</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img5.png">
<label class="control-label"><small>2115 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<!-- -->
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Doliprane</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img6.png">
<label class="control-label"><small>2850 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


12
<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<!-- -->
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Exomuc</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img7.png">
<label class="control-label"><small>1210 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<!-- -->
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Smecta</div>
<div class="panel-body">
<ul class="unstyle">
<img class="img img-rounded" width="50" height="50" src="im-
age/img8.png">
<label class="control-label"><small>2540 FCFA</small></label>
<form action="" method="POST">
<input type="number" class="form-control" name="qte"
min="1" required value="1">

<input type="hidden" name="id" value="1">


<input type="hidden" name="produit" value="Nivaquine">
<input type="hidden" name="prix" value="50">

13
<input type="hidden" name="photo" value="im-
ages/img1.jpg"><br>
<button type="submit" class="btn btn-primary btn-xs"
name="choix" value="choix"><i class="glyphicon glyphicon-shopping-cart">&nbsp;Ajouter</i>
</form>

</ul>
</div>
</div>
</div>
<!--- -->
<ul class="pager">
<li class="previous"><a href="#">&larr; Precedent</a></li>
<li class="next"><a href="#">Suivant &rarr;</a></li>
</ul>

</div>
<div class="col-md-4">
<table class="table table-stripped table-bordered table-hover">
<thead>
<tr class="info">
<th>Image</th>
<th>Produit</th>
<th>Qte</th>
<th>Prix</th>
<th>Montant</th>
<th><i class="glyphicon glyphicon-cog"></i>&nbsp;Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="img img-rounded" width="50" height="50"
src="image/img7.png"></td>
<td>Exomuc</td>
<td>1210</td>
<td>2</td>
<td>2420</td>
<td><button class="btn btn-danger"><i class="glyphicon
glyphicon-remove"></i></button></td>
</tr>
<tr>
<td><img class="img img-rounded" width="50" height="50"
src="image/img8.png"></td>>
<td>Smecta</td>
<td>2540</td>
<td>1</td>
<td>2540</td>
<td><button class="btn btn-danger"><i class="glyphicon
glyphicon-remove"></i></button></td>
</tr>
<tr>
<td colspan="6" align="center">Total = 4960 FCFA</td>
</tr>
<tr>

14
<td colspan="6" align="center"><button class="btn btn-suc-
cess btn-block"><i class="glyphicon glyphicon-ok"></i>&nbsp;Valider l'achat des medica-
ments</button> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

</body>
</html>

Figure 2 : liste des médicaments

c. Le script de la gestion de la vente (Voir les détails, Valider ou Annuler une vente)

<!DOCTYPE html>
<html>
<head>
<title>Magani Medical Center</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="col-md-10">
<!-- Barre de navigation-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
15
<button type="button" class="navbar-toggle" data-toggle="col-
lapse" data-target="#example-navbar-collapse">
<span class="sr-only">MMC</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MMC</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-col-
lapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Ventes</a></li>
<li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" place-
holder="Recherche...">
</div>
<button type="submit" class="btn btn-default">Re-
chercher</button>
</form>
</li>

</ul>
</div>
</nav>

<button class="btn btn-default pull-right"><font color="#FF0000"><i


class="glyphicon glyphicon-log-out"></i>&nbsp;Deconnexion</font></button>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="info">
<th><i class="glyphicon glyphicon-calen-
dar">&nbsp;</i>Jour</th>
<th>Commande</th>
<th>Montant</th>
<th><i class="glyphicon glyphicon-cog"></i>&nbsp;Menu</th>

</tr>
</thead>
<tbody>
<tr>
<td>2023-06-08 11:35:19</td>
<td>548924125</td>
<td>4960</td>
<td><div class="btn-group">
<button class="btn btn-info" data-toggle="modal" data-tar-
get="#detail"><i class="glyphicon glyphicon-info-sign"></i>&nbsp;Details</button>
<button class="btn btn-success"><i class="glyphicon glyph-
icon-ok"></i>&nbsp;Valider</button>
<button class="btn btn-warning"><i class="glyphicon glyph-
icon-share-alt"></i>&nbsp;Annuler</button>
</div></td>
16
</tr>
</tbody>
</table>
</div>

</div>

</div>

<!-- -->
<div class="modal fade" id="detail" tabindex="-1" aria-hidden="true" role="dialog" la-
belledby="ajout">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">&times;

</div>
<div class="modal-body">
<table class="table table-stripped table-bordered table-hover">
<thead>
<tr class="info">
<th>Image</th>
<th>Produit</th>
<th>Qte</th>
<th>Prix</th>
<th>Montant</th>
<th><i class="glyphicon glyphicon-cog"></i>&nbsp;Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="img img-rounded" width="50" height="50"
src="image/img7.png"></td>
<td>Exomuc</td>
<td>1210</td>
<td>2</td>
<td>2420</td>
<td><button class="btn btn-danger"><i class="glyphicon
glyphicon-remove"></i></button></td>
</tr>
<tr>
<td><img class="img img-rounded" width="50" height="50"
src="image/img8.png"></td>>
<td>Smecta</td>
<td>2540</td>
<td>1</td>
<td>2540</td>
<td><button class="btn btn-danger"><i class="glyphicon
glyphicon-remove"></i></button></td>
</tr>
<tr>
<td colspan="6" align="center">Total = 4960 FCFA</td>
</tr>
<tr>
17
<td colspan="6" align="center"><button class="btn btn-suc-
cess btn-block"><i class="glyphicon glyphicon-print"></i>&nbsp;Valider et imprimer le
recu</button> </td>
</tr>
</tbody>
</table>

</div>
</div>
</div>

</div>

<!-- fin page modale -->

</body>
</html>

Figure 3: caisse.html

 Cette figure présente la liste des médicaments que la caisse valide ou annule l’achat. Le gestionnaire de la caisse
peut lire les détails de la commande en cliquant sur le bouton ‘Details’

Figure 4: Page modale : Details de la vente

18

You might also like