Enseignant responsable: Patrick Lebgue Tuteur de stage: Farida Mostefaoui
Rapport de Stage Cration dun site internet pour CrdoSant (www.credosante.com)
Par Anthony Halipr
Stage de fin dtudes du DUT informatique Du 1 er avril au 30 juin 2010
Remerciements Je tiens remercier tout particulirement et tmoigner toute ma reconnaissance aux personnes suivantes, pour lexprience enrichissante et pleine dintrt quelles mont fait vivre pendant 3 mois au sein de Valleyfield. Tout dabord, toute lquipe pdagogique de lIUT de Lille A qui ma donn les connaissances (aussi bien techniques que gnrales) qui mont permises deffectuer ce stage ltranger. Cathy Robertson et Gilles Duchesne pour mavoir accueilli au sein de leur entreprise, de mavoir fait confiance pour la ralisation de leur site internet ainsi que pour leur sympathie de tous les jours. Patrick Lebgue mon responsable de stage tant pour son implication que pour son suivi rgulier lors de mon sjour, sans qui je naurais pas pu vivre cette exprience. Farida Mostefaoui pour son accueil, sa gentillesse, son encadrement et ses conseils durant ces trois mois de stage. Et pour finir le service des relations internationales, pour mavoir aid effectuer les dmarches administratives ncessaires mon dpart.
Rsum Dans le cadre de mes tudes et pour finaliser ma formation lIUT, jai d effectuer un stage de trois mois en entreprise. Jai eu la chance de leffectuer ltranger et de le faire au Qubec, plus prcisment Valleyfield. Pour le raliser, jai d mettre en application toutes les notions vues durant ces deux annes de formation. Jai d aussi apprendre de nouveaux langages comme le PHP, JavaScript, Ajax ainsi que lutilisation de la librairie JQuery. Le sujet de ce stage consistait la cration dun site web pour une nouvelle socit appele CrdoSant. Le plus grand intrt de ce stage a t pour moi quaucune partie du projet nait t faite avant mon arrive. Que ce soit la partie danalyse et rflexion avec le client, la conception, le dbogage, la maintenance et le design du site. De plus, ce dernier tait srement laspect le plus important pour mes employeurs. Cest pourquoi il a t ncessaire de me spcialiser en CSS et dapprendre quelques rudiments en imagerie numrique (notion de transparence, compression et dgrads d'images etc). Ce stage ma donc permis daffirmer ma personnalit, de me donner de la prestance et de lassurance ainsi que de dcouvrir le monde de lentreprise. De plus, jai dcouvert un pays magnifique, une culture et une mentalit diffrente.
Abstract As part of my studies and to complete my training at the IUT, I had to do a three months internship in business. I was lucky enough to do it abroad and in Valleyfield, Quebec.
To be able to achieve this, I had to apply all the knowledge covered during the last two years of training. I also had to learn new concepts such as the PHP, JavaScript, Ajax and learn the use of the library JQuery.
The subject of this internship consisted in the creation of a website for a new society named CrdoSant. The biggest interest for me was that no parts of this project were done before my arrival. Whether it was the analysis and reflection with the client part, the conception, the debugging, the maintenance or the design of the site.
The design of the website was probably the most important aspect for my employers. Which is why it was necessary that I specialize myself in CSS and that I learn a few basics in digital imaging (notion of transparency, compression and degraded images, etc.). This internship has allowed me to assert my personality, gain great poise and confidence and discover the business world. I also discovered a magnificent country and a different culture and mentality. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 1 Table des matires
Introduction ........................................................................................................................................... 4 Partie 1 Lentreprise ............................................................................................................................ 5 La fiche didentit de lentreprise....................................................................................................... 5 Prsentation de mes employeurs ....................................................................................................... 6 La naissance de lentreprise ............................................................................................................... 7 Lorigine du patronyme de lentreprise .............................................................................................. 8 Le logo de lentreprise ........................................................................................................................ 8 Les objectifs de lentreprise ............................................................................................................... 9 Les projets davenir pour lentreprise .............................................................................................. 10 Les espoirs de lentreprise ................................................................................................................ 10 La ncessit dengager un stagiaire .................................................................................................. 10 Lavis de mes employeurs ................................................................................................................ 12 Partie 2 Analyse et rflexion .............................................................................................................. 12 Un dbut difficile .............................................................................................................................. 12 Les contraintes du projet ................................................................................................................. 13 Une remise niveau ......................................................................................................................... 14 Le nom de domaine et lhbergeur .................................................................................................. 14 Le choix des outils ............................................................................................................................ 15 Le choix du design ............................................................................................................................ 16 Le choix des mots cls ...................................................................................................................... 17 La formation dans de nouveaux langages ........................................................................................ 18 Partie 3 Le droulement du projet .................................................................................................... 19 De nombreuses runions ................................................................................................................. 20 Cration dun site temporaire .......................................................................................................... 21 Cration des formulaires .................................................................................................................. 21 Cration du design pattern............................................................................................................... 22 Cration de la Base de Donnes ....................................................................................................... 23 Dveloppement du design ............................................................................................................... 25 Cration de scripts JavaScript, Ajax et JQuery .................................................................................. 26 Les coins arrondis ......................................................................................................................... 27 Application aux formulaires ......................................................................................................... 27 Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 2 Visualisation dimages .................................................................................................................. 28 La localisation et Google Map ...................................................................................................... 28 Les menus droulants .................................................................................................................. 28 Mise en place des pages statiques du site ........................................................................................ 29 Dveloppement des fonctionnalits ................................................................................................ 29 Cration de mails personnaliss ....................................................................................................... 30 Correction des failles de scurit (un niveau technique est conseill) ........................................... 31 1 re faille : les mots de passe ...................................................................................................... 32 2 re faille : la modification dURL ................................................................................................ 32 3 me faille : linjection de code PHP ou JavaScript...................................................................... 33 4me faille : linjection dans la base de donnes ......................................................................... 33 Dbogage ......................................................................................................................................... 34 Mise en place de commentaires dans le code source ...................................................................... 34 Cration dune documentation pour mes employeurs .................................................................... 34 Cration de longlet du site .............................................................................................................. 34 Mise en ligne .................................................................................................................................... 35 Maintenance et prvisions ............................................................................................................... 35 Partie 4 Les fonctionnalits ............................................................................................................... 36 Le formulaire Nous Joindre ......................................................................................................... 36 Consulter les news du site ................................................................................................................ 37 Le module dinscription .................................................................................................................... 38 Le formulaire dinscription ........................................................................................................... 38 Envoi du mail et activation du compte ......................................................................................... 38 Rcuprer son mot de passe ........................................................................................................ 39 Se connecter..................................................................................................................................... 41 Test ............................................................................................................................................... 42 Lespace membre ............................................................................................................................. 42 Les confrences ............................................................................................................................ 43 Sinscrire la newsletter .............................................................................................................. 44 Donner son avis sur le livre dor ................................................................................................... 45 Changer ses informations personnelles........................................................................................ 45 Cration de sessions (comptences techniques requises) ......................................................... 46 Dconnexion ................................................................................................................................ 46 Lespace dadministration ................................................................................................................ 47 Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 3 Gestion des membres ................................................................................................................... 48 Gestion de la phrase dfilante ...................................................................................................... 49 Gestion des confrences .............................................................................................................. 49 Envoyer une newsletter ............................................................................................................... 51 Gestion du livre dor ..................................................................................................................... 52 Gestion des news du site .............................................................................................................. 53 Gestion de la zone dadministration ............................................................................................. 53 Les protections mises en place ..................................................................................................... 53 Conclusion ............................................................................................................................................ 55 Annexes ................................................................................................................................................ 56 Code source de la gnration automatique du lien dactivation de compte ................................ 56 Code source qui permet la cration de sessions .......................................................................... 56 Code source qui contrle lexistence des sessions ....................................................................... 56 Code source qui permet la destruction des sessions .................................................................... 56 Code source qui permet denvoyer une newsletter tous les utilisateurs................................... 57 Lexique ................................................................................................................................................. 59 Rfrences ........................................................................................................................................... 61
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 4 Pour la bonne comprhension du rapport, un lexique est inclus la fin. Il peut tre utile si vous ne connaissez pas la dfinition certains mots, notamment ceux lis linformatique et au milieu de la sant. Introduction
A la fin de ma seconde anne de DUT informatique lIUT, jai t amen effectuer un stage du 1 er Avril au 30 Juin. Le but de ce dernier tait de valider les comptences acquises au cours de cette formation. Ce stage jai choisi de le faire au Qubec (dans la ville de Valleyfield), rapport ma passion pour les voyages, la proximit de ma famille vivant dans cette rgion, dans la perspective dune poursuite dtudes et pour profiter de limmense chance que mon tablissement mait offerte. Particulirement intress par la programmation web : on ma donn le privilge dapprofondir mes connaissances dans les langages spcifiques ce domaine (HTML, CSS, PHP, JavaScript etc), ainsi que de concevoir un projet de son commencement sa finalisation (pour respecter mon souhait de devenir chef de projet). Jai donc eu pour mission de crer un site internet pour CrdoSant (entreprise lie au domaine de la sant), une nouvelle entreprise. Dans le but de la dvelopper, ils ont eu lide davoir leur propre site. Cependant, ds la premire semaine je me suis rendu compte que mes employeurs (Cathy Robertson et Gilles Duchesne) navaient aucune ide du contenu de leur futur site web, ni de ce quils pouvaient prtendre avoir la fin de ces trois mois. Cest pourquoi la plus grande difficult de ce projet ntait pas dans sa conception, mais bien dans tous ses aspects. En effet, jai eu la chance de pouvoir crer ce site de A Z : de la partie danalyse sa conception, en passant par la phase de dbogage et le problme de sa maintenance informatique. En autre, il a fallu que je les guides suffisamment pour quils sachent quel domaine choisir, lhbergeur de leur site, son contenu, sa base de donnes, son design, ses fonctionnalits, son espace membre et dadministration. Jai aussi d prvoir qui maintiendrait et poursuivrait le site aprs mon dpart. Le but de ce rapport est donc de vous prsenter comment jai rsolu ces diverses problmatiques, tout en respectant les besoins et souhaits de mes employeurs. Je commencerai donc par vous exposer lentreprise o jai eu la chance dtre accueilli (CrdoSant). Ensuite, je mettrais en vidence lanalyse du projet cest--dire toute la Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 5 rflexion quil y a eu autour du site internet. En troisime partie, je vous expliquerais le droulement du projet en en dtaillant particulirement deux. Celle danalyse (deuxime partie) ou plutt de rflexion avec lemployeur. Et pour ensuite finir mon rapport sur la partie la plus technique, celle o je vous prsenterais les fonctionnalits du site.
Partie 1 Lentreprise
Cette partie a pour but de vous familiariser avec mon espace de travail, ainsi quavec lentreprise dont jai eu la chance de travailler.
La fiche didentit de lentreprise - Nom : CrdoSant - Statut : SNC (Socit en Nom Collectif) - Chiffre daffaire : confidentiel - Adresse : 60 rue du March Salaberry-de-Valleyfield Qubec, J6T 1P4 - Tlphone : (514) 299-9229 - Fax : (450) 373-8934 - Courriel : credosante@yahoo.ca - Site Internet : http://www.credosante.com
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 6 Prsentation de mes employeurs
Cathy Robertson Gilles Duchesne
- Mme Robertson est diplme de lUniversit McGill Montral, qui est luniversit la plus rpute au Canada.
Elle est ergothrapeute spcialise en radaptation physique adulte et a acquis des expriences diversifies dans diffrents secteurs de la sant que ce soit en centre de radaptation, centre de soin de longue dure ou dans le secteur priv.
Elle uvre au sein dun CSSS comme clinicienne depuis 1996 et intervient auprs dune clientle atteinte dAVC (accident vasculaire crbral) et de maladies neurodgnratives. Elle est initiatrice du programme de dysphagie, du programme de prventions de chutes dans son tablissement et a particip activement louverture dune clinique de radaptation au CSSS du Surot.
Depuis 2003, elle est propritaire dAutoergo, une clinique prive spcialise en valuation de la conduite automobile et adaptation de vhicule. Elle est galement co-fondateur de CrdoSant.
Elle est trs implique dans divers champs dactivits relis au rseau de la sant et a donn plusieurs formations et confrences dans le domaine.
- Quant M. Duchesne, il possde une matrise en science de la sant de lUniversit Laurentienne en Ontario. Il est galement diplm en anthropologie et dans les sciences du langage, il a galement acquis de lexprience en recherche dans deux universits.
Il travaille comme orthophoniste et est spcialis dans les troubles acquis de la communication humaine chez ladulte.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 7 Il est lemploi dun CSSS depuis 2000 et uvre comme clinicien dans les diffrents milieux tels que centre de radaptation, CLSC, hpitaux et est lun des rares orthophonistes au Qubec travailler dans des centres de soin de longue dure.
Monsieur Duchesne est galement co-fondateur du programme interdisciplinaire de dysphagie du CSSS du Surot et aussi le co-fondateur de CrdoSant. Il a enseign plusieurs formations cliniques auprs dtudiants et intervenants du secteur de la sant et a donn plusieurs confrences sur les troubles de communication et de dglutition.
Il est galement trs impliqu dans divers champs dactivits relis au rseau de la sant.
- Ces deux professionnels de la sant cumulent prs de 25 annes dexprience dans le secteur de la sant publique (milieu hospitalier, centre de radaptation, centre de soins de longue dure, centre de dficience physiques et intellectuelles, milieu communautaire, milieu scolaire, etc.) et dans le secteur priv.
Ce sont des cliniciens spcialiss dans lvaluation, le diagnostic, le dpistage et le traitement des troubles neurologiques secondaires aux accidents vasculaires crbraux (AVC), aux tumeurs crbrales et/ou secondaires aux maladies neurodgnratives dont les plus connues du public sont les dmences de type Alzheimer, sclrose en plaque, maladie de Parkinson, pour nen nommer que quelques-unes.
Ils sintressent aussi normment aux technologies actuelles et croient fortement lapport de celles-ci au service des personnes devant vivre avec des dficits physiques, cognitifs et linguistiques.
- Actuellement, ils concentrent toute leur nergie dvelopper leur toute nouvelle entreprise
La naissance de lentreprise Cest dans le milieu des annes 90 que les premiers jets dun nouveau concept clinique furent labors. Mais ce nest quen 2002 que les premires discussions srieuses entre les deux fondateurs ont eu lieu. Cest en 2009 que ce projet commence se concrtiser.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 8 En 2010, fort de leurs expriences cliniques diversifies auprs des personnes atteintes de dficits physiques, linguistiques et cognitifs, Madame Cathy Robertson et Monsieur Gilles Duchesne dcidrent de mettre en commun leurs nombreuses ides innovatrices et de fonder la socit en nom collectif, CrdoSant.
Lentreprise a donc t officiellement fonde en 2010 par Mme Cathy Robertson et M. Gilles Duchesne. Ce sont galement ces derniers qui en sont les copropritaires et qui en assurent la pleine gestion.
Lorigine du patronyme de lentreprise CrdoSant est en fait un mot compos qui en regroupe deux : Crdo et Sant . - Dans la langue latine le mot credo signifie je crois . Il a donc t choisi, car mes employeurs croient en un avenir meilleur en sant, ainsi quen lespce humaine et sa capacit samliorer. - Et le deuxime mot en rfrence avec leur secteur dactivit, comme vous pouvez vous en douter. La combinaison de ces deux mots marque donc la conviction que mes employeurs ont en leur domaine et aux bienfaits quils peuvent le lui apporter. De plus, chacune des lettres a un lien avec leur socit. Par exemple : Cration d'un Documentaire (AVC) Cathy Robertson Ergothrapeute Gilles Duchesne Orthophoniste Confrences Ralisations Ergothrapie Documentaires Orthophonie Etc.
Le logo de lentreprise
Le logo de lentreprise reprsente clairement la philosophie emprunte par mes employeurs. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 9 - En premier lieu, nous avons bien entendu le nom de lentreprise (o son origine vous a t explique ci-dessus). - Puis le fond blanc o le logo est positionn (ici, non rellement visible cause de la transparence de notre image), qui est en contraste avec la couleur noire des mots. La premire couleur reprsente la gurison, tandis que la seconde reprsente le traumatisme qua vcu le patient tel quun AVC. - Ensuite nous avons les mots INNOVER DIFFUSER AIDER qui se rvlent tre le slogan de lentreprise, ou plutt ses objectifs (que je vous expliquerais juste aprs). - Mais surtout, nous avons le soleil orange qui non seulement reprend le symbole de la carte dassurance maladie qubcoise (pour faire un apart). Il est surtout la reprsentation de la renaissance cest--dire la nouvelle vie qui attend le patient aprs son accident.
Les objectifs de lentreprise CrdoSant est un regroupement de professionnels de la sant qui sest donn trois objectifs : INNOVER CrdoSant travaille sur diffrents projets relis au secteur de la sant qui visent amliorer la qualit des services offerts la personne vivant une situation de handicap afin quelle puisse jouir dune autonomie maximale dans son milieu de vie, au quotidien.
DIFFUSER CrdoSant dsire sensibiliser et informer la population sur divers problmes relis au monde de la sant en utilisant diffrents mdiums. Par exemple : documentaires, capsules vidos, publications diverses, internet, confrences etc.
AIDER CrdoSant offre des services accessibles et rapides de consultation et de radaptation en ergothrapie et en orthophonie partout travers le Qubec, via sa clinique Ortho Ergo Mobile et son service de tl-radaptation.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 10 Les projets davenir pour lentreprise
CredoSant travaille actuellement sur des projets dont la plupart sont relis la recherche et au dveloppement. Par exemples, lquipe tudie actuellement la possibilit de crer un nouveau test dvaluation de langage fonctionnel permettant une perception plus juste et plus globale des diffrentes capacits et incapacits des personnes atteintes de troubles de communication et de troubles perceptivo-cognitifs associs. Lquipe tudie galement la possibilit de dvelopper un logiciel de radaptation cognitive et du langage.
Dautres projets, permettant dassurer une meilleure qualit de vie aux personnes vivant avec des atteintes neurologiques, sont galement ltude. ventuellement, CrdoSant dsire mme offrir ses services une clientle adolescente et pdiatrique.
Lentreprise dsire poursuivre sa mission ducative en agissant comme consultant dans le tournage de capsules vido informatives relies lAVC. Ces capsules auront pour but dinformer la population sur les diffrentes squelles que peuvent causer les AVC et traiteront aussi de la prvention et des enjeux psychosociaux.
Les espoirs de lentreprise Comme toutes petites et moyennes entreprises qui dbutent, les espoirs sont grands et ambitieux. CrdoSant aimerait crer des partenariats avec les institutions publiques (Centre de radaptation, CHSLD, etc.) qui permettront doffrir la population des services de sant rapides et de qualit sur tout le territoire qubcois. Afin daider financirement, via sa future Fondation, les personnes crbrolses qui dsirent recevoir des traitements en radaptation mais qui ny ont pas toujours accs et aimerait offrir davantage de support aux aidants naturels. Enfin, CredoSant croit que chaque personne vivant une situation de handicap a le droit dobtenir des services de sant de qualit et leur quipe de professionnels est l pour y veiller.
La ncessit dengager un stagiaire CrdoSant est une trs jeune entreprise qui comme toutes les PME (petite et moyennes Entreprises) qui dmarrent, a un budget rduit. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 11
Malgr toutes les possibilits demprunts existantes, les fondateurs ont dcid de puiser dans leurs propres conomies vitant ainsi les prts bancaires coteux en intrts et les subventions gouvernementales.
Lembauche dun informaticien comptent savrait toutefois essentielle pour la conception dun site web, et pour le dveloppement de leurs futurs autres projets.
Les fondateurs se sont donc tourns vers le Collge de Valleyfield afin den savoir un peu plus sur les possibilits dobtenir les services dun stagiaire chevronn.
Les responsables de stage du collge se sont immdiatement tourns vers les stagiaires europens dont notre rputation nest semble-t-il plus faire.
En plus de cela, mes employeurs recherchaient un stagiaire qui possdait des qualits bien spcifiques :
Autonomie Gestion Capacit effectuer de la recherche Grande capacit danalyse Cratif Capacit vulgariser linformation Conseiller Passionn Travailleur Srieux Flexible Sociable Capacit bien sintgrer Patient Perfectionniste et consciencieux
En somme, un stagiaire capable daccomplir une tche de professionnel.
Le collge de Valleyfield leur a alors recommand ma candidature, puisque javais lors de ma demande de stage dmontr un rel intrt pour le dveloppement web, et la cration pas pas dun projet dans son ensemble (dans le but de me donner un avant-got du mtier de chef de projet). Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 12 Lavis de mes employeurs M. Anthony HALIPR a fait preuve dun professionnalisme et dune maturit exemplaire dans des conditions qui nont pas toujours t faciles. Il possde toutes les qualits que lon recherche chez un stagiaire, et mme plus.
En effet, les exigences du stage ont largement t dpasses puisquil a t impliqu tous les niveaux de dveloppement. Il a conu le site web de A Z incluant la recherche, lanalyse, la rsolution de problmes, le design ainsi que la rdaction des pages web.
Tout au long du processus, Anthony a aussi bien agi comme conseiller quexcellent pdagogue. Il sest par ailleurs offert pour procder lentretien rgulier de notre site car pour lui, la satisfaction du client est primordial.
Il va sen dire que nous navons jamais regrett notre choix et que le produit fini correspond tout fait ce que nous voulons.
Nous aurons besoin de quelquun comme Anthony dans le futur pour bien mener terme tous nos projets.
Cathy Robertson et Gilles Duchesne
Partie 2 Analyse et rflexion
Cette partie va tenter de tmoigner de toute la partie danalyse et de rflexion quil y a eu autour du projet.
Un dbut difficile
Concrtement lIUT, nous tions toujours sous la tutelle dun professeur qui nous guidait pas pas dans nos travaux. Et jamais nous avions t amens nous questionner sur : Comment dbuter et organiser un projet ? . Et cest en arrivant Valleyfield que jai expriment pour la toute premire fois ce genre de situation. En effet, il a fallu non seulement madapter un nouveau pays, mais aussi un nouvel environnement de travail. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 13 Lors de ma premire rencontre avec mes employeurs, je me suis rendu compte quils ne savaient pas ce quils voulaient ni ce quils pouvaient avoir. Jai donc tent de leur expliquer comment le projet se droulerait, et de savoir ce quils savaient de la ralisation dun site internet. De plus, il sagissait de leur premire exprience avec un informaticien. Ils navaient jamais entendu parler dalgorithmie, de base de donnes, de feuille de style ou danalyse. Cest pourquoi, le dbut du projet aurait pu sembler assez droutant. Mais au final jai juste eu prendre en considration que je raliserai ce projet de A Z (analyse, base de donnes, conception de fonctionnalits, rdaction de pages webs, dbogage etc), et les rassurer que tout cela se passerait bien.
Les contraintes du projet
Il a t primordial de les dfinir ds la premire semaine. En effet, comme le projet navait aucune base, les contraintes taient essentielles pour cerner ce que mes clients attendaient de mon travail et de leur site internet.
Les voici : Le site devait tre simple dutilisation, que ce soit dans ses fonctionnalits ou dans son contenu. tre assez complet pour faciliter la communication entre mes employeurs et leurs clients (crations de formulaires, envoi de mails). Un design professionnel : il doit tre suffisamment attrayant, interactif et intressant pour donner lutilisateur lenvie daccder lespace membre.
Cette dernire contrainte a srement t la plus difficile satisfaire, dans le sens o elle dpendait des gots de chacun. Il semble impensable de trouver un design qui satisferait les milliers dinternautes venir. De plus, nous avons eu trs peu de cours l'IUT concernant la cration dun tel design. En effet, mis part quelques heures de rseau en premire anne, le CSS na jamais t un langage que nous avons pouss dans ses retranchements.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 14 Une remise niveau
Cest pourquoi, une remise niveau en CSS a t ncessaire ou plutt une spcialisation dans ce langage. En effet, je ne connaissais plus vraiment les fonctions (ou balises) ncessaires ce que mes employeurs demandaient. Par consquent jai consacr les premiers jours en la spcialisation de ces deux langages, grce une remise niveau et la ralisation de diffrents Travaux Pratiques (ceux raliss lIUT). Je savais aussi dors et dj que le site aurait besoin plus tard dune base de donnes, et donc linteraction avec cette dernire serait ncessaire. Jen ai donc profit pour me remettre niveau en SQL, en mme temps quen HTML et CSS.
Le nom de domaine et lhbergeur En attendant la fin de ma remise niveau, jai tout de suite runi mes employeurs. Le but tait non seulement de ne pas perdre de temps, mais aussi de savoir sils avaient quand mme pens rserver un nom de domaine ainsi quun hbergeur. Et comme quils ne savaient pas la raison de telles dispositions, je me suis charg de le leur expliquer. En leur disant que le nom de domaine reprsente lURL qui leur permettra daccder leur site. Et lhbergeur celui qui aura pour vocation de mettre la disposition des internautes le contenu de leur site web et ses fonctionnalits, que je leur aurais conu.
- Choisir leur nom de domaine a t pour moi assez intuitif, puisque personne nen avait pris ni rserv un au nom de CrdoSant, do laccord de mes employeurs ce que leur site aie pour URL : www.credosante.com .
- Pour ce qui est de lhbergeur, cela a t plus compliqu. Je navais dj quune vague ide de ce que proposaient les hbergeurs franais, et aucune concernant ceux de ce pays. Cest pourquoi avant de leur proposer le plus adapt, jai d faire une tude sur les hbergeurs qubcois en essayant de trouver celui qui leur serait le moins cher, et qui propose en mme temps le plus de fonctionnalits. Jai choisi HostPapa , car il tait le moins cher et proposait en mme temps le plus de fonctionnalits. Notamment pour sa taille de stockage et lenvoi de mails illimit, puisquils comptaient hberger des vidos et envoyer des mails leurs clients. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 15
Jai vraiment normment de chance que mes employeurs maient autant fait confiance, en effet ils auraient pu mimposer davantages de contraintes, ou ne pas comprendre pourquoi jai choisi cet hbergeur et non un autre.
Le choix des outils Au vue de la tche qui mattendait et dans le but de toujours gagner du temps : il tait indispensable que je choisisse les bons outils. Pour ce qui est de la rdaction du code source, jai choisi Notepad . Et mme si bloc-notes aurait suffi comme diteur de texte, Notepad est celui que jai toujours utilis depuis mes dbuts en programmation.
PhpMyAdmin comme SGBD dans lespoir que mes employeurs puissent autogrer (faire des sauvegardes, consulter les donnes) leur propre base de donnes. En effet, ce SGBD est le plus simple dutilisation ( cause de sa trs bonne interface graphique) et ne ncessite aucune ligne de commande (sauf dans le cas o on doit faire des choses plus techniques en SQL, comme des jointures internes ou externes).
FileZilla comme FTP, cest un logiciel qui me permettra denvoyer lhbergeur le travail que jai dvelopp en interne (sur mon ordinateur). Et donc de rendre visible mes employeurs et aux internautes lavance du projet.
FileZilla (le FTP utilis)
Wamp qui est le logiciel qui ma permis de dvelopper le site en local (sur mon ordinateur), et de tester les fonctionnalits de ce dernier. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 16
Et je me suis souvent questionn sur lutilisation dun CMS comme Drupal ou Joomla . Un CMS est un logiciel qui permet de crer des sites. Cependant et avec confirmation de ma tutrice : ce choix a t rejet, car ce genre de logiciel propose des sites prfabriqus et avec peu de fonctionnalits. De plus, il est trs dur pour linformaticien de reprendre le travail existant, car il na pas le code source dj mis en place. Il est aussi plus intressant pour lemployeur davoir son propre site, avec les fonctionnalits quil souhaite plutt qutre contraint utiliser seulement celles proposes par un logiciel.
Le choix du design Concernant le design du site, cela a t la plus grosse contrarit du projet. En effet, il est bon de souligner la diffrence de points de vue entre limportance que lutilisateur y attache et celle de linformaticien. - Pour lutilisateur, laspect du site est ce quil voit en premier et cest en ralit la seule chose quil voit rellement. En effet, il na pas conscience des rouages des sites ou de ce quil se passe en coulisse (la rflexion quil y a eu derrire avec le client, de quelle faon sont codes les fonctionnalits, les actions de lutilisateur et les rpercussions sur la base de donnes).
Cest pourquoi le design est srement la chose la plus importante pour lutilisateur.
- Pour linformaticien, le design reprsente ce qui est fait en dernier et par consquent srement la chose la moins importante ses yeux. Pour la simple et bonne raison que pour lui, les fonctionnalits de son site sont primordiales. Il prfre passer du temps en implmenter de nouvelles, ainsi que de tester leur fiabilit plutt que d amliorer laspect visuel du site.
Dailleurs ce nest mme pas de son devoir puisque le graphiste (ou web designer) est spcialis dans ce domaine.
Il y a donc une relle diffrence entre les priorits du client (le design), et celles de linformaticien (les fonctionnalits). Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 17 Cest ce qui sest pass pour mon projet. En effet, mes employeurs attachaient plus dimportance au rendu de mon travail qu ses fonctionnalits. Il a donc fallu trouver un compromis entre les fonctionnalits et le design. Malheureusement, cela a t plus compliqu que prvu et le projet a pris normment de retard, car mes employeurs voulaient sans cesse amliorer le rendu de leur site. Pour maider, javais pens utiliser un Template (un design dj fabriqu et comme je fais dhabitude), mais ils souhaitaient vraiment avoir leur propre design et non un quon retrouverait sur dautres sites. Cest pourquoi et mme si cela ntait pas de mon champ dapplication (et que jaurais pu faire un design simple comme mettre une unique couleur en fond dcran). Jai choisi de madapter, et me spcialiser dans le CSS ainsi quacqurir par moi-mme des comptences en imagerie numrique (notion de transparence, compression et dgrads dimages, cration de bannires etc).
Le choix des mots cls Dans le but de rfrencer au mieux les pages webs de leur site internet sur les moteurs de recherche (Google, Bing, Yahoo etc.), et de leur viter de frais inutiles : je me suis occup moi-mme de leur rfrencement. En effet, grce mon expos de Droit au dernier semestre (qui tait justement sur ce sujet), jai pu acqurir les connaissances ncessaires pour les aider au mieux. Concrtement, rfrencer son site internet rpond deux objectifs : Cela consiste tre reprable sur Internet et dtre trouv par linternaute lors dune recherche sur un moteur de recherche plus le rfrencement est efficace, plus le site apparat dans les premires pages de recherches. Cela a pour but daugmenter la frquentation du site, cest--dire le nombre dinternautes qui visitent notre site cela est essentiel pour que CrdoSant puisse se faire connaitre et avoir une nouvelle clientle.
Pour atteindre ces objectifs, cela est trs simple : il suffit de dterminer les bons mots cls, qui reprsentent au mieux le site. Cependant, il faut faire attention ne pas en utiliser des termes trop gnraux (comme chocolat, voiture, homme etc.), cela est interdit. Il ne faut pas non plus utiliser des mots cls trop aguicheur (cette pratique a dj t punie par la loi). Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 18 Pour un bon rfrencement, nous (mes employeurs et moi) avons donc rflchi aux mots cls qui conviendraient au mieux leur site, pour les intgrer dans chacune de leurs pages internet. En voici quelques exemples : - Crdosant - Cathy Robertson - Gilles Duchesne - Ergothrapie - Orthophonie - Etc.
Jai aussi enregistr leur site sur plusieurs moteurs de recherche, comme : - Google - Bing - Yahoo - Lycos - Etc.
Le problme est que rfrencer un site internet est un travail part entire, et de tous les jours (de nouveaux sites et leur rfrencement se font enregistrer de jour en jour). Cest pourquoi rfrencer un site internet prend du temps. De plus, mme si le leur est actuellement de trs bonne qualit, peut-tre serait-il ncessaire dengager un spcialiste du rfrencement afin de permettre au site de maintenir sa place sur internet ou daugmenter sa popularit.
La formation dans de nouveaux langages Aprs mtre remis niveau en HTML, en SQL et en CSS : il a t ncessaire de me former en dautres langages. Gnralement, un site internet comporte gnralement deux parties : lune statique et lautre dynamique.
- Pour ce qui est de la premire partie, cela concerne tout ce qui est visible par lutilisateur et qui ne bougera pas : les pages web, les formulaires, le design du site etc. Concrtement, tout ce qui relve du HTML. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 19 - Pour la deuxime partie, cest tout ce qui concerne les interactions avec lutilisateur cest--dire les rpercussions produises lorsque lutilisateur fait quelque chose (saisie dune donne, envoi dun formulaire, se connecte lespace membre etc.).
Cest pourquoi il a t ncessaire dapprendre les langages de programmation qui mont permis de grer ces interactions.
- Le PHP, qui est un langage interprt (un langage avec des scripts), excut du ct serveur (lutilisateur na donc pas accs au code source utilis). Il ma permis de grer les failles de scurit et les informations envoyes par lutilisateur en utilisant des procds dalgorithmie basique (boucles, conditions, fonctions etc.).
- Le JavaScript, qui lui est un langage ct client (donc dangereux puisquil sexcute sur larchitecture de linternaute). Je men suis servi pour amliorer laspect graphique du site rappelons que le design est primordial pour mes employeurs. Il a t assez compliqu apprendre, cause de sa syntaxe (qui dpend dun navigateur un autre), lutilisation du DOM et la faon dont on lapplique. De plus, il faut grer le cas de nombreux paramtres : la version JavaScript de lutilisateur et son navigateur (Internet Explorer / Firefox). - LAjax qui grce son mode asynchrone qui est une autre faon dimplmenter avec JavaScript. Cela ma permis encore une fois damliorer laspect graphique du site, et de rendre certaines fonctionnalits plus performante. - Le JQuery, qui est une librairie JavaScript pour permettre au site davoir une meilleure qualit graphique, notamment pour ce qui est des menus droulants, du menu de gauche et la zone dadministration.
Partie 3 Le droulement du projet
La troisime et avant dernire partie va vous expliquer pas pas comment le projet sest ensuite droul. Concrtement, le projet a suivi un droulement normal. En programmation cela veut dire analyse cration du design conception dbogage mise en ligne maintenance. Comme il ny avait ni analyste, ni designer, ni chef de projet, ni personne pour me venir en aide : jai d moccuper de chacun de ces rles. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 20 Cela a pour norme avantage de mavoir donn une vision relle de comment sest vraiment droul un projet : de A Z.
NB : les sous-titres sont disposs de telle sorte quils reprsentent un ordre chronologique (du moins rcent au plus rcent).
De nombreuses runions Le fait que je sois seul sur ce projet a engendr diverses difficults. Notamment lorsque javais un problme technique : panne dhbergeur, problme darchitecture matrielle et de comment coder telle fonctionnalit. En effet, jai d tre suffisamment autodidacte, responsable et tre assez mature pour outrepasser ces difficults. Pour y remdier, jai notamment trouv comme solution deffectuer de nombreuses runions entre mes employeurs et moi (une de plusieurs heures chaque matin). Je profitais aussi de ces runions pour leur donner une vision relle de la cration de leur site en leur expliquant avec des termes assez techniques mais connu de chaque informaticien. Comme par exemple : SGBD, base de donnes (identifiants/cls primaires), FTP, Template ainsi que de nombreuses notions danalyse (MCD/MLD). Cela avait pour but dagir la fois en pdagogue, mais aussi de leur faire comprendre tous les aspects (visible ou non) de leur site et de le crer pas pas. En effet, un site ne se rsume pas sa partie visible mais derrire lui : il y a une base de donnes, la conception des fonctionnalits, la cration des dgrads et autre. Cest pourquoi trs vite, le travail a avanc rapidement avec toutes les runions : nous tions tous les trois en train de rflchir, et poser sur papier, ce quils voulaient dans leur site (fonctionnalits, emplacement des paragraphes, pages web etc.). De plus, comme je lai dj stipul : ils ne savaient pas vraiment ce quils voulaient. Cest pourquoi je leur ai fait profiter de mon exprience, et leur ai propos mes propres ides (cration dun espace membre, livre dor, newsletter, gestionnaire de fichiers, zone dadministration).
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 21 Cration dun site temporaire Dans lattente du site final et comme le nom de domaine tait dj rserv, jai dcid que durant sa conception : un site temporaire serait mis en place. Il avait pour but de prvenir linternaute quun site tait actuellement en construction. En effet, mes employeurs avaient beaucoup de demande pour savoir si oui ou non ils avaient un site internet. Lutilisateur tait curieux den apprendre davantage sur cette nouvelle entreprise et leurs tarifs.
Le site provisoire en attendant que le projet soit termin
Cration des formulaires Aprs avoir cr le design pattern, jai dvelopp les formulaires que les utilisateurs rempliraient lors de leur inscription, lorsquils chercheront joindre mes tuteurs ou sinscrire une confrence. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 22
Exemple de formulaires
Cration du design pattern Cest en dveloppant le projet en interne (sur mon ordinateur), que jai ralis que certaines portions du code source taient redondantes. En effet, une page web a toujours la mme structure laide de blocks (utilisation de la proprit <div>).
On a en gnral au moins 4 blocks : En haut, l'en-tte (aussi appel "header") : il contient en gnral le titre de votre site, sous forme de bannire. En-dessous, vous avez la partie principale de votre page avec : A gauche ou droite, le menu. De l'autre ct, le corps de la page, c'est--dire la partie qui contiendra le texte de votre site. Enfin, on met en gnral en bas un "pied de page" (aussi appel "footer").
Jai donc procd de la mme faon pour mon site.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 23
Le site et son design pattern En effet, le site a la mme conception quon a vue ci-dessus. Lintrt de procder ainsi est que seule la partie centrale du site (le content ) varie dune page lautre, cest pourquoi de page en page on inclue toujours la mme entte, le mme menu et pied de page. Cela vite de devoir limplmenter nouveau (puisque cela se fait automatiquement), et un gain de temps considrable.
Cration de la Base de Donnes En vue de toutes ces fonctionnalits et des formulaires implments, il a t ncessaire de mettre en place une base de donnes. En effet, une donne saisie par lutilisateur na de lintrt que si elle peut tre exploite aprs son enregistrement dans une base de donnes. PHPMyAdmin ma permis de la crer au plus vite. De plus son utilisation est tellement simple quil suffit de quelques clics pour crer une table.
Exemple dune table avec PHPMyAdmin Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 24 Toutes nos runions ont permis de dgager les fonctionnalits quil y aurait implmenter. Voici donc les tables qui leur correspondent et les fonctionnalits. La Base de Donnes du site
Dans lordre : comptesUtilisateurs permet de grer lespace membre du site (inscription/connexion/rcupration de mot de passe). formations permet de grer laccs aux formations et confrences du site (lutilisateur peut choisir de sinscrire la liste dinvits dune future confrence donne par mes employeurs). livreOr permet de grer la fonctionnalit qui sert de livre dor (que ce soit la saisie dun nouveau ou suppression dun ancien commentaire). news permet de grer les news du site crit par mes employeurs (visionnage, ajout et suppression des news). newsLetter est la table qui permet lutilisateur de sinscrire la newsletter du site, et aux administrateurs (employeurs) de leur envoyer cette mme newsletter. nousJoindre sont les donnes stockes par lutilisateur lorsquil remplit le formulaire pour joindre mes employeurs (un mail rcapitulatif leur est alors envoy, mais ils souhaitaient stocker ces informations do cette table). phraseDefilante permet de changer la phrase qui dfile de leur site (Cathy souhaitait absolument en avoir une et la modifier). uploads est la table qui correspond au moment o lemployeur utilise la fonction, qui sert hberger des fichiers sur le site (en change dun code confidentiel, lutilisateur peut tlcharger les fichiers de mes employeurs).
Au final huit tables qui ont pour but dempcher mes employeurs daller modifier le code source du site pour rcuprer une information. De plus, dans la zone dadministration : jai Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 25 automatis leur visualisation pour quils naient pas besoin davoir accs la base de donnes (voir plus loin).
Dveloppement du design Pour le design du site qui est la chose qui tenait le plus cur mes employeurs, jai choisi dutiliser trois couleurs prdominantes : lorange pour reprendre la couleur du soleil (celui du logo de lentreprise), le bleu qui est synonyme dapaisement et de rconfort, et le gris pour faire un mlange homogne avec les deux prcdentes couleurs. Jai aussi pris le choix dutiliser comme fond dcran des nuages et un fond bleu, car je trouve que cela convient bien avec la clientle vise et le secteur de lentreprise. De plus, ils ont eu suffisamment confiance en moi pour me laisser employer le temps de quelques jours un nouveau membre dans ce projet : Mlanie, un designer professionnel (et non web designer). Cette dernire ma donn ses conseils en ce qui concerne lagencement des paragraphes, et laspect des futures pages du site.
Design du site
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 26 Ce qui signifie quelle a juste visualis sous forme de maquette le rendu final, et que cest moi qui grce mes connaissances en CSS a implment le design. Il y a eu cependant diffrents problmes qui ont fait que le site cette tape du projet a normment pris de retard. - Recruter un designer a pris au moins une semaine, en effet il a fallu en slectionner plusieurs et les rencontrer pour nen retenir quun. - Travailler avec cette personne alors quelle ne le peut que pendant une certaine plage horaire pnalise lavance du projet. - Mes employeurs sont quelques peu perfectionnistes, cest pourquoi ils ntaient jamais pleinement satisfaits du travail. - Je ne suis pas web designer mais programmeur, et jai vraiment eu du mal satisfaire leurs attentes. Ils voulaient des choses assez compliques, et cest ce moment-l que jai d acqurir des rudiments en graphisme (transparence, taux de compression dimage, menus droulants, dgrads, etc.). Au vue de toutes ces difficults, et mme sils sont aujourdhui satisfaits : le projet prenait tellement de retard quil a fallu que jintervienne personnellement pour souligner quon devait continuer le projet. En effet, si on continuait procder ainsi : ce dernier naurait jamais t termin temps.
Il tait inadmissible davoir un site visuellement trs esthtique, et de navoir aucune fonctionnalit. Comme il tait hors de question de prsenter aux internautes un site possdant une esthtique de moindre qualit.
Il a donc fallu trouver un compromis entre le design et les fonctionnalits, et rattraper ce retard. Jai donc propos mes employeurs de travailler le week-end dans loptique de terminer le projet.
Cration de scripts JavaScript, Ajax et JQuery Cest ce moment spcifique du projet que je me suis vraiment servi des connaissances acquises (en JavaScript, Ajax et JQuery) pour amliorer laspect visuel. Principal problme : comme ce sont des langages excuts ct client, si lutilisateur dsactive le JavaScript de son navigateur : les scripts cods dans ces langages ne fonctionnent plus. Cest pourquoi jai cherch minimiser au maximum son utilisation, et que je me suis assur que le site reste fonctionnel au cas o.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 27 Les coins arrondis Grce des fonctions JQuery, jai pu arrondir les bords de mon site pour lui donner un aspect moins carr , et donc uniformiser de plus faon gnrale le contenu.
Ce script a t assez dur et long implmenter, car les instructions utiliser dpendent dun navigateur lautre. Internet Explorer a notamment beaucoup problme, car ce navigateur proposent plusieurs versions (IE 6, IE 7, etc.) et pour chaque version : il faut prvoir diffrentes instructions.
Application aux formulaires Les formulaires du projet ont plusieurs couches. - Une dHTML, jy ai mis les fonctions ncessaires pour que lutilisateur puisse y entrer les informations demandes. - La seconde est une couche PHP, elle contrle les informations rentres par lutilisateur. Concrtement, je vrifie que lutilisateur rentre le bon nombre de lettres, des chiffres lorsque lon demande un numro de tlphone, la prsence dun caractre spcial (le @ lorsque lon demande de saisir un mail) grce lutilisation des expressions rgulires. Cette ide mest venue grce aux cours de mathmatiques que jai reues lors de mon semestre 3, quand nous les avons tudis.
Exemple de formulaires avec bulles daide
- Lavant dernire est une couche JavaScript, elle a t applique et longue mettre en place, car il faut la faire correspondre aux deux prcdentes et ladapter en fonction du navigateur utilis. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 28 Elle sert concrtement elle aussi contrler les informations saisies par lutilisateur, sauf quen plus de cela elle empche lenvoi du formulaire tant que les bonnes informations ne sont pas saisies. En effet, lorsquelles sont mal saisies et grce lutilisation du JavaScript : jai cod mes propres bulles daide qui ont pour but de guider lutilisateur. - La dernire est une couche CSS, qui finalise laspect gnral.
Visualisation dimages Le site propose de nombreuses images, il a donc fallu crer un script Ajax qui en fonction de la rsolution de lutilisateur : la taille de ses dernires sadapte. De par son mode asynchrone (dans lequel on na pas besoin dactualiser la page pour la mettre jour), ce script est fonctionnel et trs utile lors de notre utilisation.
La localisation et Google Map Le moteur de recherche Google propose un script JQuery qui permet en fonction de son adresse IP de se faire localiser. Je nai eu aucune difficult limplmenter, puisque ce dernier est disponible en le recherchant sur internet.
Malheureusement, il ne marche pas sur les versions dInternet Explorer antrieur la 8 et je nai pas su rgler ce problme.
Les menus droulants Mes employeurs tenaient accder leurs pages internet grce un systme de menus droulants.
Jai dvelopp moi-mme cette fonctionnalit en minspirant de nombreux scripts prsents sur internet. En sachant que la principale difficult a t d adapter cette fonctionnalit en fonction de la rsolution des utilisateurs.
Le menu droulant
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 29 Mise en place des pages statiques du site La rdaction de toutes ces pages a dabord t effectue avec mes employeurs sur fichier word, puis retranscrites (ou traduites) en HTML. Lintrt de ces pages est quelles ne sont pas censes tre continuellement modifies, puisquelles sont visibles par les internautes (inscrits ou non). Cependant, la difficult majeure de cette partie a t et est encore justement que mes employeurs ne sont pas srs du contenu de leur page. Cest pourquoi elles sont en modification continuelles (taille des polices, disposition des paragraphes, couleurs et choix des mots etc.), et que cela prend beaucoup de temps.
Exemple dune page HTML
Cest pourquoi, je leur ai propos de continuer de les modifier une fois aprs mon dpart. NB : je leur ai aussi donn les bases en HTML pour quils puissent modifier le texte de leurs pages.
Dveloppement des fonctionnalits Les fonctionnalits sont le cur du site do leur importance. Je les ai implments de telle faon que chaque fonctionnalit soit indpendante lune de lautre, et rutilisable dans nimporte quel site Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 30 Comme je lai dit plus haut, mes employeurs veulent avoir plusieurs fonctionnalits :
o Un module de cration de compte qui inclue linscription par formulaire, lactivation du compte par mail et la rcupration de mots de passe. o Une qui permet la connexion/dconnexion dun utilisateur lespace membre. o Un autre module qui permet lutilisateur de sinscrire aux futures confrences de mes employeurs, et de tlcharger leurs power points. o La modification des informations personnelles dun utilisateur. o Une autre qui permet lutilisateur de donner son avis sur le site, cest--dire un livre dor. o Labonnement ou le dsabonnement la newsletter du site, et pour ladministrateur la possibilit den rdiger une et de lenvoyer aux utilisateurs inscrits cette fonctionnalit. o Et la dernire consistait donner la possibilit lutilisateur de modifier ses informations personnelles.
De plus, jai pris linitiative den dvelopper de nouvelles :
o La cration dun espace dadministration pour donner la possibilit lutilisateur de grer son site. o Une qui permet de grer les news du site cest--dire le simple ajout ou bien la suppression danciennes news. o Un module qui permet ladministrateur de mettre sur le site et la disposition de ses membres (en change dun code confidentiel) des fichiers de tout type. Le but tait de permettre mes employeurs dhberger leurs capsules vido et power points. o Une autre qui permet de grer les membres (activation/suppression de compte, changement de mots de passe et consulter des informations personnelles, etc.) inscrits au site. o Et de nombreux autres modules qui permettent dautomatiser des modifications, comme le changement de la phrase dfilante ou du mot de passe de la zone dadministration.
Cependant, je nen dirais pas plus puisque jaccorde aux fonctionnalits du site, une partie entire o je me rserve de les dvelopper en dtails.
Cration de mails personnaliss Mes employeurs avaient lors de diverses fonctionnalits besoin denvoyer des mails. - Lors de linscription dun membre, ses informations personnelles doivent lui tre envoyes. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 31 - Lorsquil a perdu son mot de passe, on doit lui renvoyer un mail avec son nouveau mot de passe. - Lorsquil a contact mes employeurs, un mail rcapitulatif lui doit tre envoy. - Lorsquil sest inscrit la newsletter du site, il doit pouvoir recevoir le mail et mes employeurs doivent pouvoir rdiger ce dernier.
Exemple de mails
Cest pourquoi mes employeurs avaient non seulement besoin dun hbergeur qui leur proposait cette fonctionnalit (do le choix de HostPapa , mais aussi de pouvoir envoyer des mails personnaliss (rdaction de newsletter, mail dinscription, etc.). Je leur ai donc dvelopp des mails personnaliss. NB : lexemple dun code source est disponible dans lannexe de ce rapport.
Correction des failles de scurit (un niveau technique est conseill) De nombreuses failles de scurit ont t identifies tout au long du projet. Il tait impratif de les rgler pour viter quun individu mal intentionn (un hacker) puisse rcuprer des informations sur un utilisateur quelconque. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 32
1 re faille : les mots de passe
Problme : Jai remarqu que le mot de passe de lutilisateur tait stock en clair dans la base de donnes, ce qui est trs dangereux. Cest pourquoi grce aux conseils de mon tuteur, jai utilis une fonction de cryptage de mots de passes. Linconvnient de cette mthode est quil ny a aucun moyen de retourner en arrire, cest--dire de dcrypter le mot de passe. Cela signifie que mme moi je nai pas accs aux mots de passe des utilisateurs.
Rsolution de la faille de scurit : lors de la connexion, jai crypt le mot de passe fourni par lutilisateur et je lai compar avec celui stock dans la base de donnes pour lui permettre (ou non) la connexion.
Problme : au dbut, je narrivais plus me connecter et jai pass un certain temps rsoudre le problme.
Concrtement, le mot de passe rentr par lutilisateur pour se connecter une fois crypt tait identique celui stock dans la base de donnes (celui qui correspond bien sr lutilisateur) sauf que ce dernier tait tronqu (coup). Le problme venait du fait que je stockais le mot de passe dans ma base de donnes en tant que chaines de 30 caractres. Sauf que la fonction de cryptage augmente de faon exponentielle le nombre de caractres dun mot de passe une fois crypt. Cest pourquoi mon mot de passe nest plus stock sous forme de chaines de caractres mais en tant que texte ce qui signifie quil ny aucune limite de taille, srement plus couteux pour ma base de donnes mais ncessaire.
2 re faille : la modification dURL
Problme : elle concerne le cas o lutilisateur modifierait lURL de mes pages pour accder mes sources ou modifier le comportement attendu de mes fonctions PHP.
Rsolution de la faille de scurit : il suffit de vrifier si bien toutes les variables PHP sont prsentes (en utilisant une fonction appele isset ). Si Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 33 elles le sont, jeffectue mon code si non jaffiche une page Erreur 404 qui tmoigne dun comportement anormal.
Erreur 404
3 me faille : linjection de code PHP ou JavaScript
Problme : lorsque lutilisateur utilise une zone de saisie (pour rentrer son nom par exemple), rien nempche lutilisateur confirm (le pirate informatique) dintroduire du code HTML ou JavaScript. Cela entrainerait que lorsque le code est interprt par le navigateur de linternaute, un simple script PHP pourrait rcuprer les donnes de la base de donnes ou accder au code source du site.
Rsolution de la faille de scurit : pour rgler cette faille, je prcde chaque appel une variable par la fonction htmlspecialchars qui a pour but de traduire les caractres spciaux en code ASCII, ce qui empche lutilisateur de les utiliser. Exemple : les chevrons deviennent alors des &3 .
4me faille : linjection dans la base de donnes
Problme : elle consiste rcuprer les tables de la base de donnes et toutes les informations qui y sont stockes.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 34 Rsolution de la faille de scurit : jai d utiliser la fonction stripslashes chaque fois que je faisais une injection dans la base de donnes. Elle permet dempcher lutilisateur de pouvoir enregistrer des informations nfastes dans la base de donnes, au cas o lutilisateur rentrerait du code lorsquil saisit du texte ( htmlspecialchars ntant pas faite pour la base de donnes).
Dbogage Malheureusement, les failles de scurit ntaient pas les seuls problmes du site. En effet, il tait parsem de plusieurs bugs techniques (notamment lorsque lutilisateur saisissait des informations, et utilisait les fonctionnalits du site) et certains dtails graphique (la police, la couleur, certains textes etc.) ne satisfaisaient pas mes employeurs.
Ce qui explique pourquoi jai pass lavant dernire semaine les corriger, ainsi qu finaliser laspect graphique du site. Le site a maintenant son design dfinitif.
Mise en place de commentaires dans le code source Au cas o un autre informaticien reprenne mon travail ou du moins le code source du site, jai comment et indent ce dernier. Mais comme je le faisais ds le dbut, cela ne ma pas vraiment pos de problmes.
Cration dune documentation pour mes employeurs Dans le but daider mes employeurs avec leur site internet, je leur ai ralis - une documentation pour leur expliquer comment sauvegarder leur base de donnes (ou lexporter) avec PHPMyAdmin . - un fichier word o je leur explique comment se servir dun FTP pour quils puissent sauvegarder et mettre jour le contenu de leur site. - un tutoriel sur les bases du CSS et HTML, pour quils puissent modifier leurs pages web. - un document avec tous les identifiants ncessaires la gestion de leur site.
Cration de longlet du site Jai utilis mes comptences dans le logiciel de PhotoShop pour leur raliser une icne que voici : Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 35
Longlet du site Jai tent de dessiner un soleil pour reprendre celui de leur logo (visible par exemple ci- dessous).
Mise en ligne Aprs avoir test toutes les fonctionnalits du site et avoir fait une dmonstration de 03h00 mes employeurs pour leur montrer son tendu : le site provisoire a t retir pour laisser place la version finale du projet.
Voici lURL du site : www.credosante.com
La page daccueil du site
Maintenance et prvisions Pour leur viter de devoir employer un informaticien, je me suis personnellement engag les aider et maintenir leur site internet. La seule condition est que cela nempite pas de faon trop intensive mes tudes ou ma vie prive. Cependant sils comptent dvelopper dautres projets informatiques, je leur ai stipul que lembauche dun informaticien serait souhaitable.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 36 Partie 4 Les fonctionnalits
Cette quatrime et dernire partie a pour but de vous expliquer les fonctionnalits que jai implmentes du dbut la fin.
Le formulaire Nous Joindre La premire fonctionnalit et mme si cela nen est pas une proprement parl (le principe est assez simple comprendre), est le formulaire qui permet de joindre mes employeurs (que ce soit pour une demande de rendez-vous ou une demande dinformations).
Lorsquun utilisateur choisit cette option-l, il arrive sur un formulaire quil doit remplir.
Le Formulaire Le Mail de Confirmation Aprs avoir valid le formulaire, un mail est alors envoy mes employeurs ainsi qu lutilisateur layant rempli (envoy au mail quil a saisi).
Difficults rencontres : crer cette fonctionnalit na pas vraiment t complique, puisque jai eu la chance de lavoir dj code par le pass (lors de mon projet tutor du dernier semestre). Jai donc pu minspirer de dautres scripts (dont le lien est dans la partie rfrences du site). Par contre, la cration dun mail personnalis a relativement t trs intressante puisque je comprends maintenant de quelle faon ils sont crs, et que je suis capable de les implmenter. NB : ce formulaire comporte du JavaScript/PHP/HTML/CSS comme je lai expliqu dans le chapitre correspondant aux formulaires du site. Lien : http://www.credosante.com/nousJoindre.php
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 37 Consulter les news du site Une page du site permet de consulter toutes les news rdigs par mes employeurs, lorsque ces derniers choisissent de diffuser des informations.
Consulter les anciennes news
Cependant, il est aussi possible de voir sur la page daccueil la news qui a t la dernire publie par mes employeurs.
La news de la page daccueil
Lien : http://www.credosante.com/news.php Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 38 Le module dinscription Cette fonctionnalit est trs complte, et comporte trois sous-modules : - celui qui permet lutilisateur de saisir les informations personnelles ncessaires son compte (login, mot de passe, mail), ainsi que dautres facultatives (nom, prnom, adresse, ville). - lorsque que lutilisateur valide ces informations, un mail lui est alors envoy et il est ncessaire de le consulter pour activer son compte. - Un dernier sous-module qui prvoie le cas o lutilisateur a oubli son mot de passe.
Le formulaire dinscription
Les informations stockes par lutilisateur sont enregistres dans la base de donnes.
Formulaire dinscription
Cette dernire vrifie aussi que le login ou mail saisi ny soient pas en doublon.
(Si cest le cas, lutilisateur est envoy sur une page derreur.)
Lien : http://www.credosante.com/inscription.php
Envoi du mail et activation du compte
Lorsque lutilisateur valide ses informations, un mail rcapitulatif avec toutes les informations saisies lors de son inscription lui sont envoyes son mail.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 39 Ce dernier possde alors ses identifiants ainsi quun lien dactivation que jai gnr moi- mme (voir annexe) avec une cl dactivation (cr alatoirement).
Si lutilisateur clique sur ce lien, son compte est activ et il peut accder lespace membre.
Mail rcapitulatif Activation du compte
Jai aussi gr le cas o lutilisateur cliquerait de nouveau sur le lien : un message derreur apparait qui lui stipule justement que son compte est dj actif.
NB : si lutilisateur ne saisit pas dinformations facultatives, les champs sont pralablement remplis par les mots Non Renseign .
NB : le mot de passe saisi par lutilisateur est je le rappelle, crypt dans la base de donnes pour viter quun utilisateur mal intentionn le rcupre.
Constat : je suis trs fier de cette fonctionnalit, jai fait un systme dinscription trs scuris (mail + activation du compte par un lien) pour empcher quiconque de sinscrire de faon automatique.
Rcuprer son mot de passe
Au cas o lutilisateur a perdu son mot de passe ou ses identifiants : une fonctionnalit lui permet de rcuprer son mot de passe. Il suffit pour cela dy accder, on lui demande alors de saisir soit son mail soit son login (on rcupre alors le mail de lutilisateur par requte SQL). Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 40 Rcuprer son mot de passe
Comme vous pouvez le voir, jai pens au cas o lutilisateur rentrerait par inadvertance son login ET son mail. Dans ce cas-l, jai fait en sorte de ne pas le pnaliser et que cela ne rende pas la fonctionnalit dfaillante.
(Il me suffisait juste den tenir compte, et de me servir uniquement du mail saisi)
Un mail personnalis (inspir ce celui utilis pour joindre mes employeurs) lui est alors envoy avec son nouveau mot de passe.
Mail envoy en cas de perte de mot de passe
- Ce nouveau mot de passe nest pas encore activ - pour viter le cas o un utilisateur connaitrait le mail dun autre, et sen servirait pour changer son mot de passe. - Pour lactiver, lutilisateur doit alors cliquer sur le lien fourni dans le mail.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 41 - De plus, il doit aussi rpondre sa question secrte (champ obligatoire lors de linscription).
Veuillez saisir votre rponse secrte.
- Sil donne la bonne rponse, le mot de passe est alors modifi.
Bonne rponse Mauvaise rponse
- Sil donne la mauvaise rponse, le mot de passe nest pas modifi et on lui propose de resaisir sa rponse secrte ou de retourner laccueil.
Se connecter Lutilisateur a pour se connecter deux possibilits : il peut choisir de saisir son mail ou son login (sans oublier bien sr son mot de passe). Je vrifie alors que les identifiants correspondent lune des entres de ma table espace membres .
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 42 Si oui, le site le redirige vers lespace membre et un nouveau design est appliqu.
Connexion au site Si non, je lui propose de ressaisir ses identifiants ou le redirige vers laccueil du site en cas de refus. NB : je crypte bien sr le mot de passe saisi pour le comparer avec ceux prsents dans la base de donnes.
Test
Jai test cette fonctionnalit en dterminant les cas limites (en inspirant sur les tests du semestre 3) :
- Bon login mais mauvais mot de passe. - Bon login et bon mot de passe. - Bon mail mais mauvais mot de passe. - Bon mail et bon mot de passe. - Bon mot de passe mais mauvais pseudo. - Bon mot de passe mais mauvais mail.
Cela avait pour but de vrifier sa bonne utilisation.
Lien : http://www.credosante.com/accueil.php
Lespace membre Aprs stre inscrit au site et aprs avoir son compte, lutilisateur sil se connecte au site arrive sur cette page-ci : Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 43
Visualisation de lespace membre Il peut alors : tlcharger les Power Points des anciennes confrences (et sinscrire aux nouvelles). sinscrire l'infolettres du site. poster son avis sur le site (ou nos services) sur le livre d'or. modifier ses informations personnelles. se dconnecter. NB : on remarque aussi que le design a chang (et sur toutes les pages o lon est connect), en effet la phrase dfilante a laiss place un nouveau menu celui qui permet daccder aux fonctionnalits (menu bleu).
On demande lutilisateur de saisir un NIP (code confidentiel donn lors dune confrence de mes employeurs). Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 44 Si le NIP est bon, on donne lutilisateur la description, le titre et lurl de tlchargement du fichier qui correspond ce NIP. Lenvoi du fichier et la faon dont comment il sera tlcharger sont aussi grs (pour viter les potentielles failles de scurit). Si le code confidentiel est incorrect, je lui refuse laccs et lui propose denvoyer un mail aux administrateurs du site pour avoir le NIP du fichier voulu (documents confidentiels, factures et autre).
Cette fonctionnalit a donc pour but de laisser le choix lutilisateur si oui ou non, aprs stre inscrit sur le site : il souhaite recevoir des mails des administrateurs du site. Lutilisateur a la possibilit de sinscrire la newsletter du site, mais il faut que ce soit volontaire et non une obligation. Une fois quil ait cliqu sur le bouton dinscription, je rcupre grce une requte SQL le mail avec lequel il sest inscrit sur le site que je stocke dans la base de donnes.
Inscription D-Inscription
Aprs stre inscrit la newsletter, lutilisateur a la possibilit de se dsinscrire de la newsletter encore une fois pour respecter son choix. Il est alors retir de la base de donnes. De plus, si lutilisateur tente de rinscrire la newsletter un message derreur apparat, et on lui propose de se dsinscrire. Si son compte est supprim (possible grce lespace dadministration), et quil est inscrit la newsletter du site : son mail est alors retir de la table qui soccupe de la newsletter. Cela est pour viter quil reoive encore des mails aprs quil ait eu son compte supprim. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 45
- Lutilisateur a la possibilit de donner son avis sur ce quil pense du site : il lui suffit de remplir la zone de saisie qui lui est accessible et dappuyer sur le bouton envoyer . - Ces informations sont alors stockes dans la base de donnes. - Le livre dor affiche les commentaires du plus rcent au moins rcent (il suffit de faire une requte SQL qui ordonne en fonction de la date).
Lien : http://www.credosante.com/espaceMembre/livreOr.php Changer ses informations personnelles
Modification dinformations personnelles Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 46
- Cette fonctionnalit permet de modifier tous les champs saisis par lutilisateur lors de son inscription. Except son login (ce qui est normal) et la question secrte (exigences souhaites par mes employeurs). - De plus, chaque champ est pr-rempli avec les informations rentres initialement par lutilisateur. - Cela permet lutilisateur de voir ce quil a rentr comme informations et de les mettre jour, si ncessaire. - Lorsque lutilisateur valide ses informations, la base de donnes est automatiquement mise jour. - Si lutilisateur rentrerait des champs vides : un message derreur apparait et propose lutilisateur de saisir une nouvelle information.
Cration de sessions (comptences techniques requises) Dans le but dempcher quiconque daccder ces fonctionnalits sans y tre inscrit (ou sans avoir activ son compte) : jai pens utiliser le procd des sessions, vu en cours de base de donnes.
Quest-ce quune session ? Cest un lot de variables qui sont stockes de faon permanente. Ce procd est trs utilis lorsque lon a besoin de variables assez utiles de page en page, et pour ne plus en disposer, il faut dtruire cette mme session.
Lorsque quun internaute a rentr ses bons identifiants (voir annexe), cela signifie quil est connect lespace membre. Cest pourquoi, je cre une session qui stocke notamment le pseudonyme, mot de passe et mail de lutilisateur. Il ne me reste plus qu contrler la prsence de ses variables sur chaque page de lespace membre (lalgorithme utilis est aussi visible en annexe). Si ces variables ne sont pas l, cela signifie que lutilisateur essaye dy accder sans tre connect (do la redirection vers la page daccueil qui permet de se connecter).
Dconnexion
Lorsque lutilisateur clique sur le bouton se dconnecter , cela le redirige vers la page daccueil et le site procde la destruction des variables contenues dans la session de Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 47 lutilisateur (voir annexe).
Lespace dadministration Au vue des fonctionnalits de lespace membre, il est parfois ncessaire de contrler les actions de lutilisateur dans le cas o par exemple un utilisateur pratiquerait quelques abus (je pense notamment au livre dor). Lune des solutions envisages pour viter ces dboires consistait modifier directement les donnes de la base de donnes. Cependant, cela ncessite quelques notions en SQL, malheureusement mes employeurs nen ont pas.
Cest avec cette inquitude en tte que je leur ai propos un espace dadministration qui aurait pour but dautomatiser ce genre de tches.
Zone dadministration du site
Ils peuvent notamment : grer les membres de leur site. crer des confrences, et "uploader" leurs Power Points (avec code confidentiel) sur leur site. crer une newsletter et la "diffuser" aux membres s'y tant inscrit (grce lespace membre). modrer leur livre d'or (suppression et consultation de commentaires). crer et grer les news pour leur site. modifier la phrase dfilante du site. grer leur zone dadministration. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 48 Au vue du danger que reprsente cette zone dadministration, je dtaillerais chacune de ces fonctionnalits de faon brve. Cependant et comme mes employeurs souhaitent prserver leurs confidentialits, je ne donnerais pour certaines delles aucun indice sur leur implmentation, ni sur leur fonctionnement (cryptage).
NB : le design de la page a aussi chang, comme lorsque lutilisateur se connecte lespace membre. (fond rouge)
Gestion des membres
Interface visible lors de la gestion des membres
Cette premire fonctionnalit est lune des plus dangereuses du site, puisquelle permet ladministrateur de modrer les membres de son site. Il peut : - consulter les informations personnelles dun utilisateur inscrit. - activer le compte dun utilisateur (au cas o la personne serait si ge et quelle ne saurait pas le faire delle-mme). - modifier le mot de passe dun utilisateur. - bannir le compte dun utilisateur (lors dun abus de sa part). Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 49 - supprimer le compte dun utilisateur en sachant que si lutilisateur est inscrit la newsletter du site, il est automatiquement supprim. Comme vous pouvez le voir, cette fonctionnalit peut poser prjudice entre de mauvaises mains prjudice. Car dun simple clic il est possible dinteragir sur la base de donnes et de radier du site un utilisateur. Cest pourquoi il est indispensable que les administrateurs nutilisent pas cette fonctionnalit mauvais escient. Cette dernire est relativement simple dutilisation, puisquil suffit lutilisateur de saisir laction quil veut faire puis lID ou login du membre dont il veut exercer laction. Cependant, je ne suis pas autoris vous en divulguer davantage.
Gestion de la phrase dfilante
Interface visible pour la gestion de la phrase dfilante Cette fonctionnalit est simple dutilisation et permet de changer la phrase qui dfile dans tout le site.
Gestion des confrences Lutilisateur se voit proposer cinq fonctionnalits : - uploader une nouvelle confrence (ou plutt fichier). - changer le titre de lune des confrences prsentes sur le site. - changer la description dune confrence. - changer le code confidentiel attribu une confrence. - supprimer du site une confrence.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 50
Interface visible lors de la gestion des confrences
Et je vais seulement dtailler la premire pour respecter le choix de mes employeurs. En ralit, cette fonctionnalit est un gestionnaire de fichiers. A la base, il devait seulement servir hberger les Powers Points des confrences de mes employeurs (ils font de nombreux exposs devant leur ordre mdical). Cependant, je lai programm de telle sorte quil ne sert pas seulement hberger des confrences (power points), mais des fichiers de nimporte quel format (txt, doc, mp3, img, etc.) en prvision de leurs futurs projets. Lorsque ladministrateur cherche envoyer un fichier, il doit saisir un nom de fichier (si oubli, on reprend celui du fichier de base), sa description et le code confidentiel qui permettra de le tlcharger (cette fonctionnalit va de pair avec celle du mme nom de la zone membre).
Lorsque lutilisateur a saisi toutes ces informations, le site contrle alors chacun des aspects du fichier : sa taille (pour viter des fichiers trop lourds). son extension (pour viter lenvoi de scripts ou autre). son nom (pour viter les caractres spciaux). son entte pour viter toute faille connue ou mconnue. son transfert (pour viter que le fichier stocke un quelconque fichier temporaire). Cela a pour but dviter une quelconque intrusion. Si le fichier a pass tous ces contrles, alors le site gnre un lien qui permettra celui qui a le code correspondant, de le tlcharger.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 51 NB : je ne peux malheureusement en dtailler davantage. Cependant je peux vous dire que cette fonctionnalit est celle qui a t la plus dure implmenter ( cause des contrles cit ci-dessus), mais aussi paradoxalement la plus intressante.
Envoyer une newsletter
Interface visible lors de la gestion des newsletters
Pour cette fonctionnalit, je me suis inspir de certaines ides trouves sur internet. Et comme vous pouvez le voir, il suffit ladministrateur de saisir le titre et le contenu de son message, puis de cliquer sur le bouton envoyer infolettres pour que lutilisateur reoive le mail.
Rception de la newsletters Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 52 Attention : jai bien mis au courant mes employeurs du danger que reprsentait cette fonctionnalit. En effet il est impensable denvoyer chaque jour des mails aux utilisateurs si ils sont indignes dintrts (on parle alors dans ce cas de spamming : cela peut entraner un blacklistage du site). NB : ladministrateur peut mme visualiser les individus inscrit son service de newsletter.
Gestion du livre dor
Interface visible lors de la gestion du livre dor
Cette fonctionnalit est similaire aux autres fonctionnalits de lespace dadministration. En effet, le site nous prsente dabord les donnes intressantes qui sont stockes dans la base de donnes ici les commentaires posts par les utilisateurs sur le livre dor. On propose ensuite aux administrateurs non pas de modifier les commentaires (cette fonction a t cart par mes employeurs), mais de supprimer le commentaire indsirable en saisissant lid correspondant.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 53 Gestion des news du site
Interface visible pour la gestion des news du site
Cette fonctionnalit comporte trois sous-fonctionnalits : - elle permet de visualiser les news dj existantes. (voir tableau) - de saisir et mettre jour une nouvelle news. (il suffit simplement de lcrire et elle sera envoye la base de donnes) - de supprimer les anciennes news. (en slectionnant lID de celles quon veut supprimer)
Gestion de la zone dadministration
Aussi appele fonction de cryptage, elle permet notamment de changer les identifiants de la zone dadministration : cest pourquoi je ne vous montrerais ni prise dcran, ni code source (cest srement la fonctionnalit la plus confidentielle du site).
Les protections mises en place
Zone dadministration
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 54
Il y a quatre scurits franchir pour atteindre la zone dadministration :
- Il faut savoir o elle se situe. - Avoir ses identifiants. - Avoir la confiance de lun des administrateurs pour accder ce statut. En sachant que lorsque un membre passe du statut de membre administrateur : un mail de confirmation est envoy aux administrateurs, et sans leur autorisation ce dernier nacquiert par son nouveau statut. - La dernire ne sera pas divulgue par simple mesure de scurit.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 55 Conclusion Ce stage est une premire exprience professionnelle trs profitable dans le sens o tout le monde na pas la chance que jai eu. En effet, il est trs rare davoir si tt la possibilit de grer un projet de A Z et davoir une si grande confiance de la part de ses employeurs (que ce soit au niveau des horaires, de la gestion du travail ou mise en application de mes ides). De plus, ce stage sest rvl tre une exprience trs bnfique notamment en ce qui concerne les comptences que cela ma apport que ce soit sur laspect professionnel (apprentissage de nombreux nouveaux langages, aperu du monde de travail et autre) ou humain (gain de confiance en soi et dautonomie ainsi que des rencontres inoubliables). En outre, jai non seulement su madapter cette situation assez particulire, mais jai galement su raliser le travail de plusieurs individus : lanalyste, le designer, le programmeur et le chef de projet. Cest pourquoi je suis vraiment fier de ce que jai ralis, et que je suis convaincu que ce stage maidera raliser mon projet professionnel qui est de devenir chef de projet. Je tiens aussi encore remercier Cathy Robertson et Gilles Duchesne pour tout ce quils ont fait pour moi, et finir ce rapport en disant que jai t trs heureux et fier de travailler avec eux.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 56 Annexes Code source de la gnration automatique du lien dactivation de compte
$lienActivation .= "http://".$_SERVER["SERVER_NAME"]; // Trouver l'id du membre $trouverIdNouveauMembre = $bdd->query(SELECT id AS idTrouve FROM comptesutilisateurs WHERE login="'.htmlspecialchars($_POST['login']).'" AND mail="'.htmlspecialchars($_POST['mail']).'"'); $donnees = $trouverIdNouveauMembre->fetch(); $id = $donnees['idTrouve']; $trouverIdNouveauMembre->closeCursor(); // Gnration du lien d'activation $lienActivation .= "/activerCompteUtilisateur.php?id=".$id; $lienActivation .= "&cleActivation=".$cleActivation;
Code source qui permet la cration de sessions <?php // On dmarre la session AVANT d'crire du code HTML session_start(); $_SESSION['login'] = $login ; $_SESSION['mail'] = $mail ; $_SESSION['mdp'] = $mdp ; ?>
Code source qui contrle lexistence des sessions <?php session_start(); // Si les variables nexistent pas if ( !isset($_SESSION['login']) && !isset($_SESSION['mdp']) && !isset($_SESSION['mail']) ) { header ('Location: ../accueil.php'); exit(); } ?>
Code source qui permet la destruction des sessions
<?php Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 57 session_start(); session_unset(); session_destroy(); ?>
Code source qui permet denvoyer une newsletter { tous les utilisateurs
function envoiMail($mail, $login) { $dateJour = date("d")."/".date("m")."/".date("Y");
// Dclaration de l'adresse mail de l'expditeur et du destinaire. $mailExpediteur = 'credoclients@yahoo.ca'; $nomExpediteur = 'Credosant'; $mailDestinataire = htmlspecialchars($mail); $nomDestinataire = htmlspecialchars($login);
// On filtre les serveurs qui rencontrent des bugs. if (!preg_match("#^[a-z0-9._-]+@(hotmail|live|msn).[a-z]{2,4}$#", $mailDestinataire)) { $passage_ligne = "\r\n"; } else { $passage_ligne = "\n"; }
//=====Dclaration des messages au format texte et au format HTML. $message_txt = " Objet : ".stripslashes($_POST['titreMail'])." Date de l'envoi : ".$dateJour." ".stripslashes($_POST['message'])." Mail automatiquement gnr par www.credosante.com.";
$message_html = "<html><head></head> <body> <b><u>Objet</u> : ".stripslashes($_POST['titreMail'])."</b> <br/> <b>Date de l'envoi :</b> ".$dateJour."<br/><br/><br/> ".stripslashes($_POST['message'])." <br/><br/><br/> Mail automatiquement gnr par <a href='www.credosante.com'>www.credosante.com</a>. </body> </html>";
//=====Cration de la boundary. $boundary = "-----=".md5(rand());
//=====Dfinition du sujet. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 58 $sujet = "InfosLettres du ".$dateJour;
//=====Cration du message. $message = $passage_ligne.$boundary.$passage_ligne; //=====Ajout du message au format texte. $message .= "Content-Type: text/plain; charset=\"ISO-8859-1\"".$passage_ligne; $message .= "Content-Transfer-Encoding: 8bit".$passage_ligne; $message.= $passage_ligne.$message_txt.$passage_ligne; $message .= $passage_ligne."--".$boundary.$passage_ligne;
//=====Ajout du message au format HTML. $message .= "Content-Type: text/html; charset=\"ISO-8859-1\"".$passage_ligne; $message .= "Content-Transfer-Encoding: 8bit".$passage_ligne; $message .= $passage_ligne.$message_html.$passage_ligne; $message.= $passage_ligne."--".$boundary."--".$passage_ligne; $message .= $passage_ligne."--".$boundary."--".$passage_ligne;
//=====Envoi de l'e-mail. mail($mailDestinataire,$sujet,$message,$header); }
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 59 Lexique
Ajax acronyme de Asynchronous Javascript and XML) est une manire de construire des applications Web et des sites web dynamiques de faon asynchrone (sans devoir recharger la page internet). BDD une base de donnes en informatique est un lot d'informations stockes dans un dispositif informatique. Les technologies existantes permettent d'organiser et de structurer la base de donnes de manire pouvoir facilement manipuler le contenu et stocker efficacement de trs grandes quantits d'informations 1 . CHSLD cest encore une abrviation qui signifie Centre dhbergement de Soin de Longue Dure . CMS est un logiciel qui permet de crer son site web (Drupal, Joomla, etc.). Linconvnient de ce type de logiciels est quil est propose uniquement des fonctionnalits prdfinies et non modifiables. Cest pourquoi un programmeur naime pas utiliser ce genre de logiciels. Cognitif cest tout ce qui est relatif aux fonctions mentales (ex : lattention, la concentration, la mmoire etc.). CSS est un langage informatique qui sert dcrire la prsentation des documents HTML et XML. Les standards dfinissant CSS sont publis par le World Wide Web Consortium (W3C). Introduit au milieu des annes 1990, CSS devient couramment utilis dans la conception de sites web et bien pris en charge par les navigateurs web dans les annes 2000. CSSS cest une abrviation qui signifie Centre de Sant et de Services Sociaux . DOM le Document Object Model (ou DOM) est une recommandation du W3C qui dcrit une interface indpendante de tout langage de programmation et de toute plate-forme, permettant des programmes informatiques et des scripts d'accder ou de mettre jour le contenu, la structure ou le style de documents XML. Le document peut ensuite tre trait et les rsultats de ces traitements peuvent tre rincorpors dans le document tel qu'il sera prsent. Dysphagie cest un trouble de dglutition (le fait davaler), ce qui signifie une difficult avaler. FTP logiciel de transfert qui permet de mettre jour ou dinsrer ses fichiers sur son hbergeur. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 60 JEE Java Enterprise Edition, ou Java EE (anciennement J2EE), est une spcification pour la technique Java de Sun plus particulirement destine aux applications dentreprise. Ces applications sont considres dans une approche multi-niveaux. SGBD est un systme de gestionnaire de base de donnes cest--dire est un ensemble de logiciels informatiques qui sert la manipulation des bases de donnes. Il sert effectuer des oprations ordinaires telles que consulter, modifier, construire, organiser, transformer, copier, sauvegarder ou restaurer des bases de donnes. SQL est un langage informatique normalis qui sert effectuer des oprations sur des bases de donnes. La partie langage de manipulation de donnes de SQL permet de rechercher, d'ajouter, de modifier ou de supprimer des donnes dans les bases de donnes. Template en programmation web, cest un gabarit cest--dire un patron de mise en page o la mise en page en page des images et des textes est dj faite. On peut donc dire simplement que cest un design de site dj cr et la disposition de tous. Il suffit juste de le mettre en place.
Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 61 Rfrences
- http://gite.plouezec.pagesperso-orange.fr/index.html : site dont je me suis inspir pour notamment les menus droulants, et la disposition de certains formulaires. - http://jquery.com : site de documentation sur la librairie JQuery. - http://www.developpez.com : site dentraide et de formation pour la programmation. - http://www.siteduzero.com : site utile pour apprendre certains langages (PHP, JavaScript). - http://www.siteduzero.com/tutoriel-3-4745-ajax-et-l-echange-de-donnees-en- javascript.html : site qui ma permis dapprendre les notions en Ajax. - http://babylon-design.com/apprendre-et-comprendre-jquery-1-3/ : site pour apprendre utiliser JQuery. - http://www.siteduzero.com/tutoriel-3-69651-creer-un-espace-membre-pour-son- site.html : tutoriel pour savoir comment implmenter un dbut despace membre. - http://www.vulgarisation-informatique.com/mail.php : tutoriel permettant la comprhension et la cration de mails personnaliss. - http://www.phpsources.org/tutoriel-newsletters.htm : site dexplications sur la faon de rdiger des newsletters. - http://www.siteduzero.com/tutoriel-3-14543-transmettre-des-donnees-avec-les- formulaires.html#ss_part_4 : tutoriel dexplications sur la transmission de donnes et de fichiers par formulaires, cest--dire un gestionnaire de fichiers. - http://www.siteduzero.com/tutoriel-3-37674-upload-de-fichiers-par- formulaire.html#ss_part_3 : second tutoriel dexplications sur lupload de fichiers en PHP. - http://www.tonwebmaster.com/zones_webmasters/cours_php_actions_fichier.php : cours explicatifs sur la cration, suppression et modification de fichiers (utile pour la fonctionnalit duploads). - http://www.commentcamarche.net/faq/8821-comment-bien-stocker-et-verifier-un- mot-de-passe : introduction la faon de comment bien stocker ses mots de passes dans une base de donnes. - http://forum.alsacreations.com/topic-17-45052-1-ResoluProbleme-de-caracteres- speciaux-dans-une-base-donnees.html : ce lien ma permis de rsoudre les problmes dus des caractres spciaux introduits dans la base de donnes. - http://www.lephpfacile.com/howto/5-comment-faire-un-livre-d-or-en-php : tutoriel expliquant la faon de dvelopper un livre dor. - http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en- CSS.html : tutoriel de design pour savoir comment centrer son site web quel que soit la rsolution utilise. Anthony HALIPR IUT Lille A Dpartement Informatique 2010/2011 62 - http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html : second tutoriel de design utilis pour avoir une ide de comment arrondir son design, sans utiliser de scripts et quel que soit le navigateur utilis. - http://www.alsacreations.com/static/gabarits/modele11.html : troisime et dernier tutoriel de design qui ma permis de crer le menu de gauche sur toute la longue de la fentre.