Vous êtes sur la page 1sur 42

31/03/2014

1
Prpar par : Pr . Jai-Andaloussi Said
1
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
Javascript
XML / DTD
Ajax
PHP
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
2
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
XML / DTD
Javascript
Ajax
PHP
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
3
Introduction
Historique : Projet Arpanet
1959-68 : Le programme Arpa nat pendant la guerre froide
La peur dune guerre nuclaire
Faiblesse du systme centralis distribu
Proposition dun maillage dordinateurs (1964, P. Baran)
1
ere
communication tlphonique entre 2 machines en 1965
1969 : Arpanet (Advanced Research Projects Agency Network )
1969 : 4 noeuds, 1971 : 15 noeuds, 1972 : 37 noeuds
1970-82 : Ouverture sur le monde
Apparition du courrier lectronique
Communications internationales (Angleterre, Norvge)
Apparition deTCP/IP (1974) plus puissant que NCP
1983 : TCP/IP adopt comme standardArpanet => Internet
4
31/03/2014
2
Introduction
Historique : Internet World Wide Web
1983-89 : Expansion du rseau : autoroutes de linformation
La NSF (National Science Foundation) effectue des progrs importants (rseau
NFSNET)
Utilisation importante par les scientifiques
Rseaux htrognes (NCP et TCP/IP)
Fin officielle de Arpanet en 1989 (TCP/IP)
1990-97 : Lexplosion dinternet
1990, le physicien Tim Berners Lee (CERN) tend le concept de lien hypertexte
Internet
HyperText Markup Language et HyperText Transfer Protocol
1
er
navigateur : NCSA Mosaic
1995 ouverture au grand public (Netscape et Internet Explorer)
1997 des dizaines de milliers de noeuds dans plus de 42 pays
5
Plan de la formation
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
XML / DTD
Javascript
Ajax
PHP
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
6
Serveur Web et protocole HTTP
Principes de fonctionnement : la base du web
Architecture Client/Serveur
Ncessit dun protocole de communication : Http
7
Serveur Web et protocole HTTP
Principes de fonctionnement : Diffrents types de ressources
8
Ressources statiques : HTML, images, son, vidos
Ressources dynamiques
Ct client : applet (Java), Javascript, Plugin, ActiveX
Ct serveur : CGI, SSI, servlets/JSP, scripts serveur (php)
31/03/2014
3
Serveur Web et protocole HTTP
Principes de fonctionnement : URL, URN et URI
9
URL : Uniform Ressource Locator
Spcification de la localisation dune ressource de manire unique
URN : Uniform Ressource Name
Mcanisme de nommage des ressources
urn:<Namespace>:<SpecificString>
Namespace : identificateur de nommage (ex : isbn (International Standard Book
Number))
SpecificString : chane de caractres spcifique dsignant la ressource de manire
unique
URI : Uniform Resource Identifier
URI = URL + URN
En pratique, la forme dURI la plus utilise est lURL
Serveur Web et protocole HTTP
Principes de fonctionnement : URL (Uniform Ressource Locator)
10
Format
<protocole>://<serveur>:<port>/<chemin>/<ressource>
Exemples :
http://www.linux-mandrake.com:80/fr/index.html
http://perso.telecom-bretagne.eu/saidandaloussi
ftp://ftp.debian.fr.org/
file://home/cours/
mailto:said.andaloussi@fsac.ac.ma
telnet://user:password@host:port
Serveur Web et protocole HTTP
Le protocole HTTP : Prsentation de HTTP
11
Le protocole HTTP (Hypertext Transfer Protocol) est un protocole de
communication qui a t dvelopp pour le web
http://www.w3c.org/
Non scuris (par opposition HTTPS)
Dirents logiciels utilisent HTTP :
dirents logiciels clients comme les navigateurs web, les robots dindexation, les
aspirateurs de site. . .
les logiciels serveurs peuvent tre Apache, IIS. . .
La liaison entre le client et le serveur peut tre direct ou via un serveur mandataire
(proxy), .. .
Serveur Web et protocole HTTP
Le protocole HTTP : Prsentation de HTTP
12
La premire version du protocole tait trs simple : le client se connecte et
demande une ressource (GET), le serveur lui rpond, la connexion est ferme.
Aucune autre donne nest envoye ou reue.
HTTP 1.0 (puis HTTP 1.1) on t cres pour enrichir les possibilits de ce
protocole.
Plusieurs requtes sont possibles, des donnes complmentaires peuvent tre
envoyes par le client ou par le serveur.
31/03/2014
4
Serveur Web et protocole HTTP
Le protocole HTTP : Prsentation de HTTP
13
Les mthodes
OPTIONS : demande les mthodes utilisables sur lURI
GET : demande les informations et les donnes de lURI
HEAD : demande uniquement les informations sur lURI
POST : envoie de donnes (ex : formulaire) traites par lURI
PUT : enregistre le corps de la requte lURI
DELETE : supprime les donnes pointes par lURI
TRACE : retourne ce qui a t envoy par le client (echo)
Serveur Web et protocole HTTP
Le protocole HTTP : Prsentation de HTTP
14
Les deux versions sont trs proches dans la syntaxe.
CommandeURL version (HTTP /1.0 ou HTTP /1.1)
En -tte de requte
Corps de requte
Les commandes les plus utilises sont : GET et POST.
Lentte de requte contient des informations sous la forme Nom: valeur.
HTTP 1.1 ajoute le maintient de la connexion entre les requtes (permet
denvoyer plusieurs requtes sans attendre la rponse, diminution de la charge
du rseau,. . . ).
Serveur Web et protocole HTTP
Le protocole HTTP : Limites
15
Le protocole Http 1.1 ne gre pas les sessions
=>
Alternative utilise par les navigateurs : cookies
Fichiers textes stocks sur le disque dur du client
Dure de vie limite, fixe par le site visit
Problme avec les vieux navigateurs : il est possible pour un serveur de
rcuprer des cookies dun client dont il nest pas lorigine
Serveur Web et protocole HTTP
Le protocole HTTP : Limites
16
Le protocole Http nest pas scuris
=>
Alternative Http : Https
s pour secured
Combinaison de Http avec SSL ouTLS
Vrification de lidentit dun site par un certificat dauthentification.
Un certificat lectronique ( aussi appel certificat numrique ou certificat de
cl publique) peut-tre vu comme une carte d'identit numrique. Il est utilis
principalement pour identifier une entit physique. Il est sign par un tiers de
confiance qui atteste du lien entre l'identit physique et l'entit numrique
(Virtuel).
31/03/2014
5
Serveur Web et protocole HTTP
Le protocole HTTP : Limites
17
Le protocole Http nest pas scuris
=>
Alternative Http : Https
s pour secured
Combinaison de Http avec SSL ouTLS
Vrification de lidentit dun site par un certificat dauthentification
Garantie confidentialit et intgrit des donnes envoyes par lutilisateur
(ex : formulaires)
Port par dfaut : 443.
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
XML / DTD
Javascript
Ajax
PHP
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
18
HTML / XHTML / CSS
Introduction : Historique
19
Annes 1990 : HTML est cr par Tim Berner-Lee au Centre Europen de
Recherche Nuclaire (CERN)
1995 : HTML 2.0 normalisation par lIETF (Internet Engineering Task Force)
1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002 : XHTML 2.0 ?
Finalement le 2 juillet 2009 le W3C a officiellement annonc l'abandon du
dveloppement du XHTML 2 afin de se consacrer entirement son nouveau
successeur : le HTML 5 .
HTML / XHTML / CSS
Introduction : Principe de fonctionnement
20
Le navigateur effectue une requte spcifie travers lURL
Le serveur retourne un flot typ de donnes
Le navigateur interprte le flot de donnes et laffiche
31/03/2014
6
HTML / XHTML / CSS
Introduction : Langages balises
21
Un fichier HTML/XHTML est un fichier texte (cf. protocole http) contenant des
balises appelant des commandes, dont laction est limite au texte contenu
entre la balise de dbut et la balise de fin.
Extension HTML : .htmou .html ; XHTML : .xhtml
Balise de dbut : <commande[ attribut1=valeur1[ attribut2=valeur2 ...]]>
Balise de fin : </commande>
Commentaires : <!--Ceci est un commentaire-->
Remarque : retours chariot, succession despaces et/ou de tabulations ne sont
pas pris en compte.
HTML / XHTML / CSS
Introduction : HTML 4 / XHTML 1.0
22
Principales diffrences XHTML 1.0 / HTML 4 :
les noms dlments et dattributs doivent tre en minuscule
les valeurs dattributs sont entre guillemets ou apostrophes
un attribut a toujours une valeur
tout tag ouvert doit tre ferm
tous les lments doivent tre imbriqus correctement : pas de
chevauchement de tags
XHTML 1.0 nest quune reformulation de
HTML 4 en tant quapplication XML 1.0
HTML / XHTML / CSS
Introduction : Squelette dun document HTML/XHTML
23
HTML / XHTML / CSS
Introduction : DTD Disponibles
24
DTD Document Type Declaration contient la liste et la dfinition des
balises utilises dans le document
XHTML 1.0 Strict :
Utiliser lorsque l'on souhaite coder proprement les balises sans effets
de prsentation.
Recommander lorsque l'on emploie des feuilles de style (CSS).
31/03/2014
7
HTML / XHTML / CSS
Elments HTML/XHTML : 3 types dlments
25
Elment de bloc : un lment de bloc est prcd et suivi dun saut de ligne. Il
forme une boite dans lequel est inclu du texte ou dautres lments.
Exemples : les paragraphes, les tableaux, ...
Elment inline : un lment inline sinsre dans le fil du texte et ne peut
contenir que du texte ou dautres lments inlines.
Exemples : les lments typographiques italique, gras, ...
Elment auto-fermant : un lment autofermant est une balise ouvrante et
fermante la fois. Elle na donc pas de contenu. Ce sont soit des balises de type
bloc, soit de type inline.
Syntaxe : <balise/>.
Exemples : saut de ligne, sparation horizontale ...
HTML / XHTML / CSS
Elments HTML/XHTML : Titres (lments de bloc)
26
Il y a 6 niveaux de titre :
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
...
<h6> ... </h6>
HTML / XHTML / CSS
Elments HTML/XHTML : Paragraphes (lments de bloc)
27
llment de bloc <p> ... </p> permet de construire des paragraphes et par un attribut
align spcifie la justification.
llment inline <br/> permet de contrler les sauts de lignes.
HTML / XHTML / CSS
Elments HTML/XHTML : Texte structur (lments inline)
28
code : portion de code informatique
samp : exemple de rsultat issu dun programme
cite : extrait ou rfrence une autre source
dfn : terme encadr a une dfinition
kbd : frappe au clavier devant tre effectue par lutilisateur
var : instance dune variable ou le paramtre dun programme
abbr : forme abrge
acronym: acronyme
31/03/2014
8
HTML / XHTML / CSS
Elments HTML/XHTML : Listes (lments de bloc)
29
Chaque item dune liste est dclar par <li> ... </li>.
Liste simple :
<ul>
<li> item </li>
<li> item </li>
<li> item </li>
</ul>
Liste numrote :
<ol>
<li> item </li>
<li> item </li>
<li> item </li>
</ol>
Il existe aussi des listes de dfinitions (<dl> ... </dl>), les items sont dclars par les
balises <dt> pour le terme et <dd> pour la dfinition associe.
HTML / XHTML / CSS
Elments HTML/XHTML : Crer des titres
30
Le XHTML vous permet donc de crer jusqu 6 niveaux de titres diffrents :
il est rare daller plus loin que la balise <h4> ! Donc avec 6 niveaux de titres diffrents.
Pour bien comprendre comment vous devez organiser vos titres :
HTML / XHTML / CSS
Elments HTML/XHTML : Crer des titres
31
HTML / XHTML / CSS
Elments HTML/XHTML : Mettre en valeur son texte
32
Lorsquune page comprend beaucoup de paragraphes, comme cest souvent le cas, il
peut tre pratique de mettre en valeur certaines parties du texte.
On dispose pour cela de 2 balises de mise en valeur diffrentes :
<em></em> : pour une faible mise en valeur. Le texte sera gnralement mis en
italique.
<strong></strong> : pour une mise en valeur importante. Le texte sera
gnralement mis en gras.
Cest vous de choisir la balise qui convient selon limportance que vous voulez
donner votre texte.
NB : Les balises <strong> et <em> doivent tre utilises lintrieur de paragraphes
<p> comme le montre lexemple suivant :
<p>Attention, ceci est <strong>trs important</strong> !<br />
Ce mot aussi est <em>important</em>, mais un peu moins que le
texte ci-dessus.</p>
31/03/2014
9
HTML / XHTML / CSS
Elments HTML/XHTML : Les exposants et indices
33
Les exposants et indices sont rarement utiliss mais peuvent savrer pratiques si vous
avez lintention dcrire des formules mathmatiques ou des abrviations.
<sup></sup> : mise en exposant (caractres surlevs).
<sub></sub> : mise en indice (caractres abaisss).
On peut utiliser la mise en exposant pour indiquer une date par exemple :
Le rsultat de ce code source apparat ci dessous.
HTML / XHTML / CSS
Elments HTML/XHTML : Les abrviations
34
La balise <abbr> permet de regrouper les acronymes, abrviations et sigles.
Prenons par exemple le terme ADN, contraction de acide dsoxyribonuclique :
Lattribut title sert afficher une infobulle. Si vous survolez ADN avec la souris, une
infobulle apparatra pour vous indiquer la signification du terme :
HTML / XHTML / CSS
Elments HTML/XHTML : liens hypertextes
35
Les liens hypertextes sont linvention gniale qui est la base du Web. Aujourdhui, tout
le monde y est familier : quand on voit que le pointeur de sa souris se transforme en
main, on sait quil sagit dun lien qui va nous amener sur une autre page
Il faut savoir quon a la possibilit de faire deux types de liens :
Un lien vers une autre page : cest le cas le plus courant, que nous verrons en
premier.
Un lien vers un autre endroit sur la mme page : cela permet de se dplacer
rapidement diffrents endroits dune mme page, vitant ainsi votre visiteur
davoir trop utiliser la molette de sa souris ou lascenseur.
HTML / XHTML / CSS
Elments HTML/XHTML : liens hypertextes
36
Pour faire un lien, nous allons utiliser la balise XHTML suivante :
<a></a>. Vous devez mettre lintrieur le texte qui va servir de lien. Par exemple :
<a>Cliquez ici</a> pour aller sur la page 2 !
Toutefois, il manque encore quelque chose pour que notre lien soit correct : il faut
indiquer le nomde la page vers laquelle amne le lien !
Nous allons rajouter un attribut la balise <a> : lattribut href. Cet attribut permet
dindiquer le nomde la page qui sera appele lorsquon cliquera sur ce lien.
<a href="page2.html">Cliquez ici</a> pour aller sur la page 2 !
31/03/2014
10
HTML / XHTML / CSS
Elments HTML/XHTML : liens hypertextes
37
Ajout dune infobulle
Il est possible dajouter une infobulle (ou bulle daide) sur votre lien. Cette bulle est un
petit message qui saffiche lorsque vous pointez avec la souris sur le lien.
<a href="livreor.html" title="Signez mon livre !">Livre d.or</a>
Un lien pour envoyer un e-mail
Ce type de lien se cre exactement de la mme faon quun lien vers une page web,
la diffrence prs que le contenu de lattribut href doit cette fois commencer par le
prfixe mailto: suivi de votre adresse e-mail.
<a href="mailto:moi@vivemoi.com">Envoyez-moi un message !</a>
HTML / XHTML / CSS
Elments HTML/XHTML : liens hypertextes
38
Insrer un lien vers un autre endroit de la page
un lien en haut de la page qui indiquera au navigateur : Si le visiteur clique sur ce lien,
alors amne-le lendroit de la page o se trouve la partie dsire .
Pour crer ce lien, il suffit de rajouter un attribut id nimporte quelle balise. Par
exemple, on peut rajouter une ancre un titre
<h2 id="recettes">la partie dsire</h2>
<a href="#recettes">Aller voir la partie dsire</a>
Pour crer ce lien. Vous devrez utiliser la balise <a> mais vous indiquez lattribut
href="#recettes", cest--dire le nomde lancre prcd dun dise (#).
HTML / XHTML / CSS
Elments HTML/XHTML : liens hypertextes
39
Les liens relatifs et absolus
Les liens relatifs : ils dcrivent la position dun fichier cible par rapport au fichier actuel.
Ces liens sadaptent trs bien aux changements dadresse prcisment car ils ne
contiennent pas ladresse du site. Il est donc conseill dutiliser des liens relatifs lorsque
vous faites des liens internes, cest--dire des liens pointant vers dautres pages de votre
site.
<a href="page.html">Lien vers une page de mon site</a>
Les liens absolus : ils dcrivent la position dun fichier cible de manire absolue. Cela
signifie quon peut faire un lien vers un autre site que le sien. Leur dfaut vient du fait
quil faille connatre ladresse complte du site en question
<a
href="http://www.autresite.com/page.html">Lien
vers une page dun autre site</a>
HTML / XHTML / CSS
Elments HTML/XHTML : Insrer une image dans une page
40
La balise dimage
Comment insrer une image dans une page web ?
Grce la balise <img />, qui est auto-fermante comme vous pouvez le voir. Cette balise
doit tre insre dans un paragraphe (<p></p>), elle ne peut pas tre place lextrieur.
Les attributs suivants sont obligatoires :
src : lURI o se situe limage
alt : courte description de limage
<img src="moraira.jpg" alt="Photo de vacances" />
cette balise doit tre place lintrieur dun paragraphe. Voici un code plus complet
respectant cette rgle.
<p>Voici une photo de mes dernires vacances en Espagne Moraira :</p>
<p><img src="moraira.jpg" alt="Photo de vacances" /></p>
31/03/2014
11
HTML / XHTML / CSS
41
Ajouter une infobulle
Elments HTML/XHTML : Insrer une image dans une page
Lattribut utiliser est en fait le mme (et il fonctionne dailleurs sur un grand nombre de
balises) : il sagit de title. Voici un exemple dutilisation :
<p><img src="moraira.jpg" alt="Photo de vacances" title="Le cadre est
sympathique, hein ?" /></p>
HTML / XHTML / CSS
42
Crer une image cliquable
Elments HTML/XHTML : Insrer une image dans une page
Cest extrmement simple, il suffit de combiner les balises <a> et <img /> !
Comment faire ?
<p>
<a href="http://www.m.org">
<img src="moraira.jpg
alt="Photo devacances" />
</a></p>
HTML / XHTML / CSS
Elments HTML/XHTML : Les tableaux
43
Les balises dun tableau doivent tre imbriques dans le bon ordre. Si vous faites une
erreur, il est probable que votre tableau napparaisse pas du tout comme vous laviez
imagin !
Tout dabord, il faut savoir quun tableau se place lintrieur des balises
<table></table>.
les tableaux doivent tre lextrieur des balises de paragraphe <p></p> et non
lintrieur, car un tableau nest pas un paragraphe :
Un tableau se cre ligne par ligne. Chaque ligne
est reprsente par une paire de balises
<tr></tr>. Si on veut crer un tableau de 3
lignes, on doit donc crire :
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
HTML / XHTML / CSS
Elments HTML/XHTML :
44
Elments HTML/XHTML : Les tableaux
Maintenant, il faut dcouper chaque ligne en plusieurs cellules. On cre une cellule laide
de la balise <td></td>.
31/03/2014
12
HTML / XHTML / CSS
Elments HTML/XHTML :
45
Elments HTML/XHTML : Les tableaux
Testons dans le navigateur pour voir le rsultat.
En effet, le tableau na aucune bordure par dfaut. Il va falloir utiliser le CSS pour en
dessiner une.
HTML / XHTML / CSS
Elments HTML/XHTML :
46
Elments HTML/XHTML : Les en-ttes de tableaux
En plus de la balise <td>, il existe une balise <th> qui permet de crer des cellules servant
den-tte au tableau. En gnral, on place ces balises sur la premire ligne.
HTML / XHTML / CSS
Elments HTML/XHTML :
47
Elments HTML/XHTML : Fusionner des cellules
Pour quune cellule fusionne avec dautres colonnes, on utilise lattribut colspan de la
balise <td>.
HTML / XHTML / CSS
Elments HTML/XHTML :
48
Elments HTML/XHTML : Fusion de lignes
La fusion de lignes fonctionne exactement de la mme manire que la fusion de colonnes.
On utilise cette fois lattribut rowspan (rowsignifiant ligne en anglais).
31/03/2014
13
HTML / XHTML / CSS
Elments HTML/XHTML :
49
Elments HTML/XHTML : Formulaire
La balise de formulaire
Un formulaire se place lintrieur des balises <form></form>. Ces balises doivent tre
situes lextrieur des paragraphes, comme ceci :
Lenvoi des donnes
Une fois quun visiteur aura rempli le formulaire, il cliquera sur le bouton Envoyer. Mais
o ces informations vont-elles tre envoyes et par quel moyen ?
method : cet attribut permet dindiquer la mthode denvoi des donnes, voici les deux
mthodes possibles : Post & Get
HTML / XHTML / CSS
Elments HTML/XHTML :
50
Elments HTML/XHTML : Formulaire
action : indique ladresse de la page vers laquelle doit tre redirig le visiteur une fois
quil a cliqu sur le bouton Envoyer. Cette page doit tre une page de script et donc
comporter par exemple lextension .php .asp etc
HTML / XHTML / CSS
Elments HTML/XHTML :
51
Elments HTML/XHTML : Formulaire
Zone de texte monoligne
La cration dune zone de texte une seule ligne requiert la balise <input /> : cest une
balise auto-fermante
Attributs obligatoires
Type : Une zone de texte monoligne se construit avec lattribut type auquel il faut
donner la valeur text.
name est un attribut particulirement important (et que vous rutiliserez pour tous
les lments du formulaire). Il permet de donner un nom la zone de saisie, ce qui
vous permettra plus tard de lidentifier.
Astuce Masquer les caractres des mots de passe
Pour ce faire, il suffit simplement de donner la valeur password lattribut type,
comme ceci : <input type="password" />
HTML / XHTML / CSS
Elments HTML/XHTML :
52
Elments HTML/XHTML : Formulaire
31/03/2014
14
HTML / XHTML / CSS
Elments HTML/XHTML :
53
Elments HTML/XHTML : Formulaire
Attributs facultatifs
En plus des attributs indispensables que nous venons de voir, il y a quelques autres
attributs qui vous intresseront probablement. Voici les plus utiles dentre eux :
value : indique la valeur par dfaut du champ. La zone de texte sera prremplie avec la
valeur de votre choix. Par exemple : value="Votre pseudonyme".
size : indique la largeur du champ. Par exemple : size="12".
maxlength : indique le nombre maximal de caractres
HTML / XHTML / CSS
Elments HTML/XHTML :
54
Elments HTML/XHTML : Formulaire
HTML / XHTML / CSS
Elments HTML/XHTML :
55
Elments HTML/XHTML : Formulaire
Crer un libell
Un libell est un court texte placer entre des balises <label></label>. Il permet dindiquer
au visiteur ce que doit contenir le champ
lattribut for du <label> doit tre le mme que lid de l<input />.
Lordinateur saura ainsi que le libell correspond au champ de texte
pseudo.
HTML / XHTML / CSS
Elments HTML/XHTML :
56
Elments HTML/XHTML : Formulaire
31/03/2014
15
HTML / XHTML / CSS
Elments HTML/XHTML :
57
Elments HTML/XHTML : Formulaire
Zone de texte multiligne
La cration dune zone de texte multiligne requiert la balise <textarea></textarea>.
HTML / XHTML / CSS
Elments HTML/XHTML :
58
Elments HTML/XHTML : Formulaire
Zone de texte multiligne
on peut ajouter les attributs rows et cols qui indiquent respectivement le nombre de
lignes et le nombre de colonnes dont le champ est constitu.
HTML / XHTML / CSS
Elments HTML/XHTML :
59
Elments HTML/XHTML : Formulaire
Les options
Il existe trois types doptions :
les cases cocher
les zones doptions
les listes droulantes
Les cases cocher
On utilise l encore la balise <input
/>. Mais nous devons changer son
attribut type. Cette fois, on lui
donnera la valeur checkbox.
HTML / XHTML / CSS
Elments HTML/XHTML :
60
Elments HTML/XHTML : Formulaire
31/03/2014
16
HTML / XHTML / CSS
Elments HTML/XHTML :
61
Elments HTML/XHTML : Formulaire
Les zones doptions
Les zones doptions sont un peu plus dlicates grer car elles fonctionnent par groupe. En
effet, contrairement aux cases cocher, on ne peut choisir quune seule valeur par groupe.
Pour crer un bouton doption simple : <input type="radio" />
En effet, les lments dun mme groupe doivent tous avoir le mme nom: lattribut name
doit avoir une valeur identique.
Comment faire alors pour diffrencier les lments ?
cela se fera grce lattribut value.
HTML / XHTML / CSS
Elments HTML/XHTML :
62
Elments HTML/XHTML : Formulaire
<form>
<p>
Etes-vous majeur ou mineur ?<br />
<input type="radio" name="age" value="majeur" id="majeur" />
<label for="majeur">Majeur (18 ans et plus)</label><br />
<input type="radio" name="age" value="mineur" id="mineur" />
<label for="mineur">Mineur (-18 ans)</label>
</p>
</form>
En rsum, le fait de classer les boutons doptions par groupes permet dviter
quils interfrent entre eux.
HTML / XHTML / CSS
Elments HTML/XHTML :
63
Elments HTML/XHTML : Formulaire
Les listes droulantes
Les listes droulantes fonctionnent sur le mme principe que les zones doptions : le visiteur
doit faire un choix (et un seul) parmi une liste de possibilits.
Une liste droulante se dfinit lintrieur dune balise <select></select>.
lintrieur de cette balise, vous devez placer les diffrentes valeurs possibles. Pour
ajouter une valeur possible, utilisez la balise <option> </option>. Vous donnerez un nom
la valeur laide de lattribut value.
HTML / XHTML / CSS
Elments HTML/XHTML :
64
Elments HTML/XHTML : Formulaire
<form method="post" action="traitement.php">
<h1>Agence de voyages Tourisk</h1>
<p>
<label for="destination">O souhaitez-vous partir en vacances cet t ?</label>
<br />
<select name="destination" id="destination">
<option value="papouasie">En Papouasie-Nouvelle-Guine</option>
<option value="fidji">Aux les Fidji</option>
<option value="creuse">Dans la Creuse</option>
</select>
</p>
</form>
31/03/2014
17
HTML / XHTML / CSS
Elments HTML/XHTML :
65
Elments HTML/XHTML : Formulaire
Les listes droulantes sont utiles lorsquil y a beaucoup de valeurs possibles
et que vous ne voulez pas prendre trop de place.
HTML / XHTML / CSS
Elments HTML/XHTML :
66
Elments HTML/XHTML : Formulaire
Une liste droulante avec des groupes
Il est possible de regrouper ces options entre elles
laide de la balise <optgroup></optgroup>. Lattribut
label permet de donner un nom au groupe doptions.
Attention, cette fois, le nomdu groupe sera visible par
le visiteur
HTML / XHTML / CSS
67
CSS : Introduction
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage
informatique qui sert dcrire la prsentation des documents HTML et XML.
La premire question que vous devez vous poser est :
o doit-on placer le code CSS ?
Dans le fichier .html, entre des balises spciales ou dans
un autre fichier ?
La rponse
vous avez le choix ! En effet, il y a 3 faons diffrentes dinsrer du code CSS. Certaines
sont plus ou moins adaptes selon le cas. Nous allons tudier chaque mthode.
HTML / XHTML / CSS
68
CSS : Introduction
La technique la plus courante (et la plus conseille !) consiste crer un fichier spcial
pour placer le code CSS.
On peut appliquer un style toutes les balises, que ce soit des paragraphes <p>, des
titres <h1>, des citations <q>, etc.
Exemple : Les accolades dlimitent le style. Tout le code CSS qui se trouve lintrieur
sera appliqu toutes les balises.
31/03/2014
18
HTML / XHTML / CSS
69
CSS : Introduction
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr" >
<head>
<title>Tests du langageCSS</title>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="style.css" />
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
<h2>Prsentation</h2>
<p> Ceci est le site de Jean Suifiaire, un passionn deVolley Ball. </p>
<p>
Revenez dans quelques jours, il est encore en construction ! Vous saurez bientt tout sur
les rgles du Volley et pourrez suivre au jour le jour les rsultats du championnat du monde !<br />
En attendant, je fais quelques tests avec le langage
CSS...
</p> </body> </html>
HTML / XHTML / CSS
70
CSS : Introduction
HTML / XHTML / CSS
71
CSS : Introduction
En rsum : il faut sparer la proprit de sa valeur par le symbole deux points (:) et
terminer par un point-virgule (;) aprs la valeur.
Schmatiquement, notre code CSS devrait donc toujours ressembler ceci :
HTML / XHTML / CSS
72
CSS : Appliquer un style une balise
Si nous voulons centrer nos titres <h1> uniquement, il nous faudra donc crire :
31/03/2014
19
HTML / XHTML / CSS
73
CSS : Appliquer un style plusieurs balises
Il est aussi possible dappliquer un mme style plusieurs balises la fois. Pour faire
cela, il suffit de sparer les noms des balises par des virgules.
Par exemple, si nous voulons centrer nos titres <h1> et <h2> :
HTML / XHTML / CSS
74
CSS : Appliquer un style des balises imbriques
Cest une balise qui en contient une autre. Petit exemple :
Quest-ce quune balise imbrique ?
Vous pouvez crer une rgle CSS qui ne centrera que les paragraphes situs lintrieur
de balises <blockquote>.
Il suffit dcrire les balises dans cet ordre prcis en les sparant par un espace :
HTML / XHTML / CSS
75
On peut mme faire une triple imbrication si on veut :
CSS : Appliquer un style des balises imbriques
Cette fois, cela signifie Centrer tous les textes importants (strong) situs dans des
paragraphes (p) eux-mmes situs dans des citations longues (blockquote) .
HTML / XHTML / CSS
76
CSS : Appliquer un style certaines balise
id : un identifiant unique
Comment faire pour changer lapparence dun seul paragraphe en
particulier ?
En fait, il sagit didentifier un paragraphe prcis en CSS. Et pour cela, il faut donner un
nom la balise qui nous intresse.
Pour le code CSS :
31/03/2014
20
HTML / XHTML / CSS
77
CSS : Appliquer un style certaines balise
HTML / XHTML / CSS
78
CSS : class ( un identificateur rutilisable )
Le dfaut de lidentificateur id, cest quon ne peut lutiliser quune seule fois. Il donne un
nomunique.
Heureusement, il existe un autre attribut, lui aussi utilisable sur la plupart des balises. Il
sagit de class.
Le code CSS :
HTML / XHTML / CSS
79
CSS : class ( un identificateur rutilisable )
HTML / XHTML / CSS
80
CSS : Les commentaires
Il est possible dinsrer des commentaires en CSS.
31/03/2014
21
HTML / XHTML / CSS
81
CSS : Mise en forme de texte
Lalignement : Aligner tout le texte
la valeur justify permet dobliger le texte prendre la mme
largeur sur chaque ligne. Cet alignement est trs utilis dans
le monde de limprim.
Les alinas
Par exemple, pour un alina de 30 pixels, vous devrez taper le code suivant :
Le LoremIpsumest simplement du faux texte employ dans la compositionet la mise en page avant impression. Le
Lorem Ipsum est le faux texte standard de l'imprimerie depuis les annes 1500, quand un peintre anonyme assembla
ensembledes morceaux de texte pour raliser un livre spcimen de polices de texte.
HTML / XHTML / CSS
82
CSS : Mise en forme de texte
Les polices
Le langage CSS nous permet de changer la police du texte. Pour le moment, cest une police
par dfaut qui est utilise.
La proprit CSS prcisant la police est font-family. Si vous voulez que
vos paragraphes de texte saffichent en Verdana, vous taperez le code
suivant :
Proposer plusieurs polices
En rgle gnrale, on nindique jamais un seul nom de police. On en
propose plusieurs, que lon spare par des virgules :
HTML / XHTML / CSS
83
CSS : Mise en forme de texte
La taille du texte
Par exemple, si vous souhaitez obtenir une taille de 18 pixels, vous crirez :
HTML / XHTML / CSS
84
CSS : Mise en forme de texte
Gras, italique, soulign, etc.
Nous allons voir ici comment raliser les effets suivants :
mise en gras ;
mise en italique ;
mise en majuscules/minuscules ;
soulignement, clignotement...
Mise en gras
Pour mettre en gras du texte grce au CSS, on utilise la proprit fontweight. Celle-ci peut
prendre 2 valeurs :
bold : le texte sera crit en gras.
normal : le texte sera crit normalement (valeur par dfaut).
31/03/2014
22
HTML / XHTML / CSS
85
CSS : Mise en forme de texte
Mise en italique
En CSS, litalique est appliqu par le biais de la proprit font-style. Cette balise peut
prendre 3 valeurs :
italic : le texte sera mis en italique.
oblique : le texte sera pench de manire oblique.
normal : texte normal (valeur par dfaut).
HTML / XHTML / CSS
86
CSS : Mise en forme de texte
Mise en majuscules/minuscules
La proprit text-transform propose plusieurs valeurs intressantes :
uppercase : le texte sera crit en majuscules.
lowercase : le texte sera crit en minucules.
capitalize : la premire lettre de chaque mot sera crite en majuscule (usage anglo-
saxon).
none : le texte ne sera pas modifi (valeur par dfaut).
HTML / XHTML / CSS
87
CSS : Mise en forme de texte
Souligner, barrer, faire clignoter
La proprit text-decoration permet de dcorer son texte de plusieurs faons diffrentes :
underline : soulign ;
line-through : barr ;
overline : ligne au-dessus ;
blink : clignotant. Attention, cette proprit ne fonctionne pas sur
Internet Explorer ;
none : normal (valeur par dfaut).
HTML / XHTML / CSS
88
CSS : Couleur et fond
Le langage CSS vous offre un large choix de couleurs et il ne tient qu vous de les utiliser au
mieux.
la proprit CSS qui permet de changer la couleur du texte est : color.
Indiquer la couleur avec un nom
En effet, seules 16 couleurs possdent un nom. Les noms des couleurs doivent tre crits
en anglais.
31/03/2014
23
HTML / XHTML / CSS
89
CSS : Couleur et fond
Si nous dsirons mettre les textes importants (<strong>) en rouge pour quon ne puisse
pas les manquer, nous pouvons les crire en rouge :
HTML / XHTML / CSS
90
CSS : Mise en forme de texte
Indiquer la couleur en RGB
RGB est labrviation de Red, Green, Blue , soit Rouge, Vert, Bleu en anglais. Cest
une notation pour dsigner les couleurs.
Si on crit :
Cela reprsente une couleur rouge. En effet, il y a 255 (le maximum) de rouge, et 0 pour le
vert et 0 pour le bleu.
HTML / XHTML / CSS
91
CSS : Mise en forme de texte
La couleur de fond de la page
Pour appliquer une couleur de fond la page, il suffit de modifier le style de la balise qui
englobe tout le contenu de la page, cest--dire la balise<body> :
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
Javascript
XML / DTD
Ajax
PHP
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
92
31/03/2014
24
93 94
JAVASCRIPT
95
JavaScript : Introduction
Description :
Cr en 1995 par Netscape et Sun Microsystems
But : interactivit dans les pages HTML/XHTML, traitements simples sur le poste de
travail de lutilisateur
Moyen : introduction de scripts dans les pages HTML/XHTML
Norme : http://www.ecma-international.org/publications/standards/Ecma-262.htm
Programmation locale :
sans javascript : programmation excute sur le serveur
avec javascript : inclusion de programmes dans les pages HTML/XHTML afin de les
excuter sur le poste client
JAVASCRIPT
96
JavaScript : Introduction
Insertion dinstructions de programmation directement dans le code des pages
HTML/XHTML
Excution de code sur le poste client pour
amliorer linteractivit (temps de rponse plus court)
amliorer les dbits des rseaux (viter les envois errons, limiter les requtes)
proposer des pages dynamiques (animation, personnalisation)
Exemples :
test dun formulaire avant envoi
animation type texte dfilant
affichage dynamique
Javascript Java !
31/03/2014
25
JAVASCRIPT
97
JavaScript : Comparaison Javascript/Java
NB : Communication possible entre Java et Javascript grce au plugin LiveConnect
(Netscape) ou aux contrles Active X (Microsoft)
JAVASCRIPT
98
JavaScript : Avantages et inconvnients
Points forts :
langage de programmation structure
enrichit le HTML/XHTML (intgr ) interprt par le client),
Javascript partage les mmes objets DOM (Document Object Model) que ceux
de document HTML/XHTML -> manipulation dynamique possible
gestionnaire dvnements
Limitations :
ce nest pas un langage de programmation part entire, indpendant
cest un langage de script, dpendant de HTML/XHTML
ce nest pas vritablement un langage orient objet (ni hritage, ni
polymorphisme)
Le Document Object Model (ou DOM) est une recommandation du W3C qui dcrit une
interface indpendante de tout langage de programmation et de toute plate-forme,
permettant des programmes informatiques et des scripts d'accder ou de mettre
jour le contenu, la structure ou le style de documents XML.
JAVASCRIPT
99
JavaScript : Domaines dapplication
Javascript permet :
de programmer des actions en fonction dvnements utilisateurs (dplacements
de souris, focus, etc.)
daccder aux lments de la page HTML/XHTML (traitement de formulaire,
modification de la page)
effectuer des calculs sans recours au serveur
Domaines dapplication :
petites applications simples (calculette, conversion, calendrier, etc.)
aspects graphiques de linterface (vnements, fentrage, etc.)
tests de validit sur des interfaces de saisie
JAVASCRIPT
100
JavaScript : code Javascript
Utilisation de la balise <script>...</script> :
dclaration de fonctions dans len-tte HTML/XHTML (entre <head> et </head>)
appel dune fonction ou excution dune commande Javascript dans
<body>...</body>
insertion dun fichier externe (usuellement .js)
Utilisation dans une URL, en prcisant le protocole Ex : <a
href="javascript:instructionJavascript;">Texte</a>
Utilisation des attributs de balise pour la gestion vnementielle : <balise
onEvenement="instructionJavascript">...</balise>
31/03/2014
26
JAVASCRIPT
101
JavaScript : Inclusion dans le code
JAVASCRIPT
102
JavaScript : Syntaxe gnrale
Caractristiques
Description de la syntaxe
Variables faiblement types
Oprateurs et instructions identiques au C/C++/Java
Des mthodes
globales (associes tous les objets)
fonctions dfinies par lutilisateur
Des objets (des prototypes)
prdfinis (String, Date, Math, etc.)
lis lenvironnement
dfinis par lutilisateur
Commentaires : // ou /*...*/
Sparateur dinstruction : ;
JAVASCRIPT
103
Oprateurs identiques ceux du C/C++/Java
oprateurs arithmtiques : + - * / %
in/dcrmentation : var++ var-- ++var var
oprateurs logiques : && || !
comparaisons : == === != !== <= < >= >
concatnation de chane de caractres : +
affectation : = += -= *= ...
Oprateurs
JavaScript : Syntaxe gnrale
JAVASCRIPT
104
Variables
Utilisation de variables
Dclaration : var nom[=valeur];
dclaration optionnelle mais fortement conseille
undefined si aucune valeur linitialisation
aucun type !
Distinction de la localisation des variables (locale ou globale)
Sensible la casse
Typage dynamique ( laffectation) ) transtypage
JavaScript : Syntaxe gnrale
31/03/2014
27
JAVASCRIPT
105
Tests et boucles
JavaScript : Syntaxe gnrale
JAVASCRIPT
106
Fonctions et Procdures
JavaScript : Syntaxe gnrale
Remarques
Arguments et valeur en retour non typs
Nombre darguments non fix par la dclaration
Passage des paramtres par rfrence
JAVASCRIPT
107
Les tableaux
JavaScript : Syntaxe gnrale
Dclaration :
var nom = new Array([dimension]) ;
var nom = new Array(o1, ..., on) ;
Accession avec [] (tableau[i])
les indices varient de 0 N-1
les lments peuvent tre de type diffrent
la taille peut changer dynamiquement
les tableaux plusieurs dimensions sont possibles
Proprits et mthodes : length, reverse(), sort(), toString(), push(element), etc.
JAVASCRIPT
108
Botes de dialogue et fentres
JavaScript : Syntaxe gnrale
Bote de dialogue type pop-up : window.alert("Message afficher");
Bote de saisie simple : reponse = window.prompt("texte","chaine par dfaut");
Ouverture dune fentre fille : fenetre = window.open("page","titre");
Remarque : ces 3 fonctions sont des mthodes de la classe window.
31/03/2014
28
JAVASCRIPT
109
Evnements reconnus par Javascript
JavaScript : Programmation vnementielle
onclick : un clic du bouton gauche de la souris sur une cible
onmouseover : passage du pointeur de la souris sur une cible
onblur : une perte de focus dune cible
onfocus : une activation dune cible
onselect : slection dune cible
onchange : une modification du contenue dune cible
onsubmit : une soumission dun formulaire
onload : un chargement dune page
onunload : la fermeture dune fentre ou le chargement dune page
..
JAVASCRIPT
110
Fonctionnement
JavaScript : Programmation vnementielle
Le navigateur intercepte les vnements (interruptions) et agit en consquence
Action Evnement Capture Action
Actions associes aux cibles par les balises HTML : <balise onEvenement="Action">
JAVASCRIPT
111
vnements lis Window
JavaScript : Programmation vnementielle
Lobjet Window possde plusieurs mthodes spcifiques pour la gestion dun compte
rebours :
setTimeout(instruction, temps) permet de spcifier un compteur de
millisecondes associ une instruction. Aprs lintervalle de temps spcifi, une
interruption est produite et linstruction est value.
setInterval(instruction, temps) permet de spcifier un compteur de millisecondes
associ une instruction. Linstruction est value intervalles rguliers.
clearTimeout() et clearInterval() annulent un compte rebours.
JAVASCRIPT
112
Fonction wait
JavaScript : Programmation vnementielle
La fonction wait nexiste pas par dfaut

Ncessit de la dfinir dans une fonction propre


31/03/2014
29
JAVASCRIPT
113
Lobjet Date
JavaScript : Les objets
Objet Date
Pas de proprit
Liste des mthodes :
JAVASCRIPT
114
Lobjet String
JavaScript : Les objets
Lorsquon dfinit une constante ou une variable chane de caractres, Javascript cre
dune faon transparente une instance String
1 proprit : length
Liste (non exhaustive) des mthodes :
bold () italics () fontcolor () fontsize () small () big () toUpperCase () toLowerCase () sub () sup ()
substring() charAt () indexOf () ...
Objet Math
Proprits : Math.PI et Math.E
Mthodes :
atan () acos () asin () tan () cos () sin () abs () exp ()
max () min () pow() round () sqrt () floor () random () log ()
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
Javascript
XML / DTD
Ajax
PHP
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
115
XML
SGML
Introduction
31/03/2014
30
XML
HTML
Introduction
XML
Entre SGML et HTML : XML
Introduction
XML
Comparaison HTML/XML
Introduction
XML
Objectifs de XML
XML est un standard dvelopp par le W3C qui doit :
tre facilement utilisable sur le WEB
supporter une grande varit d'applications
tre compatible avec SGML
tre facilement traitable par des programme annexes
permettre des documents lisibles et clairs
tre rapide concevoir
dcrire les documents de manire formelle et concise
permettre de crer facilement des documents
Introduction
31/03/2014
31
XML
Avantages et inconvnients de XML
Introduction
XML
Structure, contenu et prsentation
Introduction
XML
Introduction
Exemple : Description d'un document en XML
XML
Document XML
Structure d'un document XML
31/03/2014
32
XML
Dclaration XML
Document XML
La dclaration XML indique :
la conformit du document une version de la norme XML,
le jeu de caractres utilis dans le document,
la prsence ou non de rfrences externes.
Cette dclaration est facultative mais fortement conseille
notamment pour le problme d'encodage des caractres
XML
Dclaration de type
Document XML
La DTD (Document Type Definition) d'un document XML dfinit la grammaire d'un
document XML :
elle facilite l'change de fichiers (fournit une description) ;
elle facilite la validation de document (impose une grammaire) ;
Elle peut tre :
interne/externe : un document ou plusieurs documents
system/public : stocke localement ou publie sur internet
XML
Dclaration XML : Instructions de traitement
Document XML
XML
Dclaration XML : Structure et lments
Document XML
31/03/2014
33
XML
Dclaration XML : Contraintes syntaxiques
Document XML
Dclaration XML : Commentaires, CDATA
Document XML
XML/DTD
Dclaration XML : Bonne formation et validit
Document XML
XML/DTD
Dclaration XML
Document XML
XML/DTD
choisir des noms d'lments qui reprsentent leur rle, ils doivent tre aussi explicites
que possible.
la position d'un lment l'intrieur d'un autre est importante (l'ordre des lments
est prserv)
marquer les constructions morpho-syntaxiques ayant une smantique dans le
document par des balises spcifiques
inclure dans le document des mtadonnes descriptives an de dcrire le document
l'indexation d'un document se fait sur le contenu des lments, pas sur les valeurs des
attributs
31/03/2014
34
Dclaration XML : Conseils pour l'criture de documents XML
Document XML
XML/DTD XML/DTD
Un exemple simple de DTD
Les DTD :
XML/DTD
DTD d'un document
Les DTD :
XML/DTD
Document sans DTD
Les DTD :
31/03/2014
35
XML/DTD
A quoi sert la DTD?
Les DTD :
XML/DTD
Dclaration de DTD
Les DTD :
Remarque : On peut combiner une partie de DTD interne et une partie de DTD externe
(locale ou publique
XML/DTD
Contenu d'une DTD
Les DTD :
Remarque : l'ordre des dclarations n'est pas important
XML/DTD
Dclaration d'un lment
Les DTD :
31/03/2014
36
XML/DTD
Dclaration d'attribut
Les DTD :
XML/DTD
Une alternative au DTD : les schmas XML
Les DTD :
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
Javascript
XML / DTD
PHP
Ajax
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
143
PHP
Description
Introduction
31/03/2014
37
PHP
Premier script PHP
Introduction
PHP
Description
Introduction
PHP
Description
Insertion dune commande PHP :
<?php code PHP ?>
Sparateur dinstructions : le point virgule ;
<?php instruction1; instruction2; ... ?>
Commentaires : syntaxe la C, C++ ou Shell
/* ... */
// ...
# ...
Syntaxe
PHP
Les variables
Le typage des variables est dynamique
Syntaxe : $NomDeVariable[=val];
rgle de nommage : $[a-zA-Z0-9_]
sensibilit la casse
assignation par :
valeur : $var1=$var2;
rfrence : $var1=&$var2;
Porte : locale au bloc {...} o elle est dclare
Syntaxe
31/03/2014
38
PHP
Variable globale
Syntaxe
PHP
Les types
Syntaxe
PHP
Dtermination du type dune variable
Type dune variable : string gettype($var);
Test de type :
is_integer($var); is_double($var); is_array($var); ...
Conversion dynamique : $result = (type-dsir)$var;
Instructions de vrification dexistence (formulaires) :
boolean isset($var); retourne FALSE si $var nest pas initialise ou a la valeur
NULL, TRUE sinon
boolean empty($var); retourne TRUE si $var nest pas initialise, la valeur 0, "0",
ou NULL, FALSE sinon
Syntaxe
PHP
Oprateurs
Oprateurs identiques ceux du C/C++/Java :
oprateurs arithmtiques : + - * / %
in/dcrmentation : var++ var
oprateurs logiques : && || !
comparaisons : == != <= >= <>
concatnation de chanes de caractres : .
affectation : = += -= *= . . .
Oprateurs spcifiques :
commande shell (ex : $a=ls -ul)
=== : teste la valeur et le type
Syntaxe
31/03/2014
39
PHP
Instructions de branchement
Syntaxe
Proches du C/C++/Java :
PHP
Boucles
Syntaxe
Proches du C/C++/Java :
PHP
Les tableaux
Syntaxe
Principe : associations ordonnes de type clef => valeur
Dclaration : array( [clef =>] valeur, ...)
la clef est facultative, elle est de type entier ou chane de caractres ;
en cas domission, la valeur sera associe la clef dindice max+1
la valeur peut tre de nimporte quel type
PHP
Rptition de code HTML
Syntaxe
Utilisation des boucles pour rpter du code HTML : Entrelacement code PHP / code
HTML
31/03/2014
40
PHP
Inclusion de code externe
Syntaxe
2 directives :
include("fichier"); remplacement par le contenu du fichier
require("fichier"); idem, mais arrt du script en cas derreur (ex : absence de fichier)
Alternatives : include_once et require_once ne sont excuts quune seule fois, mme
dans une boucle.
PHP
Les fonctions
Syntaxe
les noms de fonctions sont insensibles la casse
une fonction peut tre utilise avant sa dfinition
passage darguments par valeur et rfrence support (&)
les fonctions supportent un nombre variable darguments
la surcharge et la redfinition ne sont pas supportes
les arguments supportent les valeurs par dfaut
retour dune unique valeur par la directive return
PHP
Exemples de fonction
Syntaxe
PHP
La dclaration d'un formulaire
Les formulaires
Pour dclarer un formulaire, nous utilisons la balise < form ></ form >. L'action raliser
pour traiter le formulaire doit tre prcise en utilisant les deux attributs suivants :
L'attribut action : dsigne le fichier PHP qui va traiter, sur le serveur, les
informations saisies dans le formulaire;
L'attribut method : dfinit la mthode de transfert des donnes vers le serveur.
Les deux valeurs possibles sont get et post. Dans la suite de ces TPs, nous ne
verrons que la mthode post.
<form method="post" action="traiteform.php">
.
.
</form>
31/03/2014
41
PHP
Connexion la base de donnes
La fonction mysql_connect permet d'tablir la connexion avec le serveur MySQL et est
ncessaire pour toutes actions.
host = adresse du serveur (localhost par exemple)
user = nom d'utilisateur de connexion
pass = mot de passe de connexion
Les formulaires
PHP
Slection d'une base de donnes
Les formulaires
Pour slectionner une BDD, il suffit d'utiliser la fonction mysql_select_db.
database = nom de la BDD
PHP
Excuter une requte
Les formulaires
Une fois la connexion tablie vous pouvez excuter des requtes en utilisant la
fonction mysql_query.
Pour afficher le rsultat de notre requte plusieurs possibilits existent, la plus courante
(mysql_fetch_array) consiste afficher ce qu'on appelle un "tableau de rsultats". C'est
dire que lorsqu'on slectionne plusieurs champs il faut pouvoir identifier le rsultat de
chacun d'eux
PHP
Gestion des erreurs et scurit
Les formulaires
Il se peut que vous fassiez une erreur dans votre requte ... si si a arrive !
comment le savoir... ?
tout simplement en ajoutant l'instruction or die (mysql_error()), exemple :
31/03/2014
42
PHP
Fermer la connexion aprs l'utilisation
Les formulaires
Il n'est pas ncessaire de fermer chaque connexion puisque cela est fait automatiquement
mais cela rend le code plus propre. Pour cela il faut utiliser la fonction mysql_close.
Introduction
Serveur Web et protocole HTTP
HTML / XHTML / CSS
Javascript
XML / DTD
PHP
Ajax
Conception dun mini site Web (PHP, Serveur Apache, Mysql)
Plan de la formation
166
AJAX
Description
Introduction
Dfaut principal des applications web classiques : chaque requte, toute la
page est recharge chaque fois
Lenteur
excs de consommation de bande-passante
blocage lors de lattente des rponses
manque de ractivit

Vous aimerez peut-être aussi