SlideShare une entreprise Scribd logo
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....................................................................................................................
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.
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.
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
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
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 .
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
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).
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.
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.
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 .
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.
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
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
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.
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 :
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.
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
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
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
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
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
Rapport de Projet –Gestion d’une bibliothèque Année universitaire 2013-2014
23

Contenu connexe

Tendances

Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...
Addi Ait-Mlouk
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignement
Nassim Bahri
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIA
Ahmed BEN JEMIA
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
Rouâa Ben Hammouda
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Sofien Benrhouma
 
rapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFErapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFE
Donia Hammami
 
Mise à niveau d’un système de gestion de clientèle (CRM)
Mise à niveau d’un système de gestion de clientèle (CRM)Mise à niveau d’un système de gestion de clientèle (CRM)
Mise à niveau d’un système de gestion de clientèle (CRM)
Nawres Farhat
 
RAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESRAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDES
TombariAhmed
 
Gestion des Chercheurs d’Emploi
Gestion des Chercheurs d’EmploiGestion des Chercheurs d’Emploi
Gestion des Chercheurs d’Emploi
Azzeddine Elouadi
 
Projet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatiqueProjet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatique
jihene Ab
 
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
Projet de fin étude  ( LFIG : Conception et Développement d'une application W...Projet de fin étude  ( LFIG : Conception et Développement d'une application W...
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
Ramzi Noumairi
 
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
Mohamed Amine Mahmoudi
 
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIRRapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
AHMEDAKHACHKHOUCH
 
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed AmineRapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Mohamed Amine Mahmoudi
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'Etudes
Hosni Mansour
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobile
Nader Somrani
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Mehdi Hamime
 
Rapport de stage développement informatique
Rapport de stage développement informatique Rapport de stage développement informatique
Rapport de stage développement informatique
MehdiOuqas
 
Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2
Ben Abdelwahed Slim
 
Rapport de projet de fin d"études
Rapport de projet de fin d"étudesRapport de projet de fin d"études
Rapport de projet de fin d"études
Mohamed Boubaya
 

Tendances (20)

Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignement
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIA
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 
rapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFErapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFE
 
Mise à niveau d’un système de gestion de clientèle (CRM)
Mise à niveau d’un système de gestion de clientèle (CRM)Mise à niveau d’un système de gestion de clientèle (CRM)
Mise à niveau d’un système de gestion de clientèle (CRM)
 
RAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESRAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDES
 
Gestion des Chercheurs d’Emploi
Gestion des Chercheurs d’EmploiGestion des Chercheurs d’Emploi
Gestion des Chercheurs d’Emploi
 
Projet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatiqueProjet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatique
 
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
Projet de fin étude  ( LFIG : Conception et Développement d'une application W...Projet de fin étude  ( LFIG : Conception et Développement d'une application W...
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
 
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
 
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIRRapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
 
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed AmineRapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'Etudes
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobile
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
 
Rapport de stage développement informatique
Rapport de stage développement informatique Rapport de stage développement informatique
Rapport de stage développement informatique
 
Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2
 
Rapport de projet de fin d"études
Rapport de projet de fin d"étudesRapport de projet de fin d"études
Rapport de projet de fin d"études
 

Similaire à Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque

Dodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi Mbuta
Dodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi MbutaDodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi Mbuta
Dodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi Mbuta
Daniella Mbuta
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5
YounessLaaouane
 
Cours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internetCours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internet
Nicolas Rouat
 
Cahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internetCahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internet
Karim Ayari
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
Nicolas Morin
 
7. information modelling
7. information modelling7. information modelling
7. information modelling
sugogo
 
BreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureBreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec Azure
Nicolas Georgeault
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
Le Référentiel du système girondin d'archivage électronique
Le Référentiel du système girondin d'archivage électroniqueLe Référentiel du système girondin d'archivage électronique
Le Référentiel du système girondin d'archivage électronique
AssociationAF
 
Présentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayPrésentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël Launay
Technocite
 
Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013
CNI Tunisia
 
Bases de donnees fondamentaux
Bases de donnees fondamentauxBases de donnees fondamentaux
Bases de donnees fondamentaux
Rokhaya CISSE
 
PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0
guest4ca1b
 
Slideshare - Web 2.0
Slideshare - Web 2.0Slideshare - Web 2.0
Slideshare - Web 2.0
agirard003
 
Le Web 2.0
Le Web 2.0Le Web 2.0
Le Web 2.0
clemdups
 

Similaire à Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque (20)

Dodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi Mbuta
Dodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi MbutaDodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi Mbuta
Dodi_Mbuta_La création d'un web service : « Note Reminder » _ Dodi Mbuta
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Base donnes my_sql
Base donnes my_sqlBase donnes my_sql
Base donnes my_sql
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5
 
Cours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internetCours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internet
 
Cahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internetCahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internet
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
7. information modelling
7. information modelling7. information modelling
7. information modelling
 
BreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureBreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec Azure
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Le Référentiel du système girondin d'archivage électronique
Le Référentiel du système girondin d'archivage électroniqueLe Référentiel du système girondin d'archivage électronique
Le Référentiel du système girondin d'archivage électronique
 
Présentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayPrésentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël Launay
 
Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013
 
Bases de donnees fondamentaux
Bases de donnees fondamentauxBases de donnees fondamentaux
Bases de donnees fondamentaux
 
PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0
 
Slideshare - Web 2.0
Slideshare - Web 2.0Slideshare - Web 2.0
Slideshare - Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Le Web 2.0
Le Web 2.0Le Web 2.0
Le Web 2.0
 

Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque

  • 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