Mars2007 SiteInternetderseausocial IUTdeFontainebleau

-Rapportdeprojet-
SiteInternetderseausocial

DEOLIVEIRAAnthony
SIMONAdlade
SOLASYoan

DUTInformatique2
nde
anne

Tuteur:LEBASLudovic

Mars2007 SiteInternetderseausocial IUTdeFontainebleau
2
Table Table Table Tabledesmatires desmatires desmatires desmatires

1.INTRODUCTION 1.INTRODUCTION 1.INTRODUCTION 1.INTRODUCTION.................................................................................................... 3

2.DESCRIPTIONDUPR 2.DESCRIPTIONDUPR 2.DESCRIPTIONDUPR 2.DESCRIPTIONDUPROJET OJET OJET OJET.................................................................................. 4
2.1 2.1 2.1 2.1Exigencesfonctionnelles Exigencesfonctionnelles Exigencesfonctionnelles Exigencesfonctionnelles ............................................................................................................ 4
2.2Exigencesnonfonctionnelles 2.2Exigencesnonfonctionnelles 2.2Exigencesnonfonctionnelles 2.2Exigencesnonfonctionnelles..................................................................................................... 5
3.ANALYSEETCONCEP 3.ANALYSEETCONCEP 3.ANALYSEETCONCEP 3.ANALYSEETCONCEPTION TION TION TION................................................................................. 6
3.1Spcificationdesexigences 3.1Spcificationdesexigences 3.1Spcificationdesexigences 3.1Spcificationdesexigences :lescasdutilisations :lescasdutilisations :lescasdutilisations :lescasdutilisations................................................................. 6
3.2Analysedudomaine 3.2Analysedudomaine 3.2Analysedudomaine 3.2Analysedudomaine :lediagrammedeclasse :lediagrammedeclasse :lediagrammedeclasse :lediagrammedeclasse....................................................................... 7
3.3Laconceptionfonctionnelle 3.3Laconceptionfonctionnelle 3.3Laconceptionfonctionnelle 3.3Laconceptionfonctionnelle........................................................................................................ 8
3.4Laconceptiontechnique 3.4Laconceptiontechnique 3.4Laconceptiontechnique 3.4Laconceptiontechnique............................................................................................................. 9
3.5Laconceptiongraphique 3.5Laconceptiongraphique 3.5Laconceptiongraphique 3.5Laconceptiongraphique............................................................................................................. 9
4.REALISATIONTECHN 4.REALISATIONTECHN 4.REALISATIONTECHN 4.REALISATIONTECHNIQUE IQUE IQUE IQUE................................................................................ 12
4.1Leslangagesutiliss 4.1Leslangagesutiliss 4.1Leslangagesutiliss 4.1Leslangagesutiliss................................................................................................................. 12
4.4Lestests 4.4Lestests 4.4Lestests 4.4Lestests ...................................................................................................................................... 14
5.ORGANISATIONETB 5.ORGANISATIONETB 5.ORGANISATIONETB 5.ORGANISATIONETBILAN ILAN ILAN ILAN DUPROJET DUPROJET DUPROJET DUPROJET............................................................ 18
5.1Organisationdugroupe 5.1Organisationdugroupe 5.1Organisationdugroupe 5.1Organisationdugroupe :mthodedetravail :mthodedetravail :mthodedetravail :mthodedetravail......................................................................... 18
5.2Rsultat 5.2Rsultat 5.2Rsultat 5.2Rsultat ....................................................................................................................................... 19
5.3Amliorationsenvisages 5.3Amliorationsenvisages 5.3Amliorationsenvisages 5.3Amliorationsenvisages......................................................................................................... 20
6.CONCLUSION 6.CONCLUSION 6.CONCLUSION 6.CONCLUSION...................................................................................................... 21

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

3
1. 1. 1. 1.Introdu Introdu Introdu Introduction ction ction ction

La tendance actuelle du web, dans l'volution technologique comme dans l'volution sociale
reprsenteuneavancedanssesutilisations.
Illustr par le terme "Web 2.0", les sites de rseaux sociaux, aussi appels "social networking", sont
des exemples parmi ces volutions sociales. Ils permettent de connecter des internautes selon leurs
centres d'intrt afin de partager des flux d'informations, tels que des vidos (Youtube), des photos
(Flickr),delamusique(Last.fm)oudesmarque-pages(del.icio.us),etd'agrandirleursrseauxd'amis
oudefairepartidecommunauts.Cesexemplesmontrentl'ampleurqueprendcephnomne,aussi
bienpourlesloisirs,quepourdesfinsprofessionnels(LinkedIn).

Nous avons donc choisi pour notre projet tutor, de dvelopper notre propre rseau social en
s'appuyant sur des grands sites web comme MySpace, Mixi, Facebox et d'autres qui reprsentent le
web2.0parleurstechnologiesutilises.

Ainsil'objectif est de dvelopper un site Internet de rseau social pour lesloisirs des internautes, en
mettantleursdispositionsdesoutilsdebasepourchangerdesinformations,desides,etpartager
des centres d'intrts. Nous ne visons pas l'exhaustivit des outils et/ou des informations partages.
Nanmoins nous suivons certaines caractristiques des rseaux sociaux, comme l'interaction des
utilisateurstraversungrouped'amisetdecommunauts.

Pour mener bien ce projet, nous avons tout d'abord list et analys les exigences requises, afin
dobtenir une expression prcise des besoins. Cette analyse a permis de dvelopper plus
efficacement les diffrentes fonctionnalits. Ensuite, nous avons effectu des tests dans le but de
comparer les exigences attendues aux rsultats obtenus et d'amliorer ces derniers. Et enfin, nous
avonsprocdunbilandenotreprojet.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

4
2 22 2. .. . Descriptionduprojet Descriptionduprojet Descriptionduprojet Descriptionduprojet

PuisquilsagitdunsiteInternetderseausocial,formsdinternautes,nousavonschoisipourlenom
du site: Community. Nous pensons quil rsume bien le sujet du site et quil illustre le penchant
desinternautesFranaispourlesmotsanglais.

Community devra donc regrouper toutes les fonctionnalits ncessaires au partage de linformation
telles que: envoyer et recevoir des emails, grer son journal, participer dans des communauts,
rechercher des membres, rechercher des communauts, inviter des internautes, et toutes les
fonctionnalitstechniquescomme:grersoncompte,sinscrire,sauthentifier,sedconnecterMais
aussi,ildevrarpondredesexigencesnonfonctionnellesparsaqualitetsesperformances.

2 22 2.1Exigencesfonctionnelles .1Exigencesfonctionnelles .1Exigencesfonctionnelles .1Exigencesfonctionnelles

Inscription Inscription Inscription Inscription

Un internaute peut sinscrire uniquement sil a reu une invitation de la part dun membre de
Community. Lors de cette inscription, il saisit des informations personnelles, cre son profil afin de
devenirmembre.

Authentification Authentification Authentification Authentification

Afin daccder au site et pouvoir accder aux diffrentes fonctionnalits (recherche, messagerie),
toutmembredoitsauthentifier.

Jo Jo Jo Journal urnal urnal urnal

Tout membre du site possde un journal, auquel il peut ajouter des articles (communment appel
blog).Ilpeutainsiposterdesmessagescontenant touttypesdinformation(remarques, dtailsdesa
journe, rsum de ses vacances)... que ses amis ou autres membres pourront visualiser et
commenter. De mme, un membre a la possibilit de consulter le journal des autres et de le
commenter.

Messagerie Messagerie Messagerie Messagerie

Par le biais de sa messagerie, un membre peut consulter ses messages reus et envoys. Il a
galementlapossibilitderpondresesmessages,maisaussidelessupprimer.

Recherchede Recherchede Recherchede Recherchedemembres membres membres membres

A tout moment, un membre peut rechercher d'autres membres selon diffrents critres: pseudo,
rgion,ville,ge,demanirel'ajouterdanssalisted'amis.

Listed'amis Listed'amis Listed'amis Listed'amis

Un membre possde une liste damis, qui est constitue de membres. Il gre cette liste, puisque
toutmomentilpeutajouterdesmembresdanscelle-ci.

Invitation Invitation Invitation Invitation

Un membre a la possibilit dinvit des internautes afin de dcouvrir le site. Cette invitation est
envoyeparemail.

Communauts Communauts Communauts Communauts

Un membre a la possibilit de faire parti d'une ou plusieurs communauts, qui porte sur un thme
spcifique,etdanslesquellesilpeutposterdesmessages.Pourfairepartidunecommunaut,ildoit
sinscriredanscelle-ci.Ilalapossibilitdesedsinscrired'unecommunautquandillesouhaite.
Mars2007 SiteInternetderseausocial IUTdeFontainebleau
5

Recherchede Recherchede Recherchede Recherchedecommunauts communauts communauts communauts

Une recherche relative aux communauts doit tre prsente afin de permettre un membre de
sinscriredansunecommunautquilintresseenayantpralablementconsultsonprofil.

Compte Compte Compte Compte

Un membre a des droits sur ses informations personnelles. Il peut donc modifier tout moment ses
donnestellesquesonpseudo,sonmotdepassemaisaussisonimagepersonnelle(avatar).Ildoit
galementpouvoirchoisirsisesinformations(sonprofil)peuttreconsultablepardautresmembres
ounon.

Visibilit Visibilit Visibilit Visibilit

Un membre peut souhaiter divulguer ses informations personnelles, les articles de son journal
uniquement sesamis,cest--direildsirequelesautresmembres excepts sesamis,naientpas
accscesdonnes.Ilfautdoncluidonnercettepossibilit.

2 22 2.2Exigencesnonfonctionnelles .2Exigencesnonfonctionnelles .2Exigencesnonfonctionnelles .2Exigencesnonfonctionnelles

Exigencesdequalit Exigencesdequalit Exigencesdequalit Exigencesdequalit

Afinquelesitedonneenvieauxmembresdelefaireconnatreleursprochesetdeluitrefidle,il
estimportantderpondreauxexigencesdequalitsuivantes:

Ergonomieefficace
Partager des informations avec des membres, des amis doit tre un plaisir. La mise en page du site
doitfaciliterunmaximumladmarchelaideduneprsentationclaireetintuitive.Nousreviendrons
surcefacteurdequalitdanslapartieconception.

Interfacegraphique
Les diffrentes couleurs et choix typographiques doivent permettrent un utilisateur de reprer les
diffrentesfonctionnalitsquisoffrentlui.

Chartedutilisation
Puisque les utilisateurs du site sont tous diffrents (sexe, origine), une charte dutilisation doit tre
consultablepartoututilisateurs,afinquilsconnaissentlesrglesdutilisationdusite.

Aideenligne
Atoutmoment,lutilisateurdoitpouvoirconsulterdespagesdaide.

Contact
Pourtoutequestionsouinformations,lutilisateurdoitpouvoircontacterlewebmaster.

Exigencesdeperformance Exigencesdeperformance Exigencesdeperformance Exigencesdeperformance

Ilfautaussiprendreencomptelesexigencesquantitatives:

lesiteCommunitydoitpouvoirsupporterplusde100connexionssimultanes;

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

6
3 33 3.Analyse .Analyse .Analyse .Analyseetconception etconception etconception etconception

Dans cette partie, nous utilisons la modlisation UML pour reprsenter les spcifications des
exigences grce au diagramme de cas dutilisation, mais aussi pour analyser le domaine avec le
diagramme de classe. Par la suite, nous abordons la conception, dun point de vue fonctionnel,
techniqueetgraphique.

3.1Spcificationdesexigences 3.1Spcificationdesexigences 3.1Spcificationdesexigences 3.1Spcificationdesexigences : :: :lescasdutilisations lescasdutilisations lescasdutilisations lescasdutilisations

Nousallonsrpondreauxquestionssuivantes:Quelssontlesutilisateursdusystme?Quellessont
leurs interactions avec celui-ci? Il faut donc identifier les diffrents acteurs ainsi que les cas
dutilisationcest--direlesdiffrentesfonctionnalitsdusystme.

LesacteurspourlesiteCommunitysontlessuivants:
Linternaute/l'invit Linternaute/l'invit Linternaute/l'invit Linternaute/l'invit:personnequinestpasmembredusiteetquisouhaiteledevenir.
Lewebmaster Lewebmaster Lewebmaster Lewebmaster:rledespersonnesquiontenchargelamaintenancedusiteWeb.
Le membre Le membre Le membre Le membre : personne qui possde un compte, qui peut rechercher des membres, fait parti de
communauts,possdedesamis...

Les principaux cas dutilisation des acteurs prcdemment identifis, ont t bien mis en vidence
danslapartieprcdente.Voicidonclediagrammedecasdutilisation.

Diagrammedecasdutilisation.

Remarque:parlasuite,lewebmasterneseraplusprisencompte.

LannexeAdcritdefaondtaillelescasdutilisationprcdemmentidentifi,danslebutdobtenir
une expression prcise des besoins. Pour chaque cas dutilisation, on trouvera les diffrentes
interactions entre les utilisateurs et le systme, les scnarios des cas dutilisation ainsi que les
alternativesouerreursquepeutrencontrerlesystme,danslebutdeconnatrelesdiffrentestapes
dvelopperpourchaquefonctionnalit.
Mars2007 SiteInternetderseausocial IUTdeFontainebleau
7
3.2Analysedudomaine 3.2Analysedudomaine 3.2Analysedudomaine 3.2Analysedudomaine :lediagrammedeclasse :lediagrammedeclasse :lediagrammedeclasse :lediagrammedeclasse

Danscettepartie,noustudieronslesentitsstatiquesdusystme.Ceciestillustrparlediagramme
declassessuivant:

Diagrammedeclasses.

Remarquessurlesdiffrentesassociationsetcardinalits

Relation Relation Relation Relation Type Type Type Type

dassociation dassociation dassociation dassociation
Multiplicit Multiplicit Multiplicit Multiplicit
Invite Association
Unmembrepeutinviter0ouplusieursinternautes.(*)
Uninternauteestinvitpar1seulmembre.(1)
Possde Association
Unmembrepossde1ouplusieursamis(aumoinsceluiquilainvit).
(1..*)
Unepersonneestamieavec1ouplusieursmembres.(1..*)
Faitparti Agrgation
Unmembrefaitpartidaucuneouplusieurscommunauts.(*)
Un communaut est compose de 1 ou plusieurs membres (au
minimumsoncrateur).(1..*)
Poste Composition
Unmembreposte0ouplusieursarticlesdanssonjournal.(*)
Lesarticlesdunjournalneconcernentquunseulmembre.(1)
La destruction du membre entrane bien sur la destruction de tous les
articlesdesonjournal.
Concerne Composition
Unarticlecontient0ouplusieurscommentaires.(*)
Uncommentaireconcerneunseularticle.(1)
La destruction du journal entrane la destruction de tous ses
commentaires.
Illustre Composition
Uneimageillustre1seuljournal.(1)
Unjournalpeuttreillustrpar0ou3images.(0..3)
Ladestructiondujournalentraneladestructiondesimageslillustrant.
Envoie/
Reoit
Association
Unmembrepeutenvoyerourecevoir0ouplusieursemails.(*)
Unmailestenvoyoureuparunseulmembre.(1)
Habite Association
Unmembrehabite1seulelocalit.(1)
Dansunelocalit,onpeuttrouver0ouplusieursmembres.(*)
A Association
Unmembrepossde0ouplusieurscentresdintrts.(*)
Uncentredintrtconcerne0ouplusieursmembres.(*)
Mars2007 SiteInternetderseausocial IUTdeFontainebleau
8
3.3 3.3 3.3 3.3La La La Laconceptionfonctionnelle conceptionfonctionnelle conceptionfonctionnelle conceptionfonctionnelle

Lastructuredusite

Lesitewebestbassurunestructurequel'onappellestructurehirarchise.Ils'agitd'unestructure
dcoupeenblocsd'informations,oudefonctionnalits,relisunmmenoeud.

Lapaged'authentificationfaitofficedenoeudprincipalquidonneracinediversesfonctionnalitsune
foisauthentifier.

Cesfonctionnalitssontprsentesdans3barresd'outilsregroupesparthmes:
fonctionnalitsdunmembre
fonctionnalitsdunmembrefacesesamis
fonctionnalitsdunmembredanssescommunauts

Structurehirarchisesimplifie.

Nousavonsdoncchoisicetypedeschmad'organisationpuisqu'ils'adaptefacilementnosobjectifs,
quisontd'unepart,unefacilitdenavigationpourl'utilisateurensefamiliarisanttrsrapidementce
schma,etd'autrepartuneorganisationsoignedenosinformationsetfonctionnalits.

Lastructuredespages

TouteslespagesdusiteCommunityontunemmestructure.

Tramesimplifiedespages.

Les lments changeant entre les diffrentes pages sont le contenu, ainsi que la barre doutils. On
reviendrasurcelalorsdelaconceptiongraphique.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

9
Lesites'organised'unconteneurprincipal,l'index.
L'indexestprsentcontinuellementpendantlanavigationpuisqu'ilaffichetoutes lesautrespagesdu
site.Cestluiquisechargedafficherlesdeuxbannires,maisaussidechangerlazonedecontenu.

Les pages a affich sont envoyes travers la mthode GET et sa variable page lorsqu'un
utilisateurcliquesurunlienpournaviguer.

Exemple:

index.php?page=home
index.php?page=aide

La variable page est analyse par une page de traitement des pages (include_page.php), qui va
afficherlecontenudsirainsiquelabarred'outilscorrespondantesincessaire.

Exemple:

$page = $_GET['page'];

if ( $page == "home")
{
include("include_barredoutils_home.php");
include("include_home.php");
$test= 1;
}

if ( $page == "aide")
{
include("include_aide.php");
$test= 1;
}

Nous avons donc choisi ce type de navigation, puisqu'il tait trs bien appropri un site web fourni
en page et bien qu'ilsoit considr comme brutal par certainsinformaticiens,ila fait ses preuves en
termedescurit.
De plus, il est d'une part trs dynamique, puisqu'il nous permet d'ajouter des pages trs facilement
sans rorganiser tout le systme de navigation en parcourant les nombreuses pages. D'autre part, il
n'yapasbesoindedupliquerl'indexpuisqu'ililfaitofficedeconteneur.Etenfin,ilamliorelarapidit
du site, car le conteneur (l'index) est charg qu'une fois puis gard en cache tout au long de la
navigation.

3.4 3.4 3.4 3.4Lac Lac Lac Laconception onception onception onceptiontechnique technique technique technique

Lesrglesdenommage Lesrglesdenommage Lesrglesdenommage Lesrglesdenommage etdecodage etdecodage etdecodage etdecodage

Nous devons respecter certaines rgles de nommage et de codage que nous nous sommes dfinis.
Ellespermettrontunecomprhensionplusrapideducodeparlesdiffrentsmembresdugroupe.
LannexeBdfiniecesrgles.

3. 3. 3. 3.5 55 5Laconceptiongraphique Laconceptiongraphique Laconceptiongraphique Laconceptiongraphique

Lergonomie est un point important. Son objectif principal est de faciliter lutilisation du site par les
utilisateurs.Pourcela,nousnousimposeronscertainescontraintes:

Accessibilitdesnavigateurs Accessibilitdesnavigateurs Accessibilitdesnavigateurs Accessibilitdesnavigateurs

Le site Community doit tre fonctionnel sous les navigateurs les plus utiliss, cest--dire: Firefox et
Internet Explorer. Les diffrentes fonctionnalits dveloppes devront donc tre testes sur les deux
navigateurs.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

10
Lesystmedenavigation Lesystmedenavigation Lesystmedenavigation Lesystmedenavigation

La navigation doit tre simple, mme pour les usagers dbutants. Il est donc indispensable que
lapprentissage du site ne demande pas des efforts lutilisateur. Lutilisation de menu qui rpertorie
lesprincipalesfonctionnalitspermetlutilisateurdeminimisersoneffortmental.

Labarredefichiers,quiestunmenuhorizontalstatiqueestdonccomposde:
-home:lapagedaccueil
-inviter:inviterdespersonnesquinutilisentpaslesite
-articles:derniersarticlescres
-recherchermembre
-recherchercommunaut
-aide
-dconnexion

Barredefichiers.

La barre doutils quant elle changera selon la navigation de lutilisateur. C'est--dire selon sil se
trouvesurune pagequileconcerne,ouunepagequiconcerneun amiouun autremembre,ouune
pagerelativesescommunauts.

Ainsi lorsquil navigue que des pages le concernant, la barre doutils sera compos des onglets
suivants:
-home:sapagedaccueil
-messagerie:saboitemail
-journal:sonjournalavecsesarticles
-profil:sadescription
-compte:sesdonnespersonnellesquilpeutmodifier.

Barredoutils:utilisateur.

Lorsquelutilisateurnaviguesurunepagedunautremembreouami,labarredoutilsseracompose
desonglets:
-home:leprofildelami/dumembre
-message:envoiedunmessagelami/membre
-journal:lesdiffrentsarticlesdelami/membre
-ajouterami:silutilisateursouhaitedemandercemembredtresonami

Barredoutils:ami/autremembre.

Lorsque lutilisateur navigue sur une page relative aux communauts, la barre doutil sera compose
desongletssuivants:
-home:leprofildelacommunaut
-ajoutercommunaut:silutilisateursouhaitesinscriredansunecommunaut
-invitercommunaut:inviterdesmembresdansunecommunaut
-quittercommunaut

Barredoutils:communaut.








Mars2007 SiteInternetderseausocial IUTdeFontainebleau
11
Apparencedusite Apparencedusite Apparencedusite Apparencedusite

Lachartegraphique

Afin de donner lutilisateur des repres au sein du site et de faciliter sa visite, il doit y avoir une
cohrence entre chaque page. La charte graphique dtermine les diffrentes rgles graphiques et
ergonomiques.

Ellecontient:
- lesdimensionsdespages
- lescouleursemployer(letexte,lesliens,lesliensactifs,lesboutons)
- lesstylesemployer(famille,taille)
- lestypesdimages

LannexeCprciselachartegraphiquedusite.

Choixdescouleurs

Pour raliser limage du nom Community, nous avons cherch les tendances actuelles. Il en a
dcoul quune image avec des formes rondes avec des couleurs bleu et orange correspondait le
mieux,maislechoixtaitencoreassezvastepourlacration.

Anthony a des bases sur Photoshop, il a dvelopp quelque chose correspondant aux tendances
actuelles.Ilachercherunepolicecorrespondante:assezrondeetavecdeslettrespastrsdfinis.

Unefoislimageintgresurlefond,ilfallaittrouvquelquechosepermettantdelafaireressortirde
labannire:unelueurblancheextrieureaulogocorrespondaitparfaitement.

LesbanniresetlimagedunomCommunityralisesetapprouves parlesautresmembresdu
groupe,iladoncfallusadapterauxcouleursutilisespourchoisirunepalettedecouleurpourlesite.

Nousavonsdcidquelacouleurdominantepourlesiteseralebleu.Bienquecettecouleurapour
symbolique principal le froid, cest pourtant la couleur prfrer des personnes ( hauteur de 33%
daprslesitehttp://www.1001-votes.com).Depluslebleudonneuneimpressiondespace,etapporte
unquilibretoutenaccentuantlesformes.

Unefoiscettecouleurdfini(#6699FF)nousavonsutilisslelogicielColorSchemeafindeconnatre
lescouleursquisharmonisentleplusaveccelle-ci.Daprsunaccorddequatretonsdecouleur,nous
avons choisi le orange et le vert. Dautant plus que le orange a pour caractre psychologique la
sociabilitetlefaitdtreouvert,etlevertreprsentelesloisirs,ladtente.

Contenu

Chaque page doit avoir un titre propre permettant lutilisateur de savoir sans rflchir dans quelle
sectiondusiteilsetrouve.

Exemple:

Les phrases simples et les textes courts sont privilgis car cela favorise une lecture rapide pour
lutilisateur.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

12
4.R 4.R 4.R 4.Ralisationtechnique alisationtechnique alisationtechnique alisationtechnique

4.1 4.1 4.1 4.1Le Le Le Leslangagesutiliss slangagesutiliss slangagesutiliss slangagesutiliss

XHTML1.0 XHTML1.0 XHTML1.0 XHTML1.0

Afin d'tre au standard du W3C sur la famille HTML, nous avons utilis le XHTML 1.0, plutt qu'une
miseenpageenHTMLdifficilemanipuler.Lecontenuetlaprsentationserontdvelopperdefaon
distincte.

CSS CSS CSS CSS

Afindemanipulerlaprsentation,nousavonsutilisdesfeuillesdestyleCSS.Voicilesraisons:
Dune part, il permet dallger le code source crit en XHTML, puisque tout ce qui est relatif la
prsentation est gr dans un fichier spar. Ce qui entrane donc un chargement plus rapide des
pages,quiestaprsmanipulparlafeuilledestyle.
Et dautre part, il permet de nous retrouver plus facilement dans notre code et ainsi facilite les
modificationseffectuer,puisquaulieudavoirmodifiertouteslespagesunes unes,nousavons
justemodifierlefichierCSS.

Exemplesdutilisation:
-tousleschoixgraphiques
-pagesdiffrenteslorsquelutilisateursestauthentifiounon.

PHP PHP PHP PHP

Pourlecotserveur,nousavonschoisilelangagePHP,cecipourplusieursraisons:
Tout dabord, le PHP gre trs bien les requtes SQL. Ce qui est important pour manipuler les
rsultatsderequtesSQL.
Maisaussi,lePHPpossdebeaucoupdefonctionsutilestellequelacryptologie
Enfin, le PHP est un des langages cot serveur le plus utilis, il existe une grande communaut
dutilisateursdePHP.

Exemplesdutilisation:
-cryptagedemotdepasse
-traitementdesdiffrentsformulaires
-utilisationdevariablesdesession

SQL SQL SQL SQL

L'association PHP/MySQL est de plus en plus utilise ces dernires annes. C'est pourquoi nous
avonschoisileserveurdebasededonnesMySQLquioffredegrandesperformancesenflexibilitet
monte en charge. Il intgre de nombreuses fonctionnalits et assure une bonne scurit des
donnes.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

13
AJAX AJAX AJAX AJAX

Nous avons intgr notre projet la mthode dveloppement AJAX dans plusieurs de nos modules.
Eneffet,nousl'utilisonsengrandepartiepoursesrequtesasynchronequinouspermettentdefaire
etdemanipulerlesrequtesauserveursansdrangerlapagedel'utilisateur.

Exempledutilisation:
-chargementdeslistesd'amisetcommunautsdanslespageshome
-recherchedesutilisateurs
-moduledemessagerie

XML XML XML XML

NousexploitonsleXMLpourletraitementdesrsultatsdesrequtesenvoyesauserveur.
Le XML est gnr grce au PHP et aux requtes SQL afin d'extraire les donnes de la BD et les
traitessousformeXML.

DOMetJAVASCRIPT DOMetJAVASCRIPT DOMetJAVASCRIPT DOMetJAVASCRIPT

Une fois la feuille XML gnre, nous pouvons afficher et interagir dynamiquement avec la page de
l'utilisateurgrceauJavaScriptetauDOM.

Exempledutilisation:
-affichagedynamiquedesvillesselonuncodepostalsaisi,sansrechargerlapage
-affichagedynamiquedesemailsreus
- affichage dynamique du formulaire de rponse un mail en ayant cliquer pralablement sur un
bouton

Nousmarrionsplusieurslangagespourplusieursraisons:leursperformances,leursstandardisations
etleursportabilitfaceunemultitudedelangageWeb.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

14
4.4 4.4 4.4 4.4Lestests Lestests Lestests Lestests

Afinquelesitesoitdequalit,ilestimportantderaliserdestests.Cestestsontpourbutde
dtecter les erreurs ventuelles et permettent de les corriger pour quil ny ait pas dimpact sur le
fonctionnementdusite.

Pourcelaaucoursdudveloppement,nousavonseffectu5typesdetests:
- destestsunitaires
- destestsdintgrations
- destestsfonctionnels
- destestsdeperformances
- destestsdutilisabilit.

Etapesdestests.

Lestestsunitaires Lestestsunitaires Lestestsunitaires Lestestsunitaires

Cestestspermettentdevaliderchaquefonctionnalitdveloppeindpendammentdesautres.
Lobjectifdecetestestdevrifierquechaquefonctionnalitdveloppecorrespondauxattentesdes
spcifications.Unefoislestestsvalids,leprogrammepouvaittreenvoyYoanpourlintgration.

LannexeDillustrelestestsunitairespourlemoduledelinscription.

Rsultatsdestests

Toutes les fonctionnalits : inscription, cration de message, affichage de la liste de messages,

rponseunmessage,crationdarticleontttestesavantdtreenvoyYoan.Lersultattait
conformecequenousavionsdfinidanslecahierdescharges,etlescasderreursontttraits.
Une fois les fichiers reus, Yoan pouvait procder lintgration des fonctionnalits, et raliser des
testsdintgration.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

15
Lest Lest Lest Lestest est est ests ss sdintgration dintgration dintgration dintgrations ss s

Lestestsdintgrationconsistentenlassemblagedesfonctionnalitstestesunitairement.
Lobjectifdecestestsestdoncdevaliderlintgrationdesdiffrentsmodulesentreeux,etdevrifier
quelersultatestconformelaconception.

L'intgration d'un module dans le site est une phase dlicate. Elle peut soulever des problmes non
priseencomptedurantlaphased'analysedumoduletoutcommeconduiredesimplesbugs.C'est
pourquoi les tests d'intgrations sont trs importants puisquils peuvent dceler ces bugs qui ne se
sontpasapparuslorsdestestsunitaires,etquilfautcorriger.

Miseenplacedestests

Ontestetoutd'abordlacompatibilitdumoduleaveclesautres.Ensuiteonfaitdestestspluspousss
surlesfonctionnalitsdumodule.Puisontestelesautresmodulesquipeuventinteragiraveccelui-ci,
enexcutantdestchesplusprcisesquipourraitavoirdesrpercutionssurcemodule.
Bienentendudescorrectionssontfaitespourpasserdestestspluspousss.

LannexeEillustreuntestdintgrationsimple,celleduformulaire.

Problmessouventrencontrslorsdelintgration

Les problmes les plus souvent rencontrs dans ces tests sont la redondance des importations de
bibliothques en PHP, redondance des variables de session, ainsi que les fonctions PHP
incompatiblesentreelles(exemple:header).
Mais les problmes peuvent tre beaucoup plus importants. En effet, certains modules utilisent
beaucoup de ressources. Ils doivent envoyer plusieurs requtes lors de chaque interaction avec
l'utilisateur. C'est pourquoi certaines fonctions AJAX intgres dans ces modules doivent tre
correctementdissocies,etisolespourvitertoutconflit.

Cestestspermettentdedmarrerunesriedetestsdansleurlmentfinal.

Lest Lest Lest Lestest est est ests ss sfonctionnel fonctionnel fonctionnel fonctionnels ss s

Ces tests permettent de savoir si les diffrentes fonctionnalits sont oprationnelles, cest--dire si
elles sont conformes au cahier des charges, et se droulent correctement; maisaussiils permettent
dobserver le comportement du systme lorsque des valeurs inattendues ou incorrectes sont saisies
(testsderobustesse),cest--diretesterlescasderreursprvusviadesmessagesderreur.

Lobjectifdecetestestdevrifierquelesiteestconformeaucahierdeschargesetsilrsistedes
comportements anormaux. Si le systme ragit bien ces erreurs, cela veut dire que le site a une
bonneaptitudersisterauxerreurs.

Miseenplacedestests

Pour chaque fonctionnalit dvelopper, nous avons regard si elles taient conformes au cahier des
charges,etsilesdiffrenteserreursquepeutrencontrerlesystmesontgres(parexemple,pardes
messagesderreur).

LannexeFrapportequelquestestsquenousavonseffectussurdiffrentesfonctionnalits.

Rsultatsdestests

Selonlesvaleursdentres,lessortiescorrespondaientbiennosattentes.Ellessonttraitespardes
messagesderreurquipermettentdamliorerlascurit,notammentlorsdesaisiedURLincorrectes.
Le cahier des charges est respect pour toutes les fonctionnalits except lors des tests du module
email o nous avons remarqu que la fonctionnalit supprimer un email ne correspondait pas
nosattentes.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

16

Lestests Lestests Lestests Lestestsde de de deperformance performance performance performance

Pour effectuer les tests de performance nous avons utilis Jmeter. Cet outil permet de tester la
monteenchargedusiteeneffectuantunscnariodfinit.CescnarioseraralispourXutilisateurs
virtuels, que nous choisirons. Il permet de voir comment ragit notre site en situation relle. Nous
pourronsensuitetudierlesrsultatsetendduirelespagesquiontbesoinsdtreoptimises.

Lobjectif de ces tests est donc de dtecter les pages qui peuvent tre amliores, notamment en
modifiantlesrequtes.Cestestssontimportantespourlespageslesplusfrquentes,puisquellesse
doivent dtre le plus fluides possible. Si la suite de ces amliorations, les pages sont encore trop
lentessafficherpouruncertainsnombredeconnexionsdutilisateur,ilestenvisageabledesparer
celles-cienplusieurspages.

Une fois les pages optimises, le second objectif est de connatre le nombre de connexions
simultanesquipeuttregres.

Miseenplacedestests

NousavonschoisitpourillustrercestestslapagedaccueiletlefichierPHPquignrelefichierXML
permettant laffichage de la liste des amis et des communauts dans la page daccueil. Nous avons
effectu une premire vague de tests avec des nombres de connexions diffrents. Par lasuite, nous
avonssimplifiunerequteetraliserunesecondevaguedetests,toujoursaveclemmenombrede
connexions.

LannexeGillustrescestests.

Rsultatsdestests

Grce aux donnes de Jmeter, nous laborons un graphique de performances daprs trois
critres:letempsmoyendaffichage,letempsncessairesatisfaire90%desrequtes,etletemps
maximaldaffichage.

Aprs la simplification de la requte, on remarque clairement que le temps daffichage est divis par
deux. Le fichier PHP optimis est donc deux fois plus rapide lors de son chargement que son
ancienneversion.
Le code de la page daccueil na pas t directement modifi, mais son temps de chargement a
nettementdiminu.CegainderapiditestdlamliorationdufichierPHP,puisqueilestutilislors
duchargementdelapagedaccueil.

Lest Lest Lest Lestest est est ests ss sdutilisabilit dutilisabilit dutilisabilit dutilisabilit

Cestestspermettentdobserverlecomportementdelutilisateurlorsquilnaviguesurlesite:connatre
sesimpressionssurlegraphismeutilis,voirlesproblmesquilrencontre,lesquestionsquilpeutse
poser,lesfonctionnalitsquilapprcie.

Miseenplacedestests

Nous avons ralis ces tests grce quatre personnes de notre entourage. Ces personnes ont t
choisiesselonleurge,entre20et28ans,quirefltentlesutilisateurspotentielsdusiteCommunity.
Nousleurdistribuonsunquestionnaireremplir.

Illaissesescritiquessurlafeuillepralablementdistribue.Surcettefeuillenousnousintressons
deuxcritres:graphiqueetfonctionnel.

LannexeHcomportelestestsdutilisabilitdecesquatrepersonnes.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

17

Rsultatsdestests

Pour synthtiser ces rsultats, nous avons report sur un graphique les valuations gnrales des
utilisateurs.

Nous pouvons en conclure, que les utilisateurs sont satisfaits des fonctionnalits par leur facilit
dutilisation, et leurs fluidit, cependant, cot graphique la seule remarque rcurrente est "trop de
bleu".

Nouspouvonsapporterquelquesmodificationsimmdiateslasuitedecesrsultats:
- sur la page d'authentification, le terme "Login" doit tre remplac par "Email" de faon ce que
l'utilisateurnepensepasqu'ils'agissedesonpseudo.
-danslamessagerie,lestitres:"Emailsreus"et"Emailsenvoys"doiventtrerajoutsdemanire
cequel'utilisateurarrivesesituerdanslanavigation.
-danslabarred'outils,lesdiffrentsongletsdoiventtrepersonnalisspourquel'utilisateursoitplus
impliqu(Mamessagerie,monjournal...)

Lesmodificationsfuturesquenousdevonseffectussont:
-parrapportaugraphisme,notammentlescouleursutilises

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

18
5. 5. 5. 5.Organisationetb Organisationetb Organisationetb Organisationetbilan ilan ilan ilan duprojet duprojet duprojet duprojet

Comment sest-on organis pour mener bien ce projet? Quels sont les rsultats du projet? A-t-on
russitatteindrelesobjectifsfixs?Quellessontlesdiffrencesentreobjectifsetrsultats?Quelles
amliorationssontenvisages?Danscettepartienousrpondronscesdiffrentesquestions.

5.1 5.1 5.1 5.1Organisationdugroupe Organisationdugroupe Organisationdugroupe Organisationdugroupe :mthodedetravail :mthodedetravail :mthodedetravail :mthodedetravail

Au dbut du projet nous avions dcid de se rpartir les tches en fonctions des langages utiliss.
Nous avons remis en question ce dcoupage puisque nous ne pouvions pas dvelopper ensemble,
car nous nhabitons pas proximit les uns des autres. Par consquent, nous devons dvelopper
chacundenotrecotpuismettreencommun.

Lemodedetravailenvisagaudbutsestdoncvuabandonnpourunestructurededveloppement
diteoutsourcing.

Dtaillonscettestructuretraverslexempledunmodule:

Schmaillustrantnotremthodedetravail.

Toutdabord,suitellaborationdudiagrammedecasdutilisation,nouslaboronslediagrammede
squencesystmedumoduleenquestionafindecernertouteslesfonctionnalits.Nousavonsralis
cettetchetousensembleafindavoirtoutesleopinionsdesmembresdugroupedanslebutdavoirla
meilleureanalysepossible.

EnsuiteunefoislUMLtabli,nousdfinssionslesdiffrentslmentsgraphiquesdumoduledesorte
cequunmembrepuissecommencerdvelopperlamiseenpagerelativeaumodule,leCSS.Mais
aussi nous dfinissions les diffrents lments techniques en listant les diffrentes tapes
(fonctionnalits)raliserrelatifsaubonfonctionnementdumodule.

Selon les modules, leurs complexits, et les diffrentes comptences de chacun de membres, nous
dveloppions un ou deux les diffrents lments du module, indpendamment les uns des autres.
Une fois llment dvelopp et les diffrentes fonctionnalits ralises, nous effectuons des tests
unitaires. (Nous reviendrons sur ces tests un peu plus tard). Lorsquils sont valids, llment est
transmispourlintgrerausitelui-mme.

Llmentestdoncintgrdanslossaturedusite.Desmodificationsducodesontalorsncessaires,
carlestechniquesutilisesparchacundentrenousnesontpascommunes(parexemple,innerHTML
vsDOM).Unefoiscettetcheralise,ilfautlavalideeneffectuantdestestsdintgration.

Parlasuite,nousvrifionsqueleproduitrpondauxattentes,cest--direquelemodulecorrespond
auscnarioprvu,surlepointdevuegraphique(effetvisibleparlutilisateur)etsurlepointtechnique
parlesrsultatsdelabasededonns(cequenevoitpaslutilisateur).

Notremthodedetravailpossdecertainsavantages:
-lesprogrammessonttestsplusieursreprises;
- le dveloppement est spar de lintgration, ce qui permet lors du dveloppement de ne pas se
soucierdelintgration,etdoncdtreplusproductif.

Maisaussiquelquesdfauts:
-possibilitpourundveloppeurdtrebloqusurunlmentdumodule;
-lamaniredecodestdiffrentelesunsdesautres.
Mars2007 SiteInternetderseausocial IUTdeFontainebleau
19

Lesclsdenotremthode:
-lapropretducodeetrespectdelachartedecodage;
-lacommunicationentrelesmembresdugroupequantlavancementdesmodules.

Maislesclsdecettemthodepeuventdevenirdeslimitessiellesnesontpasrespectes.

5.2 5.2 5.2 5.2Rsultat Rsultat Rsultat Rsultat

Lesexigencesfonctionnellesfixesdsledbutparnotrecahierdeschargesontpresquetmenes
bien.Eneffet,lesprincipauxmodulescaractrisantunrseausocialonttintgrs.

Les exigences non fonctionnelles qui assurent la qualit et la performance du site ont toutes t
dveloppes.Lergonomiedusiteestsatisfaisantepourlesutilisateursdaprslestestsdutilisabilit,
lesiteestcompatibleavecInternetExporeretFirefox.Lesactionstellesquecontacterlewebmaster,
accderlaideenligne,etlachartedutilisationsontpossibles.

La performance du site a t prouve daprs les tests de monte en charge permettant ainsi plus
de100utilisateursdeseconnecterenmmetemps.

Toutefois,certainspointsn'ontputredveloppparmanquedetemps.

Lemodulemail,olasuppressiondunmessagenapastralisecorrectement.Lacrationdune
nouvelle table dans la base de donnes aurait t la solution, mais notre analyse prliminaire ntait
pas correcte et nous nous en sommes rendu compte trop tard. Si notre analyse de dpart avait t
correcte,nousaurionspuvalidercompltementcemodule.

Lemodulecommunaut,napasttotalementfinalis:lacrationdecommunaut,larecherchede
communautsonttdvelopps,maisparsoucidetemps,nontputreintgrs.Nousavonsdonc
laiss de ct ce module, mais en laissant les liens s'y rapportant qui pourrait donc t intgr sans
grandedifficult.

Bienquenousaurionspudvelopperlemodulecommunautetmodifierleproblmerencontrdans
le module messagerie, nous avons prfr vrifier et amliorer la performance et la qualit du site,
notammentgrceauxdiffrentstests.

Cettesolutionatenvisagelorsquenousnoussommesrenducompted'unmanquedetemps,nous
avons donc rflchi afin de mener bien notre projet de la meilleure faon possible. C'est pourquoi
nous avons dcid de recarder notre sujet en ne gardant que les modules les plus important et en
contrepartienousavonsdcidd'amliorerlaqualitetlaperformancedenotreapplication.

L'application finale n'intgre pas tous les modules envisags dans notre cahier des charges.
Nanmoinselleestconformenosobjectifsquitaientd'intgrerlesmodulesdebasescaractrisant
les rseaux sociaux. De plus l'application a t amliore en termes de scurit, performance et
qualitquirendsonutilisationbeaucoupplusrassurante,rapideetfaciledfautdel'exhaustivitdes
outils.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

20
5.3 5.3 5.3 5.3Amlio Amlio Amlio Amliorations rations rations rationsenvisages envisages envisages envisages

La finalit du projet tait de le mettre en ligne, mais nayant pas pu mener bien cette tche, nous
avonslintentiondecontinuerdveloppercesite,aprsnotresjouruniversitaire.Nousenvisageons
delemettreenligne,afindelevoirvoluerensituationrelle.
Pour cela nous devrons nous informer des diffrentes tapes de la mise en ligne, mais auparavant
nousdevonscomplterlesiteactueletamliorerquelquesoutilsdjprsents.

Lapremireamliorationseradefinaliserlemodulecommunaut,olesutilisateurspourrontpartager
leurscentresdintrt,nonseulemententreamismaisaussiavecdesgensquiontlesmmescentres
dintrt.Lecercledamisdechaqueutilisateurseverradoncagrandi,parlebiaisdesmembresdela
communaut,maisaussiparlesamisdecesderniers.

La communaut fonctionnera sur un principe similaire celui du journal, chaque membre crira un
articlequiserapartagetenrapportaveclethmedelacommunaut.

Exemple: une communaut football, ou chaque utilisateur pourra dbattre avec les autres sur un
match, ou ils pourront se donner les dernires info relatives au monde du football, supporter leurs
quipesfavorites,etc

Lacommunautseragreparsonfondateur,ilauraledroitdefaireentrerounonunmembredans
la communaut. A lui aussi le pouvoir de bannir quelquun de la communaut, pour des raisons
propres,discoursdplac,pasenrapportaveclacommunaut,proposinjurieux,racistes,ouencore
mauvaiseambiancecrdanslacommunautparunutilisateur.

Ensuitenousamlioreronslemodulemailsafinquelasuppressiondemailssoitoprationnelle.Nous
reviendronsdoncsurcettefonctionnalit.

Nousenvisageonsaussidamliorerleprofildelutilisateur,demanirecequilpuissepartagerdes
photos,deliensInternet,etdesvidos.Lesvidosserontuploadsurleserveur,etcomprimen
unformatpropreaulecteuruniverselquenousutiliserons.

Mais aussi, le dveloppement dun module back office sera indispensable pour rguler les
informationscirculantentrelesutilisateurs.

Enfin les tests effectus avec Jmeter nous pousseront optimiser certaines pages, donc
probablementdenrevoirlastructureentire.

Aprs a le site devrait tre oprationnel pour une mise en ligne. Nous ouvrirons une communaut
libretoututilisateur,liaudveloppementdusiteouchacunpourralaissersesidespourunsitelui
ressemblant,desortelamliorerenfonctionsdesgensquiypassentdutemps.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau
21
6.Conclusion 6.Conclusion 6.Conclusion 6.Conclusion

Leprojettutorestbeaucouppluscomplexequelesprojetsquenousavonsdjraliss(miniprojets
de BP, site Web de vente en ligne Medelib, miniprojet IHM en GL). Il permet de mettre en relation
plusieursenseignements,utilisssousunedimensionprofessionnelle.

Toutdabord,ceprojetnousapermisd'appliquerlesconnaissancesquenousavonsacquisesdurant
notre DUT, telles que la modlisation, les diffrentslangages de programmation, la gestion de projet
maisaussilacommunication.

Grce celui-ci chaque membre de l'quipe a pu renforcer ses connaissances mais aussi apporter
auxautresmembressonsavoiretsescomptencesafind'harmoniserl'efficacitdel'quipe.

A travers des mthodes de travail et des outils, ce projet nous a permis de nous immerger dans un
universprofessionnel.

Il est vrai que de crer une application et respecter un cahier des charges rendent un projet tutor
intressant et professionnel mais il y a aussi toutes les dmarches qui ne sont pas visibles et qui
rendent enrichissante une telle exprience : couter lopinion de chacun des membres de l'quipe,
savoir communiquer et argumenter afin dopter pour les meilleurs choix, sorganiser sur les plans
personnels et collectifs, grer lesimprvus, respecter des dlais pour ne pas gner ses collgues et
pournepasretardertoutleprojet.

Leprojetnousapportedoncchacununeidesurlorganisationdanslemondeprofessionneletqui
permettradenousadapterplusfacilementlorsdenotrestage.

Mars2007 SiteInternetderseausocial IUTdeFontainebleau

22
Lessourcesdinformationetbibliographie

CHUNicolas.Russirunprojetdesiteweb,3
me
d.Paris:Eyrolles,2005,242p.

SALZMANClaude,Dvelopperunprojetinternet.Paris:Dunod,2001,255p.

HARDYJean-Marc,Check-listpourrussirsonsiteWeb.Paris:Dunod,2004,152p.

ROQUESPascal,UMLModliserunsitee-commerce.Paris:Eyrolles,2002,152p.

ULLMANLary,PHP&MySql:Dveloppementdesitesweb.Paris:CampusPress,2004,408p.

CARFANTANJean,JavaScript.Paris:MicroApplication,2005,192p.

PLASSEMichel,DvelopperenAjax.Paris:Eyrolles,2006,314p.

ENGELSJean,XHTMLetCSS.Paris:Eyrolles,2006,508p.

http://fr.wikipedia.org/wiki

http://www.manuelphp.com/

http://www.phpdebutant.org/