LicenceMath-Informatique1ère année
OlivierGlückUniversitéLYON1/DépartementInformatique
[email protected]://perso.univ-lyon1.fr/olivier.gluck
Partie3
Copyright§ Copyright©2018OlivierGlück;allrights reserved§ Cesupportdecoursestsoumisauxdroitsd’auteuretn’estdoncpasdansledomainepublic.Sareproductionestcependantautoriséeàconditionderespecterlesconditionssuivantes:§ Sicedocumentestreproduitpourlesbesoinspersonnelsdureproducteur,touteformedereproduction(totaleoupartielle)estautoriséeàlaconditiondeciterl’auteur.
§ Sicedocumentestreproduitdanslebutd’êtredistribuéàdestiercespersonnes,ildevraêtrereproduitdanssonintégralitésansaucunemodification.Cettenoticedecopyrightdevradoncêtreprésente.Deplus,ilnedevrapasêtrevendu.
§ Cependant,dansleseulcasd’unenseignementgratuit,uneparticipationauxfraisdereproductionpourraêtredemandée,maisellenepourraêtresupérieureauprixdupapieretdel’encrecomposantledocument.
§ Toutereproductionsortantducadrepréciséci-dessusestinterditesansaccordpréalableécritdel’auteur.
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 2
Planducours
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 3
§ CM1:Internet,lesréseauxetleweb§ CM2:PagesHTMLetfeuillesdestylesCSS§ CM3:Webinteractif,formulaires,pagesdynamiquesetPHP§ CM4:ProtocoleHTTP,méthodesGETetPOST§ CM5:Lesapplicationsd’Internet§ CM6:Lacouchetransport:lesprotocolesTCPetUDP§ CM7:LeprotocoleIP§ CM8:LesprotocolesEthernet,ARPetICMP.SynthèsedeséchangesentreunclientetserveurWeb
CM3:Webinteractif,formulaires,pagesdynamiquesetPHP
LewebinteractifFormulairesHTML
ProgrammationcôtéserveurenPHPLesbasesdulangagePHP
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 4
PlanduCM3§ Lewebinteractif
§ Pagesstatiquesetdynamiques,ProgrammationWebcôtéclient,ProgrammationWebcôtéserveur
§ FormulairesHTML§ Principe,clientpassif/actif,Labalise<FORM>,Lesélémentsd'unformulaire
§ ProgrammationcôtéserveurenPHP§ Qu’est-cequePHP?Interactionsentreleclientetleserveur,Fonctionnementdel’interpréteur,Unpremierexemple
§ LesbasesdulangagePHP§ Typesdedonnéesetvariables,lesopérateurs,leschaînesdecaractères,lestableaux,instructionsconditionnellesetboucles,fonctions,variablesglobales/locales,téléchargementdefichiers
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 5
LeWebinteractif
PagesstatiquesetdynamiquesProgrammationWebcôtéclientProgrammationWebcôtéserveur
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 6
Pagesstatiquesetdynamiques
§ LeHTMLnepermetpasd'interactivitéavecl'utilisateur§ Lespagesvisualiséessont"statiques"
§ Pagesstatiques§ LapagevisualiséeNfoissurlemêmenavigateurdonneratoujourslemêmerésultat
§ Pagesdynamiques§ Lapagevisualiséedépenddesmanipulationsdel'utilisateur§ Elleestgénéréedynamiquementselonlesactionsdel’utilisateurdanslapage
§ Nécessitedelaprogrammationpourprendreencomptelesactions§ ProgrammationWebcôtéclient:principalementJavascript§ ProgrammationWebcôtéserveur:principalementPHP
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 7
ProgrammationWebcôtéclient
§ Lesexécutionsassociéesontlieusurleposteclient§ Lenavigateurdoitsupportercesexécutions...§ DesscriptsembarquésdanslapageHTMLquisonttransférésdepuisleserveurversleclient§ "HTML-embedded scripting"§ exemples:javascript,vbscript,…
§ Desapplets§ java,ActiveX,…§ lecodedel'applet estenvoyéauclient§ javatournesurtouteslesplate-formes§ lenavigateurdoitnéanmoinsdisposerd'uneconsolejava...
§ Desplugins propriétaires
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 8
ProgrammationWebcôtéserveur(1)§ Lesexécutionsassociéesontlieusurleserveur
§ LerésultatdecesexécutionsestunepageHTMLquiestrenvoyéeaunavigateurclient
§ Baséesurl’interfaceCGI- CommonGatewayInterface§ Interfacedecommunicationquidéfinitleformatd'échangesdesdonnéesentreleclientetleserveurHTTP
§ Lesparamètresdel’utilisateursonttransmisparleserveurHTTPàunprogrammequitraitelesrequêtesetproduitunrésultatenHTML(pagedynamique)
§ Lesformulairespermettentderécolterlesparamètresdel’utilisateuravantdelesenvoyerauscriptquis’exécutesurleserveur
§ ScriptsenPHP,PerlouShell,programmesC,Ada…OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 9
ProgrammationWebcôtéserveur(2)
§ Lesinterpréteursintégrésauserveurweb§ DesscriptspeuventêtreinsérésdanslecodesourcedelapageHTMLetexécutésparleserveurwebpourgénérerducodesourceHTMLavantenvoiaunavigateur§ Exemples:PHP,ASP,…
§ Leserveurwebpeutexécuterdesscriptsnonintégrésdanslapage(CGI-like)§ Exemples:mod_perl/Apache
§ Lesservlets§ LependantdesApplets§ EnlangageJava
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 10
ProgrammationWeb:récapitulatif
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 11
Web interactif
CGI (Perl, C,Shell, ...)
Scripts côtéserveur
Scripts côtéclient
Applets(Java, ActiveX)
Modules HTTPD
Servlets(Java)
Scripts intégrésà la page HTML
(Javascript,Vbscript)
Scripts CGI-like(mod_perl/
Apache)
Scripts intégrésà la page HTML(PHP, ASP, ...)
FormulairesHTML
Principe,clientpassif/actifLabalise<FORM>
Lesélémentsd'unformulaire
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 12
Pourquoidesformulaires?
§ Apportedel'inter-activitéavecl'utilisateurenproposantdeszonesdedialogue:unformulairen'estqu'uneinterfacedesaisie!
§ Selonleschoixdel'utilisateur,ilfautyassocieruntraitement§ surleclientavecJavaScriptparexemple§ surleserveurparl'intermédiairedeCGI,PHP,…
§ Exemplestypiquesd'utilisationdeformulaire§ commandes,devisviaInternet§ moteursderecherche§ interactionsavecunebasededonnées
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 13
Principeduformulaire
§Ondécritàl'aidedebalisesHTMLlesdifférentschampsdesaisie
§ Chaquezoneestidentifiéeparunnomsymboliqueauquelseraassociéeunevaleurparl'utilisateur
§Quandleformulaireestsoumis,lescouples(nom/valeur)detoutesleszonessonttransmisdanslarequêteHTTPauserveur
§ Achaquezonedesaisiepeutêtreassociéuntraitementsurleclientparl'intermédiaired'unévénementJavaScript
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 14
Leclientestpassif
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 15
Navigateurclient
Serveur WebDémon HTTP
1 demande du formulaire
DD
Affichage duformulaire 3 envoi du formulaire
recherche de la pageHTML sur le disque
2
l'utilisateur remplitle formulaire
4
Formulairerempli
5 envoi des données duformulaire (soumission)
Serveur WebDémon HTTP
ProgrammeCGI
transmission des donnéesau CGI / lancement de sonexécution
6
SGBD
exécution du CGI7
requête à la SGBD8Serveur WebDémon HTTP réponse en HTML du
CGI renvoyée au démonHTTP
9Affichage dela réponse 10 envoi de la page HTML
résultat
Poste client Site serveur
Leclientestactif
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 16
Navigateurclient
Serveur WebDémon HTTP
1 demande du formulaire
DD
Affichage duformulaire 3 envoi du formulaire
recherche de la pageHTML/JavaScript surle disque
2
l'utilisateur remplit le formulaire, celui-cipeut être modifié dynamiquement
4
Formulairerempli
correctement
5 envoi des données duformulaire (soumission)
Serveur WebDémon HTTP
ProgrammeCGI
transmission des donnéesau CGI / lancement de sonexécution
6
SGBD
exécution du CGI7
requête à la SGBD8Serveur WebDémon HTTP réponse en HTML du
CGI renvoyée au démonHTTP
9Affichage dela réponse 10 envoi de la page HTML
résultat
Poste client Site serveur
SoumissionInterpréteurJavaScript
saisie valide
saisie invalide
Lesélémentsd'unformulaire§ Troiscatégories
§ input :champsdesaisiedetexteetdiverstypesdeboutonstype="text"- zonedetexte(typepardéfaut)type="password"- zonedetextecachétype="checkbox"- casesàcochertype="radio"- minimum2,unseulsélectionnabletype="submit"- soumissionduformulairetype="reset"- boutonderemiseàzérodeschampstype="button"- boutonassociéàducodeJavaScripttype="hidden"- boutoncachétype="file"- upload d’unfichierverleserveur
§ select :menusdéroulants,listesàascenceurssize="1"- popliste,1seulélémentsélectionnablesize="n",n>1- listeàchoixmultiples
§ textarea :zonedesaisied'untexte"long"
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 17
Labalise<FORM>(1)§ <FORM>…</FORM>débutetfinduformulaire§ Deschampsdetypeinput,selectoutextarea neserontvisiblesques'ilssontàl'intérieurd'unebalise<FORM>
§ AttributsMETHOD,ACTION,NAME,TARGET§ METHOD :valeursGETouPOSTquiindiquentlafaçondontlesdonnéessonttransmisesauscriptCGI
§ ACTION :URLduprogrammeCGIquiseraexécutéquandl'utilisateurcliquesurunboutondesoumission
§ NAME :distinguelesdifférentsformulaires§ TARGET :cibledanslaquellelaréponseduprogrammeCGIseraaffichée
§ Leschampsduformulairesonttransmisvial’URL(méthodeGET)oudanslecontenudelarequêteHTTP(méthodePOST).IlssontaccessiblesenPHPdansletableau$_GETou$_POST.
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 18
Labalise<FORM>(2)§AttributENCTYPE
§ ENCTYPE :spécifiel'encodageutilisépourl'envoidesdonnéesduformulairedanslecasdelaméthodePOST(danscecaslesdonnéessonttransmisesdanslecorpsdelarequête)§ ENCTYPE="application/x-www-form-urlencoded":valeurpardéfaut;url-encodelecontenuduformulairedelamêmefaçonqueparlaméthodeGET
§ ENCTYPE="text/plain":lecontenuduformulaireestenvoyéenformattextelisibleparledestinataire(actionmailto:parexemple)
§ ENCTYPE="multipart/form-data":permetd'expédierunfichierattachédanslecorpsdelarequête(<inputtype="file">)
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 19
Labalise<FORM>(3)§Propriétésdel'objetFORM
§ action :accèsàl'attributACTION<form name="f1"action="/cgi-bin/p1.cgi">…</form><script>document.f1.action="cgi-bin/p2.cgi"</script>§method :accèsàl'attributMETHOD§ target :accèsàl'attributTARGET§ enctype :typed'encodagedesdonnéestransmisesversleserveuraveclaméthodePOST
§ elements :accèsauxobjetsduformulaires§ elements.length - nombred'objetsduformulaire§ elements[n].name - nomduénième+1objet§ elements[n].value- valeurduénième+1objet
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 20
Labalise<FORM>(4)
§Méthodedel'objetFORM:submit()§ déclenchel'envoiduformulairecommesil'utilisateuravaitappuyésurunboutondesoumission
<script>document.f1.submit()</script>
§ EvénementJSassociéàl'objetFORM:onSubmit()§ permetl'exécutiondecodeJavaScriptavantl'envoiduformulaire(vérificationdessaisiesparexemple)
<form name="f1"method="post"action="/cgi-bin/p1.cgi"target="_blank"onSubmit="returnverif_f1(this)">
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 21
<INPUTtype="TEXT">
§ Attributs:NAME,VALUE,SIZE,MAXLENGTH§ SIZE:tailled'affichagedelazone(encaractères)§ MAXLENGTH:taillederemplissagedelazone(encarac.)<INPUTTYPE="text"NAME="email"VALUE="entrezvotreemailici"SIZE="30"MAXLENGTH="50"/>
§ Propriétés§ name,value,defaultValue,type,form (leformulairequicontientl'élémentINPUT)
§Méthodes§ focus(),blur(),select()
§ Evénements§ onBlur,onChange,onFocus,onSelect
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 22
<INPUTtype="PASSWORD">
§ Attributs:NAME,VALUE,SIZE,MAXLENGTH<INPUTtype="PASSWORD"NAME="pass"VALUE="entrezvotrepasswd ici"SIZE="8"/>
§ Propriétés§ name,value,defaultValue,type,form
§Méthodes§ focus(),blur(),select()
§ Pasd'événementassocié
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 23
<INPUTtype="CHECKBOX">
§ Casesàcocherpermettantunchoixmultiple§ Attributs:NAME,VALUE,CHECKED
<INPUTtype="CHECKBOX"NAME="cours"VALUE="1"CHECKED/>HTML<BR/><INPUTtype="CHECKBOX"NAME="cours"VALUE="2"CHECKED/>JS<BR/><INPUTtype="CHECKBOX"NAME="cours"VALUE="3"/>CGI<BR/>
§ Propriétés§ name,value,type,form,checked etdefaultChecked (booléen)
§Méthode§ document.f1.cours[1].click()- coche/décochelacaseJS
§ Evénement§ onClick - quandl'utilisateurcochelacase
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 24
<INPUTtype="RADIO">
§ Choixd'uneetuneseuleoptionparmin§ Attributs:NAME,VALUE,CHECKED
<INPUTtype="RADIO"NAME="cours"VALUE="1"/>HTML<INPUTtype="RADIO"NAME="cours"VALUE="2"CHECKED />JS<INPUTtype="RADIO"NAME="cours"VALUE="3" />CGI
§ Propriétés§ name,value,type,form,checked etdefaultChecked(booléen),index(donnelerangduboutonsélectionné),length
§Méthode§ document.f1.cours[2].click()- sélectionnelacaseCGI
§ Evénement§ onClick - quandl'utilisateurcochelacase
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 25
<INPUTtype="SUBMIT">
§ EnvoidesdonnéesetexécutionduprogrammeCGIspécifiéparl'attributACTIONde<FORM>
§ Attributs:NAME,VALUE<INPUTtype="SUBMIT"NAME="s"VALUE="login" /><INPUTtype="SUBMIT"NAME="s"VALUE="logout" />VALUEpermetdedifférencierletraitementàeffectuerparleCGIs'ilyaplusieursboutonsdesoumission
§ Propriétés§ name,value,type,form
§Méthode§ click()- soumetleformulaire
§ Evénement§ onClick
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 26
<INPUT>et<BUTTON>
§ Ilestpossiblederemplacerlabalise<INPUT>parlabalise<BUTTON>.Celapermetdedistinguerlavaleurtransmiseauserveurdelavaleurquis’affichedanslebouton.
§ Exempled’utilisationdelabalise<BUTTON><BUTTONtype="SUBMIT"NAME="action"VALUE="com1">Commenter!
</BUTTON><BUTTONtype="SUBMIT"NAME="action"VALUE="com2">Commenter!
</BUTTON>Lesdeuxboutonsontunevaleurdifférentemaiss’affichentdemanièreidentiquedanslenavigateur.
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 27
<INPUTtype="RESET">
§ Rechargetousleschampsduformulaireàleurvaleurpardéfaut
§Neprovoquepasl'exécutionduCGI§ Attributs:NAME,VALUE
<INPUTtype="RESET"NAME="raz"VALUE="Effacer" />
§ Propriétés§ name,value,type,form
§Méthode§ click()- réinitialiseleformulaire
§ Evénement§ onClick
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 28
<INPUTtype="BUTTON">
§N'adesensquedansuncontexteJavaScript§ pasdecomportementpréprogrammé§ nepermetpasdecollecterunevaleurdansleCGI
§ Attributs:NAME,VALUE<INPUTtype="BUTTON"NAME="b1"VALUE="Aide"onClick="AideEnLigne()" />
§ Propriétés§ name,value,type,form
§Méthode§ click()- simuleunclickdel'utilisateur
§ Evénement§ onClick
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 29
<INPUTtype="HIDDEN">
§ Permetdetransmettredes"variables"cachéesauprogrammeCGI§ trèsutileparexemplepourtransmettredesvariablesdeformulairesenformulaires
§ invisiblepourl'utilisateur
§ Attributs:NAME,VALUE<INPUTtype="HIDDEN"NAME="h1"VALUE="0" />
§ Propriétés§ name,value,type,form
§ Pasdeméthodeetpasd'événementpuisquel'objetn'estpasvisible
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 30
<INPUTtype="FILE">§ Permetdetransmettreunfichierdelamachinelocaleversleserveurweb(upload)
§ Attributs:NAME,VALUE<INPUTtype="FILE"NAME="fichier"VALUE="Parcourir"/>
§ Pourtransmettreunfichier,dans<FORM>,ilfaut:<FORMmethod="POST"action="page.php"enctype="multipart/form-data">
§ Pourlimiterlatailledufichiertransmis:<INPUTtype="hidden"name="MAX_FILE_SIZE"value="1048576"/>§ Amettreavant<INPUTtype="FILE">§ Latailleestenoctets:1048576=1Mo
§ LesfichierssonttransmisauserveurdanslecontenudelarequêteHTTP(méthodePOST).IlssontaccessiblesenPHPdansletableau$_FILES.Ilssontstockésdansundossiertemporairesurleserveur.PHPfournitdesfonctionspourmanipulerlesfichiers.
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 31
<SELECT>et<OPTION>(1)
§ Attributsde<SELECT>:NAME,SIZE,MULTIPLE§ SIZE:tailledelascrolled-list (pop-list si1)§ MULTIPLE:autoriselasélectionmultiplesiSIZE>1
§ Attributsde<OPTION>:VALUE,SELECTED<SELECTNAME="pop"><OPTIONVALUE="v1">1<OPTIONVALUE="v2"SELECTED>2<OPTIONVALUE="v3">3
</SELECT><SELECTNAME="mul"SIZE="3"MULTIPLE><OPTIONVALUE="v1">1<OPTIONVALUE="v2"SELECTED>2<OPTIONVALUE="v3"SELECTED>3<OPTIONVALUE="v4">4
</SELECT>OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 32
<SELECT>et<OPTION>(2)
§ Propriétésd'unobjet<SELECT>§ name,type(select/select-one/select-multiple),form,length,§ selectedIndex :rangdel'optionsélectionnée;danslecasd'unelistemultiple,rangdelapremièreoptionsélectionnée
§Méthodesd'unobjet<SELECT>:focus(),blur()§ Evénementsliésàunobjet<SELECT>:onFocus,onBlur,onChange
§ Propriétésrelativesauxoptions§ defaultSelected,selected,text,valuedocument.f1.mul.options[2].text contient3document.f1.mul[2].text =4;§ onpeutdynamiquementmodifier,ajouter,supprimerdesitemsdelaliste
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 33
<SELECT>et<OPTION>(3)
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 34
<!-- ex_popup.html --><HTML><HEAD><SCRIPT>function ChLang(f){if(f.langue.selectedIndex ==0){f.choix.options[0].text="Rouge";f.choix.options[1].text="Vert";f.choix.options[2].text="Bleu";}else {f.choix.options[0].text="Red";f.choix.options[1].text="Green";f.choix.options[2].text="Blue";}}</SCRIPT></HEAD><BODY>
<FORMname="f1"METHOD="POST"ACTION="/cgi-bin/p1.cgi"><SELECTNAME="langue"onChange="ChLang(this.form)"><OPTIONVALUE="F">Français<OPTIONVALUE="E">English</SELECT><SELECTNAME="choix"><OPTIONVALUE="R">Rouge<OPTIONVALUE="V">Vert<OPTIONVALUE="B">Bleu</SELECT></FORM></BODY></HTML>
<SELECT>et<OPTION>(4)
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 35
<!-- ex_scrollist.html--><HTML><HEAD><SCRIPT>functionto2(f){r1=f.l1.selectedIndex;if(r1<0)return;opt=newOption();opt.text=f.l1.options[r1].text;opt.value=f.l1.options[r1].value;f.l1.options[r1]=null;r2=f.l2.length;f.l2.options[r2]=opt;}functionto1(f){…}</SCRIPT></HEAD><BODY>
<FORMname="f1"METHOD="POST"ACTION="/cgi-bin/p1.cgi"><SELECTNAME="l1"SIZE="5"><OPTIONVALUE="1">Français<OPTIONVALUE="2">Anglais<OPTIONVALUE="3">Italien<OPTIONVALUE="4">Espagnol<OPTIONVALUE="5">Allemand</SELECT><INPUTtype="BUTTON"VALUE=">>"
onClick="to2(this.form)"><INPUTtype="BUTTON"VALUE="<<"
onClick="to1(this.form)"><SELECTNAME="l2"SIZE="5"></SELECT></FORM></BODY></HTML>
<TEXTAREA>
§ Zonedesaisiedetextelibre§ Attributs:NAME,ROWS,COLS
<TEXTAREANAME="t1"ROWS="3"COLS="40">Entrezvosremarquesici</TEXTAREA>
§ Propriétés§ name,value,defaultValue,type,form,cols,rows
§Méthodes§ focus(),blur(),select()
§ Evénements§ onBlur,onChange,onFocus,onSelect
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 36
ProgrammationcôtéserveurenPHP
Qu’est-cequePHP?Interactionsentreleclientetleserveur
Fonctionnementdel’interpréteurUnpremierexemple
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 37
Qu'est-cequePHP?
§ "PHPis aserver-side,HTML-embedded,cross-platformscripting language"§ Langageinterprétéetindépendantdelaplate-formed'exécution,§ quis'exécutesurleserveur,§ dontlesinstructionssontintégréesaucodesourced'unepageHTML.
§Unfichier.php peutcontenirducodeHTMLetducodePHP§ LeserveurlitlesinstructionsPHPintégréesàlapageHTML,interprètecesinstructionsetlesremplaceparlerésultatdeleurexécution(pagesdynamiques)§ Leclientn'apasaccèsaucodesourcecarilestinterprétéavantenvoi
§ Leclientnereçoitquelerésultatdel'exécutionOlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 38
Interactionsentreleclientetleserveur
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 39
Navigateurclient Serveur Web
Démon HTTP
1 Requête HTTPdemandant index.php
DD
4 Réponse HTTP
recherche de index.phpsur le disque2
SGBD
Poste client Site serveur
InterpréteurPHP
requêtes SQL éventuelles
interprétation descommandes PHP3
code HTML/JavaScript
Affichage dela page
Fonctionnementdel'interpréteurPHP
§UnblocPHPestungroupedelignesencadrépardeuxbalises<?php ?>§ Toutelignesituéeàl'extérieurdecesbalisesn'estpasinterprétée:elleestrecopiéeàl'identiquepourêtrerenvoyéeauclient
§ Toutelignesituéeàl'intérieurdecesbalisesestinterprétéeparleserveurcommeuneinstructionPHP
§OnpeutmélangerlescommentairesduC,C++etshell !<?php /*commentairetypeC*///commentairetypeC++#commentairetypeshell?>
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 40
Unpremierexemple
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 41
<!-- 1.php--><HTML><HEAD>
<TITLE>PremierexemplePHP</TITLE></HEAD><BODY><H2>Voicilesinformationsquejeconnaisàvotresujet</H2><?php/*$HTTP_USER_AGENTseraremplacéeparsavaleuravantl'envoidelaréponseauclient*/echo $_SERVER['HTTP_USER_AGENT'];?></BODY></HTML>
LesbasesdulangagePHP
LesTypesdedonnéesetvariables,lesopérateursLeschaînesdecaractères
LestableauxInstructionsconditionnellesetbouclesFonctions,variablesglobales/locales
TéléchargementdefichiersOlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 42
Typesdedonnéesetvariables
§ Lesnomsdevariablessontprécédésd'un$$i=5;echo "$i";
§ Pasdedéclaration,l'affectationdétermineletypedelavariable
§ PHPsupportelestypesdedonnéessuivants§ Booléens:true oufalse§ Nombresentiers:$i=(int)(7/3)#$ivaut2§ Nombresàvirguleflottante:$i=7/3#$ivaut2.33333333…§ Chaînesdecaractères§ Tableaux§ Objets(programmationorientéeobjet)
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 43
Lesopérateurs(1)
§Opérateursarithmétiques§ addition:$a+$b§ soustraction:$a- $b§ multiplication:$a*$b§ division:$a/$b§ modulo(restedeladivisionentière):$a%$b$i=7/3;echo "<br />$i";#affiche2.3333333333333$j=7%3;echo "<br />$j";#affiche1
§ Concaténationdechaînedecaractère(.)$ch1="Bonjour";$ch2="Monsieur";$ch =$ch1.$ch2echo $ch ."Durand".'!';#affiche"BonjourMonsieurDurand!"
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 44
Lesopérateurs(2)
§Opérateurslogiques§ ETlogique:and,&& (lesdeuxsontpossibles)§ OUlogique:or,||§ XORlogique:xor§ NONlogique:!
§Opérateursd'affectation§ affectationaveclesigne=$a=($b=4)+1;#$bvaut4et$avaut5§ lesopérateurscombinés:+=,-=,*=,/=,.=,&=,|=$a+=1;#équivalentà$a=$a+1;$ch .="!";#équivalentà$ch =$ch ."! »;
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 45
Lesopérateurs(3)
§Opérateursdecomparaison§ égalà:$a==$b§ différentde:$a!=$b§ inférieurà:$a<$b§ supérieurà:$a>$b§ inférieurouégalà:$a<=$b§ supérieurouégalà:$a>=$b
§Opérateurternaire§ (condition)?(expr1):(expr2);§ renvoieexpr1siconditionestvraiesinonrenvoieexpr2$max=($a>=$b)?$a:$b;#$max<- max($a,$b)
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 46
Chaînesdecaractères(1)
§ Chaînesdecaractères$ch1='Bonjour';$ch2="$ch1Monsieur!\n";§ entreguillemetssimples,rienn'estinterprétésauf\'et\\ quiéchappentlecaractère'etlecaractère\
§ entreguillemetsdoubles,sontinterprétéslesvariables,lescaractèresspéciaux\n\r\t \$\"\\
§ echo "\n"; provoqueunsautdelignedanslecodeHTMLgénérémaisneprovoquedesautdeligneHTML(ilfaututiliser<br />)!
§ Accèsauxcaractèresd'unechaîneetconcaténation$ch ='Ce'. 'ciestunechaîne.';echo $ch{2};#affiche"c"
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 47
Chaînesdecaractères(2)
§ Substitutionsdechaînes§ str_replace(search,replace,str)retourneunechaînequicontientlachaînestr danslaquelletouteslesoccurrencesdesearch sontremplacéesparreplace
#lacommandesuivanteaffiche"Bonjourtiti"echo str_replace("toto","titi","Bonjourtoto");
§ Découpagedechaînes§ explode(sep,str)retourneuntableaudechaînesenscindantstr àl'aideduséparateursep
§ implode(sep,tab)retourneunechaînefabriquéeparlaconcaténationdesélémentsdutableauetduséparateursepentrechaqueélément
§ parse_str(str) analyseunechaînetypeQUERY_STRINGetfabriquelescouples$nom=valeurassociés
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 48
Chaînesdecaractères(3)§ Comparaisonetlongueur
§ strcmp(str1,str2) comparaisonbinaire(commeenC)§ strlen(str)retournelalongueurdestr
§Web§ rawurlencode(str)/rawurldecode(str)encode/décodelachaînestr selonlaRFC1738(%xy <->caractère)
§ urlencode(str)/urldecode(str)idemmaisadaptéauformulaire(remplaceégalementle+enespace…)
§ parse_url(str)retournedansuntableaulescomposantsd'uneURL(scheme,host,port,user,pass,path,query,fragment)http://username:password@hostname/path?arg=value#anchor
§ Afficherladateetl'heureactuelleecho "Noussommesle".date("jmY")."etilest".date("H\hi")."mn";
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 49
Tableaux(1)§ LestableauxdePHPsontassociatifs
§ l'indexdansletableauestappeléclé§ lavaleurassociéeàunecléestappeléevaleur§ untableauestunensembled'associationsclé/valeur§ laclépeutêtreunentierouunechaînedecaractères
§ Créationd'untableau§ soitdirectementenaffectantdesvaleursautableau$tab[0]=1;#cléentière,valeurentière$tab[1]="toto";#cléentière,valeurdetypechaîne$tab["toto"]="titi";#cléetvaleurdetypechaîne$tab["toto"][0]=1;#tableauà2dimensions§ soitenutilisantlafonctionarray()$tab1=array(1,"toto");#0=>1et1=>"toto"$tab2=array("toto"=>1,"titi"=>"toto");#lacléestdonnée
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 50
Tableaux(2)§Nombred'élémentsd'untableau
sizeof($tab);count($tab);#retournelenombred'élémentsdutableau$tabs'ilexiste,1si$tabn'estpasuntableau,0si$tabn'existepas
§ Suppressiond'unélémentunset($tab["toto"]);#fonctionneaussipourunevariable
§ Trisdetableaux§ letripeutsefairesurlescléset/oulesvaleurs;l'associationclé/valeurpeutêtrecassée
§ asort()/arsort():trieletableauparordrecroissant/décroissantdevaleurs
§ ksort()/krsort():trieletableauparordrecroissant/décroissantdeclés
§ sort() :trieletableauparordrecroissantdevaleursetréassignedesclés(0,1,…);onperdl'associationclé/valeur
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 51
Tableaux(3)
§ Lepointeurdetableau§ àchaquetableaucorrespondunpointeurinternequiestuneréférencesurl'élémentcourant
§ current($tab)désignel'élémentcourant§ next($tab)déplacelepointeurversl'élémentsuivant§ prev($tab)déplacelepointeurversl'élémentprécédent§ end($tab)déplacelepointeursurledernierélément§ reset($tab)déplacelepointeursurlepremierélément$tab=array("a"=>1,"d"=>5,"b"=>8,"c"=>4);$val=current($tab);echo "$val<br />";#affiche"1<br />"$val=next($tab);echo "$val<br />";#affiche"5<br />"asort($tab);end($tab);prev($tab);$val=prev($tab);echo "$val<br />";#affiche"4<br />"
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 52
Tableaux(4)
§ Extractiond'élémentsd'untableau§ list() permetd'extrairedesvaleursd'untableau$tab=array(1,8,5);sort($tab);list($v1,$v2)=$tab;echo "$v1$v2"; #affiche"15"§ key($tab)permetd'extrairelaclédel'élémentpointéparlepointeurinternedutableau
$tab=array("a"=>1,"b"=>8);next($tab);$clé=key($tab);$val=$tab[$clé];echo "$clé:$val"; #affiche"b:8"§ extract($tab)permetd'extraired'untableautouteslesvaleurs,chaquevaleurestrecopiéedansunevariableayantpournomlavaleurdelaclé
$tab=array("a"=>1,"b"=>8);extract($tab);echo "$b$a"; #affiche"81"
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 53
Tableaux(5)
§ Extractiond'élémentsd'untableau§ each($tab)retournelapaireclé/valeurcourantedutableauetavancelepointeurdetableau;cettepaireestretournéedansuntableaude4éléments:0=>clé,1=>valeur,key=>cléetvalue=>valeur
§ Parcoursdel'ensembledutableau§ aveclist() eteach()$tab=array("a"=>1,"d"=>5,"b"=>8,"c"=>4);reset($tab);while (list ($k,$v)=each ($tab)){echo "$k=>$v<br />\n";}#quandlepointeurdépasselafinde$tab,each retournefalse
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 54
Tableaux(6)
§ Parcoursdel'ensembledutableau§ foreach() placelepointeurentêtedutableauetparcourtl'ensembledeséléments;foreach()travaillesurunecopie dutableauoriginal
$tab=array("a"=>1,"d"=>5,"b"=>8,"c"=>4);#parcoursdesvaleursuniquement:$v=1,5,8,4foreach ($tabas$v){echo "valeur:$v<br />\n";}#parcoursdescouplesclé/valeurforeach ($tabas$k=>$v){echo "$k:$v<br />\n";}#tableauxmultidimensionnels$tab2[0][0]="a";$tab2[0][1]="b";$tab2[1][0]="y";$tab2[1][1]="z";foreach($tab2as$t){foreach ($t as$v){echo "$v\n";}}
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 55
Instructionsconditionnelles(1)
§ if/then/else commeenCif(condition1){#sicondition1estvraie}elseif (condition2){#sicondition2estvraie(etpascondition1)}elseif (condition3){#sicondition3estvraie(etnicondition1,nicondition2)}else {#sinicondition1,nicondition2,nicondition3nesontvraies}
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 56
Instructionsconditionnelles(2)
§ Leswitch commeenCswitch(expr){case(val1):#àexécutersiexpr vautval1break;case(val2):#àexécutersiexpr vautval2break;default:#àexécuterdanstouslesautrescas}
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 57
Lesboucles
§ Boucle"tantque"commeenCwhile (condition){#exécutétantquelaconditionestvraie}
§ Boucle"Faire…tantque"commeenCdo{/*…*/}while (condition);
§ Boucle"for"commeenCfor($i=1;$i<=10;$i++){#exécutétantque($i<=10)estvraie}
§ L'instructionbreakpermetdesortird'uneboucle§ L'instructioncontinuepermetdepasserdirectementàl'itérationsuivantedelaboucle
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 58
Lesfonctions(1)§ Premierexemple
functionmax($a,$b){#corpsdemax()if($a>$b){return $a;}else {return $b;}}#appeldelafonctionmax()$m=max(5,8);#$mvaut8
§ Ilestpossiblederetournern'importequeltypedevariable(tableau,objet,…)
§Unefonctionpeutnerienretourner§ PHPpermetlepassaged’argumentsparvaleuretparréférence
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 59
Lesfonctions(2)§ Deuxtypesdepassageparréférence
§ defaçonpermanenteenajoutantun& devantlenomdelavariabledansladéfinitiondelafonction
§ defaçonponctuelleenajoutantun& devantlenomdelavariablelorsdel'appeldelafonction
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 60
function plus3($a){$a+=3;}function plus5(&$a){$a+=5;}
#passageparvaleur$x=1;plus3($x);echo $x;#affiche"1"#passageparréférenceponctuel$y=1;plus3(&$y);echo $y;#affiche"4"#passageparréférence"forcé"$z=1;plus5($z);echo $z;#affiche"6"
Lesvariablesglobales/locales(1)
§ Variablesglobales<?php $a=1;include "fonctions.php";?>#$aestglobale;elleestaccessibledansfonctions.php
§ Variableslocalesàunefonction<?php$a=1;#portéeglobalefunction affiche(){echo $a; #$aestlocaleàlafonction
}affiche(); #n'afficherien!?>
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 61
Lesvariablesglobales/locales(2)
§ Accèsàunevariableglobaledansunbloc§ Déclarerlavariablecommeglobal danslebloc(créeuneréférencelocalesurlavariableglobale)
§ Ouutiliserletableauassociatif$GLOBALS<?php $a1=1;$a2=2;#portéeglobalefunction affiche(){global$a1;#$a1estlavariableglobaleecho $a1."et".$GLOBALS['a2'];$a1++;
}affiche(); #affiche"1et2"echo $a1;#affiche"2"($a1aétémodifiée)?>
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 62
Lesvariablesglobales/locales(3)
§ Variablesstatiquesdansunbloc§ Unevariablestatiqueauneportéelocaleàunblocmaisconservesavaleurentredeuxexécutionsdubloc
§ Ellessontutilespourlesfonctionsrécursivesfunction up_to_10(){static $cpt=0;$cpt++;echo "$cpt";if($cpt<10)up_to_10();}up_to_10();#affiche12345678910
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 63
Lesvariablesprédéfinies§ DepuisPHP4.1.0,destableaux"super-globaux"sontprédéfinis
§ accessiblesdansn'importequelcontexted'exécution§ infossurlesvariablesduserveur,lesvariablesd'environnement,lesvariablesdePHP,...
§ LecontenudecestableauxdépenddelaversionetdelaconfigurationduserveuretdePHP$GLOBALS:variablesglobalesdel'exécutionencours$_SERVER:variablesfourniesparleserveurWEB
'PHP_SELF'(cheminduscriptsurleserveur),'argc','argv'(exécutionenlignedecommandeouGET),lesvariablesd'environnementCGI,parexemple$_SERVER['QUERY_STRING’]
$_GET:variablesfourniesparHTTP/méthodeGET$_POST:variablesfourniesparHTTP/méthodePOST$_FILES:variablesfourniesparHTTPsuiteàuntéléchargementdefichier(s)parlaméthodePOST
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 64
Téléchargementdefichiers(1)§ PHPoffrelapossibilitéderecevoirdesfichierstexteoubinaireenprovenanceduclientetd'yassocieruntraitement§ RéceptionparlaméthodePOST:uneboitededialoguepermetàl'utilisateurdesélectionnerunfichierlocal
<FORMENCTYPE="multipart/form-data"ACTION="..."METHOD="POST"><INPUTTYPE="hidden"NAME="MAX_FILE_SIZE"VALUE="1000"/>Envoyezcefichier:<INPUTNAME="userfile"TYPE="file">
<INPUTTYPE="submit"VALUE="Envoyerlefichier"></FORM>
§ Lefichiertéléchargéserastockétemporairementdansunrépertoire$TMPDIRsurleserveur
§ move_uploaded_file() permetdedéplacerunfichiertéléchargéparPHP
§ is_uploaded_file()permetdevérifierqu'unfichierabienététéléchargéparlaméthodePOST
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 65
Téléchargementdefichiers(2)
§ InformationsreçuesparPHPdans$_FILES§ lechampcaché MAX_FILE_SIZEpermetàPHPdefairedesvérificationssurlatailledufichiertéléchargé
§ $_FILES['userfile']['name'] :nomoriginaldufichiersurlamachineduclientweb
§ $_FILES['userfile']['type']:typeMIMEdufichier,silenavigateurafournicetteinformation
§ $_FILES['userfile']['size']:taille,enoctets,dufichier§ $_FILES['userfile']['tmp_name']:nomtemporairedufichierquiserachargésurlamachineserveur
§ $_FILES['userfile']['error']:0encasderéussitedutéléchargementsinoncoded'erreur(tailletropgrande…)
OlivierGlück L1Math-infoUCBL- LIFASR2:Introductionauxréseauxetauweb 66