Vous êtes sur la page 1sur 49

Table des matires

TABLE DES MATIERES .............................................................................................................................. 1 LISTE DES FIGURES ................................................................................................................................. 2 REMERCIEMENTS .................................................................................................................................. 3 CHAPITRE I : CONTEXTE GENERAL .....................................................................................................................4 INTRODUCTION ................................................................................................................................... 5 PRESENTATION DE 212COMMUNICATION ..................................................................................................... 6 Introduction .........................................................................................................................................................6 Fiche technique .....................................................................................................................................................6 Activits ..............................................................................................................................................................7 LES TACHES QUE NOUS AVONS REALISE ........................................................................................................ 9 Le rfrencement ....................................................................................................................................................9 OBJECTIF DU PROJET ............................................................................................................................ 11 CHAPITRE II : ANALYSE ET CONCEPTION ...................................................................................................... 12 ETUDE FONCTIONNELLE ........................................................................................................................ 13 Rdaction du cahier des charges .............................................................................................................................. 13 Rdaction de la charte graphique ............................................................................................................................ 13 ETUDE CONCEPTUELLE ......................................................................................................................... 15 Merise............................................................................................................................................................... 15 UML ................................................................................................................................................................ 20 Conclusion ......................................................................................................................................................... 25 CHAPITRE III : TECHNOLOGIE UTILISEES ........................................................................................................ 26 TECHNOLOGIE UTILISEES ....................................................................................................................... 27 HTML (Hypertext Markup Language) ...................................................................................................................... 27 Feuilles de style en cascade (CSS) ............................................................................................................................. 27 PHP ................................................................................................................................................................. 27 JavaScript.......................................................................................................................................................... 28 JQeruy .............................................................................................................................................................. 28 Conclusion ......................................................................................................................................................... 28 CHAPITRE IV : MISE EN UVRE ........................................................................................................................ 29 REALISATION DU PROJET ....................................................................................................................... 30 Conception gnrale ............................................................................................................................................. 30 Conception dtaille ............................................................................................................................................. 30 INSTALLATION DU PROJET ..................................................................................................................... 32 ECRANS DE LAPPLICATION .................................................................................................................... 33 FrontOffice : Partie prsentation.............................................................................................................................. 33 BackOffice : Partie Administration ........................................................................................................................... 40 Conclusion ......................................................................................................................................................... 47 CONCLUSION................................................................................................................................. 48

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Liste des figures


Figure 1: DICTIONNAIRE DES DONNEES ......................................................................... 17 Figure 2 : MODELE CONCEPTUEL DE DONNEES ............................................................ 18 Figure 3 : Modle physique de donnes ...................................................................... 19 Figure 4 : DIAGRAMME DES CAS DUTILISATION DE MEMBER ....................................... 21 Figure 5 : DIAGRAMME DES CAS DUTILISATION DADMINISTRATEUR ........................... 21 Figure 6 : Diagramme des cas dutilisation de visiteur ................................................. 22 Figure 8 : Digramme de squence Inscription ............................................................ 22 Figure 7 : Digramme de squence Ajouter un Article ................................................. 23 Figure 9 : Diagramme des cas de classe ..................................................................... 24

Conception et ralisation d'un site web www.JPD.com

Remerciements
Nous tenions tout dabord remercier tous ceux qui nous ont aids de prs ou de loin passer notre stage, et exprimer nos gratitudes et nos respects pour leurs soutien durant la formation et les 5 semaines de notre stage.

Nous tenions remercier en premier nos professeurs Mr. LACHGAR Mr. FAKHOURI et Mme. OUSSIMOUR pour leurs prcieux conseils qui nous ont taient dune grande utilit. Nous remercions chaleureusement aussi toute lquipe de lagence 212communication pour leurs disponibilit et leurs coute pendant la priode de notre stage au sein de 212communication .

Nous remercions galement tous nos enseignants de lISTA NTIC option dveloppement informatique pour leurs aide prcieuse et leur disponibilit constante tout au long de notre formation.

Nous remercions aussi nos ami(e)s pour leurs soutien et leurs conseils qui nous ont encourags parfaitement pour atteindre nos objectifs.

Nous Vous remercions tous

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Chapitre I
Contexte gnral

Introduction Prsentation de 212 COMMUNICATION Les taches ralises Objectifs du projet

Ce premier chapitre dcrit le contexte gnral du projet. Nous allons prsenter en premire partie de ce chapitre 212 communication solution informatique et en seconde partie les objectifs atteindre de ce projet.

Conception et ralisation d'un site web www.JPD.com

Introduction
Cest avec enthousiasme que jeffectue ma deuxime anne de TSDI au sein de du ISTA NITIC SYBA.

Lintrt que je porte au dveloppement web et aux nouvelles technologies ma permis dapprhender un nouveau march : celui de dveloppement d'application web au sein de 212communication, mon entreprise daccueil.

Cette dernire occupe une position de leader sur le march de dveloppement d'application web et celui de la cration des identits visuelles et print jobs.

Le march de dveloppement web regroupant plusieurs activits diffrentes et relativement peu connues du grand public, je memploierai dans un premier temps en prciser les principales.

Dans un second temps, je prsenterai la mthodologie employe pour effectuer chacune des missions qui mont t confies ainsi que les rsultats dtaills de ces dernires.

La troisime partie exposera les tapes de ralisation de mon projet de stage ainsi que les rsultats obtenus.

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Prsentation de 212communication
Introduction
212communication est une agence de web et communication base sur Marrakech qui offre de nombreux services dans le domaine de la communication, elle vous apporte des solutions adaptes vos besoins, en vous garantissant une approche globale et sur mesure, des choix multiples, son activit est base sur le consulting, emarketing, dveloppement d'application web, cration des identits visuelles et print jobs. L'quipe 212communication est constitu des experts et cadres dans le domaine du web et communication, ils vous accompagneront pas pas quel que soit la nature de votre projet. La valeur ajoute de 212communication, se situe au niveau du conseil stratgique, de la conception artistique, de la conduite de projet et du dveloppement web. Pour assurer sa fonction de production, l'entreprise utilise des facteurs de production (facteur travail et facteur capital). Elle doit alors mettre en place des procdures de gestion de ces ressources internes pour assurer la convergence entre d'une part, ses besoins en facteurs de production dfinis par son plan d'action stratgique, et d'autre part ses ressources disponibles un moment donn. La gestion du facteur travail se trouve assum par la fonction de gestion des ressources humaines. Cette dernire est gnralement associe la simple gestion du personnel confi un chef du personnel dont la mission essentielle consiste grer la main duvre de travail dun point de vue quantitatif et procder la paye des salaris. Limportance de la gesti on des ressources humaines se trouve mis en avant par les nouvelles formes dorganisation du travail qui insistent sur limportance du facteur travail dans la comptitivit de lentreprise. Je prsenterai en premier lieu les services offerts par 212communication en second lieu je prsenterai la mthodologie dont 212communication travaille.

Fiche technique
Nom Directeur gnral Assistante de direction Cration Forme juridique Effectif : 212communication : Zouheir OUAGMAR : Hind EL HAMRITI : 2007. : S.A.R.L : 8 Personnes.

Conception et ralisation d'un site web www.JPD.com

Activits
Hosting
212communication est prsente comme fournisseur d'hbergement au Maroc, elle propose des packs d'hbergement trs avancs adapts vos besoins simples et trs conomiques.

Sites Web
Un site web consiste prsenter une entreprise, une activit ou un produit. Le site peut comprendre une partie publique et une partie prive rserve aux clients. Il est un bon moyen de communication. Les entreprises peuvent vendre un service ou un produit via un shop en ligne et mettre en place une interface de paiement en ligne. En une phrase : Mise en ligne d'un site internet adapt votre cible marketing et rpondant aux besoins de votre entreprise en terme d'image, communication et rentabilit. 212communication prsente plusieurs packs ces clients.

Design & Print


212communication propose ses clients la conception de leurs identits visuelle, logos, conceptions graphiques et impressions. 212communication offre ses clients des services pour le print, c'est--dire tous ce qui entre dans le domaine des conceptions graphiques tel que les logos, cartes visites, flyer, emballages, et qui sont destins tre imprims sous support papier ou autres : Edition (Livres, brochures, journaux, plaquettes dentreprises). PLV (Supports carton, posters, bandeaux, chevalets, cartonnage). Publicit (Affiches, dpliants, prospectus, flyers, CD-ROM multimdia). Grace son quipe de designers professionnels, lagence garantie ses clients des conceptions et des produits de qualits avec des ides nouvelles et innovantes, le tous bas sur lcoute et ltude du besoin du client afin de lui proposer un produit rpondant ses attentes. Aprs la livraison des crations au client, lagence simplique afin de g uider le client pour le choix du support sur le quel sera imprime la cration, ou soccupe carrment de limpression on faisant recours lun de ses partenaire dans le domaine de limpression.

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Applications
212communication propose des produits et des applications sur mesure pour ces clients. Lagence dveloppe des solutions pour les entreprises : Location de voitures Agences de voyages Agences immobilires Cabinets de conseil Maisons d'htes & riads Architectes Comptabilit Scolarisation e-commerce Et Autres : selon votre besoin

Rfrencement

Le rfrencement naturel est la technique permettant d'inscrire votre site Internet dans les moteurs de recherche mais surtout d'amliorer le positionnement des pages de votre site sur des mots cls dfinis.

Conception et ralisation d'un site web www.JPD.com

Les tches que nous avons ralis


Dans la priode de stage nous avons effectu plusieurs taches.

Le rfrencement
Le rfrencement naturel est la plus conomique des actions de webmarketing. Grce au rfrencement naturel, il permettait aux internautes d'accder votre site Internet sans connatre son adresse grce aux moteurs de recherche. Les principaux moteurs de recherche en France sont: Google, Yahoo et Live Search

Nous travaillons en 4 tapes principales : Dtermination des mots cls Optimisation du contenu de vos pages Amlioration de la popularit de vos pages Suivi de votre positionnement

Dtermination des mots cls


L'analyse des objectifs et la dtermination des mots cls est la phase la plus importante d'une campagne de rfrencement naturel. Quelles pages de votre site souhaitez-vous bien positionner dans les rsultats naturels des moteurs de recherche ? Pour quelles raisons et dans quel but ? Sur quels mots cls souhaitez-vous tre bien positionns ? Nous tudions et dterminons les mots cls les plus saisis par les internautes dans les moteurs de recherche. Cette slection de mots cls doit correspondre vos objectifs et vos exigences. De plus, nous ralisons un audit de vos concurrents nous permettant d'optimiser votre campagne de rfrencement naturel.

Optimisation du contenu de vos pages


Une fois que nous avons dfini les mots cls et les pages de votre site que vous souhaitez bien positionner, nous optimisons leur contenu : textes, titres, images, meta informations... Nous amliorons la stratgie de liens internes de votre site et gnrons un plan de site Google SITEMAP. Vous recevez toujours un rapport dtaill des travaux raliss. Nous vous livrons galement un guide personnalis destin au webmaster de votre site pour l'accompagner rdiger des articles en harmonie avec les objectifs de rfrencement naturel.

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Amlioration de la popularit de vos pages


Pour gagner en popularit, nous crons des liens vers les pages de votre site. Nous concentrons nos travaux sur la qualit des liens externes plutt que sur la quantit. Nous recherchons des sites consacrs aux mme thmes que le vtre tout en excluant vos concurrents commerciaux (quoique...). Nous rdigeons un rapport des liens externes qui pointent vers les pages de votre site. Afin d'optimiser davantage votre rfrencement naturel, profitez gratuitement de notre rseau de liens pertinents et de qualit.

Suivi de votre positionnement


Nous suivons votre positionnement ! Recevez rgulirement un rapport d'volution des positions des pages de votre site. Nous rdigeons un compte rendu des lments modifier pour amliorer et adapter votre rfrencement naturel face vos concurrents.

Conception et ralisation d'un site web www.JPD.com

10

Objectif du projet
Lobjectif de mon projet est de dvelopper un portail web pour lassociation Jeunes pour le Dveloppement.

Lassociation sest trace depuis le dbut des objectifs quelle insiste raliser la lettre parmi ceux-ci je site :

encourager et encadrer les jeunes pour assurer le dveloppement durable faire des capacits et de la force des jeunes au Maroc et de son extrieur un investissement pour le apporter de la force au travail communautaire aider au renforcement des valeurs telles que citoyennet, solidarit, connaissance et la culture douverture lautre aborder les problme dont la socit souffre le plus et cherch les rsoudre mobiliser les murs et les valeurs environnementales pour crer une relation positive entre lHomme et lenvironnement .

Depuis sa cration et dans un temps record lassociation a russi grce dieu de faire un ensemble dactivits qui ont vari entre le travail de solidarit, de la sant et de la sensibilisation sans oublier daider russir les activits qui font part du quotidien du village.

Pour atteindre ses objectifs lassociation organise diffrents types de manifestations : Activits, projets, Vols etc. Prsident de l'association avoir un site internet pour mettre la disposition des internautes une source dinformations la prsentant et surtout pour fournir des informations concernant son activit et son projets.

Sur le site internet les informations sont rparties sur six modules : lassociation, les initiatives, les projets, les activits, les actualits, les partenaires, les invits et les outils.

11

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Chapitre II
Analyse et conception
Etude fonctionnelle : cahier de charge Etude conceptuelle MERISE UML

Ce

chapitre

dfinit les

fonctionnalits du

projet ainsi que les modles de sa conception.

Conception et ralisation d'un site web www.JPD.com

12

Etude fonctionnelle
Rdaction du cahier des charges
Mon premier travail a t de recenser lexpression des besoins de lassociation. Jai effectu cette tche en rencontrant la prsidente, le trsorier et le secrtaire gnral de lassociation. Lors de cette runion nous avons parl des diffrents mdias intgrer dans le site (phonogrammes, vidogrammes, animations et textes) et nous avons dtermin prcisment la nature de la demande. Suite cette runion jai rdig le cahier des charges qui a t ultrieurement t lu et approuv par lassoci ation. Ce document prcise toute linformation recueillie pour dterminer la nature de la demande et il dfinit le cadre technique permettant le dveloppement du projet. sagit donc de prciser trois lments : Saccorder sur les finalits du projet conduire, Dfinir la nature des objets grs (sons, vidos, photos), Designer les acteurs en jeu.

Le cahier des charges prsente galement des solutions dpendant des objectifs fonctionnels (expression des besoins du client) et des orientations techniques suivies (logiciels utiliss et documents fournir par le client).

Rdaction de la charte graphique


Lors de ma premire runion avec la direction de Jeunes pour le Dveloppement. Nous avons galement trait la question du graphisme du site internet. En mappuyant sur lexpression des besoins et des contraintes graphiques imposes par le client jai rdig la charte graphique du site internet.

13

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Ce document prsente lergonomie du site web. Il dfinit la nature des fonds dcran, des boutons de navigation ainsi que la feuille de style, cest--dire pour chacun de ces lments : les dimensions, les couleurs, le type de donnes, etc. Les fonds dcran sont pour la page daccueil lemblme de lassociation sans modification, pour les autres pages jai utilis la mme image dont jai modifi la luminosit et le contraste pour lclaircir au maximum. (Annexe 1 page II) Dans le domaine du graphisme lassociation ma impos deux contraintes : Lutilisation de leurs sigles reprsentatifs (logo et image) et le choix de quatre couleurs spcifiques : un gris [#dcdcdc] et un rouge [#e32636] (couleurs du logo de lassociation), un orange [#ff9912] et un vert [#61b329] . Une premire division du site correspond aux huitime modules correspondant aux besoins du client : lassociation, les initiatives, les actualits, les activits, les projets ,les partenaires, invits et les outils. Une seconde division est faite au sein de ces six modules. Le premier module de prsentation de lassociation (raison dtre, coordonnes, statuts, rglement intrieur) donnant accs aux donnes permettant dadhrer. Le second module prsentant les initiatives de lassociation. Le troisime module traitant des actualits de lassociation : Vols, activits et Concerts, Horaires des activits. Le quatrime module prsentant les activits de lassociation. organises tant l'intrieur et l'extrieur de lAssociation. Les Activits

Le cinquime module prsentant les projets de lassociation par chaque anne. a chaque projet il contient des activits. Le sixime module est disponible pour les personnes morales ou physiques souhaitant devenir partenaire de lassociation. Ce module indique qui et comment contacter au sein de lassociation. Le septime module prsente les invits et les adhrents de lassociation. Pour ajouter un article ou un commentaire. Le dernier module du site est un module d outils. Y sont regroups divers lments : un contenu technique (bibliographie, liens hypertextes, droits) Le sixime module prsente les invits et les adhrents de lassociation. Pour ajouter un article ou un commentaire.

Conception et ralisation d'un site web www.JPD.com

14

Etude conceptuelle
Merise
MERISE est une mthode systmique de conception des systmes dinformation. Elle est en relation avec le dveloppement des bases de donnes relationnelles. MERISE a pris en compte les volutions de linformatique et continue de sadapter aux nouvelles technologies : architectures clients/serveur, interfaces graphiques, dmarche de dveloppement rapide, approche objet, applications intra/internet. Aujourdhui, la mthode MERISE correspond encore globalement aux savoir -faire actuels en ingnierie des systmes dinformation de gestion. MERISE constitue un standard de fait en conception des systmes dinformation . La dmarche de dveloppement propose par MERISE sinscrit dans trois dimensions :

Le cycle de vie : cest le dcoupage du projet en trois priodes : conception, ralisation et maintenance. Le cycle de vie rejoint le cycle en V. Le cycle de dcision : cest la liste de tous les moments o une dcision est prise sur le projet (dcision de faire le projet aprs une tude pralable, dcision de valider lanalyse fonctionnelle et de passer larchitecture, validation de la recette, etc.) Le cycle dabstraction : cest lorganisation structurelle des donnes et des traitements.

15

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Dictionnaire des donnes


Un dictionnaire des donnes est une collection de mtadonnes ou de donnes de rfrence ncessaire la conception d'une base de donnes relationnelle. Il revt une importance stratgique particulire, car il est le vocabulaire commun de l'organisation. Il dcrit des donnes aussi importantes que les clients, les nomenclatures de produits et de services, les annuaires, etc. C'est donc le rfrentiel principal de l'entreprise, sur lequel s'appuient les dcisions de celle-ci. Il est souvent reprsent par un tableau quatre colonnes contenant le nom, le code et le type de donne ainsi que des commentaires.
code nom_ar nom_fr sexe date_naissnace lieu_naissance ville code_postal adresse tele_portable tele_fixe mail motpass civil fonction date image loisier statu domaine demmande niveau Message titre text dateheur etat memebre_r memebre_e Categories Articles titre titre de categories NC text cahier de charge titre de message text de message Date et heur envoyer le message Etat de message l'emetteur de message le rcepteur du message NC NC NC NC NC NC text text date numro numro numro cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge libelle le nom de membre en arabe le nom de membre en arabe sexe de membre date de naissance de membre lieu de naissance de membre la ville de membre code postal de membre adresse de membre tlphone protable de membre tlphone fixe de membre adresse email de membre le mot de passe de membre le civil de membre le fonction de membre date inscription de membre image de membre loisier de membre statut de membre domaine de membre demande adhsion association le niveau de membre nature NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC NC type text text text date text text numro text numro numro text text text text date text text numro text numro text RC document cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge

Conception et ralisation d'un site web www.JPD.com

16

text description date time image vue keywords etat Photos titre text description lien vue Articles titre description image vue date time etat jaime date_m time_m keywords jaime id type dateheur ip Commantaire id titre nom email text dateheur etat

text de categories description de categories date ajouter categories heure ajouter categories image de categories nombre de vue le categories les mot cl de categories Ltat de catgorie afficher

NC NC NC NC NC NC NC NC

text text date time text numro text numro

cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge

titre de photo text de photo description de photo lien (url) de photo nombre de vue le photo

NC NC NC NC NC

text text text text numro

cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge

titre de l'article description de l'article Photo de l'article nombre de vue l'article date ajouter l'article heure ajouter l'article Etat de catgories nombre j'aimer l'article date modifier l'article heure modifier l'article les mot cl de l'article

NC NC NC NC NC NC NC NC NC NC NC

text text text numro date time numro numro date time text

cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge

numro de j'aime Type de jaime date et heure de j'aime adresse ip de visiteur qui j'aime

NC NC NC NC

numro numro date numro

cahier de charge cahier de charge cahier de charge cahier de charge

numro de commentaire titre de commentaire nom visiteur comment mail de visiteur comment text de commentaire date et time de comment l'etat de commentaires

NC NC NC NC NC NC NC

numro text text text text date numro

cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge cahier de charge

F IG UR E 1: DICTIONNAIRE DES DONNEES

17

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Modle conceptuel de donnes (MCD)


Le MCD a pour but dcrire de faon formelle les donnes qui seront utilises par le systme dinformation. Il sagit donc dune reprsentation des donnes, facilement comprhensible, permettant de dcrire le systme dinformation laide dentits. Mon modle conceptuel de donnes est le suivant :

F IG UR E 2 : M ODELE CONCEPTUEL DE DONNEES

Conception et ralisation d'un site web www.JPD.com

18

Modle Logique de donnes (MLD)


Ce modle indique comment organiser les donnes. On se reprsente le modle comme tant un ensemble de relations. On a des tables (entits dans le modle MCD) qui contiennent des champs (attributs dans le modle MCD). Ce qui est important ce sont les relations entre ces tables. Mon modle logique de donnes est le suivant :

F IG UR E 3 : M ODEL E

PH YSI Q UE DE DO NN EES

19

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

UML
UML (en anglais Unified Modeling Language ou langage de modlisation unifi ) est un langage de modlisation graphique base de pictogrammes. Il est apparu dans le monde du gnie logiciel, dans le cadre de la conception oriente objet . Couramment utilis dans les projets logiciels, il peut tre appliqu toutes sortes de systmes ne se limitant pas au domaine informatique. UML est l'accomplissement de la fusion de prcdents langages de modlisation objet : Booch, OMT, OOSE. Principalement issu des travaux de Grady Booch, James Rumbaugh et Ivar Jacobson, UML est prsent un standard dfini par l'Object Management Group (OMG). La dernire version diffuse par l'OMG est UML 2.3 depuis mai 2010 UML 2.3 propose 13 types de diagrammes (9 en UML 1.3). UML n'tant pas une mthode, leur utilisation est laisse l'apprciation de chacun, mme si le diagramme de classes est gnralement considr comme l'lment central d'UML ; des mthodologies, telles que l'UnifiedProcess, axent elles l'analyse en tout premier lieu sur les diagrammes de cas d'utilisation (Use Case). De mme, on peut se contenter de modliser seulement partiellement un systme, par exemple certaines parties critiques.

UML se dcompose en plusieurs sous-ensembles


o

Les vues : Les vues sont les observables du systme. Elles dcrivent le systme d'un point de vue donn, qui peut tre organisationnel, dynamique, temporel, architectural, gographique, logique, etc. En combinant toutes ces vues, il est possible de dfinir (ou retrouver) le systme complet. Les diagrammes : Les diagrammes sont des lments graphiques. Ceux-ci dcrivent le contenu des vues, qui sont des notions abstraites. Les diagrammes peuvent faire partie de plusieurs vues. Les modles d'lment : Les modles d'lment sont les briques des diagrammes UML, ces modles sont utiliss dans plusieurs types de diagramme. Exemple d'lment : cas d'utilisation (CU ou cadut'), classe, association, etc.

Conception et ralisation d'un site web www.JPD.com

20

Diagramme des cas dutilisation


Digramme des cas dutilisation dutilisa teur (Membre)

F IG UR E 4 : DIAGRAMM E DES CAS DUTILISATION DE M EM BER

Digramme des cas dutilisation dadministrateur

F IG UR E 5 : DIAGRAMM E DES CAS DUTILISATION DADM INISTRATEUR

21

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Diagramme des cas dutilisation de visiteur

F IG UR E 6 : D IA GRA MME

DES CA S D UTILI SA TIO N DE V ISI TEUR

Digramme de squence systme 1 visiteur : inscription et contact

F IG UR E 7 : D IGRA MME

DE SEQ UEN CE

I N SCRI PTIO N

Conception et ralisation d'un site web www.JPD.com

22

2 Adhrent : Ajouter un article

F IG UR E 8 : D IGRA MME

DE SEQ UEN CE

A JO UTER

UN

A R TI CL E

23

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Diagramme des cas de classe

F IG UR E 9 : D IA GRA MME

DES CA S DE CLA SSE

Conception et ralisation d'un site web www.JPD.com

24

Conclusion
Dans ce chapitre, nous avons prsent les 2 mthodes diffrents de conception ainsi les modles labors de chaque mthodes qui nous ont aids cerner les diffrentes fonctionnalits du futur systme. Dans le chapitre suivant, nous aborderons les diffrents outils et technologies utiliss.

25

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Chapitre III
Technologie utilises
HTML Feuilles de style en cascade (CSS) PHP JavaScript jQuery

Ce chapitre aborde les langages et les technologies utiliss dans ce projet : HTML, CSS et PHP.

Conception et ralisation d'un site web www.JPD.com

26

Technologie utilises
HTML (Hypertext Markup Language)
LHypertext Markup Language, gnralement abrg HTML, est le format de donnes conu pour reprsenter les pages web. Cest un langage de balisage qui permet dcrire de lhypertexte, do son nom. HTML permet galement de structurer smantiquement et de mettre en forme le contenu des pages, dinclure des ressources multimdias dont des images, des formulaires de saisie, et des lments programmables tels que des applets. Il permet de crer des documents interoprables avec des quipements trs varis de manire conforme aux exigences de laccessibilit du web. Il est souvent utilis conjointement avec des langages de programmation (JavaScript) et des formats de prsentation (feuilles de style en cascade).

Feuilles de style en cascade (CSS)


CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert dcrire la prsentation des documents HTML et XML. L'un des objectifs majeurs de CSS est de permettre la stylisation hors des documents. Il est par exemple possible de ne dcrire que la structure d'un document en HTML, et de dcrire toute la prsentation dans une feuille de style CSS spare. Les styles sont appliqus au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette sparation fournit un certain nombre de bnfices, permettant d'amliorer l'accessibilit, de changer plus facilement de prsentation, et de rduire la complexit de l'architecture d'un document.

PHP
Prsentation
Le langage PHP est utilis principalement en tant que langage de script ct serveur, ce qui veut dire que c'est le serveur (la machine qui hberge la page Web en question) qui va interprter le code PHP et gnrer du code (constitu gnralement d'XHTML ou d'HTML, de CSS, et parfois de JavaScript) qui pourra tre interprt par un navigateur. Il a t conu pour permettre la cration d'applications dynamiques, le plus souvent ddies au Web. PHP est trs majoritairement install sur un serveur Apache, mais peut tre install sur les autres principaux serveurs HTTP du march, par exemple IIS. Ce couplage permet de rcuprer des informations issues d'une base de donnes, d'un systme de fichiers (contenu de fichiers et de l'arborescence) ou plus simplement des donnes envoyes par le navigateur afin d'tre interprtes ou stockes pour une utilisation ultrieure.

27

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Fonctionnement
Dans une utilisation Web, l'excution du code PHP se droule ainsi : lorsqu'un visiteur demande consulter une page Web, son navigateur envoie une requte au serveur HTTP correspondant. Si la page est identifie comme un script PHP (gnralement grce l'extension .php), le serveur appelle l'interprte PHP qui va traiter et gnrer le code final de la page (constitu gnralement d'HTML ou de XHTML, mais aussi souvent de CSS et de JS). Ce contenu est renvoy au serveur HTTP, qui l'envoie finalement au client. Ce schma explique ce fonctionnement :

F IG UR E III.1 : E XECUTIO N

DU CO DE

PHP

Une tape supplmentaire est souvent ajoute : celle du dialogue entre PHP et la base de donnes. Classiquement, PHP ouvre une connexion au serveur de SGBD voulu, lui transmet des requtes et en rcupre le rsultat, avant de fermer la connexion.

JavaScript
JavaScript est un langage de programmation de scripts principalement utilis dans les pages web interactives mais aussi ct serveur1. C'est un langage orient objet 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 quips de constructeurs permettant de crer leurs proprits, et notamment une proprit de prototypage qui permet d'en crer des objets hritiers personnaliss.

JQeruy
jQuery est une bibliothque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La premire version date de janvier 2006.

Conclusion
Aprs avoir cit les diffrents outils avec lesquels nous avons implment notre systme, le chapitre suivant sera consacr la mise en uvre de la solution.
Conception et ralisation d'un site web www.JPD.com

28

Chapitre IV
Mise en uvre
Ralisation du projet Installation du projet crans de lapplication

Ce chapitre prsente dveloppement et dinterfaces ralises.

les outils de un ensemble

29

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Ralisation du projet
Conception gnrale
Avant de commencer le dveloppement du site, il fallait dabord intgrer la maquette en css, pour a jai utilis adobe Photoshop pour dcouper les tranches dimages qui seront utilises et Dramweaver pour lintgration et la gnration du code css. Apres avoir test la maquette dans tout les navigateurs, jai cr la page du parc qui va tre rempli a partir de la base de donnes. Enfin jai procd raliser lespace dadministration qui doit tre protg par un login et mot de passe et qui va permettre a lutilisateur de grer son parc en ligne.

Conception dtaille
Intgration CSS de la maquette
Afin dintgrer la maquette en css et rester le plus fidle a la charte graphique propos par linfographiste, jai procder dcouper les images que je vais utiliser toute en prenant soin de prendre des images rptitives pour que le site sera rapide en tlchargement. Jai utilis lextension de firefox firebug qui permet la modification du code css et la visualisation des rsultats donns en mme temps Ci-dessous un aperu de la page daccueil du site Image dial index Et aprs on va passer dans les outlis de d dveloppement utliser dans le projet et nous terminons dans la partie Ecrans de lapplication

Outils de dveloppement
Plusieurs outils ont t utiliss dans le dveloppement de lapplication. Dans ce qui suit les outils utiliss ainsi quune brve prsentation de chacun deux.

PowerAMC
PowerAMC est un logiciel de modlisation. Il permet de modliser les traitements informatiques et leurs bases de donnes associes. PowerAMC permet de raliser tous les types de modles

informatiques. Il reste un des seuls qui permet de travailler avec la mthode Merise.
Conception et ralisation d'un site web www.JPD.com

30

wampServer
WAMP est un acronyme informatique signifiant : Windows, Apache, MySQL et PHP dans la majorit des cas mais aussi parfois, Perl, ou Python. Les rles de ces quatre composants sont les suivants : Apache : le serveur web frontal ; il est devant tous les autres et rpond directement aux requtes du client web (navigateur). PHP1 : sert la logique. MySQL : stocke toutes les donnes de l'application. Windows : assure l'attribution des ressources ces trois composants. WampServer est un package WAMP, une plateforme de dveloppement Web, permettant de faire fonctionner localement (sans se connecter un serveur externe) des scripts PHP. WampServer n'est pas en soi un logiciel, mais un environnement comprenant deux serveurs (un serveur web Apache et un serveur de bases de donnes MySQL), un interprteur de script (PHP), ainsi qu'une administration SQL PhpMyAdmin. Il dispose d'une interface d'administration permettant de grer les alias (dossiers virtuels disponibles sous Apache), et le dmarrage/arrt des serveurs.

Adobe Dreamweaver
Dreamweaver fut l'un des premiers diteurs HTML de type tel affichage, tel rsultat , mais galement l'un des premiers intgrer un gestionnaire de site (CyberStudio GoLive tant le premier). Ces innovations l'imposrent rapidement comme l'un des principaux diteurs de site web, aussi bien utilisable par le nophyte que par le professionnel.

PHP est un langage de programmation trs puissant.


Conception et ralisation d'un site web www.JPD.com

31

Projet de stage

2011 - 2012

Installation du projet
Apres la ralisation du site, il a fallu linstaller sur le poste de lagent assurant les interventions aux demandes des utilisateurs et le diffuser dans le rseau local de la socit afin quon puisse y accder partir de nimporte quel poste. Pour cela jai effectu les tches suivantes :

Tlcharger WampServer. Installer WampServer. Copier le dossier contenant le projet dans le rpertoire : o C:\wamp\www\

Et le dossier contenant la base de donnes dans : o C:\wamp\bin\mysql\mysql5.1.33\data.

Rcuprer ladresse IP2 locale du poste. Configurer le serveur Apache fournit par WampServer en changeant le contenu des fichiers httpd.conf et Edit alias du rproire Apache et en y plaant ladresse IP locale du poste ;

Maintenant que le site intranet est install, on peut facilement y accder partir des autres postes en tapant http://adresse IP/nomSite/ .

Cette etap et pour installer le projet dans un ordinateur


Conception et ralisation d'un site web www.JPD.com

32

Ecrans de lapplication
FrontOffice : Partie prsentation
Page index

une fois le visiteur connecter au site, cette page apparait c'est l'espace d'accueil qui a pour but a dcrire le contenu et donne l' ide gnrale du site

33

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Menu horizontal

les menu principale du site : le 1er menu c'est un lien vers les diffrentes pages contenant le site .

Menu verticale

le 2eme menu il permet d'organiser les articles et les images en ordre afin de faciliter aux visiteurs de choisir .

Conception et ralisation d'un site web www.JPD.com

34

La liste des articles

Apres validation des articles propos , Ils seront affichs dans cette page sous la forme suivante . forme (claire et simple a comprendre pour tout le monde) Ainsi la fonction J'aime , cette dernire est grer par notre site Web .

35

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Le contenu d'un article avec les commentaires

Quand on clique sur le bouton plus( )L'article sera affich on ajoutant la possibilit de commenter aprs saisir ses informations et l'envoyer par bouton ( ) Et comme on voit il ya le signe de facebook et Twitter , le visiteur peut aimer et partager le lien Une petite remaque a propos des commentaire , ils sont affichs sous l' articles par ordre
Conception et ralisation d'un site web www.JPD.com

36

Formulaire de commentaire

Pour ajouter un commentaire a un article. Cette Option est disponible pour les membres et les visiteurs

37

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Crer un nouvel article

Cette page a t crer afin que les visiteurs exprime leurs avis et ajouter des sujets et ses dernier seront envoyer a la page de gestion des articles qu'on a dj vu

page d'inscription

Page d'inscription , Le visiteur a le droit de s'inscrire au site aprs avoir remplir le formulaire et valider par l'administrateur .

Conception et ralisation d'un site web www.JPD.com

38

page contact

Dernier page de contact, elle ouvre la possibilit aux visiteur de contacter L'association Soit par Email (Apres le remplissage de formulaire et validation) , tlphone ou bien la visiter . Tous ces coordonnes sont disponible a la page. Remarque : On na pas imprim toutes les pages par ce que il y on a beaucoup, en effet en haut les principaux pages ncessaire a savoir.

39

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

BackOffice : Partie Administration


Page d'authentification

Afin de scuris notre backoffice une page dauthentification exige un compte avant davoir la permission daccder au systme, pour se connecter au serveur, il suffit de taper le login et le mot de passe.

Page accueil

cette page a pour but de grer tous les fonctionnalit de l'application (voir le menu de proprit) , et elle permette d'un accs simple et facile toute les page , seule le directeur gnrale a le droite de la manipuler .

Conception et ralisation d'un site web www.JPD.com

40

Menu Raccourcis

Menu de gestion , l'utilit de ce dernier c'est que le directeur gre facilement sans retourner au (menu proprit) , en bref il contient les principaux options .

Menu Principale

C'est Le Menu Proprit Quand on a dj cit en haut , Ce menu est le principale son but la gestion globale ainsi que la gestion des membres anciens et nouveaux de site .

41

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Gestion des utilisateurs

Aprs L'inscriptions Des Adhrents, l'administrateur accder a cette page qui lui affiche leur liste et lui donne le droit de les grer (suppression, modification, ....)

Conception et ralisation d'un site web www.JPD.com

42

Le profil d'un membre ou utilisateur

Chaque membre possde une fiche personnelle contient ses informations ncessaire , La voila Sur la page courante .

43

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Gestion des catgories (articles)

Cette Page Permette de Grer les diffrentes catgories du site , chaque catgorie a des informations ncessaires a citer ainsi que des sujet (point suivante)

Conception et ralisation d'un site web www.JPD.com

44

La liste des articles

Cette page contient les dtails de la page prcdente : aprs acce a chaque catgorie on trouve des articles, bien sr on les gre.

45

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

Gestion des catgories (albums)

le mme principe que la page des catgories mais La diffrence c'est qu'on gre les catgories des images

Conception et ralisation d'un site web www.JPD.com

46

Des informations sur l'association

Cette Page est comme tant la carte d'identit de l'association , Elle contient tout les information ncessaire pour le visiteur pour savoir le parcours de l'association

Remar que
On a pas imprimer toutes les pages par ce que il y on a beaucoup , en effet en haut les principaux pages ncessaire a savoir .

Conclusion
Lobjectif de cette partie est dillustrer la dernire partie du projet qui est la phase de ralisation dont laquelle nous avons prsent et dcrit les outils de dveloppement utiliss. Quelques crans de lapplication ont t galement prsents en plu s de la fiche gnre par le systme.

47

Conception et ralisation d'un site web www.JPD.com

Projet de stage

2011 - 2012

CONCLUSION
Au terme de ce stage, nous avons pu raliser un site dynamique pour lassociation JDP. Le site est maintenant disponible sur net www.jpd.com

Ce projet stalait sur trois phases. La premire phase tait la spcification des besoins, la deuxime phase consistait faire une tude fonctionnelle et une conception du projet projete ensuite en Merise et UML. Une fois les besoins sont dfinis et analyss, nous avons entam la phase de ralisation qui a pour rle de raliser ce qui a t analys et conu. Cette ralisation a exig une matrise des langages PHP5, HTML et CSS ainsi quune bonne connaissance de lusage des requtes MySQL.

Au cours de la priode de notre

stage, nous avons eu l'opportunit de

confronter les ralits de la vie professionnelle, de vivre de prs les difficults quotidiennes que rencontrent les employs dans les diffrents services et de mimpliquer dans la ralisation de plusieurs tches informatiques.

Ce projet tait une occasion pour mettre en application diffrentes connaissances acquises durant notre formation au sein de lofppt,

approfondir certains et apprendre dautres. De surcrot ce projet nous a permis de raffiner nos capacits dabstraction et de conception. Par ailleurs, nous avons tir grand profit, aussi bien au niveau mthodologique quau niveau technologique. En effet nous avons amlior nos capacit sauto former et grer les erreurs produites lors dune application.

Conception et ralisation d'un site web www.JPD.com

48