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
Année 2015-2016
Jérôme Darmont
http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2

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


http://eric.univ-lyon2.fr/~jdarmont
2 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Plan du cours Un peu d'histoire…


HTML : HyperText Markup Language
Langage HTML – Liens hypertextes
– Langage à base de balises
Éléments de design Web
Feuilles de style en cascade (CSS) Objectif : publier sur le World Wide Web (ou WWW,
W3, ou Web) des documents formatés
Langage de script PHP
Issu de SGML (Standard Generalized Markup
Connexion à une base de données (MySQL) Language), langage de définition de langages
Développé par Tim Berners-Lee au CERN (Suisse) en
1990 et utilisé sur le Web depuis

3 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 4 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Versions successives de HTML Éléments, balises et attributs


HTML 5 Élément : nom, notion abstraite
HTML 1 XHTML 1.0
HTML 4 en XML
XHTML 5 – Ex. Document HTML : html
HTML 2
Évolution de HTML 4
HTML+ Non XHTML 1.1 Balise : forme concrète d'un élément
HTML3 standards – Ex. de balise ouvrante : <html>
– Ex. de balise fermante : </html>
1990 1995 1997 2000 2001 2003 2008
Attribut : propriété d'un élément (nom, valeur)
– Ex. <a href="http://www.univ-lyon2.fr">
HTML 3.2
XHTML 2
HTML 4 Nom Valeur
Évolution de XHTML 1
Standards W3C Abandonnée en 2009

5 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 6 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

1
Règles d'écriture XHTML Squelette d'un document HTML
Les noms des balises doivent être écrits en minuscules. <!DOCTYPE html> <!-- Identification du type du document
(note : ceci est un commentaire) -->
Toute balise ouverte doit être fermée. <html>

Les chevauchements entre balise sont interdits <head>


(documents bien formés). <!-- En-tête -->
</head>
Les noms des attributs doivent être écrits en
minuscules.
<body>
Les valeurs des attributs doivent être entre guillemets <!-- Corps du document -->
</body>
doubles.
</html>
7 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 8 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

En-tête Exemple d'en-tête


Informations qui ne sont pas affichées mais qui sont <head>
utilisées à des fins diverses <!-- Jeu de caractères universel -->
<meta charset="utf-8" />
Titre : <title>…</title>
Métadonnées : <meta /> <!-- Autres métadonnées -->
– Ex. Jeux de caractères, auteur, mots-clés, description de la <meta name="Author" content="Jérôme Darmont" />
page… <meta name="Keywords" content="Enseignement,Informatique" />
<meta name="Description" content="Exemple de page HTML" />
Note : Une balise vide peut se noter <balise></balise>
ou <balise />, au choix. <!-- Titre -->
<title>Exemple de page HTML</title>
</head>
9 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 10 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Optimisation des performances Corps du document

Préchargement DNS Éléments de structuration du document


– Ex. <link rel="dns-prefetch" href="//platform.twitter.com"> – Invisibles
– Permettent la mise en page ultérieure du document
Préchargement de lien – Permettent la génération automatique, par ex., d’une table des
– Ex. <link rel="prefetch" href="http://darmont.me/hello.html" /> matières, des figures, etc.
– Ex. <link rel="prefetch" href="http://darmont.me/picture.png" />
Éléments qui apparaissent explicitement à l’affichage
Prérendu de page – Texte
– Ex. <link rel="prerender" href="http://darmont.me/hello.html" /> – Images
– …

11 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 12 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

2
Structuration du document Titres, paragraphes, séparateurs

Contenu principal : <main> </main>


Titres (headings) : Six niveaux notés h1 à h6
Section : <section> </section> – Ex. <h1>Titre de niveau 1</h1>
Article : <article> </article>
Encadré : <aside> </aside> Paragraphes (séparés entre eux par un espace)
– Ex. <p>Ceci est un paragraphe</p>
Entête : <header> </header>
Pied de page : <footer> </footer> Séparateurs :
Menu de navigation : <nav> </nav> – Retour à la ligne (sans espace) : <br />
Boîte de dialogue : <dialog> </dialog> – Ligne horizontale : <hr />

13 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 14 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Autres blocs de texte prédéfinis Formatage de texte

Adresse Texte « appuyé » : <strong>…</strong>


– Ex. <address>5 av. P. Mendès-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 préformaté
Caractères spéciaux :
– Ex. <pre>Le formatage sera < : &lt; & : &amp;
conservé > : &gt; " : &quot;
à l'écran</pre> espace insécable : &nbsp;

15 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 16 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Imbrication des balises Liens hypertextes

<!-- Exemple --> Forme générale : <a href="URI">libellé</a>

<header><h1>Présentation du master IDSM</h1></header>


URI : Uniform Resource Identifier
<article> (anciennement URL : Uniform Resource Locator)
<p>L'<strong>Université Lumière Lyon 2</strong> et – Absolue (adresse complète)
l’<strong>Université Nationale d’Économie de Kharkiv</strong> Ex. http://www.hneu.edu.ua
proposent une formation d'excellence (<em><strong>double diplôme ftp://ftp.ciril.fr
mailto:jerome.darmont@univ-lyon2.fr
de master</strong></em>) en <em>informatique et
statistique</em>.<br /> Ces domaines se développent rapidement, – Relative (à partir du répertoire courant)
tant au niveau de la recherche que dans l'industrie, et offrent de Ex. page_suivante.html
nombreux emplois.</p> rep/page_dans_repertoire.html
</article>
– Exemple : <a href="http://www.univ-lyon2.fr">Université Lyon 2</a>
17 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 18 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

3
Ancres Images

Permettent un lien vers un endroit précis dans une Formats reconnus :


page Web
Balise : <img src="URI" alt="description" />
Définition dans une page : attribut id – Ex. <img src="lyon2-logo2014.jpg" alt="Logo Lyon 2" />
– Ex. <h1 id="menu">MENU</h1> – Ex. <img src="http://eric.univ-lyon2.fr/~jdarmont/wp-
content/uploads/2015/02/lyon2-logo2014.jpg" alt="Logo Lyon 2" />

Référence depuis la même page


Lien sur une image
– Ex. <a href="#menu">Aller au menu</a>
– Ex.
<a href="http://www.univ-lyon2.fr">
Référence depuis une autre page <img src="lyon2-logo2014.jpg" alt="ULL2" />
– Ex. <a href="page.html#menu">Retour menu</a> </a>

19 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 20 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Multimédia Figures
Sons : balise <audio> </audio> Élément de structuration (comme section, article…)
Vidéos : balise <video> </video> Balise : <figure> </figure>
Attributs communs Légende : <figcaption> </figcaption>
– src : URI du contenu Exemple :
– controls : affiche les contrôles du lecteur multimédia <figure>
– autoplay : démarrage dès que possible <img src="tim-berners-lee.jpg" alt="Photo Tim BL" />
– loop : en boucle <video src="test.ogg" controls="controls" muted="muted">
Le format .ogg n'est pas supporté.
– muted : sans son
</video>
<audio src="chord.wav" controls="controls">
Exemple
Le format .wav n'est pas supporté.
<audio src="test.mp3" controls="controls" loop="loop"> </audio>
Le format MP3 n’est pas supporté par votre navigateur. <figcaption>Tout le multimédia de HTML5</figcaption>
</audio>
21 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 22 </figure> Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Jauges Listes ordonnées et non-ordonnées

Barre de progression Listes à puces : <ul> </ul>


<progress max="100" value="75"></progress> Listes numérotées : <ol> </ol>
Apparence :
Exemple

Barre de mesure <ul>


<meter min="0" max="100" low="10" high="90" <li>1er élément</li>
optimum="50" value="75">75 %</meter> <li>2ème élément</li>
<li>3ème élément</li>
Apparence : variable selon les navigateurs </ul>

21 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 24 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

4
Listes de définitions Imbrication de listes
Exemple Exemple
<dl>
<dt>1er terme</dt> <ul>
<dd>Définition du 1er terme</dd> <li>Elément non ordonné 1
<dt>2ème terme</dt> <ol>
<dd>Définition du 2ème terme</dd> <li>Sous-élément ordonné 1.1</li>
</dl> <li>Sous-élément ordonné 1.2</li>
</ol>
Résultat à l'affichage </li>
<li>Elément non ordonné 2</li>
1er terme </ul>
Définition du 1er terme
2ème terme
Définition du 2ème terme
25 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 26 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Tableaux simples Exemple de tableau


Tableau : Ensemble de lignes elles-mêmes constituées
<table>
de cellules
<caption>Mes totaux</caption>
Définition d'un tableau : <table> </table> <tr>
<th>Jour de la semaine</th> <th>Montant</th> <th>Total</th>
Légende : <caption> </caption> </tr>
<tr>
Définition d'une ligne : <tr> </tr> <td>Lundi</td> <td>456 euros</td> <td>456 euros</td>
</tr>
Définition d'une cellule d'en-tête : <th> </th> <tr>
<td>Mardi</td> <td>200 euros </td> <td>656 euros </td>
Définition d'une cellule normale : <td> </td> </tr>
</table>
27 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 28 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Apparence du tableau exemple Tableaux à cellules recouvrantes

Mes totaux
C1 C2 L1
Jour de la semaine Montant Total
Lundi 456 euros 456 euros L12
Mardi 200 euros 656 euros
C12 L2

29 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 30 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

5
Tableaux à cellules recouvrantes Plan du cours

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


Langage HTML
Cellule sur plusieurs colonnes : attribut colspan Éléments de design Web
– Ex. <table> <tr> <td>C1</td> <td>C2</td> </tr> Feuilles de style en cascade (CSS)
<tr> <td colspan="2">C12</td> </tr> </table>
Langage de script PHP
Cellule sur plusieurs lignes : attribut rowspan
Connexion à une base de données (MySQL)
– Ex. <table> <tr> <td rowspan="2">L12</td>
<td>L1</td> </tr>
<tr> <td>L2</td> </tr> </table>

31 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 32 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Dix erreurs de base à éviter Dix erreurs de base à éviter

Fonds sombres, images de fonds chargées, couleurs Ouvrir de nouvelles fenêtres, des pop-ups, etc.
trop nombreuses
Pages lourdes à charger (contenant des images
Gadgets technologiques (animations, textes qui volumineuses, par exemple)
défilent, sons, Javascripts divers…)
Pages trop larges (scrolling latéral)
Surcharger la page de texte ou d'images :
trop d'information tue l'information Pages trop longues (scrolling vertical)

Absence d'aide à la navigation Requérir de l'utilisateur une configuration particulière


("site optimisé pour tel navigateur en telle résolution")
Liens de couleur non standard
33 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 34 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Design « Web 2.0 » * Principe fondamental : la simplicité

Qu’est-ce que le Web 2.0 ? Chaque site / chaque page a un but précis.

L’attention de l’utilisateur n’est pas infinie.


– Développement de la Web économie
Le concepteur doit aider l’utilisateur à trouver
– Interactivité accrue des sites Web (AJAX)
l’information qu’il cherche.
– Web communautaire, réseaux sociaux
Il ne faut pas noyer les informations importantes.
– Nouvelle école de design Web
Minimiser le bruit = économie, simplicité
* D’après webdesignfromscratch.com

35 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 36 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

6
Comment « faire simple » ? Exemple de simplification

pixels décoratifs
Minimiser le ratio
pixels porteurs d’information
Supprimer tout les éléments non strictement
nécessaires
Essayer des solutions alternatives pour arriver au
même résultat plus simplement
Utiliser les éléments visuel pour communiquer, jamais
pour décorer

37 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 38 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Éléments de présentation Éléments de présentation

Centrer le site dans la fenêtre du navigateur Distinguer clairement une section d’entête
(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 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Éléments de présentation Éléments de présentation

Identifier clairement les sections de la page Texte en gros caractères


– Utiliser des couleurs (mais danger de distraction de l’utilisateur) – Mise en valeur des informations importantes
– Espacer nettement les sections – Facilité de lecture (accessibilité)

Titres en gras
– Attire l’attention sur les
zones importantes du site

41 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 42 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

7
Éléments de présentation Navigation

Couleurs vives Délimitation de sections Objectifs : l’utilisateur doit savoir facilement


– Où il se trouve dans le site
Mise en valeur
– Où il peut aller
Dégradés d’éléments importants
– Quelles sont options disponibles sur la page courante
Mise en place d’une
ambiance Menu de navigation global
Textures
– Clairement séparé du contenu
(reflets, transparence…)
Ne pas attirer l’attention – Différencié en termes de couleur et de forme
ailleurs que sur le – Gros, clairement et toujours visible
Icônes contenu – Texte des liens explicite

À utiliser avec parcimonie ! Contenu : Hyperliens bien différenciés du texte normal


43 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 44 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Reponsive design Qu’est-ce que le W3C ?

W3C : World Wide Web Consortium


– Organisation internationale indépendante des
éditeurs de logiciels
– http://www.w3.org

Objectif : Développement de standards et de « bonnes


pratiques » du Web

blog.teamtreehouse.com Directeur : Tim Berners-Lee

45 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 46 46 http://eric.univ-lyon2.fr/~jdarmont/

Pourquoi utiliser les standards Pourquoi utiliser les standards


du W3C ? du W3C ?

Éviter la "balkanisation du Web" des années 90 Contrôle qualité (validation des pages Web)
Interopérabilité et portabilité (PDA, téléphones Réduction considérable du volume des documents
mobiles…)
Référencement efficace dans les moteurs de
Accessibilité aux personnes handicapées recherche
Réduction des coûts de développement
Pérennité des documents
Exploitation de la technologie XML (vers le Web
sémantique / Web 3.0) Rétrocompatibilité avec les anciens navigateurs
– Exemple : moteurs de recherche (personnalisation, suggestions,
résumé d’informations…)
47 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 48 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

8
Accessibilité Accessibilité

Prévoir des en-têtes de ligne et de colonnes dans les


26,4 % de la population française souffre d'une entrave tableaux
dans une activité quotidienne et 10 % est affectée d'un
handicap. (SVM, novembre 2008) Lier chaque champ de formulaire à une légende
Définir des raccourcis clavier
Préceptes d’accessibilité :
Prévoir une alternative HTML aux technologies
Proposer un texte alternatif aux images et aux propriétaires (ex. Flash)
contenus multimédias en général (description, Éviter l’usage des cadres (frames)
transcription…)
Prévenir des changements de langue dans le texte
Utiliser des feuilles de style Expliciter les liens (« page d’accueil » >> « cliquer ici »)
49 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 50 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Plan du cours Définition et caractéristiques


Cascading Style Sheets (CSS) :
Langage HTML Feuilles de style en cascade
Éléments de design Web Première spécification par le W3C en 1996
Feuilles de style en cascade (CSS)
Séparation du contenu et de la présentation
Langage de script PHP
Connexion à une base de données (MySQL) Définition de styles génériques pour les balises
Syntaxe différente de HTML
Possibilité de validation automatique

51 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 52 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Avantages Définitions de styles

Gestion simplifiée et globale de la présentation d'un Trois localisations possibles (+local au +global)
site
Dans une balise HTML : attribut style
Coûts de développement et de maintenance allégés – Ex. <p style="color: blue; text-align: center;">…</p>
(code plus simple)
Dans une page HTML : balise <style>
Code source allégé – Dans l'en-tête de la page Web (head) :
<style type="text/css">…</style>
Possibilité de présentations différentes selon le profil
utilisateur, la résolution écran… Dans un fichier séparé
– Appel dans l'en-tête de la page Web (head) :
Meilleure accessibilité <link rel="stylesheet" type="text/css" href="feuille_style.css" />
53 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 54 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

9
Notion de cascade Unités de taille

Imbrication des définitions : la plus locale l'emporte.


Unités absolues
– Ex. Définition de style dans un fichier externe vs. définition
dans une balise – px : pixel
⇒ la définition locale de la balise prévaut – pt : point

Imbrication des balises : le style d'une balise s'applique Unités relatives (à privilégier, cf. Responsive design)
aux balises imbriquées. – em : hauteur de ligne
– Ex. <p>…<em>…</em>…</p> – % : proportion par rapport à la taille de la fenêtre
Si un style est appliqué à <p>, il s'applique à <em>.

55 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 56 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Spécification de couleurs Écriture d'une feuille de style

Nom prédéfini : aqua, black, blue, fucshia, green, gray, Feuille de style : ensemble de règles
lime, maroon, navy, olive, purple, red, silver, teal, – Un sélecteur
white, yellow – Des propriétés
– Une valeur pour chaque propriété
Spécification RGB (Rouge Vert Bleu - RVB)
– Ex. Jaune : rgb(255, 255, 0)
Exemple
h1 { color: yellow;
Code RGB hexadécimal font-weight: bold;
– Ex. Jaune : #FFFF00 }

57 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 58 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Sélecteurs Classe de style

Sélecteur universel : tous les éléments HTML


– Ex. * { color: blue; } Sélecteur défini par l'utilisateur qui permet de dissocier
un style de balises particulières
Style d'une catégorie de balises
– Ex. .style_rouge { color: red; }
– Ex. h1 { color: #FF00FF; } .style_bleu { color: blue; }
p.parag_vert { color: green; }
Style de plusieurs catégories de balises
– Ex. h1, h2, h3, p { color: green; }
Sélecteur associé à un identifiant particulier
Style pour balises imbriquées – 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> À une partie d'un paragraphe : <span> </span>
<p class="style_rouge">Texte rouge</p>
– Ex. <p class="style_rouge">Ceci est rouge sauf
<p class="style_bleu">Texte bleu</p>
<span class="style_bleu">ce qui est bleu</span>
<p class="parag_vert">Texte vert</p>
</p>

Application à un ensemble d'éléments : <div> </div> À un élément identifié :


– Ex. <div class="style_bleu">
– Ex. <div id="titre"> … </div>
<h1>…</h1>
<p id="titre"> … </p>
<p>…</p>
<p>…</p>
</div>
61 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 62 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Propriétés de couleur Propriétés de typographie

font-family font-family: times;


color color: black; font-family: arial, verdana;
color: #000000;
font-size font-size: 1.5em;
background-color background-color: white;
background-color: #FFFFFF; font-style font-style: italic;
background-image background-image: url("URL");
font-weight font-weight: bold;
background-repeat background-repeat: no-repeat; font-weight: bolder;

background-position background-position: center; text-decoration text-decoration: underline;


text-decoration: line-through;

63 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 64 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Propriétés de texte Propriétés de boîte englobante


Boîte
Page Web
text-align text-align: left; margin-left width
text-align: right; Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
padding-top
text-align: center; bla bla bla bla bla bla bla bla bla bla bla
Tatabla blatata
tata bla bla
tatablatata
bla
text-align: justify; bla bla bla bla bla bla bla bla bla bla bla bla bla
tata tata tatablatata
bla bla
tatabla
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 bla bla bla bla bla
tatabla blatata
tata blatata
bla bla
tatabla
text-indent text-indent: 10pt; bla bla bla bla bla bla bla bla bla bla bla
tatabla blatata
tata blatata…
bla bla bla
text-indent: 15px; bla bla bla bla bla bla bla bla bla blapadding-left
bla bla bla bla bla bla bla
text-indent: 5%; 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
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…
65 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 66 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

11
Propriétés de boîte englobante Propriétés d'hyperlien
width width: 80pt; Hyperliens
height height: 25%; – Ex. a { color: blue; }
padding padding: 5px;
-left, -right, -top, -bottom padding-bottom: 10px;
Hyperliens visités
Boîte
– Ex. a:visited { color: purple; }
margin margin: 10px;
centrée
-left, -right, -top, -bottom margin-left: 10%; Hyperliens survolés (avec le pointeur de souris)
margin-left: auto; margin-right: auto;
– Ex. a:hover { color: white; background-color: blue; }
border border: 2px solid #FF00FF;
-width, -style, -color border-style: dotted; Coins Hyperliens activés
border-radius: 15px; ronds – Ex. a:active { color: purple; }
overflow overflow: auto;
67 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 68 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Propriétés de liste Propriétés de tableau


Balise table : border, width,
Listes non-ordonnées border-collapse: collapse…
– list-style list-style: disc;
list-style: circle; Balise caption: caption-side: top;
list-style: square; caption-side: bottom;
– list-style-image list-style-image: url("URL");
Balises tr: height
Listes ordonnées Balises td et th : border, width…
– list-style list-style: decimal; et vertical-align: top;
list-style: upper-roman; vertical-align: middle;
list-style: lower-alpha; vertical-align: bottom;

69 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 70 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Exemple de style de tableau Exemple de style de tableau

Style 1 Style 2 HTML


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

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

C3 C4 C3 C4 Style 2 (CSS)
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 <div class="menu_jaune">
<p>Menu</p>
</div>
100 pixels <div>
<!-- Contenu de la page -->
</div>

73 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 74 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Conteneur
(style .page)
Positionnement flottant 100 % Positionnement flottant
Exemple 2 : pagination en trois colonnes Exemple 2 :

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


.colonne { float: left; width: 33%; }
Colonne 1 Colonne 2 Colonne 3

(style .colonne) (style .colonne) (style .colonne)


HTML <div class="page"> <!-- Conteneur -->
33 % 33 % 33 % <div class="colonne"> </div>
<div class="colonne"> </div>
<div class="colonne"> </div>
</div>

75 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 76 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Positionnement absolu Positionnement absolu


1em

Bla bla sur fond vert… 1em CSS .boite_verte { position: relative;
Idem sur fond jaune
Bla bla sur fond vert… background-color: #00FF00;
Bla bla sur fond vert… width: 15em; }

15em .boite_jaune { position: absolue;


top: 1em;
HTML <div class="boite_verte"> right: 1em;
<p>Bla bla sur fond vert…</p> background-color: #FFFF00; }
<div class="boite_jaune">
<p>Idem sur fond jaune</p>
</div>
</div>
77 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 78 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

13
Exemple de mise en page : Objectif Exemple de mise en page : HTML

<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>
<main>
79 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 80 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

Exemple de mise en page : CSS Responsive design en pratique


*{ nav {
font-family: arial; float: left; Grilles fluides : utilisation des unités relatives
} width: 200px;
body { background-color: red;
background-color: silver; padding: 1em;
} border-radius: 15px;
main { }
width: 1000px; section {
margin-left: auto; float: left;
margin-right: auto; width: 750px;
background-color: white; background-color: lime;
padding: 1em; margin-left: 1em;
} border-radius: 15px;
header { }
background-color: yellow; article {
text-align: center; background-color: aqua;
padding: 1em; margin: 1em;
}
}
border-radius: 15px;
footer {
– Sidebar : 300px / 960px = 31.25%
background-color: fuchsia;
#conteneur {
width: 100%; text-align: center;
– Main Content : 640px / 960px = 66.67%
padding: 1em;
}
margin-top: 1em;
border-radius: 15px;
– Margin : 20px / 960px = 2.08%
81 Programmation Web } http://eric.univ-lyon2.fr/~jdarmont/ 82 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

Responsive design en pratique Plan du cours

Images fluides
Langage HTML
– Taille variable en fonction de la grille fluide
– CSS Éléments de design Web
img { max-width: 100%; } Feuilles de style en cascade (CSS)
Langage de script PHP
Requêtes de média
– Application de style conditionnelle
Connexion à une base de données (MySQL)
– CSS
@media screen and (min-width: 300px) { /* styles pour mobiles */ }
@media screen and (min-width: 600px) { /* styles pour tablettes */ }
@media screen and (min-width: 900px) { /* styles pour ordis */ }
83 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 84 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

14
Généralités Généralités
PHP : PHP Hypertext Preprocessor Syntaxe du langage PHP proche de celles de C, Perl
Langage de script permettant d'insérer de la ou Java
programmation dans des pages Web
⇒ Pages Web dynamiques Support d'un grand nombre de bases de données
Versions : Support de services internet (IMAP, POP3, NNTP,
– 1994 : Conception par Rasmus Lerdorf HTTP)
– 1995 : Première version publique
– 1995 : PHP/FI Gratuit, fonctionne sous Unix et Windows
– 1997 : PHP 3
– 2000 : PHP 4
– 2004 : PHP 5
85 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 86 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Généralités Syntaxe de base

PHP : Langage de script "serveur" comme ASP Passage du HTML à PHP (échappement) : <script
(≠ Javascript, langage de script "client") language="php"> </script> ou <?php ?>
Script exécuté sur le serveur – Ex. <?php echo "Bonjour"; ?>
<html>
<body> Séparateurs d'instructions : ;
<?php echo "Bonjour"; ?>
</html>
</body>
Commentaires
Page web avec script Serveur Web Client
– Ex. // Toute une ligne (façon C++)
<html> # Toute une ligne (façon Shell Unix)
<body>
Bonjour
/* Plusieurs
</html> lignes (façon C) */
</body>

Page web sans script


87 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 88 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Variables et types Variables et types


Variables : préfixées par le caractère $ Tableaux : scalaires ou associatifs, création par
PHP ne nécessite pas de déclaration explicite du type assignation des valeurs
de variable ( ). – Ex. $ts[0] = "Chaîne 0"; // Indiçage à partir de 0
$ts[1] = "Chaîne 1";
Types de données : Ex. d'affectation $ta["Dupont"] = 30;
– Nombres entiers : int, integer $i = 1;
– Nombres réels : real, double, float $pi=3.14; Fonctions associées :
– Chaînes de caractères : string $ch="oui"; – Initialisation :
Ex. $notes_s = array(10, 12.5, 15, 8);
Conversion de type : "cast" comme en C $notes_a = array("Valeriia" => 16, "Vadim" => 12);
– Ex. $ipi = (int) $pi; // $ipi est égale à 3
– Nombre d’éléments :
Ex. $n = count($notes_s)
89 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 90 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

15
Variables et types Constantes

Tableaux à plusieurs dimensions : possibilité de Variables d'environnement


mélanger indices scalaires et associatifs – Ex. $_SERVER["PHP_SELF"]
$_SERVER["SERVER_NAME"]
$_SERVER["HTTP_REFERER"]
– Ex. $matrice[0][0] = 2; $_SERVER["REMOTE_ADDR"]
$msa["Dupont"][0] = 30;

Constantes définies par l'utilisateur


$matrice2 = array( 1 0 0
array(1, 0, 0),   – Ex. define("maChaine", "Valeur de maChaine");
array(0, 1, 0),
array(0, 0, 1));
 0 1 0 define("PI", 3.14159265);
echo "<p>maChaine=" . maChaine . "<br />";
0 0 1
  echo "PI=" . PI . "</p>";

91 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 92 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Opérateurs Opérateurs

Opérateurs d'affectation Exemples Concaténation de chaînes de caractères : .


– Affectation simple : $a = 2; – Ex. $ch1 = $ch2 . $ch3;
– Affectation multiple : $a = $b = 2; $ch1 .= "<br />";
– Affectation + opération : $a += 2;
– Pré/post incrémentation/décrémentation : Caractères spéciaux dans les chaînes
++$a; --$a; (échappement)
$a++; $a--;
– Antislash : \\
– Affectation conditionnelle : $max=($a>$b)?$a:$b;
– Dollar : \$
– Guillemets : \"
Opérateurs arithmétiques : + - * / % (modulo)

93 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 94 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Opérateurs Affichage
Opérateurs logiques Procédures prédéfinies
– ET : and ou && – Ex. echo "Bonjour !";
– OU : or ou || – Ex. print("Bonjour !");
– OU exclusif : xor – Ces deux procédures sont le seul moyen d'afficher quelque
– NON : ! chose dans le document HTML final.
– Affichage de tableau : print_r($my_array);
Opérateurs de comparaison
– Égalité/Différence : == != Formatage : Utilisation des balises HTML
– Inférieur/Supérieur : < > – Ex. echo "<h1>TITRE</h1>";
– Inférieur ou égal/Supérieur ou égal : <= >=
Saut de ligne dans le code source
– Ex. echo "<h1>TITRE</h1>\n";
95 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 96 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

16
Affichage du contenu de variables Structures de contrôle

Utilisation de l'opérateur de concaténation


Test : if (expression) instructions
– Ex. echo "PI = " . $pi . "<br />";
[elseif (expression) instructions]
[else instructions]
Directement dans une chaîne
– Ex. echo "PI = $pi<br />";
– Ex. if ($a>$b) echo "A > B";

Résultat de fonction : concaténation obligatoire if ($a>$b) { // Plusieurs instructions


– Ex. echo "Carré de PI = " . carre($pi); echo "A > B";
$b = $a;
}

97 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 98 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Structures de contrôle Structures de contrôle


Sélection : switch(variable) {cas}
if ($a>$b) {
echo "A > B"; – Ex. switch($i) {
} else { case 0: echo "i=0"; break;
echo "A <= B"; case 1: echo "i=1"; break;
case 2: echo "i=2"; break;
} }

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


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

99 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 100 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Structures de contrôle Structures de contrôle

Boucle "tant que" : while(expr) {instr} Boucle "pour tout élément" de tableau scalaire
– Ex. $i=1; foreach (tableau as valeur) instructions
while ($i<=10) { echo $i++;
}
– Ex. $tab[0]="Rouge";
Boucle "répéter tant que" : do {instr} while(expr) $tab[1]="Vert";
– Ex. $i=1; $tab[2]="Bleu";
do { echo $i++; foreach ($tab as $val) {
} while ($i<=10); echo "Valeur courante : $val<br />";
}
Boucle "pour" : for (expr1; expr2; expr3) {instr}
– Ex. for ($i=1; $i<=10; $i++) { echo $i;
}
101 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 102 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

17
Structures de contrôle Structures de contrôle

Boucle "pour tout élément" de tableau associatif Inclusion de fichiers dans une page
foreach (tableau as clé => valeur) instructions – Fonction require() : Provoque une erreur fatale si le fichier
requis manque (interruption du script)
– Fonction include() : Provoque seulement un avertissement
– Ex. $tab["Rouge"]="#FF0000"; (warning) si le fichier requis manque
$tab["Vert"]="#00FF00"; – Évaluation des fichiers inclus en mode HTML
$tab["Bleu"]="#0000FF";
foreach ($tab as $cle => $val) {
echo "Code de $cle : $val<br />";
Exemples (paramètre des fonctions : une URI)
} – require("mes_fonctions.inc.php");
– include("une_page_web.html");
– include('http://serveur.fr/pg.html');

103 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 104 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Fonctions Fonctions
Squelette de définition de fonction Passage de paramètres par référence (paramètres passés
function nom_fn ($p1, $p2, …, $pn) { par valeur par défaut) : &
// Code de la fonction – Ex. function alaligne(&$chaine) {
return val_retour; // Optionnel $chaine .= "<br />";
} }
$ch="Coucou !";
alaligne($ch); // <br /> ajouté à la fin
Exemple
function mon_max ($n1, $n2) { Paramètres par défaut
return ($n1>$n2) ? $n1 : $n2;
– Ex. function cafe($type="expresso") {
} return "Je fais un $type<br />";
}
echo cafe(); // Je fais un expresso
Une fonction doit être définie avant d'être appelée. echo cafe("capucino"); // Je fais un capucino
105 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 106 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Visibilité des variables Séparation de PHP et HTML

Variables normales : visibles uniquement à l'intérieur Séparation des tâches de programmation


de la fonction où elles sont définies et de design Web
Maintenance facilitée
Variables globales
– Lecture plus aisée des pages HTML + PHP
– Ex. function exemple_global {
global $vglob; // Visible hors de la fonction – Modification facile du code sans affecter la mise en page et
– vice-versa
Réutilisation de code
Variables statiques
– Ex. function exemple_static { ⇒ Utilisation des fonctions include() et require()
static $vstat; // Conserve sa valeur entre – Ex. Définition dans des fichiers séparés d'en-têtes et de pieds
deux appels à la fonction de page communs à plusieurs pages

107 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 108 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

18
Plan du cours Principe
Imbrication de requêtes SQL dans du code PHP +
Langage HTML formulaires HTML pour les mises à jour
Éléments de design Web
Feuilles de style en cascade (CSS) SGBD utilisé : MySQL
– Serveur de BD SQL multi-utilisateurs rapide
Langage de script PHP – Développé depuis 1995 (version actuelle : MySQL 5)
Connexion à une base de données (MySQL) – Disponible sous licence GPL ou commerciale

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


interface d’accès à une base de données
(divers SGBD supportés dont MySQL ; nécessite PHP 5.1+)

109 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 110 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Éléments de langage SQL Éléments de langage SQL

Base de données : ensemble de tables Types de données principaux


– Nombre entier : INT
Table : ensemble d'attributs et leurs valeurs – Nombre réel : FLOAT
– Ex. ETUDIANT (numetu, nom, prenom, datenaiss, note) – Chaîne de caractères : VARCHAR(taille)
– Date : DATE
Interrogation simple
SELECT liste_attributs FROM table
WHERE condition Clé primaire : identifie de façon unique les
– Ex. SELECT nom, prenom FROM etudiant WHERE note>=10 n-uplets (lignes) de la table
– Mot-clé PRIMARY KEY après le type
Création de table
CREATE TABLE nom_table (liste(champ, type))
111 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 112 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Éléments de langage SQL Éléments de langage SQL

Insertion d'un n-uplet


INSERT INTO nom_table VALUES (liste_valeurs)
Exemple de création de table – Ex. INSERT INTO etudiant VALUES (123, 'Darmont', 'Jérôme', '15-01-1972', 15.5)

CREATE TABLE etudiant ( numetu INT PRIMARY KEY, Suppression d'un n-uplet
nom VARCHAR(50), DELETE FROM nom_table WHERE condition
prenom VARCHAR(100), – Ex. DELETE FROM etudiant WHERE numetu = 123
datenaiss DATE,
note FLOAT ) Modification d'un n-uplet
UPDATE nom_table SET attribut = valeur WHERE condition
– Ex. UPDATE etudiant SET note = 20 WHERE numetu = 123

113 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 114 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

19
Éléments de langage SQL PDO : Connexion à une BD

Requête de jointure (multi-table) Connexion


$idconn = new PDO(id_serveur_bd, login_mysql, mot_de_passe);
SELECT liste_attributs – id_serveur = pilote:host=serveur;dbname=nom_bd
FROM table1, table2, … tableN – Ex.
WHERE condition_jointure_t1t2 $c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");

AND condition_jointure_tN-1tN
Gestion des erreurs
try { instructions } catch () { traitement_des_erreurs }
– Ex. SELECT * – Ex. try {
// Connexion
FROM etudiant, diplome } catch (PDOException $erreur) {
WHERE etudiant.num_dipl = diplome.num_dipl echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}

115 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 116 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

PDO : Exécution d’une requête PDO : Exemple pratique


try {
Requête d’interrogation // Connexion
$idconn->query(requête_SQL) $c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
// Requête d’interrogation
– Ex. $c->query("select nom, prenom from etudiant");
$q = "select nom, prenom from etudiant";
$res = $c->query($q);
Accès au résultat de la requête (ligne par ligne) echo "<ul>\n";
– Ex. foreach($c->query("select nom, prenom from etudiant") as $l) foreach($res as $l)
echo "<li>". $l["nom"] . " " . $l["prenom"] . "</li>\n";
echo $l["nom"] . " " . $l["prenom"] . "<br />\n";
echo "</ul>\n";
echo "<p>" . $res->rowCount() . " résultat(s)</p>\n";
Requête de mise à jour // Requête de mise à jour
$idconn->exec(requête_SQL) $res = $c->exec("update etudiant set note = note + 1") ;
echo "<p>$res ligne(s) modifiée(s)</p>\n";
– Ex. $c->exec("update etudiant set note = note + 1"); } catch (PDOException $erreur) { // Gestion des erreurs
– Retourne le nombre de n-uplets mis à jour echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}
117 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 118 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Conversion de jeux de caractères Formulaires HTML


Encodage de caractères Europe de l’Ouest : iso-8859-1 Formulaires : permettent la saisie de données dans une
(sur 2 octets) page Web
Encodage de caractères international : utf-8
(sur 4 octets, plus récent) Définition : <form> </form>
– Attribut action : URI de la page PHP à exécuter après validation
Si un texte contenu dans une BD est à un format et que du formulaire
le serveur Web utilise l’autre : problème (accents…) – Attribut method : méthode de transmission des données (valeurs
– Affichage de type è : caractères utf-8 affichés en iso-8859-1 possibles : get et post)
– Attribut enctype : type d'encodage (par défaut application/x-
⇒ $idconn->exec("set names latin1"); www-form-urlencoded ou
– Affichage de type ? : caractères iso-8859-1 affichés en utf-8 multipart/form-data pour envoyer des fichiers)
⇒ $idconn->exec("set names utf8"); Une seule fois, après la
commande de connexion
119 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 120 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

20
Formulaires HTML Formulaires HTML

Différence entre les méthodes get et post Saisie dans un formulaire : <input />
– get : apparition des valeurs saisies en paramètres de l'URI de – Attribut obligatoire : name, nom de la variable
la page action
Champ texte : <input type="text" size="" />
– post : . valeurs saisies cachées
. quantité de données possible plus importante – Ex. <input type="text" name="nom" size="30" />

Exemple Suggestion de valeurs : <datalist>…</datalist>


<form action="ajout_etu.php" method="post">…</form> – Ex. <datalist id="prop_noms">
Structure d'un formulaire : ensemble de zones de <option value="Dupond">
<option value="Durand">
saisie (groupes de champs)
<option value="Martin">
Groupe de champs : <fieldset> </fieldset> </datalist>
<input type="text" name="nom" list="prop_noms" />
121 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 122 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Formulaires HTML Formulaires HTML

Vérification syntaxique : expressions régulières Bouton radio : <input type="radio" value="" />
– Ex. <input type="email" pattern="[^ @]*@[^ @]*" /> – Ex.
Homme : <input type="radio" name="genre" value="H" />
Champ mot de passe : <input type="password" /> Femme : <input type="radio" name="genre" value="F" />
– Ex. <input type="password" name="passwd" size="8" />
Case à cocher : <input type="checkbox" />
Champ caché : <input type="hidden" value="" />
– Ex.
– Ex. <input type="hidden" name="numetu" value="10" /> choix 1 : <input type="checkbox" name="choix1" />
choix 2 : <input type ="checkbox" name="choix2" />
Fichier : <input type="file" />
– Ex. <input type="file" name="Fichier_téléchargé" />

123 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 124 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Formulaires HTML Formulaires HTML


Boutons de commande
– Attribut type = submit | reset : validation ou réinitialisation du Liste déroulante : <select> </select>
formulaire – Attribut name : nom de la variable choix
– Attribut value : légende du bouton – Balise <option> </option> : élément de la liste
– Ex. <input type="submit" name="Valider" value="Valider" /> – Attribut selected de <option> : choix par défaut
<input type="reset" name="Annuler" value="Annuler" />
– Ex. <select name="annee">
<option>Licence</option>
Zone de texte long : <textarea> </textarea> <option selected="selected">M1</option>
– Attribut name : nom de la zone de texte <option>M2 professionnel</option>
– Attributs rows et cols : nombre de lignes / colonnes <option>M2 recherche</option>
– Ex. <textarea name="texte" rows="10" cols="60"> </select>
</textarea>
125 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 126 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

21
Formulaires HTML Formulaires HTML

Options d'accessibilité (navigation alternative) <!-- Exemple complet -->


<form action="ajout_etu.php" method="post"> <fieldset>
Description de champ : <label> </label> <p> Nom : <input type="text" name="nom" size="50" /> </p>
– Ex. <label for="id_nom"> <p> Âge : <input type="text" name="age" size="2" /> </p>
Nom : <input type="text" id="id_nom" name="nom" /> <p> Année : <select name="annee">
</label> <option>Licence</option>
<option selected="selected">M1</option>
Légende de zone de saisie : <legend> </legend> <option>M2</option>
– Ex. <fieldset> </select> </p>
<legend>État civil de l'étudiant</legend> <input type="hidden" name="action" value="ajout" />
… <p> <input type="reset" value="Annuler" />
</fieldset> <input type="submit" value="Valider" /> </p>
</fieldset> </form>
127 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 128 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Exploitation des données Mise à jour d'une base de données


d'un formulaire avec PHP avec PHP
Dans la page cible (Ex. ajout_etu.php) <?php // Suite de l'exemple : document ajout_etu.php
– Tableaux associatifs $_GET[] et $_POST[] $c = new PDO("mysql:host=localhost;dbname=darmont",
– Permettent d'accéder aux valeurs transmises par les "darmont", "x");
méthodes get et post des formulaires, respectivement

Exemple $nom = $_POST["nom"];


<?php $age = $_POST["age"];
echo "<p>L'étudiant " . $_POST["nom"];
echo " (" . $_POST["age"] . " ans)"; $annee = $_POST["annee"];
echo " est en " . $_POST["annee"] . ".</p>";
?>
$requete = "insert into etudiant values ('$nom', $age, '$annee')";
Cas particuliers : case à cocher (valeur "on" si cochée) $resultat = $c->exec($requete);
et fichiers if ($resultat) echo "<p>Insertion effectuée</p>";
?>
129 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 130 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Téléchargement de fichier Téléchargement de fichier

Étape 1 : formulaire dans une page HTML Variables disponibles dans la page cible
– Ex. – $_FILES["monfichier"]["name"] : nom original du fichier
<form action="telechargement.php" method="post" – $_FILES["monfichier"]["size"] : taille du fichier
enctype="multipart/form-data" /> – $_FILES["monfichier"]["tmp_name"] : nom temporaire du fichier sur la
<fieldset> machine serveur
<input type="hidden" name="MAX_FILE_SIZE" value="50000" />
Fichier : <input name="monfichier" type="file" />
<input type="submit" value="Télécharger" /> Exemple de code dans la page telechargement.php
</fieldset> $destination = "/home/jd/public_html/" . $_FILES["monfichier"]["name"];
</form> $res = move_uploaded_file($_FILES["monfichier"]["tmp_name"],
$destination);
if ($res) echo "<p>Fichier téléchargé avec succès</p>";
Étape 2 : traitement à l'aide de PHP else echo "<p>Erreur : " . $_FILES["monfichier"]["error"] . "</p>";

131 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 132 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

22
Transmission de variables Transmission de variables
d'une page PHP à une autre d'une page PHP à une autre

<!-- courante.php -->


Exemple : On dispose du nom et de l'age du visiteur de
la page courante.php dans les variables $nom et $age. <!-- Méthode 1 -->
On souhaite les transmettre à la page suivante.php. <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; ?>" />
Méthode 1 : Utiliser les champs cachés d'un formulaire <input type="submit" value="Envoyer" />
</fieldset> </form>

Méthode 2 : Ajouter des paramètres à l'URI de la page <!-- Méthode 2 -->


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

133 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 134 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Transmission de variables
d'une page PHP à une autre Sessions

<?php // suivante.php
Objectif : Stockage de variables lors de la navigation
// Méthode 1 sur plusieurs pages Web successives
$nom = $_POST["nom"];
$age = $_POST["age"];
Utilisations courantes :
– Identification des visiteurs d'un site par login et mot de passe
// Méthode 2
stockés dans une base de données
$nom = $_GET["nom"];
– Gestion du profil des utilisateurs
$age = $_GET["age"];
– …
?>

135 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 136 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Sessions Sessions
<!-- Exemple --> <?php
<?php session_start(); ?> session_start();
<!DOCTYPE html> // Enregistre la valeur de $nom dans la variable de session s_nom
<html> $_SESSION["s_nom"] = $_POST["nom"];
<head> <title>Session 1</title> </head> ?>
<body> <!DOCTYPE html>
<form action="session2.php" method="post« > <html>
<fieldset> <head> <title>Session 2</title> </head>
Votre nom : <input type="text" name="nom" /> <body>
<input type="submit" value="Valider" /> <p>Identifiant de session : <?php echo session_id(); ?><br />
</fieldset> Nom de session : <?php echo session_name(); ?></p>
</form> <p>Bienvenue sur ma page Web, <?php echo $_SESSION["s_nom"]; ?>.<br />
</body> <a href="session3.php">Page suivante</a>.</p>
</html> </body>
</html>
137 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 138 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

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

139 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 140 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Sessions Plan du cours


<?php
session_start(); Langage HTML
session_destroy(); // Destruction de la session
?> Éléments de design Web
<!DOCTYPE html>
<html>
Feuilles de style en cascade (CSS)
<head> <title>Session 5</title> </head> Langage de script PHP
<body>
<p>Session terminée.</p> Connexion à une base de données (MySQL)
</body>
</html>

141 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 142 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

24