Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Télécharger en tant que DOCX, PDF•9 j'aime•27,948 vues
Le document présente un rapport de projet sur la gestion d'une bibliothèque pour l'année universitaire 2013-2014, comprenant des sections sur la modélisation de la base de données, l'environnement de développement, et l'architecture de l'application web. Il décrit le processus de création d'un site e-commerce, en utilisant des technologies telles que HTML, CSS, PHP, et MySQL, ainsi que les différentes interfaces pour les clients et les administrateurs. La conclusion souligne l'apprentissage et les compétences acquises tout au long du projet.
![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 :](https://image.slidesharecdn.com/rapportdeprojets2-realisationdunsitee-commerce-150331132749-conversion-gate01/85/Ecole-ESMA-Rapport-de-projet-Application-de-gestion-d-une-bibliotheque-16-320.jpg)
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