Rapport Stage

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
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
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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.
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
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
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
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
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
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.
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
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
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
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
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
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.
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
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.
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
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.
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.

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

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
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 .
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
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
36
Formulaire de commentaire
Pour ajouter un commentaire a un article. Cette Option est disponible pour les membres et les visiteurs
37
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 .
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
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 .
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
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, ....)
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
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)
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
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
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
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.
48

Rapport Stage

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport Stage

Transféré par

Droits d'auteur :

Formats disponibles

Table des matires

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

Liste des figures

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

Nous Vous remercions tous

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

Introduction Prsentation de 212 COMMUNICATION Les taches ralises Objectifs du projet

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

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

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

Design & Print

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

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

Les tches que nous avons ralis

Dtermination des mots cls

Optimisation du contenu de vos pages

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

Amlioration de la popularit de vos pages

Suivi de votre positionnement

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

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

projet ainsi que les modles de sa conception.

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

Rdaction de la charte graphique

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

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

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

Dictionnaire des donnes

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

text text date time text numro text numro

text text text text numro

numro numro date numro

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

numro text text text text date numro

F IG UR E 1: DICTIONNAIRE DES DONNEES

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

Modle conceptuel de donnes (MCD)

F IG UR E 2 : M ODELE CONCEPTUEL DE DONNEES

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

Modle Logique de donnes (MLD)

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

UML se dcompose en plusieurs sous-ensembles

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

Diagramme des cas dutilisation

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

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

Diagramme des cas dutilisation de visiteur

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

Digramme de squence systme 1 visiteur : inscription et contact

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

2 Adhrent : Ajouter un article

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

Diagramme des cas de classe

DES CA S DE CLA SSE

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

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

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

Feuilles de style en cascade (CSS)

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

Ce chapitre prsente dveloppement et dinterfaces ralises.

les outils de un ensemble

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