Vous êtes sur la page 1sur 24

Actualit du cours

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/?page_id=449

Master 1 IDSM-Kharkiv
Anne 2014-2015
Jrme Darmont

http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2

https://twitter.com/darmont_lyon2 hashtag #webidsm

http://eric.univ-lyon2.fr/~jdarmont

Plan du cours

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Un peu d'histoire
HTML : HyperText Markup Language

Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)

Liens hypertextes
Langage base de balises

Objectif : publier sur le World Wide Web (ou WWW,


W3, ou Web) des documents formats
Issu de SGML (Standard Generalized Markup
Language), langage de dfinition de langages
Dvelopp par Tim Berners-Lee au CERN (Suisse) en
1990 et utilis sur le Web depuis

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Versions successives de HTML

lment : nom, notion abstraite

2000 : XHTML 1.0 (HTML 4 rcrit en XML)


2001 : XHTML 1.1
2003 : XHTML 2 (volution de XHTML 1 abandonne en 2009)
2008 : HTML 5 / XHTML 5 (volution de HTML 4, en cours)
http://eric.univ-lyon2.fr/~jdarmont/

Ex. Document HTML : html

Balise : forme concrte d'un lment

Consortium)

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

lments, balises et attributs

1990 : HTML 1
1995 : HTML 2
1995 : HTML+ et HTML 3 (non standards)
1997 : HTML 3.2 et HTML 4 (W3C : World Wide Web

Programmation Web

Ex. de balise ouvrante : <html>


Ex. de balise fermante : </html>

Attribut : proprit d'un lment (nom, valeur)

Ex. <a href="http://www.univ-lyon2.fr">


Nom

Valeur
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Rgles d'criture XHTML

Squelette d'un document HTML


<!DOCTYPE html> <!-- Identification du type du document
(note : ceci est un commentaire) -->
<html>

Les noms des balises doivent tre crits en minuscules.


Toute balise ouverte doit tre ferme.
Les chevauchements entre balise sont interdits
(documents bien forms).

<head>
<!-- En-tte -->
</head>

Les noms des attributs doivent tre crits en


minuscules.

<body>
<!-- Corps du document -->

Les valeurs des attributs doivent tre entre guillemets


doubles.

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

</body>

En-tte

<!-- Autres mtadonnes -->


<meta name="Author" content="Jrme Darmont" />
<meta name="Keywords" content="Enseignement,Informatique" />
<meta name="Description" content="Exemple de page HTML" />

Mtadonnes : <meta />


Ex. Jeux de caractres, auteur, mots-cls, description de la
page

Note : Une balise vide peut se noter <balise></balise>


ou <balise />, au choix.
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

<!-- Titre -->


<title>Exemple de page HTML</title>
</head>

10

Optimisation des performances

Programmation Web

lments de structuration du document

Ex. <link rel="dns-prefetch" href="//platform.twitter.com">

Prchargement de lien

http://eric.univ-lyon2.fr/~jdarmont/

Corps du document

Prchargement DNS

http://eric.univ-lyon2.fr/~jdarmont/

<head>
<!-- Jeu de caractres universel -->
<meta charset="utf-8" />

Titre : <title></title>

Programmation Web

Exemple d'en-tte

Informations qui ne sont pas affiches mais qui sont


utilises des fins diverses

</html>

Ex. <link rel="prefetch" href="http://darmont.me/hello.html" />


Ex. <link rel="prefetch" href="http://darmont.me/picture.png" />

Invisibles
Permettent la mise en page ultrieure du document
Permettent la gnration automatique, par ex., dune table des
matires, des figures, etc.

lments qui apparaissent explicitement laffichage


Prrendu de page

Ex. <link rel="prerender" href="http://darmont.me/hello.html" />

11

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

12

Texte
Images

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Structuration du document
Contenu principal :
Section :
Article :
Apart :
Entte :
Pied de page :
Menu/navigation :
Bote de dialogue :

13

Titres, paragraphes, sparateurs

<main> </main>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
<nav> </nav>
<dialog> </dialog>

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Titres (headings) : Six niveaux nots h1 h6

Paragraphes (spars entre eux par un espace)

Ex. <p>Ceci est un paragraphe</p>

Sparateurs :

14

Autres blocs de texte prdfinis

Retour la ligne (sans espace) : <br />


Ligne horizontale : <hr />

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Formatage de texte

Adresse

Ex. <h1>Titre de niveau 1</h1>

Texte appuy : <strong></strong>

Ex. <address>5 av. P. Mends-France </address>

Emphase : <em></em>
Surlignage : <mark></mark>

Citation

Police machine crire : <code></code>

Ex. <blockquote>Mignonne allons voir</blockquote>

En indice : <sub></sub>
En exposant : <sup></sup>

Texte prformat

Caractres spciaux :
< : &lt;
& : &amp;
> : &gt;
" : &quot;
espace inscable : &nbsp;

Ex. <pre>Le formatage sera


conserv
l'cran</pre>

15

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

16

Imbrication des balises

http://eric.univ-lyon2.fr/~jdarmont/

Liens hypertextes
Forme gnrale : <a href="URI">libell</a>

<!-- Exemple -->

URI : Uniform Resource Identifier


(anciennement URL : Uniform Resource Locator)

<header><h1>Prsentation du master IDSM</h1></header>


<article>
<p>L'<strong>Universit Lumire Lyon 2</strong> et
l<strong>Universit Nationale dconomie de Kharkiv</strong>
proposent une formation d'excellence (<em><strong>double diplme
de master</strong></em>) en <em>informatique et
statistique</em>.<br /> Ces domaines se dveloppent rapidement,
tant au niveau de la recherche que dans l'industrie, et offrent de
nombreux emplois.</p>
</article>

17

Programmation Web

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

18

Absolue (adresse complte)


Ex.
http://www.hdeu.edu.ua
ftp://ftp.ciril.fr
mailto:jerome.darmont@univ-lyon2.fr

Relative ( partir du rpertoire courant)


Ex.
page_suivante.html
rep/page_dans_repertoire.html

Exemple : <a href="http://www.univ-lyon2.fr">Universit Lyon 2</a>


Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Ancres

Images
Formats reconnus : GIF, JPEG, PNG

Permettent un lien vers un endroit prcis dans une


page Web

Balise : <img src="URI" alt="description" />

Dfinition dans une page : attribut id

Ex. <h1 id="menu">MENU</h1>

Ex. <a href="page.html#menu">Retour menu</a>

19

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

src : URI du contenu


controls : affiche les contrles du lecteur multimdia
autoplay : dmarrage ds que possible
loop : en boucle
muted : sans son

Exemple

21

<audio src="test.mp3" controls="controls" loop="loop">


Le format MP3 nest pas support par votre navigateur.
</audio>
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

22

Jauges

<figure>
<img src="tim-berners-lee.jpg" alt="Photo Tim BL" />
<video src="test.ogg" controls="controls" muted="muted">
Le format .ogg n'est pas support.
</video>
<audio src="chord.wav" controls="controls">
Le format .wav n'est pas support.
</audio>
<figcaption>Tout le multimdia de HTML5</figcaption>
</figure>
Programmation Web
http://eric.univ-lyon2.fr/~jdarmont/

Listes ordonnes et non-ordonnes


Listes puces : <ul> </ul>

Barre de progression
<progress max="100" value="75"></progress>

Listes numrotes : <ol> </ol>

Apparence :

21

http://eric.univ-lyon2.fr/~jdarmont/

lment de structuration (comme section, article)


Balise : <figure> </figure>
Lgende : <figcaption> </figcaption>
Exemple :

Attributs communs

Programmation Web

Figures

Sons : balise <audio> </audio>


Vidos : balise <video> </video>

Ex.
<a href="http://www.univ-lyon2.fr">
<img src="lyon2.gif" alt="Logo Lyon 2" />
</a>

20

Multimdia

Ex. <img src="http://eric.univ-lyon2.fr/~jdarmont/img/lyon2.gif" alt="Logo Lyon 2" />

Ex. <a href="#menu">Aller au menu</a>

Rfrence depuis une autre page

Ex. <img src="lyon2.gif" alt="Logo Lyon 2" />

Lien sur une image

Rfrence depuis la mme page

Exemple

Barre de mesure
<meter min="0" max="100" low="10" high="90"
optimum="50" value="75">75 %</meter>

<ul>

Apparence : variable selon les navigateurs

</ul>

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

<li>1er lment</li>
<li>2me lment</li>
<li>3me lment</li>

24

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Listes de dfinitions

Imbrication de listes

Exemple

Exemple

<dl>
<dt>1er terme</dt>
<dd>Dfinition du 1er terme</dd>
<dt>2me terme</dt>
<dd>Dfinition du 2me terme</dd>

<ul>
<li>Elment non ordonn 1
<ol>
<li>Sous-lment ordonn 1.1</li>
<li>Sous-lment ordonn 1.2</li>
</ol>
</li>
<li>Elment non ordonn 2</li>

</dl>

Rsultat l'affichage
1er terme
Dfinition du 1er terme
2me terme
Dfinition du 2me terme

25

Programmation Web

</ul>

http://eric.univ-lyon2.fr/~jdarmont/

26

Tableaux simples

<table>
<caption>Mes totaux</caption>
<tr>
<th>Jour de la semaine</th> <th>Montant</th> <th>Total</th>
</tr>
<tr>
<td>Lundi</td> <td>456 euros</td> <td>456 euros</td>
</tr>
<tr>
<td>Mardi</td> <td>200 euros </td> <td>656 euros </td>
</tr>
</table>

Dfinition d'un tableau : <table> </table>


Lgende : <caption> </caption>
Dfinition d'une ligne : <tr> </tr>
Dfinition d'une cellule d'en-tte : <th> </th>
Dfinition d'une cellule normale : <td> </td>
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

28

Apparence du tableau exemple

Programmation Web

C1

Jour de la semaine

Montant

Lundi

456 euros 456 euros

Mardi

200 euros 656 euros

C2

L1

Total
L12
C12

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Tableaux cellules recouvrantes

Mes totaux

29

http://eric.univ-lyon2.fr/~jdarmont/

Exemple de tableau

Tableau : Ensemble de lignes elles-mmes constitues


de cellules

27

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

30

L2

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Tableaux cellules recouvrantes

Plan du cours

"Fusion" de cellules (<td> ou <th>)

Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)

Cellule sur plusieurs colonnes : attribut colspan

Ex. <table> <tr> <td>C1</td> <td>C2</td> </tr>


<tr> <td colspan="2">C12</td> </tr> </table>

Cellule sur plusieurs lignes : attribut rowspan

31

Ex. <table> <tr> <td rowspan="2">L12</td>


<td>L1</td> </tr>
<tr> <td>L2</td> </tr> </table>
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

32

Dix erreurs de base viter

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Dix erreurs de base viter

Fonds sombres, images de fonds charges, couleurs


trop nombreuses

Ouvrir de nouvelles fentres, des pop-ups, etc.


Pages lourdes charger (contenant des images
volumineuses, par exemple)

Gadgets technologiques (animations, textes qui


dfilent, sons, Javascripts divers)

Pages trop larges (scrolling latral)

Surcharger la page de texte ou d'images :


trop d'information tue l'information

Pages trop longues (scrolling vertical)

Absence d'aide la navigation

Requrir de l'utilisateur une configuration particulire


("site optimis pour tel navigateur en telle rsolution")

Liens de couleur non standard

33

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

34

Design Web 2.0 *

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Principe fondamental : la simplicit


Chaque site / chaque page a un but prcis.

Quest-ce que le Web 2.0 ?

Dveloppement de la Web conomie

Interactivit accrue des sites Web (AJAX)

Web communautaire, rseaux sociaux

Nouvelle cole de design Web

Lattention de lutilisateur nest pas infinie.


Le concepteur doit aider lutilisateur trouver
linformation quil cherche.
Il ne faut pas noyer les informations importantes.
Minimiser le bruit = conomie, simplicit

* Daprs webdesignfromscratch.com

35

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

36

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Comment faire simple ?


Minimiser le ratio

Exemple de simplification

pixels dcoratifs
pixels porteurs dinformation

Supprimer tout les lments non strictement


ncessaires
Essayer des solutions alternatives pour arriver au
mme rsultat plus simplement
Utiliser les lments visuel pour communiquer, jamais
pour dcorer

37

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

38

lments de prsentation

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

lments de prsentation

Centrer le site dans la fentre du navigateur

Distinguer clairement une section dentte


(logo ou marque bien visible, zone de navigation)

Limiter le nombre de colonnes 2 (3 maximum)

Contre-exemple !

39

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

40

lments de prsentation

http://eric.univ-lyon2.fr/~jdarmont/

lments de prsentation

Identifier clairement les sections de la page

Programmation Web

Texte en gros caractres

Utiliser des couleurs (mais danger de distraction de lutilisateur)


Espacer nettement les sections

Mise en valeur des informations importantes


Facilit de lecture (accessibilit)

Titres en gras

41

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

42

Attire lattention sur les


zones importantes du site

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

lments de prsentation
Couleurs vives

Navigation
Objectifs : lutilisateur doit savoir facilement

Dlimitation de sections
Mise en valeur
dlments importants
Mise en place dune
ambiance

Dgrads
Textures

Menu de navigation global

(reflets, transparence)

Ne pas attirer lattention


ailleurs que sur le
contenu

Icnes

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

44

http://eric.univ-lyon2.fr/~jdarmont/

viter la "balkanisation du Web" des annes 90

W3C : World Wide Web Consortium

Programmation Web

Pourquoi utiliser les standards


du W3C ?

Quest-ce que le W3C ?

Clairement spar du contenu


Diffrenci en termes de couleur et de forme
Gros, clairement et toujours visible
Texte des liens explicite

Contenu : Hyperliens bien diffrencis du texte normal

utiliser avec parcimonie !

43

O il se trouve dans le site


O il peut aller
Quelles sont options disponibles sur la page courante

Organisation internationale indpendante des


diteurs de logiciels
http://www.w3.org

Interoprabilit et portabilit (PDA, tlphones


mobiles)
Accessibilit aux personnes handicapes

Objectif : Dveloppement de standards et de bonnes


pratiques du Web

Rduction des cots de dveloppement


Exploitation de la technologie XML (vers le Web
smantique / Web 3.0)

Directeur : Tim Berners-Lee

45

45

http://eric.univ-lyon2.fr/~jdarmont/

46

Exemples les plus visibles :


moteurs de recherches smantiques*

Complment dinformation : http://www.sensebot.net


Suggestions de recherche : http://www.bing.com
Opinions sur le rsultat : http://feeltiptop.com
Connaissance du domaine : http://www.evri.com

Personnalisation de la recherche : http://trialx.com

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Pourquoi utiliser les standards


du W3C ?

Web smantique

Exemple : moteurs de recherche (personnalisation, suggestions,


rsum dinformations)

Contrle qualit (validation des pages Web)


Rduction considrable du volume des documents
Rfrencement efficace dans les moteurs de
recherche
Prennit des documents
Rtrocompatibilit avec les anciens navigateurs

*James Hendler, Web 3.0: The Dawn of Semantic Search, Computer, January 2010.

47

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

48

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Accessibilit

Accessibilit
Prvoir des en-ttes de ligne et de colonnes dans les
tableaux

26,4 % de la population franaise souffre d'une entrave


dans une activit quotidienne et 10 % est affecte d'un
handicap. (SVM, novembre 2008)

Lier chaque champ de formulaire une lgende


Dfinir des raccourcis clavier

Prceptes daccessibilit :

Prvoir une alternative HTML aux technologies


propritaires (ex. Flash)

Proposer un texte alternatif aux images et aux


contenus multimdias en gnral (description,
transcription)

viter lusage des cadres (frames)


Prvenir des changements de langue dans le texte

Utiliser des feuilles de style

49

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

50

Plan du cours

Expliciter les liens ( page daccueil >> cliquer ici )


Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Dfinition et caractristiques
Cascading Style Sheets (CSS) :
Feuilles de style en cascade

Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)

Premire spcification par le W3C en 1996


Sparation du contenu et de la prsentation
Dfinition de styles gnriques pour les balises
Syntaxe diffrente de HTML
Possibilit de validation automatique

51

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

52

Avantages

Programmation Web

Dfinitions de styles

Gestion simplifie et globale de la prsentation d'un


site

Trois localisations possibles (+local au +global)


Dans une balise HTML : attribut style

Cots de dveloppement et de maintenance allgs


(code plus simple)

Possibilit de prsentations diffrentes selon le profil


utilisateur, la rsolution cran

Dans l'en-tte de la page Web (head) :


<style type="text/css"></style>

Dans un fichier spar

Meilleure accessibilit
Programmation Web

Ex. <p style="color: blue; text-align: center;"></p>

Dans une page HTML : balise <style>

Code source allg

53

http://eric.univ-lyon2.fr/~jdarmont/

Appel dans l'en-tte de la page Web (head) :


<link rel="stylesheet" type="text/css" href="feuille_style.css" />

http://eric.univ-lyon2.fr/~jdarmont/

54

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Notion de cascade

Units de taille

Imbrication des dfinitions : la plus locale l'emporte.

Units absolues

Ex. Dfinition de style dans un fichier externe vs. dfinition


dans une balise
la dfinition locale de la balise prvaut

Units relatives ( privilgier)

Imbrication des balises : le style d'une balise s'applique


aux balises imbriques.

Ex. <p><em></em></p>
Si un style est appliqu <p>, il s'applique <em>.

55

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

px : pixel
pt : point

em : hauteur de ligne
% : proportion par rapport la taille de la fentre

56

Spcification de couleurs

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

criture d'une feuille de style

Nom prdfini : aqua, black, blue, fucshia, green, gray,


lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow

Feuille de style : ensemble de rgles

Un slecteur
Des proprits
Une valeur pour chaque proprit

Spcification RGB (Rouge Vert Bleu - RVB)

Ex. Jaune : rgb(255, 255, 0)

Exemple
h1 { color: yellow;
font-weight: bold;
}

Code RGB hexadcimal

Ex. Jaune : #FFFF00

57

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

58

Slecteurs

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Classe de style

Slecteur universel : tous les lments HTML

Ex. * { color: blue; }

Slecteur dfini par l'utilisateur qui permet de dissocier


un style de balises particulires

Style d'une catgorie de balises

Ex. h1 { color: #FF00FF; }

Ex.

Style de plusieurs catgories de balises

Ex. h1, h2, h3, p { color: green; }

Slecteur associ un identifiant particulier

Style pour balises imbriques

.style_rouge { color: red; }


.style_bleu { color: blue; }
p.parag_vert { color: green; }

Ex.

#titre { text-align:center; color: navy; }

Ex. p em { color: red; } /* Italiques dans un paragraphe */


(Commentaire)

59

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

60

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

10

Classe de style

Application des styles

Utilisation dans une page Web

Ex.

<h1 class="style_rouge">Titre rouge</h1>


<p class="style_rouge">Texte rouge</p>
<p class="style_bleu">Texte bleu</p>
<p class="parag_vert">Texte vert</p>

une partie d'un paragraphe : <span> </span>

Application un ensemble d'lments : <div> </div>

Ex.

61

un lment identifi :

<div class="style_bleu">
<h1></h1>
<p></p>
<p></p>
</div>
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Proprits de typographie

color

color: black;
color: #000000;

background-color

background-color: white;
background-color: #FFFFFF;

background-image

background-image: url("URL");

background-repeat

background-repeat: no-repeat;

background-position

background-position: center;

Programmation Web

Ex. <div id="titre"> </div>


<p id="titre"> </p>

62

Proprits de couleur

63

Ex. <p class="style_rouge">Ceci est rouge sauf


<span class="style_bleu">ce qui est bleu</span>
</p>

http://eric.univ-lyon2.fr/~jdarmont/

font-family

font-family: times;
font-family: arial, verdana;

font-size

font-size: 1.5em;

font-style

font-style: italic;

font-weight

font-weight: bold;
font-weight: bolder;

text-decoration

text-decoration: underline;
text-decoration: line-through;

64

Proprits de texte

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Proprits de bote englobante


Bote

Page Web

text-align

text-indent

65

text-align:
text-align:
text-align:
text-align:

left;
right;
center;
justify;

margin-left

text-indent: 10pt;
text-indent: 15px;
text-indent: 5%;

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

width

Bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla
padding-top
bla bla bla bla bla bla bla bla bla bla bla
blatata
bla bla
bla
Tatabla
tata
tatablatata
bla bla bla bla bla bla bla bla bla bla bla
blatata
blatata
bla bla
tatabla
tata
tatabla
bla bla bla bla bla bla bla bla bla bla bla
bla
bla
bla
bla
bla
tata tata tata tata tatabla height
bla bla bla bla bla bla bla bla bla bla bla
blatata
blatata
bla bla
tatabla
tata
tatabla
bla bla bla bla bla bla bla bla bla bla bla
blatata
blatata
bla bla bla
tatabla
tata
bla bla bla bla bla bla bla bla bla blapadding-left
bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
margin-bottom
bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

66

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

11

Proprits de bote englobante


width
height
padding

Proprits d'hyperlien

width: 80pt;

Hyperliens

height: 25%;

-left, -right, -top, -bottom

margin

padding: 5px;
padding-bottom: 10px;

Ex. a { color: blue; }

Hyperliens visits

Bote
centre

Ex. a:visited { color: purple; }

margin: 10px;
margin-left: 10%;
margin-left: auto; margin-right: auto;

Hyperliens survols (avec le pointeur de souris)

-width, -style, -color

border: 2px solid #FF00FF;


border-style: dotted;
border-radius: 15px;

Hyperliens activs

overflow

overflow: auto;

-left, -right, -top, -bottom

border

67

Programmation Web

Coins
ronds

http://eric.univ-lyon2.fr/~jdarmont/

list-style-image

list-style

list-style: disc;
list-style: circle;
list-style: square;
list-style-image: url("URL");

Balise caption:

Programmation Web

Balises td et th : border, width


et vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

http://eric.univ-lyon2.fr/~jdarmont/

70

Exemple de style de tableau


Style 1

C1

C1

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Exemple de style de tableau

Style 2

C2

caption-side: top;
caption-side: bottom;

Balises tr: height

list-style: decimal;
list-style: upper-roman;
list-style: lower-alpha;

69

http://eric.univ-lyon2.fr/~jdarmont/

Balise table : border, width,


border-collapse: collapse

Listes ordonnes

Programmation Web

Proprits de tableau

Listes non-ordonnes
list-style

Ex. a:active { color: purple; }

68

Proprits de liste

Ex. a:hover { color: white; background-color: blue; }

HTML
<table>
<tr> <td>C1</td> <td>C2</td> </tr>
<tr> <td>C3</td> <td>C4</td> </tr>
</table>

C2

Style 1 (CSS)
table, td { border: 1px solid black; }
C3

C4

C3

Style 2 (CSS)

C4

table, td { border: 1px solid black; }


table { border-collapse: collapse; }

71

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

72

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

12

Positionnement flottant

Positionnement flottant

Exemple 1 : menu flottant droite

Exemple 1 :

Menu

CSS

.menu_jaune { float: right;


background-color: yellow;
width: 100px; }

(style
.menu_jaune)

HTML

100 pixels

73

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

<div class="menu_jaune">
<p>Menu</p>
</div>
<div>
<!-- Contenu de la page -->
</div>

74

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Conteneur
(style .page)
100 %

Positionnement flottant

Positionnement flottant

Exemple 2 : pagination en trois colonnes

Exemple 2 :

Colonne 1

Colonne 2

Colonne 3

(style .colonne)
33 %

(style .colonne)
33 %

(style .colonne)
33 %

75

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

CSS

.page { float: left; width: 100%; }


.colonne { float: left; width: 33%; }

HTML

<div class="page"> <!-- Conteneur -->


<div class="colonne"> </div>
<div class="colonne"> </div>
<div class="colonne"> </div>
</div>

76

Positionnement absolu

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Positionnement absolu
1em

Bla bla sur fond vert


Idem sur fond jaune
Bla bla sur fond vert
Bla bla sur fond vert

CSS

1em

77

<div class="boite_verte">
<p>Bla bla sur fond vert</p>
<div class="boite_jaune">
<p>Idem sur fond jaune</p>
</div>
</div>
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

position: relative;
background-color: #00FF00;
width: 15em; }

.boite_jaune { position: absolue;


top: 1em;
right: 1em;
background-color: #FFFF00; }

15em

HTML

.boite_verte {

78

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

13

Exemple de mise en page : HTML

Exemple de mise en page : Objectif

<main>
<header>
<h1>Exemple de mise en page</h1>
</header>
<div id="conteneur">
<nav>
<a href="http://www.univ-lyon2.fr">Universit Lyon 2</a>
</nav>
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
</div>
<footer>
&copy; IDSM
</footer>

79

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

80

Exemple de mise en page : CSS

background-color: silver;
}
main {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: white;
padding: 1em;
}
header {
background-color: yellow;
text-align: center;
padding: 1em;
border-radius: 15px;
}
#conteneur {

float: left;
width: 750px;
background-color: lime;
margin-left: 1em;
border-radius: 15px;
}
article {
background-color: aqua;
margin: 1em;
}
footer {
background-color: fuchsia;
text-align: center;
padding: 1em;
border-radius: 15px;

width: 100%;
margin-top: 1em;

Programmation Web

Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)

}
section {

}
}

http://eric.univ-lyon2.fr/~jdarmont/

82

Gnralits

83

1994
1995
1995
1997
2000
2004

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Gnralits

PHP : PHP Hypertext Preprocessor


Langage de script permettant d'insrer de la
programmation dans des pages Web
Pages Web dynamiques
Versions :

http://eric.univ-lyon2.fr/~jdarmont/

Plan du cours

float: left;
width: 200px;
background-color: red;
padding: 1em;
border-radius: 15px;

font-family: arial;
}
body {

Programmation Web

nav {

*{

81

<main>

Syntaxe du langage PHP proche de celles de C, Perl


ou Java
Support d'un grand nombre de bases de donnes
Support de services internet (IMAP, POP3, NNTP,
HTTP)

: Conception par Rasmus Lerdorf


: Premire version publique
: PHP/FI
: PHP 3
: PHP 4
: PHP 5
Programmation Web

Gratuit, fonctionne sous Unix et Windows

http://eric.univ-lyon2.fr/~jdarmont/

84

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

14

Gnralits

Syntaxe de base

PHP : Langage de script "serveur" comme ASP


( Javascript, langage de script "client")

Passage du HTML PHP (chappement) : <script


language="php"> </script> ou <?php ?>

Script excut sur le serveur


<html>
<body>
<?php echo "Bonjour"; ?>
</html>
</body>

Page web avec script

Ex. <?php echo "Bonjour"; ?>

Sparateurs d'instructions :
Commentaires
Serveur Web

Client

Ex.

<html>
<body>
Bonjour
</html>
</body>

Page web sans script

85

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Nombres entiers : int, integer


Nombres rels : real, double, float
Chanes de caractres : string

Programmation Web

Tableaux : scalaires ou associatifs, cration par


assignation des valeurs

$i = 1;
$pi=3.14;
$ch="oui";

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Variables d'environnement

Ex.

$matrice[0][0] = 2;
$msa["Dupont"][0] = 30;
$matrice2 = array(
array(1, 0, 0),
array(0, 1, 0),
array(0, 0, 1));

89

Programmation Web

Constantes

Tableaux plusieurs dimensions : possibilit de


mlanger indices scalaires et associatifs
Ex.

Initialisation :
Ex.
$notes_s = array(10, 12.5, 15, 8);
$notes_a = array("Valeriia" => 16, "Vadim" => 12);
Nombre dlments :
Ex.
$n = count($notes_s)

88

Variables et types

$ts[0] = "Chane 0"; // Indiage partir de 0


$ts[1] = "Chane 1";
$ta["Dupont"] = 30;

Fonctions associes :

Ex. $ipi = (int) $pi; // $ipi est gale 3

87

Ex.

Ex. d'affectation

Conversion de type : "cast" comme en C

http://eric.univ-lyon2.fr/~jdarmont/

Variables et types

Variables : prfixes par le caractre $


PHP ne ncessite pas de dclaration explicite du type
de variable ( ).
Types de donnes :

// Toute une ligne (faon C++)


# Toute une ligne (faon Shell Unix)
/* Plusieurs
lignes (faon C) */

86

Variables et types

Constantes dfinies par l'utilisateur

1 0 0

0 1 0
0 0 1

http://eric.univ-lyon2.fr/~jdarmont/

$_SERVER["PHP_SELF"]
$_SERVER["SERVER_NAME"]
$_SERVER["HTTP_REFERER"]
$_SERVER["REMOTE_ADDR"]

90

Ex.

define("maChaine", "Valeur de maChaine");


define("PI", 3.14159265);
echo "<p>maChaine=" . maChaine . "<br />";
echo "PI=" . PI . "</p>";
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

15

Oprateurs

Oprateurs

Oprateurs d'affectation

Concatnation de chanes de caractres : .

Exemples
Affectation simple :
$a = 2;
Affectation multiple :
$a = $b = 2;
Affectation + opration :
$a += 2;
Pr/post incrmentation/dcrmentation :
++$a;
--$a;
$a++;
$a--;
Affectation conditionnelle :
$max=($a>$b)?$a:$b;

Ex.

$ch1 = $ch2 . $ch3;


$ch1 .= "<br />";

Caractres spciaux dans les chanes


(chappement)

Antislash :
Dollar :
Guillemets :

\\
\$
\"

Oprateurs arithmtiques : + - * / % (modulo)

91

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

92

Oprateurs

http://eric.univ-lyon2.fr/~jdarmont/

Affichage

Oprateurs logiques

Programmation Web

Procdures prdfinies

ET : and ou &&
OU : or ou ||
OU exclusif : xor
NON : !

Ex. echo "Bonjour !";


Ex. print("Bonjour !");
Ces deux procdures sont le seul moyen d'afficher quelque
chose dans le document HTML final.
Affichage de tableau : print_r($my_array);

Oprateurs de comparaison

galit/Diffrence :
Infrieur/Suprieur :
Infrieur ou gal/Suprieur ou gal :

==
<
<=

Formatage : Utilisation des balises HTML

!=
>
>=

Ex. echo "<h1>TITRE</h1>";

Saut de ligne dans le code source

93

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

94

Affichage du contenu de variables

Programmation Web

Test :

Ex. echo "PI = " . $pi . "<br />";

Directement dans une chane

Ex. echo "PI = $pi<br />";

Rsultat de fonction : concatnation obligatoire

95

http://eric.univ-lyon2.fr/~jdarmont/

Ex.

if (expression) instructions
[elseif (expression) instructions]
[else instructions]
if ($a>$b) echo "A > B";
if ($a>$b) { // Plusieurs instructions
echo "A > B";
$b = $a;
}

Ex. echo "Carr de PI = " . carre($pi);

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Structures de contrle

Utilisation de l'oprateur de concatnation

Ex. echo "<h1>TITRE</h1>\n";

96

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

16

Structures de contrle

Structures de contrle
Slection : switch(variable) {cas}

if ($a>$b) {
echo "A > B";
} else {
echo "A <= B";
}

Ex.

switch($ch) {
case "a": echo "A"; $ch="A"; break;
case "b": echo "B"; $ch="B"; break;
case "c": echo "C"; $ch="C"; break;
default: echo "Ni \"a\" ni \"b\" ni \"c\"";
}

if ($a>$b) echo "A > B";


elseif ($a<$b) echo "A < B";
else echo "A = B";

97

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

98

Structures de contrle
Ex.

Programmation Web

Boucle "pour tout lment" de tableau scalaire


foreach (tableau as valeur) instructions

$i=1;
while ($i<=10) { echo $i++;
}

Boucle "rpter tant que" : do {instr} while(expr)

Ex.

http://eric.univ-lyon2.fr/~jdarmont/

Structures de contrle

Boucle "tant que" : while(expr) {instr}

switch($i) {
case 0: echo "i=0"; break;
case 1: echo "i=1"; break;
case 2: echo "i=2"; break;
}

$i=1;
do { echo $i++;
} while ($i<=10);

Ex.

$tab[0]="Rouge";
$tab[1]="Vert";
$tab[2]="Bleu";
foreach ($tab as $val) {
echo "Valeur courante : $val<br />";
}

Boucle "pour" : for (expr1; expr2; expr3) {instr}

Ex.

99

for ($i=1; $i<=10; $i++) { echo $i;


}
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

100

Structures de contrle

Programmation Web

Structures de contrle
Inclusion de fichiers dans une page

Boucle "pour tout lment" de tableau associatif


foreach (tableau as cl => valeur) instructions

Ex.

$tab["Rouge"]="#FF0000";
$tab["Vert"]="#00FF00";
$tab["Bleu"]="#0000FF";
foreach ($tab as $cle => $val) {
echo "Code de $cle : $val<br />";
}

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Fonction require() : Provoque une erreur fatale si le fichier


requis manque (interruption du script)
Fonction include() : Provoque seulement un avertissement
(warning) si le fichier requis manque
valuation des fichiers inclus en mode HTML

Exemples (paramtre des fonctions : une URI)

101

http://eric.univ-lyon2.fr/~jdarmont/

102

require("mes_fonctions.inc.php");
include("une_page_web.html");
include('http://serveur.fr/pg.html');
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

17

Fonctions

Fonctions

Squelette de dfinition de fonction

Passage de paramtres par rfrence (paramtres passs


par valeur par dfaut) : &

function nom_fn ($p1, $p2, , $pn) {


// Code de la fonction
return val_retour; // Optionnel
}

Ex.

Exemple
function mon_max ($n1, $n2) {
return ($n1>$n2) ? $n1 : $n2;
}

Paramtres par dfaut

Ex.

Une fonction doit tre dfinie avant d'tre appele.

103

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

104

Visibilit des variables

Sparation des tches de programmation


et de design Web
Maintenance facilite

Ex. function exemple_global {


global $vglob; // Visible hors de la fonction

Variables statiques

105

Ex. function exemple_static {


static $vstat; // Conserve sa valeur entre
deux appels la fonction
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Sparation de PHP et HTML

Variables globales

function cafe($type="expresso") {
return "Je fais un $type<br />";
}
echo cafe(); // Je fais un expresso
echo cafe("capucino"); // Je fais un capucino
Programmation Web

Variables normales : visibles uniquement l'intrieur


de la fonction o elles sont dfinies

function alaligne(&$chaine) {
$chaine .= "<br />";
}
$ch="Coucou !";
alaligne($ch); // <br /> ajout la fin

http://eric.univ-lyon2.fr/~jdarmont/

Lecture plus aise des pages HTML + PHP


Modification facile du code sans affecter la mise en page et
vice-versa

Rutilisation de code
Utilisation des fonctions include() et require()

Ex. Dfinition dans des fichiers spars d'en-ttes et de pieds


de page communs plusieurs pages

106

Plan du cours

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Principe
Imbrication de requtes SQL dans du code PHP +
formulaires HTML pour les mises jour

Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)

SGBD utilis : MySQL

Serveur de BD SQL multi-utilisateurs rapide


Dvelopp depuis 1995 (version actuelle : MySQL 5)
Disponible sous licence GPL ou commerciale

Utilisation de l'extension PHP Data Objects (PDO) :


interface daccs une base de donnes
(divers SGBD supports dont MySQL ; ncessite PHP 5.1+)

107

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

108

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

18

lments de langage SQL

lments de langage SQL

Base de donnes : ensemble de tables

Types de donnes principaux

Table : ensemble d'attributs et leurs valeurs

Ex. ETUDIANT (numetu, nom, prenom, datenaiss, note)

Interrogation simple
SELECT liste_attributs FROM table
WHERE condition
Ex. SELECT nom, prenom FROM etudiant WHERE note>=10

Nombre entier : INT


Nombre rel : FLOAT
Chane de caractres : VARCHAR(taille)
Date : DATE

Cl primaire : identifie de faon unique les


n-uplets (lignes) de la table

Cration de table

Mot-cl PRIMARY KEY aprs le type

CREATE TABLE nom_table (liste(champ, type))

109

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

110

lments de langage SQL

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

lments de langage SQL


Insertion d'un n-uplet
INSERT INTO nom_table VALUES (liste_valeurs)

Exemple de cration de table


CREATE TABLE etudiant (

Ex. INSERT INTO etudiant VALUES (123, 'Darmont', 'Jrme', '15-01-1972', 15.5)

Suppression d'un n-uplet

numetu INT PRIMARY KEY,


nom VARCHAR(50),
prenom VARCHAR(100),
datenaiss DATE,
note FLOAT )

DELETE FROM nom_table WHERE condition

Ex. DELETE FROM etudiant WHERE numetu = 123

Modification d'un n-uplet


UPDATE nom_table SET attribut = valeur WHERE condition
Ex. UPDATE etudiant SET note = 20 WHERE numetu = 123

111

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

112

lments de langage SQL

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

PDO : Connexion une BD


Connexion

Requte de jointure (multi-table)

$idconn = new PDO(id_serveur_bd, login_mysql, mot_de_passe);

SELECT liste_attributs
FROM table1, table2, tableN
WHERE condition_jointure_t1t2

AND condition_jointure_tN-1tN

id_serveur = pilote:host=serveur;dbname=nom_bd
Ex.
$c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");

Gestion des erreurs


try { instructions } catch () { traitement_des_erreurs }

113

Ex.

SELECT *
FROM etudiant, diplome
WHERE etudiant.num_dipl = diplome.num_dipl

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Ex. try {
// Connexion
} catch (PDOException $erreur) {
echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}

114

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

19

PDO : Excution dune requte

PDO : Exemple pratique


try {

Requte dinterrogation

// Connexion
$c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
// Requte de slection
$q = "select nom, prenom from etudiant";
$res = $c->query($q);
echo "<ul>\n";
foreach($res as $l)
echo "<li>". $l["nom"] . " " . $l["prenom"] . "</li>\n";
echo "</ul>\n";
echo "<p>" . $res->rowCount() . " rsultat(s)</p>\n";
// Requte de mise jour
$res = $c->exec("update etudiant set note = note + 1") ;
echo "<p>$res ligne(s) modifie(s)</p>\n";
} catch (PDOException $erreur) { // Gestion des erreurs
echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}

$idconn->query(requte_SQL)

Ex. $c->query("select nom, prenom from etudiant");

Accs au rsultat de la requte (ligne par ligne)

Ex. foreach($c->query("select nom, prenom from etudiant") as $l)


echo $l["nom"] . " " . $l["prenom"] . "<br />\n";

Requte de mise jour


$idconn->exec(requte_SQL)

Ex. $c->exec("update etudiant set note = note + 1");


Retourne le nombre de n-uplets mis jour

115

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

116

Conversion de jeux de caractres

Programmation Web

Formulaires HTML

Encodage de caractres Europe de lOuest : iso-8859-1


(sur 2 octets)

Formulaires : permettent la saisie de donnes dans une


page Web

Encodage de caractres international : utf-8


(sur 4 octets, plus rcent)

Dfinition : <form> </form>

Si un texte contenu dans une BD est un format et que


le serveur Web utilise lautre : problme (accents)

Affichage de type : caractres utf-8 affichs en iso-8859-1

$idconn->exec("set names latin1");


Affichage de type ? : caractres iso-8859-1 affichs en utf-8
$idconn->exec("set names utf8");

117

Programmation Web

Une seule fois, aprs la


commande de connexion
http://eric.univ-lyon2.fr/~jdarmont/

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Formulaires HTML

Diffrence entre les mthodes get et post

Attribut action : URI de la page PHP excuter aprs validation


du formulaire
Attribut method : mthode de transmission des donnes (valeurs
possibles : get et post)
Attribut enctype : type d'encodage (par dfaut application/xwww-form-urlencoded ou
multipart/form-data pour envoyer des fichiers)

118

Formulaires HTML

Saisie dans un formulaire : <input />

get : apparition des valeurs saisies en paramtres de l'URI de


la page action
post :
. valeurs saisies caches
. quantit de donnes possible plus importante

Attribut obligatoire : name, nom de la variable

Champ texte : <input type="text" size="" />

Ex. <input type="text" name="nom" size="30" />

Suggestion de valeurs : <datalist></datalist>

Exemple
<form action="ajout_etu.php" method="post"></form>

Structure d'un formulaire : ensemble de zones de


saisie (groupes de champs)
Groupe de champs : <fieldset> </fieldset>

119

http://eric.univ-lyon2.fr/~jdarmont/

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

120

Ex.

<datalist id="prop_noms">
<option value="Dupond">
<option value="Durand">
<option value="Martin">
</datalist>
<input type="text" name="nom" list="prop_noms" />
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

20

Formulaires HTML

Formulaires HTML

Vrification syntaxique : expressions rgulires

Bouton radio : <input type="radio" value="" />

Ex. <input type="email" pattern="[^ @]*@[^ @]*" />

Champ mot de passe : <input type="password" />

Ex. <input type="password" name="passwd" size="8" />

Case cocher : <input type="checkbox" />

Champ cach : <input type="hidden" value="" />

Ex. <input type="hidden" name="numetu" value="10" />

Fichier : <input type="file" />

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

122

Formulaires HTML

Attribut name : nom de la zone de texte


Attributs rows et cols : nombre de lignes / colonnes
Ex. <textarea name="texte" rows="10" cols="60">
</textarea>

123

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

124

Formulaires HTML

Ex. <label for="id_nom">

Lgende de zone de saisie : <legend> </legend>


Ex. <fieldset>
<legend>tat civil de l'tudiant</legend>

</fieldset>
Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

<form action="ajout_etu.php" method="post"> <fieldset>


<p> Nom : <input type="text" name="nom" size="50" /> </p>
<p> ge : <input type="text" name="age" size="2" /> </p>
<p> Anne : <select name="annee">
<option>Licence</option>
<option selected="selected">M1</option>
<option>M2</option>
</select> </p>
<input type="hidden" name="action" value="ajout" />
<p> <input type="reset" value="Annuler" />
<input type="submit" value="Valider" /> </p>
</fieldset> </form>

Nom : <input type="text" id="id_nom" name="nom" />


</label>

125

Programmation Web

<!-- Exemple complet -->

Description de champ : <label> </label>

Attribut name : nom de la variable choix


Balise <option> </option> : lment de la liste
Attribut selected de <option> : choix par dfaut
Ex.
<select name="annee">
<option>Licence</option>
<option selected="selected">M1</option>
<option>M2 professionnel</option>
<option>M2 recherche</option>
</select>

Formulaires HTML

Options d'accessibilit (navigation alternative)

http://eric.univ-lyon2.fr/~jdarmont/

Liste droulante : <select> </select>

Attribut type = submit | reset : validation ou rinitialisation du


formulaire
Attribut value : lgende du bouton
Ex. <input type="submit" name="Valider" value="Valider" />
<input type="reset" name="Annuler" value="Annuler" />

Zone de texte long : <textarea> </textarea>

Programmation Web

Formulaires HTML

Boutons de commande

Ex.
choix 1 : <input type="checkbox" name="choix1" />
choix 2 : <input type ="checkbox" name="choix2" />

Ex. <input type="file" name="Fichier_tlcharg" />

121

Ex.
Homme : <input type="radio" name="genre" value="H" />
Femme : <input type="radio" name="genre" value="F" />

http://eric.univ-lyon2.fr/~jdarmont/

126

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

21

Exploitation des donnes


d'un formulaire avec PHP

Mise jour d'une base de donnes


avec PHP

Dans la page cible (Ex. ajout_etu.php)

<?php // Suite de l'exemple : document ajout_etu.php


$c = new PDO("mysql:host=localhost;dbname=darmont",
"darmont", "x");

Tableaux associatifs $_GET[] et $_POST[]


Permettent d'accder aux valeurs transmises par les
mthodes get et post des formulaires, respectivement

Exemple

$nom = $_POST["nom"];
$age = $_POST["age"];
$annee = $_POST["annee"];

<?php
echo "<p>L'tudiant " . $_POST["nom"];
echo " (" . $_POST["age"] . " ans)";
echo " est en " . $_POST["annee"] . ".</p>";
?>

$requete = "insert into etudiant values ('$nom', $age, '$annee')";


$resultat = $c->exec($requete);
if ($resultat) echo "<p>Insertion effectue</p>";
?>

Cas particuliers : case cocher (valeur "on" si coche)


et fichiers

127

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

128

Tlchargement de fichier

Variables disponibles dans la page cible

Ex.
<form action="telechargement.php" method="post"
enctype="multipart/form-data" />
<fieldset>
<input type="hidden" name="MAX_FILE_SIZE" value="50000" />
Fichier : <input name="monfichier" type="file" />
<input type="submit" value="Tlcharger" />
</fieldset>
</form>

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

$destination = "/home/jd/public_html/" . $_FILES["monfichier"]["name"];


$res = move_uploaded_file($_FILES["monfichier"]["tmp_name"],
$destination);
if ($res) echo "<p>Fichier tlcharg avec succs</p>";
else echo "<p>Erreur : " . $_FILES["monfichier"]["error"] . "</p>";

130

Transmission de variables
d'une page PHP une autre

<!-- Mthode 1 -->


<form action="suivante.php" method="post"> <fieldset>
<input type="hidden" name="nom" value="<?php echo $nom; ?>" />
<input type="hidden" name="age" value="<?php echo $age; ?>" />
<input type="submit" value="Envoyer" />
</fieldset> </form>

Mthode 2 : Ajouter des paramtres l'URI de la page


cible

http://eric.univ-lyon2.fr/~jdarmont/

http://eric.univ-lyon2.fr/~jdarmont/

<!-- courante.php -->

Mthode 1 : Utiliser les champs cachs d'un formulaire

Programmation Web

Programmation Web

Transmission de variables
d'une page PHP une autre

Exemple : On dispose du nom et de l'age du visiteur de


la page courante.php dans les variables $nom et $age.
On souhaite les transmettre la page suivante.php.

131

$_FILES["monfichier"]["name"] : nom original du fichier


$_FILES["monfichier"]["size"] : taille du fichier
$_FILES["monfichier"]["tmp_name"] : nom temporaire du fichier sur la
machine serveur

Exemple de code dans la page telechargement.php

tape 2 : traitement l'aide de PHP

129

http://eric.univ-lyon2.fr/~jdarmont/

Tlchargement de fichier

tape 1 : formulaire dans une page HTML

Programmation Web

<!-- Mthode 2 -->


<a href="suivante.php?nom=<?php echo $nom; ?>&age=
<?php echo $age; ?>">Envoyer</a>

132

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

22

Transmission de variables
d'une page PHP une autre

Sessions

<?php // suivante.php

Objectif : Stockage de variables lors de la navigation


sur plusieurs pages Web successives

// Mthode 1
$nom = $_POST["nom"];
$age = $_POST["age"];

Utilisations courantes :

// Mthode 2
$nom = $_GET["nom"];
$age = $_GET["age"];

Identification des visiteurs d'un site par login et mot de passe


stocks dans une base de donnes
Gestion du profil des utilisateurs

?>

133

Programmation Web

134

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Sessions

Sessions

<!-- Exemple -->


<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head> <title>Session 1</title> </head>
<body>
<form action="session2.php" method="post >
<fieldset>
Votre nom : <input type="text" name="nom" />
<input type="submit" value="Valider" />
</fieldset>
</form>
</body>
</html>

<?php
session_start();
// Enregistre la valeur de $nom dans la variable de session s_nom
$_SESSION["s_nom"] = $_POST["nom"];
?>
<!DOCTYPE html>
<html>
<head> <title>Session 2</title> </head>
<body>
<p>Identifiant de session : <?php echo session_id(); ?><br />
Nom de session : <?php echo session_name(); ?></p>
<p>Bienvenue sur ma page Web, <?php echo $_SESSION["s_nom"]; ?>.<br />
<a href="session3.php">Page suivante</a>.</p>
</body>
</html>

135

137

http://eric.univ-lyon2.fr/~jdarmont/

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

136

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

Sessions

Sessions

<?php session_start(); ?>


<!DOCTYPE html>
<html>
<head> <title>Session 3</title> </head>
<body>
<p>Es-tu toujours l, <?php echo $_SESSION["s_nom"]; ?> ?<br />
<a href="session4.php">Dtruire la variable de session</a> ou
<a href="session5.php">clore la session</a> ?</p>
</body>
</html>

<?php
session_start();
$_SESSION["s_nom"] = FALSE; // Suppression de la variable de session
?>
<!DOCTYPE html>
<html>
<head> <title>Session 4</title> </head>
<body>
<p>Es-tu toujours l ?
<?php if ($_SESSION["s_nom"]) echo "Oui.";
else echo "Non."; ?>
<br /><a href="session5.php">Clore la session</a>.</p>
</body>
</html>

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

138

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

23

Sessions

Plan du cours

<?php
session_start();
session_destroy(); // Destruction de la session
?>
<!DOCTYPE html>
<html>
<head> <title>Session 5</title> </head>
<body>
<p>Session termine.</p>
</body>
</html>

139

Programmation Web

Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)

http://eric.univ-lyon2.fr/~jdarmont/

140

Programmation Web

http://eric.univ-lyon2.fr/~jdarmont/

24