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

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

Remerciement

On tient à adresser nos profondes extrê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. Nous remercions é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

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

3 .Modélisation de base de données : Dans un site ou une application web on utilise toujours une base de données, cette base va stocker toute sorte de donnée lequel on va utiliser pour notre application web. Dans notre projet on a décidé d’utiliser une base de 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 programme web PHPMyadmin, on va créer une nouvelle base de donner qu’on va appeler ECOMMERCE


5

Dans base de données ECOMMERCE on a ajouté 5 tables et dans chaque table on va créer des champs selon nos besoins.

Le tableau suivant dessine chaque table 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

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

4 .l’environnement de développement : A. Éditeur de 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

B.XAMPP

XAMPP est un ensemble de logiciels permettant de mettre en place facilement un serveur Web, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une distribution de logiciels libres (Apache MySQL Perl PHP) offrant une bonne souplesse d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la portée d'un grand nombre de 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'architecture 3-tiers est un modèle logique d'architecture applicative 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 dont le 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 œuvre de l'ensemble

des règles de gestion et de la logique applicative ; Et enfin l’accès aux données persistantes : correspondant aux données qui sont

destinées à être conservées sur la durée, voire de manière définitive. Dans cette approche, les couches communiquent entre elles au travers d'un «

modèle d'échange », et chacune d'entre elles propose un ensemble de services rendus. Les services d'une couche sont mis à disposition de la couche supérieure. On s'interdit par conséquent qu'une couche invoque les services d'une couche plus basse que la couche immédiatement inférieure ou plus haute que la couche immédiatement supérieure (chaque niveau ne communique qu'avec ses voisins immédiats).


9

Le rôle de chacune des couches et leur interface de 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 plusieurs d'entre elles. Il est donc essentiel de définir un modèle d'échange assez souple, pour permettre une maintenance aisée de l'application.

B .La Couche Web : La couche web est composée de tout le coté html de l’application, c'est-à-dire les

Jsp, les feuilles de style CSS, le JavaScript, ainsi que des contrôles nécessaires à charger le modèle de chaque page à afficher.


10

a- HTML : Le HTML (« HyperText Mark-Up Language ») est un langage dit 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 dont doit être présenté le document et les liens qu'il établit avec d'autres documents.

Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des documents repérés par une adresse unique, appelée URL.

b- CSS : La mise en page Le langage CSS (Cascading Style Sheets) est utilisé pour définir l’aspect futur de

votre site, 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’est un petit fichier (exemple « style.css ») dans lequel vous allez définir l’aspect futur de votre site.

c- JavaScript JavaScript est un langage de programmation de scripts principalement utilisé dans

les pages web interactives. C'est un langage orienté objets à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d'en générer des objets héritiers personnalisés.

D- font Awesome C’est un Framework d’icônes gratuit qu’on peut les utiliser pour notre site. E- BootStrap C’est un Framework Css qui facilite le design d’un site et qu’on peut l’utiliser pour

améliorer le design de notre site.


11

B. La couche développement :

Le PHP

PHP: Hypertext Preprocessor, plus connu sous son sigle PHP (acronyme récursif), est un langage de programmation libre principalement utilisé pour produire des 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ésent tout ce qui est table et base de donnée .


12

5. Présentation de l’application : A. Partie Graphique :

Mise en place d’une base de données pour stocker les données

En effet nous devrons crée une base de donnée qui va contenir les différentes données relatives aux clients, catégories, et les articles. Par ailleurs notre application devra permettre l’ajout la suppression, la modification des coordonnées d’une catégorie et des articles. La consultation et la modification des données

En effet, juste les administrateurs qui ont 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 site web ?

Ce site s’adresse en premier lieu aux personnes envie d’effectuer des achats par internet selon les produits disponibles dans le site.


13

6. l’interface de l’application :

A. Interface client :

Lorsq un client visite notre site une page comme suit s’affiche selon le domain suivent comme exemple : www.esmamarket.com

http://www.esmamarket.com/


14

Lorsque un 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

L’utilisateur doit strictement choisie une quantité, après il sera rediriger a un formulaire il doit remplir ce formulaire le formulaire va envoyer les donnée entrez a la base de donnée.


16

B. Interface Admin :

L’accès au panneaux de configuration du site avec l’url : [nom de demain] /admin/index.php Une page s’affiche comme suit :

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

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

Page responsable pour l’ajout des catégories

Page responsable pour l’ajout d’articles


19

Page responsable pour l’ajout des admins

Page responsable pour consulter/supprimer des catégories


20

Page responsable pour consulter/supprimer des articles

Page responsable pour consulter les achats


21

Comme c’est vu dans la page des achats enregistrer l’admin site peut confirmer l’achat en 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 payement pour terminer son achat. La page qui sera envoyé au client


22

7. Conclusion Le site peut être bien amélioré en ajoutant plusieurs modifications que s’assoit à l’interface client ou admin.

Ce projet, malgré la contrainte du temps, nous a été d’un grand bénéfice, nous avons comprendre comment géré un projet, nous avons bien exploité nos compétences acquis dans le semestre 2 sur L’HTML et nous avons aussi exploité non connaissances en PHP et CSS et aussi Le JavaScript afin de réaliser un projet complète qui couvre les 3 couches, couche développement, web et donnée.

8. Annexes

www.php.net www.w3schools.com www.fontawesome.io

www.getbootstrap.com

http://www.php.net/

http://www.w3schools.com/

http://www.fontawesome.io/

http://www.getbootstrap.com/


23

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

Technology

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