1. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
1
Sommaire
1. Remerciement ..........................................................................................................
2. Introduction..............................................................................................................
3. Modélisation de base de données .............................................................................
a. Diagramme de données..................................................................................
b. Tables.............................................................................................................
4. L’environnement de développement..........................................................................
a. Editeur de Texte..............................................................................................
b. XAMPP...........................................................................................................
5. Le Site ......................................................................................................................
a. Présentation des couches ...............................................................................
b. La Couche Web...............................................................................................
c. La Couche Développement..............................................................................
d. La couche donnée...........................................................................................
6. Présentation de l’application......................................................................................
a. Interface client ...............................................................................................
b. Interface Admin..............................................................................................
c. Interface de Payement....................................................................................
7. Conclusion................................................................................................................
8. Annexes....................................................................................................................

2. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
2
Remerciement
On tient à adresser nosprofondesextrêmes et gratitudesà tous ceux
qui nous a aidé, de près ou de loin, à réaliser ce modeste projet.
On tient aussià remercier Mr. Moulay Youssef HAMIME d’avoir
nous encadrer tout au long de la réalisation de ce projet. Il a été
toujours disponible, à l’écoute de nos nombreuses questions, et
toujours intéressé par l’avancement de nos travaux.
Nousremercions également le corps professoral de la filière Génie
Informatique 1ère année qui a été toujours présent pour assurer la
bonne formation.

3. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
3
Introduction
Dans le but de perfectionner les connaissances acquises en Informatique aux étudiants de la
filière génie Informatique, L’école ESMA organise à la fin de chaque semestre les projets
tutorés.
Ces Projets vont amener l’étudiant de la filière Génie Informatique à choisir un thème qui
doit être modulisé et traduit par le langage de programmation étudié pendant le semestre en
cours. Ces Projets vont aussi pousser l’étudiant à rédiger le rapport de soutenance qui sera
noté avec la présentation du projet.
Le thème de ce projet intitulé conception d’un site E-Commerce, va nous aider à exploiter
nous connaissances en HTML étudié pendant le semestre 2.

4. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
4
3 .Modélisation de base de données :
Dans un site ou une application web on utilise toujours unebasede données, cette base va
stocker toute sortede donnée lequel on va utiliser pour notre application web.
Dans notreprojeton a décidé d’utiliser une basede donnée MySQL afin de stocker les
donner qu’on va utiliser pour notre site exemple : les catégories, les articles, liste des
clients etc.…
Apres l’installation d’un serveur local XAMPP (explication à la suite) et à l’aide du
programmeweb PHPMyadmin, on va créer une nouvelle base de donner qu’on va appeler
ECOMMERCE

5. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
5
Dans basede données ECOMMERCEon a ajouté5 tables et dans chaquetable on va créer
des champs selon nos besoins.
Le tableau suivantdessinechaquetable et ces champs ainsi le type de donnée :
Table Champs Type de donnée
admin admin_id
admin_user
admin_pass
admin_reminder
Int
Varchar
Varchar
varchar
articles article_id
article_pic
article_name
article_desc
article_prix
article_cat
article_qt
Int
Varchar
Varchar
Text
Varchar
Varchar
Varchar
category cat_id
cat_name
cat
Int
Varchar
varchar
client client_id
client_name
client_adress
client_ville
client_country
client_email
client_tel
client_zip
client_item
client_qt
Int
Varchar
Varchar
Varchar
Varchar
Varchar
Varchar
Varchar
Varchar
Varchar

6. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
6
countries idCountry
countryCode
countryName
Int
Varchar
varchar
Malheureusement ont a pas des compétences pour fait l’analyse des donnée
que ça soit avec merise ou UML , mais on a essayé de créer un petite
diagramme avec UML pour mieux comprendre comment gère notre base de
donnée .

7. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
7
4 .l’environnement de développement :
A. Éditeurde texte :
Pour la réalisation et conception du site on a utilisé comme éditeur de code et des pages
PHP l’éditeur populaire, Sublime Texte

8. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
8
B.XAMPP
XAMPP est un ensemble de logiciels permettant de mettre en place facilement un
serveur Web, un serveur FTP et un serveur demessagerieélectronique. Il s'agit
d'une distribution de logiciels libres (ApacheMySQL PerlPHP) offrantune bonne
souplessed'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à
la portée d'un grand nombrede personnes puisqu'il ne requiert pas de
connaissances particulières et fonctionne, de plus, sur les systèmes d'exploitation les
plus répandus.
5 .Le site :
A. L’architecture 3-tiers :
L'architecture3-tiers est un modèle logique d'architectureapplicative qui vise à
séparer très nettement trois couches logicielles au sein d'une même application ou
système, à modéliser et présenter cette application comme un empilement de trois
couches, étages, niveaux ou strates dontle rôle est clairement défini :
 La présentation des données : correspondantà l'affichage, la restitution sur le poste
de travail, le dialogue avec l'utilisateur ;
 Le traitement métier des données : correspondantà la mise en œuvrede l'ensemble
des règles de gestion et de la logique applicative ;
 Et enfin l’accès aux données persistantes : correspondantauxdonnées qui sont
destinées à être conservées sur la durée, voirede manière définitive.
Dans cette approche, les couches communiquententre elles au travers d'un «
modèle d'échange », et chacuned'entre elles proposeun ensemble de services rendus. Les
services d'une couchesont mis à disposition de la couche supérieure. On s'interdit par
conséquentqu'une couche invoqueles services d'unecouche plus basseque la couche
immédiatement inférieureou plus haute que la couche immédiatement supérieure
(chaqueniveau ne communique qu'avec ses voisins immédiats).

9. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
9
Le rôle de chacunedes couches et leur interfacede communication étant bien
définis, les fonctionnalités de chacune d'entre elles peuvent évoluer sans induire de
changement dans les autres couches. Cependant, une nouvelle fonctionnalité de
l'application peut avoir des répercussions dans plusieursd'entreelles. Ilest donc essentiel
de définir un modèle d'échangeassez souple, pour permettre une maintenance aisée de
l'application.
B .La Couche Web :
La couche web est composéede tout le coté html de l’application, c'est-à-direles
Jsp, les feuilles de style CSS, le JavaScript, ainsique des contrôles nécessaires à charger le
modèle de chaque page à afficher.

10. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
10
a- HTML :
Le HTML (« HyperText Mark-Up Language») est un langagedit de « marquage» (de
«structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document
avec des Balises de formatage. Les balises permettent d'indiquer la façon dontdoit être
présentéle document et les liens qu'il établit avec d'autres documents.
Le langageHTML permet notamment la lecture de documents sur Internetà partir
de machines différentes, grâceau protocoleHTTP, permettant d'accéder via le réseau à des
documents repérés par une adresseunique, appelée URL.
b- CSS : La mise en page
Le langageCSS (Cascading StyleSheets) est utilisé pour définir l’aspectfutur de
votresite, comme par exemple la couleur du fond de la page ou le type de police. Plus
concrètement, le CSS (ou feuille de style), c’estun petit fichier (exemple « style.css ») dans
lequel vous allez définir l’aspect futur de votre site.
c- JavaScript
JavaScriptestun langage de programmation descripts principalement utilisé dans
les pages web interactives. C'estun langage orienté objets à prototype, c'est-à-direque les
bases du langageet ses principales interfaces sontfournies par des objets qui ne sontpas
des instances de classes, mais qui sontchacun équipés de constructeurspermettantde
générer leurs propriétés, et notamment une propriété de prototypagequi permet d'en
générer des objets héritiers personnalisés.
D- font Awesome
C’estun Framework d’icônes gratuitqu’on peutles utiliser pour notre site.
E- BootStrap
C’estun Framework Css quifacilitele design d’un site et qu’on peut l’utiliser pour
améliorer le design de notresite.

11. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
11
B. La couche développement :
Le PHP
PHP: Hypertext Preprocessor, plus connu sous son siglePHP (acronyme
récursif), estun langage de programmation libreprincipalement utilisé pour
produiredes pages Web dynamiques via un serveur HTTP, mais pouvantégalement
fonctionner comme n'importe quel langage interprétéde façon locale. PHP est un
langage impératif orienté objet.
C .couche Donnée
Dans cette couche en présenttout ce qui est table et base de donnée .

12. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
12
5. Présentation de l’application :
A. Partie Graphique :
 Mise enplace d’une base de données pour stocker les données
En effet nous devrons créeune basede donnée qui va contenir les différentes
données relatives aux clients, catégories, et les articles. Par ailleurs notre application
devra permettrel’ajout la suppression, la modification des coordonnées d’une
catégorie et des articles.
 La consultationet lamodificationdes données
En effet, justeles administrateurs quiont le droit d’accéder au base de donnée il
peuvent consulter les achats enregistrer et les peuvent modifier /ajouter des
catégories et des articles.
 A qui s’adresse ce siteweb?
Ce site s’adresseen premier lieu aux personnes envied’effectuer des achats par
internet selon les produits disponibles dans le site.

13. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
13
6. l’interface de l’application :
A. Interfaceclient :
Lorsq un client visite notre site une page comme suit s’afficheselon le domain
suiventcomme exemple : www.esmamarket.com

14. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
14
Lorsqueun client choisie un article il sera envoyéa la page article.php comme suit, cette
page contienne les informations suivante:
 Prix de l’article
 Description
 Disponibilité en stock

15. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
15
L’utilisateur doit strictement choisie une quantité, après il sera rediriger a un formulaireil
doit remplir ce formulaire
le formulaireva envoyer les donnée entrez a la basede donnée.

16. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
16
B. Interface Admin :
L’accès au panneaux de configuration du site avec l’url : [nomde demain]
/admin/index.php
Une page s’affichecommesuit :
Si l’admin entre un username ou mot de passe incorrect , un système de
gestion des erreurs d’authentification et déjà pris en charge dans notre script ,
donc un message s’affichera comme suit :

17. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
17
Apres l’authentification une page de bien venue s’affiche et maintenant l’admin
peut gère le site automatiquement il peut ajouter des catégories, articles,
admins et consulter les statistique et les nombre d’achat effectuer.

18. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
18
Page responsable pour l’ajout des catégories
Page responsable pour l’ajout d’articles

19. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
19
Page responsable pour l’ajout des admins
Page responsable pour consulter/supprimer des catégories

20. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
20
Page responsable pour consulter/supprimer des articles
Page responsable pour consulter les achats

21. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
21
Comme c’estvu dans la page des achats enregistrer l’admin site peut confirmer l’achaten
client sur le buttons confirmer, après le clic sur le buttons confirmer un email sera envoyéà
la boite email d’utilisateur afin qui peut effectuer le payementpour terminer son achat.
La page qui sera envoyéau client

22. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
22
7. Conclusion
Le site peut être bien amélioré en ajoutantplusieurs modifications que s’assoità l’interface
client ou admin.
Ce projet, malgré la contraintedu temps, nous a été d’un grand bénéfice, nous avons
comprendrecommentgéré un projet, nous avons bien exploité nos compétences acquis
dans le semestre2 sur L’HTML et nous avons aussi exploité non connaissances en PHP et
CSS et aussiLe JavaScriptafin de réaliser un projetcomplète qui couvreles 3 couches,
couche développement, web et donnée.
8. Annexes
www.php.net
www.w3schools.com
www.fontawesome.io
www.getbootstrap.com

23. Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
23