Creer Application WEB

Crationd'uneapplicationWEBavecPHP/MySQL

1


CreruneapplicationWEBavecPHP/MySQL

ParPhilippeBousquet

Copyright(c)20032008PhilippeBousquet.

2


Celivrelectroniqueestunerditiond'unarticledeprparationd'uneconfrencequej'avaiseffectuaulyceCaslerTalenceen2003/2004danslecadredesconfrencesdel'ABUL.

CeLivreestdistribuselonlestermesdelaGNUFreeDocumentationLicense.Copyright(c)20032008PhilippeBOUSQUET

3


TabledesmatiresI. Introduction 5II. Lemodlededonnes 6III. Crationdelabasededonnes 11IV.Maquettagedel'application 21V. LeXHTML 23VI.LespagesduforumenXHTML 36VII.LamiseenformeparCSS 41VIII.Programmationdel'application 61IX.LelangagePHP 62X. L'applicationmyForum 81XI.Rfrences 104

4


I.Introduction

Autraversdecelivre,nousallonsvoir lesdiffrentestapespourcreruneapplicationWEB, pour cela nous nous proposons de crer un forumde discussion bas sur lestechnologiessuivantes:

MySQLPourlestockageetlagestiondesdonnes

XHTMLetCSSPourlerendudenospagesHTML

PHPPourlaprogrammationdespartiesdynamiquesdenotreapplication

5


II.Lemodlededonnes

Avantdeselancerdanslaprogrammation,ilconvientdebiendterminerl'ensembledesdonnes ainsi que les liaisons qu'elles ont entre elles. En effet la programmation nereprsentequ'peuprs20%dans lacrationd'uneapplication, lerestetantpartagentrel'Etudedecequel'onveutraliseretlestestsfinaux.

Dfinitiondesfonctionnalitsdel'applicationNousdevonsdansunpremiertempsdoncbiendfinircequenotreapplicationestcensefaire.Unforumdediscussionestenfaitunmcanismepermettantdesutilisateursdediscutersurdessujetsdiverstraversdesmessagescrits.

Lesutilisateursdoiventpouvoircrerdenouveauxsujetsdediscussions,ilsdoiventpouvoirlirelessujetsdesautresutilisateursetbienentendupouvoiryrpondre.

OrganisationgnraledesdonnesUnefois les fonctionnalitsfiges, nousdevonsorganisernosdonnesafindepouvoirconstituernotrebasededonnes.C'estcelleciquiseralecurdenotreapplication,doncnousdevonsyconsacrerunegrandeattentionpourquecellecinesoitpasmalconue,cequirendraitnotreapplicationmoinsfonctionnelle.

Dansl'tapeprcdentenousavonsvuapparaitretroisnotionsdistinctes:

L'utilisateurc'estunepersonnequimettraetliradesmessages. Lesujet ils'agitdupointdedpartdeladiscussion,ilregroupelesmessagesle

concernant. Lemessage c'est l'objetquipermetauxutilisateursdes'exprimersurunsujet

donn.

Doncnousvoyonsiciquenotreapplicationdevraaumoinsgrercestroisentits.Doncnousdevronscrertroistablespourconstituernotrebasededonnes.

Cependantpourquenotreapplicationsoitmoinsrbarbative,danslesensouauboutd'unmomentlesutilisateursrisquentdeseperdredanslajungledessujets,nousallonsintgrerunenouvellenotion:Lacatgorie.

Eneffetnousallonsdciderderegroupernossujetsparcatgories,ceaurapoureffetquenosutilisateur,aulieudelancerunediscussiondanslevide,nousallonsleurproposerdescatgoriesdanslesquellesilspourrontcrerleurssujetsdediscussions.

6


Parexemple:

Utilisateur :darken

Catgorie :technique

Sujet :envoyerdesmailsavecOO

Message : "Il yabiendansoutils / options/programmesauxiliaireslapossibilitdechoisirunclientdemessageriepardfaut.Maisjen'arrivepassavoircommentenvoyerdesmails....."

NousauronsdoncquatreTablesdansnotrebasededonnes:

utilisateurs:quirassembleralesinfossurlesutilisateurs categorie:quilistelensembledescatgoriesduforum sujets:contiendralessujetsdesdiffrentesdiscussions messages:contiendratouslesmessagesmisparlesutilisateurs

OrganisationgnraledesdonnesMaintenantquenousavonsdterminquellestablesconstituerontnotrebasededonnes,ilnousfautdfinirlesinformations(champs)quecontiendrontchacunedestables.

TableUtilisateursCettetablecontientlesutilisateursayantaccsauforum,chaqueutilisateurdevradansunpremier temps, passer par uneprocdured'inscriptionafindepouvoir utiliser le forum.Nousauronsdoncbesoinsdesinformationssuivantes:

codeutilisateur:ils'agitdel'identifiantdel'utilisateur,celuicidoittreunique

motdepasse:ncessaireaulogindel'utilisateur

email :cetteinformationestutilepourrenvoyerlemotdepasse l'utilisateurquil'auraitoubli

nom et prenom : cesdeux informationsnesont pasvraiment utilesmais il esttoujoursintressantdelespossder

7


TableCategoriesCettetablecontientlesthmesdediscussionsduforum,chaquesujetdediscussionseraenglobdansl'undesthmesprsententable.Cettetableneseradisponiblequ'enlectureseule,c'estdirequec'estleDBAquiajouteralesthmesventuelsdanslatable,iln'yaurapasdemisejourparprogramme.

Peud'informationssontncessairespouridentifierunthme:

unnumeroidentifiant:ils'agitd'unnumroautoincrmentquipermetd'identifierunthme,cenumroestunique

unnom : Il s'agitdunomduthme,parexemple:Devel(pourunthmesur ledveloppement)

unedescription:cetteinformationpermetd'expliqueruntantsoitpeulethme,parexemple:"Discussionssurledveloppementdelogiciellibres"

TableSujetsCettetablecontient l'ensembledessujetsdu forum,Elledoit possder les informationssuivantes:

un numero d'identifiant : il s'agit d'un numro autoincrment qui permetd'identifierunsujet,cenumroestunique

untitre:titrequidcritlesujet

datecreation:ladatedecrationdusujet

heuredecreation:l'heuredecrationdusujet

Cependant un sujet est cr par un utilisateur, il est intressant de connaitre cetteinformation,doncnousajoutons:

codeutilisateur:c'estlecodedel'utilisateurayantcrlesujet,ildoitexisterdanslatableusers.

Deplusnousavonsprcis qu'unsujet tait enrapport avecunecatgoriedonccetteinformationdoittregalementdanslatable:

identifiant catgorie : s'est l'identifiant de la catgorie laquelle le sujet estrattach,lacatgoriedoitexisterdanslatablethmes.

8


TableMessagesCettetablecontientl'ensembledesmessagesduforum,Elledoitpossderlesinformationssuivantes:

un numero d'identifiant : il s'agit d'un numro autoincrment qui permetd'identifierunmessage,cenumroestunique

untitre:titrequidcritlemessage

untexte:ils'agitducorpsdumessage

datecreation:ladatedecrationdumessage

heuredecreation:l'heuredecrationdumessage

Cependant unmessageest cr parunutilisateur, il est ncessairedeconnaitrecetteinformation,doncnousajoutons:

codeutilisateur :c'estlecodedel'utilisateurayantcrlemessage,ildoitexisterdanslatableusers.

Deplus nousavonsprcis qu'un messagetait en rapport avecunsujet donccetteinformationdoittregalementdanslatable:

identifiantsujet:s'estl'identifiantdusujetauquellemessageestrattach,lesujetdoitexisterdanslatablesujets.

9


LastructurecompltedelabasededonnesNousavonsdoncdfinit,defaonthoriquelastructuredenotrebasededonnes,voicileschmagnral:

10


III.Crationdelabasededonnes

Maintenant quenousavonsdfinis lesdiffrentesdonnesquenotreapplicationdevragrer,nousallonscrerphysiquementnotrebasededonnes.

PourcelanousallonsutiliserleSGBDMySQL,quiestl'undesplusconnudanslemondeduWEBetdulogiciellibre.

Afindefaciliter,lamanipulationdeMySQL,nousallonsutiliserPhpMyAdmin.

Cetoutil,critenPHP,permetdegrersesbasesdedonnessansavoirbesoind'unegrandeconnaissancedeMySQL.Deplusdufait qu'il estcrit enPHP(doncsurvotreserveurHTTP)vouspouvezsurtoutgrervosbasesdistance.

PrparationetconfigurationIln'estpasrecommandd'utiliserle"compte"administrateurMySQL(root)pourmanipulerunebasededonnesdoncnousallons dans le client MySQL, crer unutilisateur quipermettradegrernotrebasededonnes(crationdetable,ajoutd'enregistrements,...).

Premirement,ilfautseconnecterMySQLentantquerootvialeclientMySQL,danslebutdecrernotrebaseetd'ajouterl'utilisateur(quipermettradegrerlabasesousPhpMyAdmin):

[darken@localhostdarken]$mysqlurootpEnterpassword:WelcometotheMySQLmonitor.Commandsendwith;or\g.YourMySQLconnectionidis1toserverversion:4.0.15

Type'help;'or'\h'forhelp.Type'\c'toclearthebuffer.

mysql>

Ilfautmaintenantcrernotrebasededonnes:

mysql>createdatabasemyforum;QueryOK,1rowaffected(0.00sec)

Nousallonsmaintenantcrerl'utilisateurquiseraleDBAdenotrebasededonnes,nousallonsdoncnouspositionnersurlabasemyforum,puisdonnerl'utilisateurwwwadmintouteslesautorisationssurcettebase:

mysql>grantallprivilegesonmyforum.*towwwadmin@localhost;QueryOK,0rowsaffected(0.82sec)

mysql>grantallprivilegesonmyforum.*towwwadmin;QueryOK,0rowsaffected(0.82sec)

11


NouspouvonsdoncmaintenantquitterleclientMySQL:

mysql>quitBye[darken@localhostdarken]$

Donnonsmaintenantunmotdepassepourl'utilisateurwwwadmin:

[darken@localhostdarken]$mysqladminpuwwwadminpassword'azerty'Enterpassword:[darken@localhostdarken]$

VrifionsmaintenantquelaconfigurationdePhpMyAdmin,afinquelorsquel'onseconnecteMySQLviaPhpMyAdminildemandeunnomd'utilisateuretunmotdepasse.danslefichier/var/www/html/phpMyAdmin/config.inc.phpRemplacerlaligne:

$cfg['Servers'][$i]['auth_type']='config';

Par:

$cfg['Servers'][$i]['auth_type']='http';

OnpeutmaintenantceconnecterPhpMyAdminviavotrenavigateurprfr:http://localhost/phpMyAdmin:

12


CrationdenostablesMaintenantquel'onestconnectMySQLsousPhpMyAdmin,nousallonsdonccrernostablesdansnotrebaseMyForum:pourcelaslectionnonslabase"myforum".

Nousarrivonssuruncranquinousproposedecrerunenouvelletable,eneffetpourl'instantc'estlaseuleactionquenouspouvonseffectuercarnotrebaseestvide.

13


Nousallonsdonccrerlatable"users"quicontiendralesinformationssurlesutilisateurs.

Indiquonslenomdelatable("users")etlenombredechampsqu'ellecontiendra(5).

Nousvoyonsdonc5lignesquicorrespondentnoscinqchampsquenousvoulonsdcrire,pourcelailfautfournirplusieursinformations:

Field:ils'agitdunomdeschamps

Type:ils'agitdutypededonnesquesechampcontiendra(caractres,nombres,dates...)

Lalongueurduchamp:Parexempleuncodepostalcontient5caractres.

Desattributsparticuliers(nonsigns,binaire,...)jeconseilledenelesutiliserquesivousenavezvraimentbesoin.

Null:permetdedfinirsilechamppeunepastrerenseign.

Default:quipermetdedfinirlavaleurpardfautduchamp.

Extra:permetdedfinirdesnombresautoincrments.

Primary:dterminesilechampestlacldelatable.

14


Index:permetdedterminersilechampfaitpartidel'indexsecondaire.

Unique:Permetd'indiquequelavaleurduchampdoittreuniquedanslatable.

MySQLpermetdegrerunemultitudedetypesdiffrents:chainesdecaractres,entiers,flottants,dates,...Voiciuntableauprsentantlestypeslespluscourantsetquinousservironspournostables:

Type DescriptionVARCHAR Chainedecaractreslongueurvariable(1255)TINYINT Entierentre127et128TEXT Textede165535caractresDATE DateauformatAAAAMMJJINT Entierde21474836482147483647

BIGINT Entierde92233720368547758089223372036854775807

FLOAT PermetdestockerdesnombredcimauxDOUBLE PermetdestockerdesnombredcimauxDECIMAL PermetdestockerdesnombredcimauxTIME PermetdestockeruneheureauformatHH:MM:SSBLOB Permetdestockerdesobjetsbinairesdegrandetaille

Nousallonsdonccrernotretableaveclastructuresuivante:

id_user:varchar(15)

passwd:varchar(15)

name:varchar(50)

firstname:varchar(50)

email:varchar(255)

15


Lorsquel'onsoumetleformulaire,onobtientenrponselemessage"Tableusershasbeencreated"quiindiquequel'actions'estbiendroule.

OnobtientgalementlarequteSQLquivientd'treexcute,ceciestunebonnechoselorsquel'onneconnatpasleSQLetquel'ondsirel'apprendre.

16


ExcutionderequtesNousvenonsdecrer notre table grce l'interface fournit par phpMyAdmin, onpeutgalementlancernosrequtesdirectementgrcel'ongletSQL.

Eneffetnousallonscrer latablethmedecettefaon.Cettetableestdelastructuresuivante:

`id_theme`quiestunnombreautoincrment

`name`quiestunechainedecaractre

`description`quiestgalementunechainedecaractre.

Nousallonsdoncutiliserlarequtesuivante:

CREATETABLEthemes(id_themeTINYINTUNSIGNEDNOTNULLAUTO_INCREMENT,nameVARCHAR(20)NOTNULL,descriptionVARCHAR(255)NOTNULL,PRIMARYKEY(id_theme));

17


Ilfautdoncmaintenantcrerlesautrestablesafind'obtenirlastructurecompltedenotrebasededonnes:

CREATETABLEsubjects(id_subjectINTUNSIGNEDNOTNULLauto_increment,titleVARCHAR(255)NOTNULL,dateDATENOTNULL,timeTIMENOTNULL,id_userVARCHAR(15)NOTNULL,id_themeTINYINTUNSIGNEDNOTNULL,PRIMARYKEY(id_subject),KEYid_user(id_user),KEYid_theme(id_theme));

18


CREATETABLEmessages(id_messageBIGINTUNSIGNEDNOTNULLauto_increment,titleVARCHAR(255)NOTNULL,textTEXTNOTNULL,dateDATENOTNULL,timeTIMENOTNULL,id_userVARCHAR(15)NOTNULL,id_subjectINTUNSIGNEDNOTNULL,PRIMARYKEY(id_message),KEYid_user(id_user),KEYid_subject(id_subject));

19


SauvegarderlastructureUnefois,notrestructurecre,ilestbondelasauvegarder.PhpMyAdminpermetd'exporterlastructureainsiquelesdonnesd'unebasededonnes.

20


IV.Maquettagedel'application

AvantdeprogrammerlespagesduforumenPHPaveclesaccslabasededonnesMySQL, nous allons passer par une phase de maquettage de l'application.Ils'agitdecrerlespagesavecdesvaleursstatiquesdanslebutderaliserl'interfaceetlanavigationentrepages.

Pournotreforumdediscussion,nousauronsbesoindespagessuivantes:

Login:cettepageestlapremirepagequel'utilisateurverra,ildevras'authentifierpourutiliserleforum

Inscription:cettepagepermetunnouvelutilisateurdes'inscrire,elleestaccessiblepartirdelapagelogin

Listethmes:cettepages'affichelorsquel'utilisateurseseraauthentifi,elleaffichelalistedesthmesdisponiblessurleforum

Listesujets:cettepageaffichel'ensembledessujetsdediscussionsappartenantunthme.

Listemessages:cettepageaffichelefildediscussiond'unsujet. Ecrituremessage:cettepageestappelelorsquel'utilisateurveutrpondresurun

sujetou,crerunnouveausujetdediscussion.

21


PourralisercespagesnousallonsutiliserlestechnologiesXHTMLpourlecontenudespagesetCSSpourlamiseenformedecellesci.

22


V.LeXHTML

Ils'agitdustandardenvigueurdatantdu26janvier2000.LeXHTML1.0estbassurlelangageXML.Ils'agituniquementduHTML4lasauceXML.DoncsivoussavezcrireduHTML4,voussavezcrireduXHTML1.0Voustrouverezl'ensembledesspcificationsduXHTML1.0l'adressesuivante:http://www.w3.org/TR/xhtml1

ParmilespointslesplusimportantsdeXMLparrapportSGML: Chaquelmentouvertdoittreferm lesbalisessonttoujoursorthographiesenminuscule lesvaleursdesattributssonttoujoursrenseignesetentreguillemets

LestypesdedocumentsIl existe, commepour le HTML4.01, trois typesdedocuments dfinissant le standardXHTML:

LetypeStrict

Ils'agitdutypequ'ilfautchoisirchaquefoisquecelaestpossible,eneffetilpermetdesparercompltementlecontenudelaprsentation.

Ilinterdit lesbalisesHTMLdetypeouleseffetsdeprsentationdevanttredcrituniquementl'aidedeCSS.

Pour implmenter ce type le document doit imprativement commencer par les lignessuivantes:

........

23


LetypeTransitional

Ilpermetdemlangercontenuetprsentationetonpeutl'utilisersil'utilisationdeCSSn'estpaspossibleousatisfaisante(casolesvisiteursciblsnedisposentquedenavigateursanciensetlerenducompteplusquel'information,etc.).

Pour implmenter ce type le document doit imprativement commencer par les lignessuivantes:

........

LetypeFrameset

CetypeestutilisersivoussouhaitezutiliserdescadresdanslaprsentationdevospagesHTML.

Pourimplmentercetypeledocumentdoitimprativementcommencerparlalignesuivante:

........

24


L'enttedudocument:L'lmentHEADrassembledesinformationssurledocumentcourant,tellesquesontitre,desmotsclefspouvanttreutilisspardesrobotsderecherche,et touteautredonneconsidrecommevenantpartducontenududocument.Leslmentssitusl'intrieurdeladclarationHEADnedevrontpastrevisualisesdanslecasd'agentsutilisateursconformes,saufmentionparticulire.

Labalise

ToutdocumentHTMLdoitcomporterunetunseullmentTITLEdanssasectionHEAD.Lesagentsutilisateursutilisentlecontenudel'lmenttitrepourdonnerl'utilisateuruneinformationconcisesurlecontenuprobabledudocument,parexemple,enl'crivantdanslabarredetitredefentre,ouenlecitantparsynthsevocale.

Lestitrespeuventcontenirdesentitscaractres(pourlescaractresaccentus,lescaractresspciaux,etc.),maisnepourrontconteniraucuneautrebalise.Voiciunexempledetitrededocument:

myForum:Login

Lesbalises

Cetypedebalisen'estpasobligatoiremaispermetdedonnerdiversesinformationstellesquel'encodagedelapage,lenomdel'auteur,lesmotscls(pourlesmoteursderecherches),unedescriptionducontenudelapage...

Lesbalises

Labaliselinkpermetd'effectuerdesliensversdesressourcesexternesafindedfinirparexemplelesrelationsentrepages,maisaussidedfinirlefichierdestyleCSSutiliser(quenousverronsplustard).


EnttepourMyForum

Pournotreapplicationnousallonsutiliserlecodesuivant:

myForum:Login

Bienentendunousallonschangerletitrepourchaquepage.

Lecontenudelapage:Lecorpsd'undocumentcontientsoncontenueffectif.Cecontenupourratrereprsentparunagentutilisateurd'unemultitudedefaons.Parexemple,pourlesnavigateursvisuels,vouspourrezconsidrerlecorpscommeuncadredanslequellecontenuapparat:texte,images,couleurs,dessins,etc.Pourlesagentsutilisateursaudio,lemmecontenupourratre"parl".

Balisesdegroupeset

LeslmentsDIVetSPAN,enconjonctionaveclesattributsidetclass,proposentunmcanismegnriquepourrenforcerlastructurationd'undocument.CesontlesdeuxseulslmentsduHTMLquin'ajoutentaucuneinformationdeprsentationleurcontenu.Decefait,ilestpossibledelesutiliserassocisdesidentificateursetdesassignationsdeclassepourpouvoirformaterl'apparencedezonesdetexteparapplicationultrieuredefeuillesdestyle.

Balisesd'enttes,,,,,

Unlmentdetitragedcritbrivementlethmedelasectionqu'ilintroduit.Lesinformationsdetitragepourronttrercoltesparlesagentsutilisateurspour,parexemple,construireunetabledesmatiresautomatiquespourcedocument.

LeHTMLdfinitsixniveauxdetitragedepuisH1affichcommeleplusimposantjusqu'H6leplusdiscret.Lesnavigateursvisuelsutiliserontdespolicesplusoumoinsgrossespourrendrecompteduniveaudetitre.

Niveau1Niveau6

26


Lersultatobtenu:

Niveau1Niveau6

Labalisedelienoud'ancre

L'lmentApeuttreutilispourdfiniruneancre,unlienoulesdeux.

L'exemplequisuitspcifieunlien:

Pourplusd'informationsurduW3C,consultezlesiteWebduW3C

Celiendsignela"homepage"duWorldWideWebConsortium.Lorsqu'unutilisateuractiveceliendansunagentutilisateur,cedernierirarcuprerlaressourcepointe,etdansnotrecas,undocumentHTML.

L'exemplesuivantillustreunedfinitiond'ancre.Supposezquenousdfinissionsuneancrenomme"ancreune".

...texteprcdentl'ancre...l'endroitdel'ancreune...texteaprsl'ancre...

Cettedfinitionassigneunnomd'ancrelazoneentiredudocumentquicontientletexte"l'endroitdel'ancreune".Normalement,lecontenudeslmentsAneserontpasaffichdiffremmentquelanormalelorsquel'lmentAnesertqu'dfiniruneancre.

Unefoisl'ancredfinie,nousaimerionspouvoirnousyrfrerdepuisundocument(lemmeouunautre).LesURLquidsignentlesancresseterminentparun"#"suividunomdel'ancre.Voiciquelquesexemplesd'URLainsiconstitues:

UneURLabsolue:http://www.mycompany.com/one.html#anchorone UneURLrelative:../one.html#anchorone Lorsquelel'ancreestsituedanslemmedocument:#anchorone

27


Texteprformats

L'lmentPREindiqueauxagentsutilisateursvisuelsqueletextequiyestinclusest"prformat".

Lesagentsutilisateursvisuelsdoiventtraiterletexteprformatcommesuit:

Ilsdoiventlaisserlesespacesblancsintacts. Ilsdevrontcrireletexteavecunepoliceespacementfixe. Leretourautomatiquelalignepourraytredsactiv. Letraitementdeladirectionnalitdoitresteroprationnel.

L'exemplesuivantmontreuntexteprformat:

Bonjour,j'aimeraisraliserunforumenPHPavecMySQL,Maisjenesaispasdutoutparoucommencer.

Quelqu'unauraitiluneide?

Voicilerendudevotrenavigateur:

Bonjour,j'aimeraisraliserunforumenPHPavecMySQL,Maisjenesaispasdutoutparoucommencer.

Quelqu'unauraitiluneide?

LestableauxL'lment TABLEcontient tous lesautreslmentsqui spcifient le titre, les lignes, lecontenu,etleformatd'untableau.

...Lerestedutableau...

Titresdetableaux:

Lorsqueprsent,letextedel'lmentCAPTIONdcrirausuellementlanaturedutableau.L'lmentCAPTIONdoitvenirimmdiatementaprslabalisededbutdel'lmentTABLE.

Listedesthemesduforum...Lerestedutableau...

28


Groupesdelignes:,,

Untableaudoitconteniraumoinsungroupedelignes.Chaquegroupedelignesestdivisentroisparties:entte,corps,etpitement.Lesenttesetpitementsdetableauxsontoptionnels.L'lmentTHEADdfinitl'entte,l'lmentTFOOTdfinitlepitement,etl'lmentTBODYdfinitlecorpsdetableau.

Lorsqu'ilexiste,chacundesinstancesd'lmentsTHEAD,TFOOT,etTBODYDOITconteniraumoinsuneligne(voirTR).

L'exemplesuivantillustrel'ordreetlastructuredesenttes,piedsetcorpsdetableaux.

...informationd'entte......informationdepitement......premirelignedublocdedonnes......deuximelignedublocdedonnes...

Lignesdetableau:

L'lmentTRagitcommeuncontaineraccueillantdescellulesd'uneligned'untableau.

Cellulesdetableau:et

LeslmentsTHcontiennentlesenttesdecolonnes(oudeligne),tandisqueleslmentsTDdfinissentdescellulesdedonnes.Cettedistinctionpermetauxagentsutilisateursdereprsenterdiffremmentlesenttesetlescellulesdedonnes,mmeenl'absencedefeuillesdestyle.

Lescellulespeuventtrevides(c.d.,neconteniraucunedonnes).

29


Example:

MyForum:ListedesthmesThmeDescriptionSujetsDateDbutantsAideauxdbutantsousLinux152003122112:45DevelQestionsrelativesaudveloppement22003122110:42

Lesobjetsexternes

Lesimages

Cettebalisepermetd'intgrerdesimagesdansundocumentXHTML.Aujourd'hui,laplupartdesnavigateursWebsupportentlesimages,cependantLynx(lenavigateurleplusutilisparlesaveuglesetlesmalvoyants)nelessupportentpas,eneffetunaveuglenepeuenaucuncasapprcierlecontenud'uneimage,saufsionluidcritsoncontenu.

Danscetteoptiquelabalisedonnelapossibilitdafficheruntextealternatifpourlesnavigateursn'arrivantpasafficherlesimages:

30


Lesobjetsexternes

DanslesanciennesversionsduHTMLintgrerdesscriptsexternes(AppletJava,ObjetActiveX,...),n'taitpastoujoursunechoseaise.Aujourd'huiuneseulebalisepermetd'implmentercetypederessource,labalise.

Cellecipermetenplusdeproposerunesolutionalternativelorsquelenavigateurnepeutafficherl'objet(pluginnonactiv,...):

LesFormulairesL'lmentFORMfaitofficedecontainerpourdescontrles.Ilspcifie:

Leprogrammequitraiteraleformulaireunefoiscompltetdmentsoumis(l'attributaction).

Lamthodeparlaquellelesdonnesdposesparl'utilisateurseronttransmisesauserveur(l'attributmethod,valeurs'get'ou'post').

Unformulairepeutcontenirdutexteetdesbalises(paragraphes,listes,etc.)ainsiquelescontrlesdtaillsciaprs.Laportedel'attributnameassocichacundescontrlessitul'intrieurd'unlmentFORMestlimitecetlmentFORM.

31


Labalise

L'lmentLABELpeuttreutilispourattacheruneinformationunautrecontrle(l'exceptiondeslmentsLABELeuxmmes).Leslabelspourronttreaffichsparlesagentsutilisateursd'unemultitudedefaons(ex.,visuellement,auditivementpardessynthtiseursvocaux,etc.)

Codeuser:Motdepasse:

NotezqueleslmentsLABELsontassocisauxlmentsINPUTvial'attributid.

Labalise

Lanatured'uncontrledfiniparunlmentINPUTdpenddelavaleurdesonattributtype.

TypesdechampsdesaisieL'attributtypedel'lmentINPUTdterminequelcontrledoittrecr.

textCetypecreunchampdetextemonoligne.Lavaleurmiselorsdelasoumissionduformulaireestletexteentr.

passwordCommeletype"text",maisletexteentrestvisualisl'crandesortequelescaractresnepuissenttrereconnus(parexempleunesried'toiles).Cecontrleestutilispourl'entrededonnessensiblestellesquedesmotsdepasse.Lavaleurmiselorsdelasoumissionduformulaireestletextetap(etnonpasletexteaffich(!)).

32


checkboxUnecasecocherestunesortedecommutateurbipolaire.Lorsqu'elleestcoche,lacaseestdite"active".Lorsqu'elleestvide,lacaseest"inactive".Lavaleurdelacasecochern'estmisequesicettedernireestactive.Plusieurscasescocherdummeformulairepourrontpartagerlemmenom.Aumomentdelasoumission,toutecasecocher"active"ycompriscellesdenomsemblablemetunepairenom/valeurdanslaquellelenomseraidentique.Cecipermettraauxutilisateursdechoisirdesvaleursmultiplespourunepropritunique.

radioUnboutonradioestaussiuncommutateurbipolaire.Lorsqu'ilestmarqu,leboutonradioestdit"actif".Lorsqu'ilestvide,ilestrput"inactive".Lavaleurduboutonradion'estmisequesicedernierestactif.Plusieursboutonsradiodummeformulairepourrontpartagerlemmenom.Cependant,seull'und'entreeuxpourratreactiflafois.Lorsquel'undesboutonsradioestmarqu,touslesautresportantlemmenomsontautomatiquementdslectionns.Pourcetensembledeboutonsradio,ilnepeutdonctremisqu'uneseulepairenom/valeur.

submitCreunboutondesoumission.Lorsquel'utilisateurcliquesurcebouton,lecontenuduformulaireestsoumisauprogrammespcifiparlalocalisationdfinieparl'attributactiondel'lmentFORMenglobant.Unformulairepeutcontenirplusieursboutonsdesoumission.Cependant,seulelapairenom/valeurduboutondesoumissionactionnseraenvoyedansleformulaire.

imageCreunboutondesoumissiongraphique.Lavaleurdel'attributsrcspcifiel'URLdel'imagequiserviradereprsentationgraphiquedubouton.Certainsutilisateursnepourrontvisualisercetteimage.Nousrecommandonsfortementd'adjoindreladfinitiond'unattributaltvalantpouralternativetextuelledel'image.

resetCreunboutonderinitialisation.Lorsqueceboutonestactivparl'utilisateur,lesvaleursdetouslescontrlesduformulairesontremisesleurvaleurinitiale,tellequementionnedansl'attributvalue.Lecouplenom/valeurd'unboutonderinitialisationn'estjamaisenvoylorsdelasoumissiond'unformulaire.

hiddenCreunlmentquinedoitpastrereprsentparl'agentutilisateur.Cependant,lecouplenom/valeurdecetlmentserajointauxdonnesenvoyeslorsdelasoumissionduformulaire.Cetypedecontrleseraengnralutilispourenregistrerdesdonnesd'changesclient/serveurquiseraientautrementperduesdufaitdelanaturevolatiledesprocessusHTTP.

33


fileDemandel'utilisateurdedsignerunfichier.Lorsqueleformulaireestsoumis,lecontenudecefichierseratransmisauserveurcommeunevaleurden'importequelautrecontrle.

Labalise

L'lmentTEXTAREAcreunezonedesaisiedetextemultilignes(paroppositionauchampdetexteINPUTd'uneseuleligne).Lecontenudecetlmentfournitletexteinitialquiestprsentdanslazonedesaisie.

Titre:Message:Entrezicivotretexte...

Lesbaliseset

L'lmentSELECTcreunelisted'optionspouvanttreslectionnesparl'utilisateur.ChaquelmentSELECTdoitconteniraumoinsunedfinitiond'option.Chaqueoptionestspcifieparuneinstancedel'lmentOPTION.

Lesagentsutilisateurssebaserontsurlecontenudel'lmentOPTIONpourafficherlelibelldel'optiondanslaliste.

PhilippeBOUSQUETAlexAkiraTatianaChistopheLiloune

34


VrifierlavaliditdespagesAprsl'critureoulagnrationdepagesHTMLilfautquelespagessoientvalides.Ilnesuffitpasdevrifierlerendudespagessurdiffrentsnavigateurs,cettevalidationdoittrefaiteauprsdesvalidateursderfrenceduW3C:

ServicedevalidationHTML:http://validator.w3.org/(fourniparleW3C)

LynxviewerestunservicequipermetdevrifierlerendudepagesWeb,tellesqu'ellesapparaissentdanslenavigateurenmodetexteLynx.Lynxesttrsutilisparlesnonvoyantsetlesmalvoyantsainsiquesurcertainesconfigurationsinformatiquesnedisposantpasd'interfacegraphiquevolue.

35


VI.LespagesduforumenXHTML

Pournotreforum,nousavonsdoncbesoinsdesixpagesXHTML,quenousallonsdcrire.

Lapaged'identificationCeciestlapaged'entreduforum;toutepersonnevoulantutiliserleforumdoitsesigner(etdoncdoittreinscrite).Cettepagecontientdoncunformulaire,avecdeuxchampssaisissables:

Codeuser:reprsentantlepseudodel'utilisateur Motdepasse:sonmotdepasseluipermettantdeseconnecter.

Ilyadeuxboutons: Seconnecter:quipermetd'effectuerlaconnexionproprementdit,etd'accderau

forum J'aiperdumonmotdepasse:quipermetderenvoyerl'utilisateursonmotdepasse

paremail.Pourlespersonnesquinesontpasencoreinscrites,ilyagalementunlienverslapaged'inscription.

Lapaged'inscriptionCettepageesttoutsimplementleformulairepermettantunepersonnedes'inscriresurleforum.Ceformulaireestcomposde6champssaisissablesetobligatoires:

LeNomdel'utilisateur LePrnomdel'utilisateur L'emaildel'utilisateur(pourpouvoirluirenvoyersonmotdepasse) Lecodeuser:l'utilisateurdevrachoisirunpseudoquiluiservirapourseconnecter. Lemotdepasse:l'utilisateurdevrachoisirunmotdepassequiluiservirapourse

connecter. Laconfirmation:l'utilisateurdevraressaisirsonmotdepasseici(vrifierl'galit

aveclechampprcdent)Ilyadeuxboutons:

S'inscrire:quipermetd'enregistrerlesdonnesdel'utilisateur,depluscelaeffectuelaconnexionauforum

Rtablir:quipermetderinitialiserleformulaire.

36


LalistedesthmesCettepagelistelesthmesdisponiblessurleforum,elleestconstituedeslmentssuivants:

Labarredenavigation:laseuleoptionproposeestQuitter,quirenvoiverslapaged'identification.

Letableaudressantlalistedesthmes: Nomduthme(lienverslapagedessujets) Descriptionduthme(lienverslapagedessujets) Lenombredesujetsposts Ladateduderniermessage

LalistedessujetsCettepagelistelessujetspostspourunthmedonnsurleforum,elleestconstituedeslmentssuivants:

Labarredenavigation: Quitter,quirenvoiverslapaged'identification. Thmes,quirenvoiverslapagedelistedesthmesduforum

Letableaudressantlalistedessujets: Auteurdusujet Titredusujet(lienverslapagedesmessages) Lenombrederponsesausujet Ladateduderniermessageconcernantlesujet

UnboutonNouveau:quipermetdeposterunnouveausujet(lienversEditionMessage).

LesmessagesconcernantunsujetCettepageafficheladiscussionconcernantunsujet,elleestconstituedeslmentssuivants:

Labarredenavigation: Quitter,quirenvoiverslapaged'identification. Thmes,quirenvoiverslapagedelistedesthmesduforum Sujets,quirenvoiverslapagedessujetsconcernantlethmeencours

Letableaudressantladiscussion,etcecidansl'ordred'arriv: Auteurdumessage Titredumessage Datedumessage Textedumessage

UnboutonRpondre:quipermetd'ajouterunmessagedansladiscussion(lienversEditionMessage).

37


L'ditiond'unmessageCettepagepermetlacrationdunsujetoud'effectuerunerponsesurunsujetdonn,elleestconstituedeslmentssuivants:

Labarredenavigation: Quitter,quirenvoiverslapaged'identification. Thmes,quirenvoiverslapagedelistedesthmesduforum Sujets,quirenvoiverslapagedessujetsconcernantlethmeencours Messages,quirenvoiverslapageaffichantladiscussionencours(dansle

casoul'onrpondunmessage) Unformulairecomposdedeuxchampssaisissables:

Untitredemessage(pralimentavec"RE:titresujet"danslecasd'unerponse)

Unezonedetexte,oul'utilisateursaisirasonmessage. Deuxboutons:

UnboutonEnvoyerquipermetd'enregistreunmessageetderevenirverlapagedeladiscussion.

UnboutonRtablirquipermetderinitialiserleformulaire. Letableaudressantladiscussion,dansl'ordreinversed'arrive:

Auteurdumessage Titredumessage Datedumessage Textedumessage

UnepageXHTMLvalideVoiciparexemplelecodesourceXHTMLdelapaged'ditiond'unmessageauformatXHTML(pagevalidparlevalidateurduW3C),sansmiseenformeparticulire.

MyForumv0.1

38


MyForumv0.1Darken>>Quitter::Thmes::Sujets::MessagesMaisjenesaispasdutoutparoucommencer.Quelqu'unaurraitiluneide....Copyright20032004PhilippeBOUSQUETCelogicielestsouslicenceGnuGenralPublicLicense

39


Etvoicilersultatdansvotrenavigateurinternet:

40


VII.LamiseenformeparCSS

Lors la cration de nouveaux sites web, la sparation du contenu structur de saprsentationestuneaubainepourlesdveloppeursWeb.Eneffet,ilestpossibledecrerdesfeuillesdestylequis'appliquerontunouplusieursdocuments,permettantainsidechangerl'apparenced'unsiteenchangeantsimplementlafeuilledestyle.

Il faut essayer desparer aumaximumlecontenude laprsentation. Pour cela il estprfrabled'crire,degnrer,desdocumentssuivantslaDTDXHTML1.0StrictpluttquelaDTDXHTML1.0Transitional.

LemodledesbotesChaquebotepossdeuneairedecontenu(ex.untexte,uneimage,etc.)entoureenoptionparuneaired'espacement,uneairedebordureetuneairedemarge;Leschmasuivantillustrelesrelationsentrecesairesetlaterminologieemployepourlesdsigner:

Onpeutsubdiviserlamarge,labordureetl'espacementselonqu'ils'agisseductgauche,droite,hautoubas(ex.dansleschma,"MG"mispourmargegauche[ndt.marginleft],"ED"mispourespacementdroit[ndt.paddingright],"BH"mispourbordurehaute[ndt.bordertop],etc.).

41


Lespropritsdemarge:'margintop','marginright','marginbottom','marginleft'et'margin'

Cespropritsspcifientlalargeurdel'airedelamarged'unebote.Lapropritraccourcie'margin'spcifielavaleurdelamargepourlesquatrectslafois,lesautrespropritsfixantcelledeleurctrespectif.

Lespropritsdfiniesiciserfrentautypedevaleur,celuiciaccepteunedesvaleurssuivantes:

:Spcifieunelargeurfixe;:Lepourcentageestcalculparrapportlalargeurdublocconteneurdelabotegnre.Ceciestvraiaussipourlesproprits'margintop'et'marginbottom',saufdansuncontextedepageolepourcentageserfrelahauteurdelabotedelapage.auto

Lespropritsd'espacement:'paddingtop','paddingright','paddingbottom','paddingleft'et'padding'

Cespropritsspcifientlalargeurdel'aired'espacementd'unebote.Lapropritraccourcie'padding'spcifielavaleurdel'espacementpourlesquatrectslafois,lesautrespropritsfixantcelledeleurctrespectif.

Lespropritsdfiniesiciserfrentautypedevaleur,celuiciaccepteunedesvaleurssuivantes:

:Spcifieunelargeurfixe.:Lepourcentageestcalculparrapportlalargeurdublocconteneurdelabotegnre.Demmepourlesproprits'paddingtop'et'paddingbottom'.

ladiffrencedespropritsdemarge,lesvaleursd'espacementnepeuventpastrengatives.Lesvaleursdepourcentagedespropritsd'espacement,toutcommecellesdespropritsdemarge,serfrentlalargeurdublocconteneurdelabotegnre.

42


Lespropritsdebordure

Cespropritsspcifientl'paisseur,lacouleuretlestyledel'airedebordured'unebote.Cellescis'appliquenttousleslments.

L'paisseurdebordure:lesproprits'bordertopwidth','borderrightwidth','borderbottomwidth','borderleftwidth'et'borderwidth'

Cespropritsspcifientl'paisseurdel'airedebordure.Lespropritsdfiniesiciserfrentautypedevaleur,celuiciacceptel'unedesvaleurssuivantes:

thin:Uneborduremince.medium:Uneborduremoyenne.thick:Unebordurepaisse.:L'paisseurdelabordureaunevaleurexplicite.Cettevaleurexplicitenepeuttrengative.

L'interprtationdestroispremiresvaleursdpenddel'agentutilisateur.Cependant,celuicidoitrespecterlesdirectivessuivantes

Lacouleurdebordure:lesproprits'bordertopcolor','borderrightcolor','borderbottomcolor','borderleftcolor'et'bordercolor'

Cespropritsspcifientlacouleurdesborduresd'unebote.Voicilasignificationdesvaleurs:

:Spcifielavaleurd'unecouleur;transparent:Labordureesttransparent(toutenayantunepaisseur).

43


Lestyledebordure:lesproprits'bordertopstyle','borderrightstyle','borderbottomstyle','borderleftstyle'et'borderstyle'

Cespropritsspcifientledessindesborduresd'unebote(entraitplein,traitdouble,traitpointill,etc.).Lespropritsdfiniesiciserfrentautypedevaleur,celuiciacceptel'unedesvaleurssuivantes:

none:Aucunebordure.Cettevaleurforcelavaleurcalculedelaproprit'borderwidth'0;hidden:Idem'none',saufpourlarsolutiondesconflitsdeborduredeslmentsdetable;dotted:Labordureestuneligneenpointill;dashed:Labordureestuneligneentirets;solid:Labordureestuneligneentraitplein.double:Labordureestunelignedouble,dedeuxtraitspleins.Lasommedeceslignesetdel'espaceentreellesestgalelavaleurde'borderwidth'.groove:Laborduredonnel'impressionqu'elleestgravedanslecanevas;ridge:l'opposde'groove',laborduresemblesortirducanevas;inset:Laborduredonnel'impressionquelaboteentireestincrustedanslecanevas;outset:l'opposde'inset',laborduredonnel'impressionquelaboteentireestextrudeducanevas

Lalargeurducontenu:laproprit'width'

Cettepropritspcifielalargeurducontenudesbotesgnresparleslmentsdetypebloc.Lesvaleursontlessignificationssuivantes::Spcifieunelargeurfixe;:Spcifieunelargeurenpourcentage.Lepourcentageestcalculenfonctiondelalargeurdublocconteneurdelabotegnre;auto

Laproprit'width'n'admetpasdevaleursngatives.

Lahauteurducontenu:laproprit'height'

Cettepropritspcifielahauteurducontenudesbotesgnresparleslmentsdetypebloc.Lessignificationsdesvaleurssont::Spcifieunehauteurfixe;:Spcifieunehauteurenpourcentage.Celuiciestcalculenfonctiondublocconteneurdelabotegnre.Silahauteurdublocconteneurn'estpasspcifieexplicitement(c..d.,cellecidpendantdelahauteurducontenu),savaleurestconsidrecommetant'auto';

44


auto

Laproprit'height'n'admetpasdevaleurngative.

LescouleursetarriresplansChaquebotepossdeuneairedecontenu(ex.untexte,uneimage,etc.)entoureenoptionparuneaired'espacement,uneairedebordureetuneairedemarge;Leschma

Lacouleurd'avantplan:laproprit'color'

Cettepropritdcritlacouleurd'avantplanducontenudetexted'unlment.Voiciplusieursfaonsd'indiquerlacouleurrouge:

Exemple(s):

em{color:red}/*nomdecouleurprdfini*/em{color:rgb(255,0,0)}/*couleursenRGBallantde0255*/em{color:#FF0000}/*CouleurHTMLRGBHexadcimal*/

L'arrireplan

Lesauteurspeuventspcifierl'arrirepland'unlment(c..d.lasurfaceoceluiestrendu)commetantunecouleuroubienuneimage.Selonlemodledelabote,l'arrireplancorrespondauxairesducontenu,del'espacementetdebordure.Lescouleursetstylesdeborduresontspcifiesparlespropritsdebordure.Lesmargestanttransparentes,l'arrireplanduparentesttoujoursvisibleautraversdecellesci.

Bienquelespropritsd'arrireplannes'hritentpas,l'arrireplandelaboteduparenttransparatrapardfaut,dufaitdelavaleurinitiale'transparent'delaproprit'backgroundcolor'.

L'arrireplandelabotegnreparl'lmentracinerecouvrelatotalitducanevas.

DanslecasdedocumentsHTML,onrecommandeauxauteursdespcifierunarrireplanl'lmentBODY,pluttqu'l'lmentHTML.Lesagentsutilisateursdevraientsuivrelesrglesdeprsancesuivantespourremplirlefondducanevas:quandlavaleurdelaproprit'background'pourl'lmentHTMLdiffrede'transparent',alorsutiliserlavaleurspcifie,autrementutilisercellespcifieparlaproprit'background'del'lmentBODY.Lerendun'estpasdfinisilavaleurfinalereste'transparent'.

Lesproprits:'backgroundcolor','backgroundimage','backgroundrepeat','backgroundattachment','backgroundposition'et'background'

45


'backgroundcolor'Valeur:|transparent|inheritInitiale:transparent

Cettepropritdonnelacouleurd'arrirepland'unlment,avecunevaleurde,oubienaveclemotcl'transparent',celuicilaissantventuellementvoirlescouleurssituesplusendessous.

'backgroundimage'Valeur:|none|inheritInitiale:noneS'applique:tousleslments

Cettepropritspcifiel'imaged'arrirepland'unlment.Enmmetempsqu'uneimage,lesauteursdevraientaussispcifierunecouleurd'arrireplan,cettecouleurtantemployeenremplacementd'uneimageindisponible.Celleci,unefoisdisponible,vientsesuperposersurlefondcolor.Lacouleurdufondtantainsivisibleautraversdeszonestransparentesdel'image.

'backgroundrepeat'Valeur:repeat|repeatx|repeaty|norepeat|inheritInitiale:repeat

Quandonspcifieuneimaged'arrireplan,cettepropritindiquesil'imageestrpte(appose)etlamaniredelarptition.Lamosaquedefondrsultantecorrespondauxairesdecontenu,d'espacementetdeborduredelabotedel'lmentenquestion.Lessignificationsdesvaleurssont:

Unexemplairedel'imaged'arrireplanestplacaucentre,puisd'autresexemplairesdecellesciseplacentlesunesaudessus,lesautresendessous,produisantunebandeverticalederrirel'lment.

'backgroundattachment'Valeur:scroll|fixed|inheritInitiale:scroll

Quandonspcifieuneimaged'arrireplan,cettepropritindiquesil'imageestfixeparrapportl'espacedevisualisation(pourlavaleur'fixed'),ousicellecidfileenmmetempsqueledocument(pourlavaleur'scroll').

'backgroundposition'Valeur:[[|]{1,2}|[[top|center|bottom]||[left|center|right]]]|inheritInitiale:0%0%

46


Quandonspcifieuneimaged'arrireplan,cettepropritindiquelapositioninitialedecelleci.Quandl'imaged'arrireplanestfixeparrapportl'espacedevisualisation(voirlaproprit'backgroundattachment'),cetteimageseplacerelativementceluici,etnonparrapportl'aired'espacementdel'lment.

LespolicesChaquebotepossdeuneairedecontenu(ex.untexte,uneimage,etc.)entoureenoptionparuneaired'espacement,uneairedebordureetuneairedemarge;Leschma

Lafamilledepolices:laproprit'fontfamily'

Cettepropritdonneuneliste,parordredepriorit,denomsdefamillesdepoliceset/oudenomsdefamillesgnriques.Pourcontournercertainesdifficults,unepoliceseulenecontenantpasncessairementtouslesglyphespourlerendudechacundescaractresd'undocument,oudespolicestantabsentesdecertainssystmes,ainsilapropritpermetauxauteursdespcifierunelistedepolices,cellescidemmestyleettaille,quisontessayessuccessivementpourvrifierlacorrespondanced'unglypheavecuncaractredonn.Onappellecettelisteunjeudepolices.

Lafamilledepolicesgnriqueserautilisesiune,ouplusieurs,despolicesd'unjeudepolicesn'taientpasdisponibles.Bienquecertainespolicesfournissentunglyphedesubstitutionpourindiquerun"caractremanquant",celuiciprenanttypiquementl'aspectd'uncarr,onnedevraitpasconsidrerceglyphecommeunecorrespondancevalide.

Ilexistedeuxtypesdenomsdefamilledepolices:

Lenomd'unefamilledepoliceschoisi.Dansl'exempleprcdent,"Baskerville","HeisiMinchoW3"et"Symbol"sontdesnomsdefamilledepolices.Cellesdontl'intitulcontientdesblancsdevraienttrecritesentreguillemets.Sionometlesguillemets,chacundescaractresblancsavantetaprslenomdelapolicesontignorsetchaquesquencedeblancs,dansceluici,estconvertieenunseulespace;Ondfinitlesfamillesgnriquessuivantes:'serif','sansserif','cursive','fantasy'et'monospace'.Voirlepassagetraitantdesfamillesdepolicesgnriquespourleurdescription.Lesnomsdefamilledepolicesgnriquessontdesmotscls,onnedoitpaslesmettreentreguillemets.Onrecommandeauxauteursdeciterunefamilledepolicesgnriquecommedernirealternative,pourunemeilleureefficacit.

47


Lestyledepolice:lesproprits'fontstyle','fontvariant','fontweight'et'fontstretch'

'fontstyle'Valeur:normal|italic|oblique|inheritInitiale:normal

Laproprit'fontstyle'slectionne,parmilespolicesd'unefamilledepolices,cellesavecundessinnormal(aussiappel"roman"ou"upright"),italiqueetoblique.Lessignificationsdesvaleurssont:

normalSpcifieunepoliceditenormaledanslabasededonnesdepolicedel'agentutilisateur;oblique:Spcifieunepolicediteobliquedanslabasededonnesdepolicedel'agentutilisateur.LespolicesdontlenomcontientlesmotsOblique,SlantedouInclinesonttypiquementtiquetes'oblique'danslabasededonnesdepolicedel'agentutilisateur.Cellesaveccelabelayantpuavoirtobtenueslectroniquementeninclinantunepolicenormale;italic:Spcifieunepolicediteitaliquedanslabasededonnesdepolicedel'agentutilisateur,ou,s'iln'yenapas,uneavecunlabel'oblique'.LespolicesdontlenomcontientlesmotsItalic,CursiveouKursivseronttypiquementtiquetes'italic'.Exemple(s):

'fontvariant'Valeur:normal|smallcaps|inheritInitiale:normal

Dansunepoliceenpetitescapitales,lesglyphesdeslettresminusculesontunaspectsimilaireauxlettresmajuscules,cependantavecunetaillerduiteetdesproportionslgrementdiffrentes.Laproprit'fontvariant'appellecegenredepolicebicamrale(quiadeuxcasses,commelescritureslatines).Cellecineproduitaucuneffetvisiblepourlescrituresmonocamrales(quin'ontqu'uneseulecasse,commelaplupartdessystmesd'crituremondiaux).Lessignificationsdesvaleurssont:

normal:Spcifieunepolicequin'estpastiquetecommetantenpetitescapitales;smallcaps:Spcifieunepolicetiquetecommetantenpetitescapitales.S'iln'yapasunetellepolice,lesagentsutilisateursdevraienteneffectuerlasimulation,parexempleenslectionnantunepolicenormaleetyremplaantleslettresminusculespardesmajusculesmisesl'chelle.Endernierressort,leslettresmajusculesinchangesd'unepolicenormalepeuventsesubstituerauxglyphesenpetitescapitales,ainsiletexteapparatraitentirementenmajuscule.

48


Latailledepolice:laproprit'fontsize'

'fontsize'Valeur:||||inheritInitiale:medium

Cettepropritdcritlatailled'unepolicespcifieexplicitement.Cellecicorrespondaucarrem,unconceptissudelatypographie.Noterquecertainsglyphespeuventdborderdeleurcarrem.Lessignificationsdesvaleurssont:

Unmotclserfreuneentredelatabledestaillesdepolice,cellecitantdresseetmiseenuvreparl'agentutilisateur.Lesvaleurspossibles:[xxsmall|xsmall|small|medium|large|xlarge|xxlarge]

Pouruncrandemoniteur,onsuggreunfacteurd'chellede1.2entrelesvaleursconscutivesdelatable;silavaleur'medium'correspond12pt,lavaleur'large'devraitcorrespondre14.4pt.Lesfacteursd'chellepeuventdiffrerselonlesmdiasconsidrs.Parailleurs,l'agentutilisateurdevraitprendreencomptelaqualitetladisponibilitdespolicesaumomentducalculdecettetable.Cellecipeutaussidiffrerd'unefamilledepolicesuneautre.

Unmotcls'entendparrapportlatabledestaillesdepoliceetparrapportlatailledelapolicedel'lmentparent.Lesvaleurspossibles:[larger|smaller]

Parexemple,quandl'lmentparentaunetailledepolicedevaleur'medium',l'lmentenquestionayantunevaleur'larger',latailledepolicersultantedeceluicicorrespondra'large'.Silatailledepolicedel'lmentparentaunevaleurtroploigned'unedesvaleursdelatable,l'agentutilisateurestlibred'effectueruneinterpolationentrelesdeuxvaleursquilacirconscriventouunarrondilavaleurlaplusproche.L'agentutilisateurpeutdevoirprocderuneextrapolationdesvaleursdelatablequandunevaleurnumriquesortduchampdesmotscls.Unevaleurdelongueurspcifieunetailledepoliceabsolue(indpendantedelatabledestaillesdepolicedel'agentutilisateur).Lesvaleursngativesnesontpasadmises;Unevaleurenpourcentagespcifieunetailledepoliceabsolueparrapportcelledel'lmentparent.Leuremploi,demmepourlesvaleursexprimesen'em',conduitdesfeuillesdestyleplusfiables,enpleinaccordavecleprincipedelacascade.Lavaleurrelle,pourcetteproprit,peutdiffrerdelavaleurcalcule,laproprit'fontsizeadjust'ayantunevaleurnumriqueetcertainestaillesdepolicetantindisponibles.

50


Letexte

L'alina:laproprit'textindent'

'textindent'Valeur:||inheritInitiale:0

Cettepropritspcifieunalinapourlapremirelignedutextedansunbloc.Plusprcisment,celuidelapremirebotedelapremirerangedanslapremirebotedelignedecebloc.Cetteboteestindentepartirdubordgauche(oudroit,pourunemiseenpagededroitegauche)delabotedeligne.Lesagentsutilisateursdevraientreprsentercetteindentationcommeunespacevide.

L'alignement:laproprit'textalign'

'textalign'Valeur:left|right|center|justify||inheritInitiale:selonl'agentutilisateuretselonlesensd'criture

Cettepropritdcritl'alignementd'uncontenuenlignedansunlmentdetypebloc.

Lessignificationsdesvaleurssont:left,right,centeretjustifyRespectivement,l'alignementgauche,droite,centretjustifid'untexte;

Spcifieunechanesurlaquellelescellulesd'unetablevonts'aligner(voirlepassagesurl'alignementhorizontaldansunecolonnepourledtailetpourunexemple).Cettevaleurnes'appliquequ'auxcellulesd'unetable.Appliqueunautrelment,celleciseraconsidrecommetant'left'ou'right',enfonctiondelavaleurdelaproprit'direction',respectivement'ltr'ou'rtl'.Unpavdetexteconsisteenunempilementdebotesdeligne.Pourlesvaleurs'left','right'et'center',cettepropritindiquelafaondontlesbotesenligne,danschacunedesbotesdeligne,s'alignentparrapportauxctsgaucheetdroitedecesbotesdeligne;l'alignementn'estpaseffectuparrapportl'espacedevisualisation.Pourlavaleur'justify',l'agentutilisateurpeut,enplusdesajustementsdeposition,tirerlesbotesdeligne.Voirgalementlesproprits'letterspacing'et'wordspacing').

51


Ladcoration:laproprit'textdecoration'

'textdecoration'Valeur:none|[underline||overline||linethrough||blink]|inheritInitiale:noneS'applique:tousleslments

Cettepropritdcritlesdcorationsquisontajoutesautexted'unlment.Quandlapropritestappliqueunlmentdetypebloc,elleagitsurtouslesdescendantsdetypeenlignedeceluici.Quandelleestappliqueunlmentdetypeenligne,ouagitsurceluici,cettepropritinfluencetouteslesbotesgnresparcetlment.Quandleslmentssontvidesousanscontenutextuel(ex.l'lmentIMGenHTML),lesagentsutilisateursdoiventignorercetteproprit.

Lessignificationsdesvaleurssont:

none:Aucunedcoration;underline:Chaquelignedetexteestsouligne;overline:Chaquelignedetextereoituntraitaudessus;linethrough:Chaquelignedetexteestrayeensonmilieu;blink:Letexteclignote(unealternanceentrevisibleetinvisible).Lesagentsutilisateursconformesnesontpastenusdereconnatrecettevaleur.

Cettepropritn'estpashrite,cependantlesbotesquidescendentd'unebotedeblocdonnedevraientrecevoirlammedcorationquecelleci(ex.toutesdevraienttresoulignes).Lacouleurdeladcorationdevraittreconserve,mmesilavaleurdelaproprit'color'deslmentsdescendantstaitdiffrente.

52


Divers

Lepositionnementdesflottants:laproprit'float'

'float'Valeur:left|right|none|inheritInitiale:noneS'applique:tousleslments,saufceuxpositionnsetceuxdontlecontenuestgnr

Cettepropritspcifieleflottementd'unebotegauche,droiteoupasdutout.Onpeutl'employerpourdeslmentsgnrantdesbotesquinesontpasenpositionabsolue.

Voicilasignificationdesvaleursquecelleciadmet:left:L'lmentgnreunebotedeblocquiflottegauche.Lecontenus'coulesursonflancdroitencommenantenhaut(enfonctiondelavaleurdelaproprit'clear').Enignorantlavaleurdelaproprit'display',saufsicettevaleurest'none';right:Identique'left',maiseninversantlagauchedeladroite;none:Laboteneflottepas.

53


Lecontrledufluxautourdesflottants:laproprit'clear'

'clear'Valeur:none|left|right|both|inheritInitiale:noneS'applique:ceuxdeslmentsdetypebloc

Cettepropritindiquequelsctsd'uneoudesbotesd'unlmentnedoiventpastreadjacentsuneboteflottanteprcdente.(Ilpeutarriverquel'lmentluimmeaitdesdescendantsflottants,laproprit'clear'n'aalorsaucuneffetsureux).

Cettepropritnepeuts'appliquerquauxlmentsdetypebloc(dontlesflottants).Danslecasdesbotescompactesetenenfilade,laproprits'appliquelabotedeblocfinalelaquellecellesciappartiennent.

Voicilasignificationdesvaleursadmisesparlapropritquandonl'appliqueauxbotesdeblocnonflottantes:left:Lamargehautedelabotegnreestaugmentejusteassezpourquelebordhautdesaborduresoitsouslebordexternebasd'uneboteflottantgaucheissued'unlmentprcdentdudocumentsource;right:Reprendreleprcdenteninversantgaucheetdroite;both:Labotegnresedplacesouschacunedesbotesflottantesquisontissuesd'lmentsprcdentsdudocumentsource;none:Labotenesubitaucunecontraintedepositionvisvisdesflottants.

54


Laproprit'display'

'display'Valeur:inline|block|listitem|........|none|inheritInitiale:inlineS'applique:tousleslments

Lesvaleursdecettepropritontlesenssuivant:block:induitunlmentgnrerunebotedeblocprincipale;inline:induitunlmentgnreruneouplusieursbotesenligne;listitem:induitunlment(ex.l'lmentLIenHTML)gnrerunebotedeblocprincipaleetuneboteenlignepourunitemdeliste;Consulterlapartietraitantdeslistespourdesinformationsetdesexemplesdemiseenformedecellesci;none:cettevaleurfaitqu'aucuneboten'estgnreparl'lmentdanslastructuredeformatage(c..d.,cetlmentn'apasd'influencesurlamiseenformedudocument).Leslmentsquiendescendentnegnrentpasdebotesnonplus;onnepeutplusmodifierleurcomportementaveclaproprit'display'.

Ilestnoterqu'unevaleur'none'necrepasdeboteinvisible,ellenecrepasdebotedutout.CSScomprenddesmcanismespermettantlagnrationdebotesdanslastructuredeformatage,botesquiinfluencentlamiseenformemaisquinesontpasvisibles.

Lavisibilit:laproprit'visibility'

'visibility'Valeur:visible|hidden|collapse|inheritInitiale:visibleS'applique:tousleslments

Laproprit'visibility'spcifielerendu,ounon,desbotesgnresparunlmentdonn.Cesbotes,bienqu'invisibles,influencenttoujourslamiseenformedudocument(utiliserlaproprit'display'aveclavaleur'none'pourprohiberlagnrationd'unebote,etainsitoutesinfluencessurlamiseenforme).

Lesvaleursontlessignificationssuivantes:visible:Labotegnreestvisible;hidden:Labotegnreestinvisible(entirementtransparente),maiscelleciinfluenanttoujourslamiseenforme

55


Ledbordement:laproprit'overflow'

'overflow'Valeur:visible|hidden|scroll|auto|inheritInitiale:visibleS'applique:ceuxdeslmentsdetypeblocetceuxremplacs

Cettepropritspcifiesilecontenud'unlmentdetypeblocdoittrerognquandceluicidbordedelabotedecetlment(quisecomportecommeunblocconteneur).

Lessignificationsdesvaleurssont:visible:Lecontenuneserapasrogn,etceluicipeuttrereprsenthorsdelabotedubloc;hidden:Lecontenuserarognetaucunmcanismededfilementnedevraittrefournipourvoirlapartiequiauratrogne.Onspcifielatailleetlaformedureliquatdurognageaveclaproprit'clip';scroll:Lecontenuserarognet,sidisponible,l'agentutilisateurfournitunmcanismededfilementvisiblel'cran(telqu'unebarrededfilementouundispositifpanoramique),celuicidevraitapparatrepourunebotedonne,quelecontenudecellecisoitrognounon.Cecipourviterl'inconvnientquereprsenteraitdesbarresdedfilementapparaissantetdisparaissantdansunenvironnementdynamique.Quandcettevaleurestspcifieconjointementavecuntypedemdia'print,lapartieducontenuayantdbordedevraitaussitreimprime;auto:L'interprtationdecettevaleurdpenddel'agentutilisateur,cependant,celuicidevraitfournirunmcanismededfilementquandlesbotesdbordent.

Mmequandlavaleurdelaproprit'overflow'est'visible',ilpeutarriverquelecontenusoitrognparlesystmed'exploitation,pourtenirdanslafentredudocumentdel'agentutilisateur.

ValidersafeuilledestyleCSSAprsl'critureoulagnrationdefeuillesdestylesCSS,onpeutvrifierlavaliditdecellescigrceunservicedevalidationduW3C.

ServicedevalidationCSS:http://jigsaw.w3.org/cssvalidator/(fourniparleW3C)

56


Exemple:MyForumavecCSSVoiciunexempledefeuilledestyleCSS(default.css):

*{fontfamily:Verdana,Arial,sansserif;}*.left{textalign:left;}*.center{textalign:center;}*.right{textalign:right;}body{background:#FFFFFF;color:#000000;}

a:link{color:#800060;background:transparent;textdecoration:none;}a:visited{color:#800060;background:transparent;textdecoration:none;}a:hover{color:#FFFFFF;background:#800060;textdecoration:none;}div.header{borderbottom:1px#800050solid;}div.headerh1{fontsize:30pt;color:#800050;}hr{display:none;}img.icon{float:left;}div.main{margin:20px;}div.err{textalign:center;fontsize:12pt;fontweight:bold;

57


color:#FF0000;}div.box{marginleft:20%;marginright:20%;margintop:15px;marginbottom:15px;background:#800050;color:#FFFFFF;}div.boxh1{fontsize:14pt;textalign:center;color:#FFFFFF;}div.field{margintop:10px;width:70%;textalign:right;fontsize:8pt;fontweight:bold;}div.field2{margintop:10px;marginleft:10%;textalign:left;fontsize:8pt;fontweight:bold;}div.buttons{margintop:10px;paddingtop:10px;bordertop:1pxwhitesolid;textalign:center;fontsize:8pt;fontweight:bold;}input.button{margin:5px;background:#C00060;color:#ffffff;bordercolor:#C00060;}div.pwd{background:#C0C0C0;fontsize:12pt;fontweight:bold;marginbottom:20px;}table{margintop:15px;marginleft:10%;width:80%;bordercollapse:collapse;borderspacing:0;border:1px#C00060solid;background:#800050;color:#FFFFFF;}caption{margin:15px;

58


textalign:center;color:#800050;fontsize:14pt;fontweight:bold;}table.oldcaption{display:none;}tablea:link{color:#FFFFFF;background:transparent;textdecoration:none;}tablea:visited{color:#FFFFFF;background:transparent;textdecoration:none;}tablea:hover{color:#FFFF00;background:transparent;textdecoration:none;}td{bordertop:1px#C00060solid;fontsize:8pt;}th{bordertop:1px#C00060solid;background:#C00060;textalign:left;fontsize:8pt;fontweight:bold;}textarea{fontsize:8pt;}div.footer{bordertop:1px#800050solid;fontsize:8pt;}

59


Voicigalementcequeceladonnelorsquel'onappliquelafeuilledestylelapageXHTMLdveloppeprcdemment:

PourappliquerlafeuilleCSSilfautrajouterlalignesuivantedanslapartiedelasourceXHTML:

60


VIII.Programmationdel'application

Unefois lemodlededonnesdfinitet lemaquettagedel'applicationralis,onpeutremplacer le contenu statique de nos page web par de la programmation PHP,NousallonsdoncvoirdansunpremiertempslesbasesdulangagePHP,puis,dansundeuximetemps laprogrammationquenousallonsimplmenterdansnospagesHTMLpourrendrenotreforumOprationnel.

61


IX.LelangagePHP

PHPestunlangagedescriptsmultiplatesformes,embarqudansdesdocumentsHTML.PlussimplementPHPvousoffreunmoyendeplacerdesinstructionsdansvosdocumentsHTMLenvuedecrerdescontenusdynamiques.

Cesinstructionssont luesetanalysesparleserveurweb.Ellesneparviennent jamaisjusqu'aunavigateur qui affiche la page. Leserveur web remplace le codePHPpar lecontenuquelecodeavaitpourbutdegnrer.

LesbasesdulangagePHPestunvritablelangagedeprogrammation.SyntaxiquementiltientduPerletduC.Ils'agit d'un langage interprt, c'est dire que les fichiers crits dans ce langage nencessitentpasdecompilationsoudetraitementspcifiquedelapartd'uneapplicationtierce.CequevouscodezenPHPestdirectementutilisablesurvotreserveurWeb.

Commentaires

L'utilitdeplacerdescommentairesjudicieuxdansvotrecodesourcen'estaujourd'huiplusdmontrer,eneffetilpermetdeprciserlesalgorithmesutilisdansunlangagehumain,cequisimplifiegrandementlamaintenanceouledbogageduprogramme.LePHPfournittroistypesdecommentaires:

/*CommentairedetypeC*///CommentairedetypeC++#CommentairedetypeShellouPerl

62


Variables

LePHPestunlangagenontyp.Enclair,celasignifiequ'unevariablepeutcontenirindiffremmentunevaleurnumriqueouunechainedecaractres.paropposition,leslangagestypscommeleCobligentdfinirunevariabled'uncertaintypeenfonctiondecequ'ellevacontenir.LesvariablesenPHPsontprfixsparlecaractre'$'.LelangagePHPpermetdemanipulertroisgenresdevariables:

Lesvariablesscalaires:$toto=5

Lestableaux:$tab[0]="philippe"

Lestableauxassociatifs:

$age["philippe"]=27

Typesdedonnes

PHPfournittroistypesdedonnesprimaires:nombresentiers,nombresdcimauxetchanes.

EntiersLaplagedesentiersdansPHPestquivalentelaportedutypelongdulangageC.Surlesplateformes32bits,lesvaleursentiresvontde2147483648+2147483647.PHPconvertitautomatiquementlesvaleurssuprieuresennombredcimaux.Unentierpeuttreexprimendcimal(base10),hexadcimal(base16)ouenoctal(base8).Parexemple:

$decimal=16;$hex=0x10;$octal=020;

NombresdcimauxLaplagedesnombresdcimauxdansPHPestquivalentelaportdutypedoubleenC.Lesvaleurs,surlaplupartdesplateformes,vontde1.7E3081.7E+308.Unnombredcimalpeuttreexprimsousformedenombrenormalavecunpointdcimalouennotationscientifique.Parexemple:

$var=0.017;$var=17.0E3;

63


ChanesUnechaneestunesquencedecaractres.Unechanepeuttredlimitpardesguillemetssimplesoudoubles:

'Bonjourtous'"C'estcoollePHP"

Leschainesplacesentredoublesguillemetssontsujettesauxsubstitutionsdevariablesetautraitementdessquencesd'chappement,alorsquecellesplacesentreguillemetssimplesnelesontpas:

$a="jour!";/*affiche:Bonjour!*/echo"Bon\t$a";/*affiche:Bon\t$a*/echo'Bon\t$a';

Tableaudessquencesd'chappements\n Nouvelleligne\t Tabulation\r Retourchariot\\ Antislash\$ Signedollar

ValeursBoolennesChaquevaleurpossdedansPHPunevaleurboolenneditedevrit(trueoufalse)quiluiestassoci.C'esttypiquementutilisdanslesstructuresdecontrle,tellesqueif/elseoufor.

Expressions

L'expressionestlapierrematressedulangage.Toutcequipossdeunevaleurpeuttreconsidrcommeuneexpression,voiciquelquesexemples:

55+5$a$a==5sqrt(9)

64


Oprateurs

Lesexpressionssontcombinesetmanipulesl'aided'oprateurs.Letableaucidessousdresselalistedesoprateursdisponiblesainsiqueleurprioritetleurassociativit.CesoprateursdevraientvousparatrefamiliersivousavezuneexprienceduC,JavaoudePerl:

Oprateurs Priorit Associativit!,~,++,,@,(oprateursdetranstypage)

16 Droite

*,/,% 15 Gauche+,,. 14 Gauche 13 Gauche 12 Nonassociatif==,!= 11 Nonassociatif& 10 Gauche^ 9 Gauche| 8 Gauche&& 7 Gauche|| 6 Gauche?:(oprateurconditionnel) 5 Gauche=,+=,=,*=,/=,%=,^=,.=,&=,|= 4 GaucheAnd 3 GaucheXor 2 GaucheOr 1 Gauche

65


Structuresdecontrles

LesstructuresdecontrledePHPsonttrssimilairescellesutilisesparlelangageC.EllessontutilisespourcontrlerunfluxlogiquedansunscriptPHP.

IfL'instructionifestuneconditionstandardquel'ontrouvedanslaplupartdeslangages.Elleforcel'excutiond'uncodeparticuliersil'expressionsurlaquelleelleagitesttrue.

if(expr){instructions}elseif(expr){instructions}else{instructions}

SwitchL'instructionswitchpeuttreutiliselaplaced'unelongueinstructionif.L'expressiondechaqueinstructioncaseestcomparel'expressionswitchet,siellescorrespondent,lecodesuivantcetteinstructionestexcute.

switch(expr){caseexpr:instructionsbreak;default:instructionsbreak;}

WhileL'instructionwhileestuneconstructiondebouclequiexcuteducodedefaonrptitiveaussilongtempsqu'uneexpressionparticulireestvraie.L'expressionestvrifieavantchaquedmarragedelaboucle.

while(expr){instructions}

Onpeutarrterlefonctionnementd'uneboucleparl'instructionbreak.Onpeutgalementsauterlerestedesinstructionsetrecommencerl'itrationparlemotclcontinue.

66


Do/whileL'instructiondo/whileestsimilairel'instructionwhile,exceptionfaitequel'expressionestvrifieenfind'itrationaulieududbut:

do{instructions}while(expr)

Foruneboucleforoffreuneconstructionpluscomplexequelasimplebouclewhile.Ellecontienttroisexpressions:

Lapremireestl'expressiondedmarrage,ellen'estexcuterqu'endbutdelapremireitration,onl'utiliseengnralpourinitialiseruncompteur.

Lasecondeestuneexpressionconditionnellequicontrlel'itrationdelaboucle.Cetteexpressionestvrifieendbutdechaqueitration.

Latroisimeexpressionestvalueenfindechaqueitration.Elleestengnralutilisepourincrmenteruncompteurdeboucle.

for(start_expr;cond_expr;iter_expr){instructions}

Fonctions

Unefonctionestunesquenced'instructionsdecode,doted'unnom,quipeutaccepterdesparamtresetquiretourneunevaleur.Unappeldefonctionestuneexpressionayantunevaleur;cettevaleurestlavaleurretourneparlafonction.PHPproposeungrandnombredefonctionsinternes.PHPprendgalementenchargelesfonctionsdfiniesparl'utilisateur.Pourdfinirunefonctiononutiliselemotclfunction:

functionbonjour($prenom){return"Bonjour$prenom!";}

Aprsavoirdfinitunefonction,onl'appellel'aided'argumentsappropris:

echobonjour("Philippe");

Onpeutgalementdfinirdesfonctionsavecdesparamtresoptionnels.Ilfautpourceladonnerunevaleurpardfautauparamtreoptionnel:

functionbonjour($prenom="toutlemonde"){return"Bonjour$prenom!";}

67


Programmationobjet

Uneclasseestunecollectiondevariablesetdefonctionsquifonctionnentaveccesvariables.Uneclasseestdfinieenutilisantlasyntaxesuivante:

68


L'exemplecidessusdfinitlaclasseCaddiequiestcomposed'untableauassociatifcontenantlesarticlesdupanieretdedeuxfonctions,unepourajouteretunepourenleverdeslmentsaupanier.Note:EnPHP4,seulslesinitialiseursconstantspourlesvariablesvarsontautoriss.Utilisezlesconstructeurspourlesinitialisationsvariables,ouutilisantdesexpressions.

Lesclassesformentuntypedevariable.Pourcrerunevariabledutypedsir,vousdevezutiliserl'oprateurnew.

L'instructioncidessuscrel'objet$cartdelaclassCaddie.Lafonctionadd_idem()estappeleafind'ajouterl'articlenumro10danslepanier.Uneclassepeuttreuneextensiond'uneautreclasse.Lesclasses"extended"ou"derived"hritentdetouteslesvariablesetdetouteslesfonctionsdelaclassepreplustouteslesdfinitionsquevousrajoutezcetteclasse.Celasefaitaveclemotclef"extends".L'hritagemultiplen'estpassupport.

69


L'exemplecidessusdfinitlaclasseCaddie_nommequipossdelesmmevariablesquelaclasseCaddieetlavariable$ownerenplus,ainsiquelafonctionset_owner().Vouscrezunpaniernominatifdelammemanirequeprcdemment,etvouspouvezalorsaffecterunnomaupanierouenconnatrelenom.Vouspouvezdetouteslesfaonsutiliserlesmmesfonctionsquesurunpanierclassique.


Pourlesclassesquiutilisentl'hritage,leconstructeurdelaclassepren'estpasautomatiquementappellorsqueleconstructeurdelaclassedriveestappel.

71


PHPdanslespagesXHTMLVousavezpeuttreremarqu,quetoutcequiestaffichl'aidedel'instructionechofiguredanslecodeHTMLfinal,envoyaunavigateur.C'est la base du fonctionnement de PHP comme langage embarqu dans HTML etgalement sa grande force par rapport l'utilisation de scripts ou d'excutables CGI.L'imbricationdePHPdansHTML,permetainsidecrerdesfichiersmixtes.OncomprendalorspleinementlesavantagesdePHP.CidessousunpetitexempledescriptPHP:

PagedebienvenueBienvenuesurcesite


LesfonctionsprdfiniesNousneverronsiciquelesfonctionsdontnousallonsnousservirpourlacrationdenotreforum,pouravoirlalistecompltedesfonctionsdisponiblesenPHPveuillezconsulterlapage:http://dev.nexen.net/docs/php/manuel_toc.html#functions

Sessions

LagestiondessessionsavecPHPestunmoyendesauverdesinformationsentredeuxaccs.Celapermetnotammentdeconstruiredesapplicationspersonnalises,etd'accrotrel'attraitdevotresite.Chaquevisiteurquiaccdevotresitesevoitassignerunnumrod'identifiant,appelplusloin"identifiantdesession".Celuiciestenregistrsoitdansuncookie,chezleclient,soitdansl'URL.Lessessionsvouspermettrontd'enregistrerdesvariables,pourlesprserveretlesrutilisertoutaulongdesrequtes.Lorsqu'unvisiteuraccdevotresite,PHPvrifieraautomatiquement(sisession.auto_startest1)oumanuellement(explicitementavecsession_start()ouimplicitementavecsession_register())siunesessionadjtouverte.Siunetellesessionexistedj,l'environnementprcdentserarecr.Touteslesvariablesenregistrerserontenregistressurledisquelafindechaquerequte.Lesvariablesenregistresmaisnondfiniesserontmarquescommetel.Lorsdesaccsultrieurs,ellesneserontdfiniesquesil'utilisateurlefait.

Ilyadeuxmodesdepropagationdel'identifiantdesession:

Cookies ParamtreURL

Lemoduledesessionsupportelesdeuxtechniques.Lamthodeparcookieestoptimale,maistantdonnlepeudefiabilit(lesclientspeuventlesrefuser,ouleseffacer),onnepeutpassecontenterdecettetechnique.Ladeuximemthodeplacel'identifiantdesessiondirectementdansl'URL.

session_startInitialiselesdonnesdesession

boolsession_start(void)

session_start()creunesession(oucontinuelasessioncourante,enfonctiondel'identifiantdesessionpassparunevariableGETouparuncookie)session_start()retournetoujoursTRUE.

session_destroyDtruittouteslesdonnesenregistresd'unesession

boolsession_destroy(void)

session_destroy()dtruittouteslesdonnesassocieslasessioncourante.session_destroy()retourneTRUEencasdesuccs,etFALSEsinon.

73


session_nameAffecteet/ouretournelenomdelasessioncourante

stringsession_name(stringname)

session_name()retournelenomdelasessioncourante.Sinameestfourni,lenomdelasessionchangera,etprendralavaleurfournie.Lenomdesessionfaitrfrencel'identifiantdesessiondanslescookies.Ilnedoitcontenirquedescaractresalphanumriques;ildoittrecourtetdescriptif.(i.e.surtoutpourlesutilisateursd'alertesdecookie).Lenomdesessionestremisunevaleurpardfaut,enregistresdanssession.nameaumomentdudmarrage.Ainsi,vousdevezappelersession_name()chaquerequte(etavantsession_start()ousession_register()).

Exemple:


Envoidemail

boolmail(stringto,stringsubject,stringmessage,stringadditional_headers,stringadditional_parameters)

mail()posteautomatiquementlemessagemessagedestinationdeto.Lesdestinatairesmultiplesdoiventtresparspardesvirgules.

Envoidecourrierlectronique(mail)

Lequatrimeargumentpassserainsrlafindel'entte.Typiquement,celapermetd'insrerdesenttessupplmentaires.Lesenttesmultiplesdoiventtresparspardesvirgules.Silecinquimeargumentadditional_parametersestfourni,PHPl'utiliseradanssonappelduprogrammed'envoidecourrierlectronique.Ceciestpratiquepourpasserunevaleurcorrectel'entteReturnPath,avecsendmail.Note:LecinquimeparamtreatajoutenPHP4.0.5.

EnvoideeMailavecdesenttessupplmentaires.

Aveclecinquimeparamtre,vouspouvezajouterd'autresparamtresdelignedecommandequiserontutilissparleprogrammed'envoidecourrier.Dansl'exemplecidessous,l'entteReturnPathestcorrectementparamtr.Normalement,sendmailajouteautomatiquementl'entteXAuthenticationWarning(paramtref),carl'utilisateur"serveurweb"n'estprobablementpasundesesutilisateursdeconfiance("trustedusers").Poursupprimercettealerte,ajoutezl'utilisateurduserveurwebdanslaconfigurationdesendmail.

EnvoideeMailavecdesenttessupplmentairesetunparamtredelignedecommandesupplmentaire

75


MySQL

Cesfonctionsvouspermettentd'accderauxbasesdedonnesMySQL.Afindepouvoirlesutiliser,vousdevezcompilerPHPaveclesupportMySQL,enutilisantl'optionwithmysql.Sivousutilisezcettefonctionsansprciserlechemind'accslabaseMySQL,PHPutiliseraleslibrairiesclienteMySQLfourniesenstandard.Lesutilisateursquifonttournerd'autresapplicationsquiutilisentellesmmesMySQL(parexemple,PHP3etPHP4utilisscommedesmodulesconcurrentsapache,ouencoreauthmysql),devraittoujoursspcifierlecheminjusqu'MySQL:withmysql=/path/to/mysql.CelavaforcerPHPutiliserleslibrairiesclientesinstallesparMySQLetviteralesconflits.Plusd'informationssontdisponibleshttp://www.mysql.com/.LadocumentationdeMySQLestdisponibleshttp://www.mysql.com/documentation/,ainsiqu'enfranaischeznexen.

mysql_affected_rowsRetournelenombredelignesaffecteslorsdeladernirerequteSQL.

intmysql_affected_rows(resourcelink_identifier)

mysql_affected_rows()retournelenombredelignesaffecteslorsdeladernirerequteINSERT,UPDATEouDELETEsurleserveurassocil'identifiantdeconnexion.Sicetidentifiantn'estpasprcis,mysql_affected_rows()utiliseladernireconnexionouverte.Siladernirerequteachou,mysql_affected_rows()retourne1.

mysql_closeFermelaconnexionMySQL

boolmysql_close(ressourcelink_identifier)

mysql_close()retourneTRUEencasdesuccsetFALSEsinon.mysql_close()fermelaconnexionauserveurMySQLassociel'identifiantlink_identifier.Sicetidentifiantn'estpasspcifi,cettecommandes'appliqueladernireconnexionouverte.

mysql_connectOuvreuneconnexionunserveurMySQL

intmysql_connect(stringhostname,stringusername,stringpassword)

mysql_connect()retourneunidentifiantpositifdeconnexionencasdesuccs,etsinonFALSE.mysql_connect()tablituneconnexionunserveurMySQL.Touslesargumentssontoptionnels,ets'ilsmanquent,lesvaleurspardfautsontutilises(('localhost',nomdupropritaireduprocessus,motdepassevide).Siunsecondappelmysql_connect()estfaitaveclesmmesarguments,PHPnevapasouvrirunenouvelleconnexion,maisvaretournerl'identifiantdelaconnexiondjouverte.Lelienserafermautomatiquementdsquel'excutionduscriptseratermine,moinsd'trefermexplicitementavecmysql_close().

76


ExampleMySQLconnect

mysql_db_queryEnvoieunerequteMySQLunserveurMySQL

resourcemysql_db_query(stringdatabase,stringquery,resourcelink_identifier)

mysql_db_query()retourneunidentifiantdersultatsilarequterussitetFALSEsinon.mysql_db_query()slectionneunebasededonnesetexcuteunerequte.Sil'identifiantdelienlink_identifiern'estpasprcis,mysql_db_query()prendrapardfautladernireconnexionouvertesurleserveuretsiellen'entrouvepas,elletenteradeseconnecter,enutilisantlafonctionmysql_connect(),sansarguments.

mysql_errnoRetournelenumrodemessaged'erreurdeladernireoprationMySQL.

intmysql_errno(ressourcelink_identifier)

mysql_errno()retournelenumrodemessaged'erreurdeladernireoprationMySQLsurlaconnexioncourante,ousurlaconnexionspcifieavecl'optionlink_identifier.LeserreursquisontremontesdepuisleserveurMySQLnesontplusdesalertes.Alaplace,ilfaututilisermysql_errno()pourobtenirlenumrod'erreur.

mysql_errorRetourneletexteassocieavecl'erreurgnrelorsdeladernirerequte.

stringmysql_error(resourcelink_identifier)

mysql_error()retournelederniermessaged'erreurMySQLsurlaconnexioncourante,ousurlaconnexionspcifieaveclink_identifier.LeserreursgnresparmySQLnesetransformentplusenalerte.Alaplace,ellessontaccessiblesviacesfonctions:

77


mysql_fetch_arrayRetourneunelignedersultatsouslaformed'untableauassociatif.

arraymysql_fetch_array(resourceresult_identifier,intresult_type)

mysql_fetch_array()retourneuntableauquicontientlalignedemande,ouFALSEsiilneresteplusdeligne.mysql_fetch_array()estuneversiontenduedemysql_fetch_row().Enplusd'enregistrerlesdonnessousformed'untableauindicenumrique,ellepeutaussilesenregistrerdansuntableauassociatif,enutilisantlesnomsdeschampscommeindices.Siplusieurscolonnesontlemmenom,ladernirecolonneauralapriorit.Pouraccderauxautrescolonnesdummenom,vousdevezutiliserl'indexnumriques,oufaireunaliaspourchaquecolonne.Ilestimportantdesoulignequemysql_fetch_array()N'estPASpluslentequemysql_fetch_row(),tandisqu'elleajouteunconfortd'utilisationnotable..

mysql_fetch_rowRetourneunelignedersultatsouslaformed'untableau

arraymysql_fetch_row(resourceresult_identifier)

mysql_fetch_row()retourneuntableaunumrquicorrespondlalignedemande,ouFALSE,siilneresteplusdeligne.mysql_fetch_row()varechercherunelignedanslersultatassocil'identifiantdersultatspcifi.Laligneestretournesouslaformed'untableau.Chaquecolonneestenregistrsouslaformed'untableaucommenantlaposition0.Lesappelssuivantsmysql_fetch_row()retournerontlalignesuivantedanslersultat,ouFALSEsiiln'yaplusdelignedisponible.

mysql_free_resultEffacelersultatdelammoire

intmysql_free_result(resourceresult_identifier)

mysql_free_result()n'estappelerquesivousavezpeurd'utilisertropdemmoiredurantl'excutiondevotrescript.Toutelammoireassociel'identifiantdersultatseraautomatiquementlibre.

78


mysql_num_rowsRetournelenombredeligned'unrsultat

intmysql_num_rows(resourceresult_identifier)

mysql_num_rows()retournelenombredelignesd'unrsultat.Cettecommanden'estvalidequepourlescommandesSELECT.PourconnatrelenombredelignesretournesparINSERT,UPDATEouDELETE,utilisezmysql_affected_rows().

Exemplemysql_num_rows()[email protected]


mysql_select_dbSlectionneunebasededonnesMySQL

intmysql_select_db(stringdatabase_name,resourcelink_identifier)

mysql_select_db()retourneTRUEencasdesuccs,FALSEsinon.mysql_select_db()changelabasededonnesactivesurlaconnexionreprsenteparlink_identifier.Siaucunidentifiantn'estspcifi,ladernireconnexionestutilise.S'iln'yapasdedernireconnexion,lafonctiontenteradeseconnecterseule,avecmysql_connect()etlesparamtrespardfaut.Touteslesrequtessuivantesavecmysql_query()serontfaitesaveclabasededonnesactive.

ChainesdeCaractres

strtoupperMettouslescaractresenmajuscules

stringstrtoupper(stringstring)

strtoupper()retournestringavectoussescaractresalphabtiquesmisenmajuscule.Notezquelecaractre'alphabtique'estdterminparlatabledecaractreslocale.Parexemple,danslatabledescaractrespardfautdu"C",descaractrestelsqueaumlaut()neserontpasconvertis.

Exempleavecstrtoupper()


X.L'applicationmyForumVoicilastructuredel'application:

myForum/+imgs/|+linux.png+inc/|+config.inc.php|+session.inc.php|+user.inc.php+default.css+editer.php+inscription.php+inscrit.php+login.php+mail.php+messages.php+savemessage.php+sujets.php+themes.php

LaclasseConfigCetteclassepermetdestockerdansunobjetlesdonnespermettantd'accderlabasededonnes,ellepermetgalementdevrifierquelaconnexionauserveurMySQLestOK.


return$this>db_name;}

functiongetDbUser(){return$this>db_user;}

functiongetDbPass(){return$this>db_pass;}functiontestConnection(){$dbh=mysql_connect($this>getDbHost(),$this>getDbUser(),

$this>getDbPass());if($dbh==false){returnfalse;}else{$dbh=mysql_select_db($this>getDbName());if($dbh==false){returnfalse;}else{returntrue;}}}}?>

82


LaclasseSessionCetteclassecreunobjetpermettantdegrerlessessions:rcuprationsdedonnes,sauvegardededonnes(notezl'utilisationde$_SESSIONaulieudesession_(un)register),modificationsdesURL(ajoutdesparamsdesession).


LaclasseUserCetteclassecreunobjetpermettantdegrerl'utilisateur.

////user.inc.php//

classUser{var$user_code;var$user_name;var$user_firstname;var$user_email;//ConstructeurfunctionUser(){$user_code="";$user_name="";$user_firstname="";$user_email="";}//VerificationdelasessionfunctionisValid($session){//Lasessionestelleactive$this>restoreData($session);if($this>getId()==""){returnfalse;}else{//Lasessionestactivereturntrue;}}functionconnect($cuser,$pass,$cfg,$session){$this>user_code=$cuser;$dbh=mysql_connect($cfg>getDbHost(),$cfg>getDbUser(),

$cfg>getDbPass());$dbh=mysql_select_db($cfg>getDbName());$dbr=mysql_query("SELECTid_user,name,firstname,emailFROM

usersWHEREid_user='$cuser'ANDpasswd='$pass';");if(mysql_num_rows($dbr)>0){$enr=mysql_fetch_array($dbr);if($enr['id_user']==$this>user_code){$this>user_name=$enr['name'];$this>user_firstname=$enr['firstname'];$this>user_email=$enr['email'];$this>saveData($session);returntrue;}else{returnfalse;}}else{returnfalse;

84


}}

functionsaveData($session){$session>save("userId",$this>user_code);$session>save("userName",$this>user_name);$session>save("userFirstname",$this>user_firstname);$session>save("userEmail",$this>user_email);returntrue;}

functionrestoreData($session){$this>user_code=$session>load("userId");$this>user_name=$session>load("userName");$this>user_firstname=$session>load("userFirstname");$this>user_email=$session>load("userEmail");returntrue;}functiongetId(){return$this>user_code;}

functiongetName(){return$this>user_name;}

functiongetFirstname(){return$this>user_firstname;}

functiongetEmail(){return$this>user_email;}}?>

85


LapageloginCeciestlapremirepagesurlequell'utilisateurvapouvoirs'authentifier.

MyForumv0.1MyForumv0.1


Codeuser:

Motdepasse:Sivousn'tespasencoreinscritveuillezcliquerici.Copyright20032004PhilippeBOUSQUETCelogicielestsouslicenceGnuGenralPublicLicense

87


LapageinscritCeciestlapaged'inscriptionlorsquel'utilisateurveuts'inscriresurleforum.

MyForumv0.1MyForumv0.1Inscription

Nom:

88


Prnom:Email:Codeuser:Password:Confirmation:

Copyright20032004PhilippeBOUSQUETCelogicielestsouslicenceGnuGenralPublicLicense

89


LapartiemtierinscriptionCeciestpurementunactemtierquiajoutel'utilisateurdanslabasemySQL,elleredirigeraensuiteverslapagedeslectiondesthmes.


}//Verificationdel'inexistenceducodeuser$dbh=mysql_connect($cfg>getDbHost(),$cfg>getDbUser(),$cfg>getDbPass());$dbh=mysql_select_db($cfg>getDbName());$dbr=mysql_query("SELECT*FROMusersWHEREid_user='$cuser';");if(mysql_num_rows($dbr)>0){header("Location:inscrit.php?ERROR=Code%20user%20dja%20utilis,%20veuillez%20en%20choisir%20un%20autre.&name=$name&firstname=$firstname&email=$email&cuser=");exit();}//Lescontrolessontokinscriptiondel'utilisateur$requete="INSERTINTOùsers`(ìd_user`,`passwd`,`name`,`firstname`,èmail`)VALUES('$cuser','$passwd','$name','$firstname','$email');";$dbr=mysql_query($requete);//Onseconnecteheader("Location:themes.php?cuser=".$cuser."&passwd=".$passwd);?>

91


LapartiemtiermailCeciestpurementunactemtierquienvoiel'utilisateursonmotdepasseparemail,siceluicil'aoubli.


LapagedeslectiondethmeCettepagepermetl'utilisateurdeslectionnerlethemesqu'ilveutconsulter.

MyForumv0.1MyForumv0.1>>


>QuitterMyForum:ListedesthmesThmeDescriptionSujetsDate


LapagedeslectiondusujetCettepagepermet l'utilisateur deslectionne le sujet sur lequel il veut consulter lesmessages,ouencrerunnouveau.

MyForumv0.1MyForumv0.1>>Quitter::Thmes

95


Copyright20032004PhilippeBOUSQUETCelogicielestsouslicenceGnuGenralPublicLicense

97


LapagedesmessagesCettepageaffichelalistedesmessagesconcernantunsujet,l'utilisateurpourragalementspcifierqu'ilveutrpondresurcesujet.

MyForumv0.1MyForumv0.1>>Quitter::Thmes::


"id_theme=".$id_theme)."\"title=\"retourauxsujets\">";?>Sujets


LapagedecrationdemessageCettepagepermetsoitderpondresurunsujetdonn,soitdecrersonpropremessagesurunnouveausujet.

MyForumv0.1MyForumv0.1>>Quitter::Thmes::Sujets


echo'::Messages';

}?>';?>

Titre:Message:

Saisissezvotretexteici...


echo'';echo''.$enr['id_user'].'';echo''.$enr['title'].'';echo''.$enr['date'].'';echo''."\n";echo'';echo''.

$enr['text'].'';echo''."\n";}echo'';echo'';}?>Copyright20032004PhilippeBOUSQUETCelogicielestsouslicenceGnuGenralPublicLicense

102


Lapartiemtierdesauvegarded'unmessageCettepartiepermetdecrerunsujetenbaseMySQL(sibesoin),ainsiqued'enregistrerlemessagesaisiparl'utilisateur.


XI.Rfrences

Pourplusd'informationssurMySQL: http://www.mysql.com http://dev.nexen.net/docs/mysql/

Pourplusd'informationssurphpMyAdmin:

http://www.phpmydamin.org

Pourplusd'informationssurXHTMLetCSS:

http://www.w3.org/ (LesiteofficielduW3C) http://openweb.eu.org/ (Pourlesstandardsduweb.Enfranais)

Pourplusd'informationssurPHP:

http://dev.nexen.net/docs/php/

104

Creer Application WEB

Documents

Transcript of Creer Application WEB