Vous êtes sur la page 1sur 66

IUT de Lille A Collge de Valleyfield

Dpartement Informatique 169, rue Champlain


Cit Scientifique Salaberry-de-Valleyfield
59653 Villeneuve dAscq (Qubec)
J6T 1X6 Canada



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.

Lien : http://www.credosante.com/motDePassePerdu.php



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

Lien : http://www.credosante.com/espaceMembre/bienvenue.php


Les confrences


Comment avoir un Power Point ?

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

Lien : http://www.credosante.com/espaceMembre/conferences.php

Sinscrire { la newsletter

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

Lien : http://www.credosante.com/espaceMembre/infolettres.php

Donner son avis sur le livre dor


Le livre dor

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

Lien : http://www.credosante.com/espaceMembre/informationsPersonnelles.php

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

Lien : http://www.credosante.com/espaceMembre/deconnexion.php

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 header de l'e-mail.
$header = "From: ".$nomExpediteur." <".$mailExpediteur.">".$passage_ligne;
$header .= "Reply-to: ".$nomExpediteur." <".$mailExpediteur.">".$passage_ligne;
$header .= "MIME-Version: 1.0".$passage_ligne;
$header .= "Content-Type: multipart/alternative;".$passage_ligne."
boundary=\"$boundary\"".$passage_ligne;

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

Vous aimerez peut-être aussi