Scribd
Importer
26 vues25 pages

Introduction à la Programmation Web

Le document présente le cours de Programmation Web pour le Master 1 IDSM-Kharkiv, incluant des éléments sur HTML, CSS, PHP et la connexion à des bases de données. Il aborde l'historique et l'évolution de HTML, les règles d'écriture XHTML, ainsi que la structuration et le formatage des documents Web. Des exemples pratiques sont fournis pour illustrer les concepts, tels que les balises, les liens hypertextes, et les tableaux.

Transféré par

dylanelokossousoton
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
26 vues25 pages

Introduction à la Programmation Web

Le document présente le cours de Programmation Web pour le Master 1 IDSM-Kharkiv, incluant des éléments sur HTML, CSS, PHP et la connexion à des bases de données. Il aborde l'historique et l'évolution de HTML, les règles d'écriture XHTML, ainsi que la structuration et le formatage des documents Web. Des exemples pratiques sont fournis pour illustrer les concepts, tels que les balises, les liens hypertextes, et les tableaux.

Transféré par

dylanelokossousoton
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Actualité du cours

Programmation Web
[Link]
Master 1 IDSM-Kharkiv
Année 2016-2017
Jérôme Darmont
[Link]

[Link] hashtag #webidsm


[Link]
2 Programmation Web [Link]

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 [Link] 4 Programmation Web [Link]

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="[Link]
HTML 3.2
XHTML 2
HTML 4 Nom Valeur
Évolution de XHTML 1
Standards W3C Abandonnée en 2009

5 Programmation Web [Link] 6 Programmation Web [Link]

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 [Link] 8 Programmation Web [Link]

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 [Link] 10 Programmation Web [Link]

Optimisation des performances Corps du document

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


– Ex. <link rel="dns-prefetch" href="//[Link]"> – 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="[Link] /> matières, des figures, etc.
– Ex. <link rel="prefetch" href="[Link] />
Éléments qui apparaissent explicitement à l’affichage
Prérendu de page – Texte
– Ex. <link rel="prerender" href="[Link] /> – Images
– …

11 Programmation Web [Link] 12 Programmation Web [Link]

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 [Link] 14 Programmation Web [Link]

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 [Link] 16 Programmation Web [Link]

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. [Link]
proposent une formation d'excellence (<em><strong>double diplôme [Link]
[Link]
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="[Link] Lyon 2</a>
17 Programmation Web [Link] 18 Programmation Web [Link]

3
Ancres Images

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


page Web
Balise : <img src="URI" alt="description" title="title" />
Définition dans une page : attribut id – Ex. <img src="[Link]" alt="Logo UL2" title="Logo UL2" />
– Ex. <h1 id="menu">MENU</h1> – Ex. <img src="[Link]
content/uploads/2015/02/[Link]" 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="[Link]
Référence depuis une autre page <img src="[Link]" alt="ULL2" />
– Ex. <a href="[Link]#menu">Retour menu</a> </a>

19 Programmation Web [Link] 20 Programmation Web [Link]

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="[Link]" alt="Photo Tim BL" />
– loop : en boucle <video src="[Link]" controls="controls" muted="muted">
Le format .ogg n'est pas supporté.
– muted : sans son
</video>
<audio src="[Link]" 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>
21 </audio> 22 </figure>
Programmation Web [Link] Programmation Web [Link]

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 [Link] 24 Programmation Web [Link]

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 [Link] 26 Programmation Web [Link]

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 [Link] 28 Programmation Web [Link]

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 [Link] 30 Programmation Web [Link]

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 [Link] 32 Programmation Web [Link]

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 [Link] 34 Programmation Web [Link]

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 [Link]

35 Programmation Web [Link] 36 Programmation Web [Link]

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 [Link] 38 Programmation Web [Link]

É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 [Link] 40 Programmation Web [Link]

É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 [Link] 42 Programmation Web [Link]

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 [Link] 44 Programmation Web [Link]

Reponsive design Qu’est-ce que le W3C ?

W3C : World Wide Web Consortium


– Organisation internationale indépendante des
éditeurs de logiciels
– [Link]

Objectif : Développement de standards et de « bonnes


pratiques » du Web

[Link] Directeur : Tim Berners-Lee

45 Programmation Web [Link] 46 46 [Link]

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 [Link] 48 Programmation Web [Link]

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 [Link] 50 Programmation Web [Link]

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 [Link] 52 Programmation Web [Link]

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 [Link] 54 Programmation Web [Link]

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 [Link] 56 Programmation Web [Link]

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 [Link] 58 Programmation Web [Link]

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 [Link] 60 Programmation Web [Link]

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 [Link] 62 Programmation Web [Link]

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 [Link] 64 Programmation Web [Link]

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
tatabla bla
tata
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 [Link] 66 Programmation Web [Link]

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;
Hyperliens visités
-left, -right, -top, -bottom padding-bottom: 10px;
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 [Link] 68 Programmation Web [Link]

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 [Link] 70 Programmation Web [Link]

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 [Link] 72 Programmation Web [Link]

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 [Link] 74 Programmation Web [Link]

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 [Link] 76 Programmation Web [Link]

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 [Link] 78 Programmation Web [Link]

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="[Link] 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 [Link] 80 Programmation Web [Link]

[Link]

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 } [Link] 82 Programmation Web [Link]

[Link] [Link]

Responsive design en pratique Grilles

Images fluides Remplacent les mises en forme classiques


– Taille variable en fonction de la grille fluide
– CSS Définition d’une grille
img { max-width: 100%; }
.conteneur {
Requêtes de média display: grid; /* conteneur grille */
– Application de style conditionnelle grid-template-columns: repeat(4, 1fr); /* 4 cols, même taille */
grid-gap: 1rem; /* gouttière verticale et horizontale */
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 [Link] 84 Programmation Web [Link]

14
[Link] [Link]

Grilles Grilles

Grille adaptative
Éléments à taille multiple /* Tablette : 2 colonnes */
@media (max-width: 640px) {
@media (min-width: 481px) { .container {
.col-span { grid-template-columns: repeat(2, 1fr);
grid-column: span 2; /* double taille en largeur */ }
} }
.row-span { /* Téléphone mobile : 1 colonne */
grid-row: span 2 /* double taille en hauteur */ @media (max-width: 480px) {
} .container {
} grid-template-columns: 1fr;
}
}
85 Programmation Web [Link] 86 Programmation Web [Link]

Plan du cours Généralités

PHP : PHP Hypertext Preprocessor


Langage HTML Langage de script permettant d'insérer de la
Éléments de design Web programmation dans des pages Web
Feuilles de style en cascade (CSS) ⇒ Pages Web dynamiques
Langage de script PHP Versions :
– 1994 : Conception par Rasmus Lerdorf
Connexion à une base de données (MySQL) – 1995 : Première version publique
– 1995 : PHP/FI
– 1997 : PHP 3
– 2000 : PHP 4
– 2004 : PHP 5
87 Programmation Web [Link] 88 Programmation Web [Link]

Généralités Généralités

Syntaxe du langage PHP proche de celles de C, Perl PHP : Langage de script "serveur" comme ASP
ou Java (≠ Javascript, langage de script "client")
Script exécuté sur le serveur
Support d'un grand nombre de bases de données
<html>
<body>
Support de services internet (IMAP, POP3, NNTP, <?php echo "Bonjour"; ?>
</html>
HTTP) </body>

Page web avec script Serveur Web Client

Gratuit, fonctionne sous Unix et Windows <html>


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

Page web sans script


89 Programmation Web [Link] 90 Programmation Web [Link]

15
Syntaxe de base Variables et types

Passage du HTML à PHP (échappement) : <script Variables : préfixées par le caractère $


language="php"> </script> ou <?php ?> PHP ne nécessite pas de déclaration explicite du type
– Ex. <?php echo "Bonjour"; ?> de variable ( ).

Séparateurs d'instructions : ; Types de données : Ex. d'affectation


– Nombres entiers : int, integer $i = 1;
Commentaires – Nombres réels : real, double, float $pi=3.14;
– Ex. // Toute une ligne (façon C++) – Chaînes de caractères : string $ch="oui";
# Toute une ligne (façon Shell Unix)
/* Plusieurs Conversion de type : "cast" comme en C
lignes (façon C) */ – Ex. $ipi = (int) $pi; // $ipi est égale à 3

91 Programmation Web [Link] 92 Programmation Web [Link]

Variables et types Variables et types

Tableaux : scalaires ou associatifs, création par Tableaux à plusieurs dimensions : possibilité de


assignation des valeurs mélanger indices scalaires et associatifs
– Ex. $ts[0] = "Chaîne 0"; // Indiçage à partir de 0
$ts[1] = "Chaîne 1"; – Ex. $matrice[0][0] = 2;
$ta["Dupont"] = 30; $msa["Dupont"][0] = 30;

Fonctions associées : $matrice2 = array( 1 0 0


– Initialisation : array(1, 0, 0),  
Ex. $notes_s = array(10, 12.5, 15, 8); array(0, 1, 0),
array(0, 0, 1));
 0 1 0
$notes_a = array("Valeriia" => 16, "Vadim" => 12);
0 0 1
– Nombre d’éléments :  
Ex. $n = count($notes_s)
93 Programmation Web [Link] 94 Programmation Web [Link]

Constantes Opérateurs

Variables d'environnement Opérateurs d'affectation Exemples


– Ex. $_SERVER["PHP_SELF"] – Affectation simple : $a = 2;
$_SERVER["SERVER_NAME"] – Affectation multiple : $a = $b = 2;
$_SERVER["HTTP_REFERER"]
$_SERVER["REMOTE_ADDR"] – Affectation + opération : $a += 2;
– Pré/post incrémentation/décrémentation :
++$a; --$a;
Constantes définies par l'utilisateur $a++; $a--;
– Ex. define("maChaine", "Valeur de maChaine"); – Affectation conditionnelle : $max=($a>$b)?$a:$b;
define("PI", 3.14159265);
echo "<p>maChaine=" . maChaine . "<br />";
echo "PI=" . PI . "</p>"; Opérateurs arithmétiques : + - * / % (modulo)

95 Programmation Web [Link] 96 Programmation Web [Link]

16
Opérateurs Opérateurs

Concaténation de chaînes de caractères : . Opérateurs logiques


– Ex. $ch1 = $ch2 . $ch3; – ET : and ou &&
$ch1 .= "<br />"; – OU : or ou ||
– OU exclusif : xor
– NON : !
Caractères spéciaux dans les chaînes
(échappement)
Opérateurs de comparaison
– Antislash : \\
– Égalité/Différence : == !=
– Dollar : \$
– Inférieur/Supérieur : < >
– Guillemets : \" – Inférieur ou égal/Supérieur ou égal : <= >=

97 Programmation Web [Link] 98 Programmation Web [Link]

Affichage Affichage du contenu de variables

Procédures prédéfinies Utilisation de l'opérateur de concaténation


– Ex. echo "Bonjour !"; – Ex. echo "PI = " . $pi . "<br />";
– Ex. print("Bonjour !");
– Ces deux procédures sont le seul moyen d'afficher quelque Directement dans une chaîne
chose dans le document HTML final.
– Ex. echo "PI = $pi<br />";
– Affichage de tableau : print_r($my_array);

Formatage : Utilisation des balises HTML Résultat de fonction : concaténation obligatoire


– Ex. echo "<h1>TITRE</h1>"; – Ex. echo "Carré de PI = " . carre($pi);

Saut de ligne dans le code source


– Ex. echo "<h1>TITRE</h1>\n";
99 Programmation Web [Link] 100 Programmation Web [Link]

Structures de contrôle Structures de contrôle

Test : if (expression) instructions if ($a>$b) {


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

101 Programmation Web [Link] 102 Programmation Web [Link]

17
Structures de contrôle Structures de contrôle

Sélection : switch(variable) {cas} Boucle "tant que" : while(expr) {instr}


– Ex. $i=1;
– Ex. switch($i) { while ($i<=10) { echo $i++;
case 0: echo "i=0"; break; }
case 1: echo "i=1"; break;
case 2: echo "i=2"; break;
} Boucle "répéter tant que" : do {instr} while(expr)
– Ex. $i=1;
switch($ch) { do { echo $i++;
case "a": echo "A"; $ch="A"; break; } while ($i<=10);
case "b": echo "B"; $ch="B"; break;
case "c": echo "C"; $ch="C"; break;
default: echo "Ni \"a\" ni \"b\" ni \"c\""; Boucle "pour" : for (expr1; expr2; expr3) {instr}
} – Ex. for ($i=1; $i<=10; $i++) { echo $i;
}
103 Programmation Web [Link] 104 Programmation Web [Link]

Structures de contrôle Structures de contrôle

Boucle "pour tout élément" de tableau scalaire Boucle "pour tout élément" de tableau associatif
foreach (tableau as valeur) instructions foreach (tableau as clé => valeur) instructions

– Ex. $tab[0]="Rouge"; – Ex. $tab["Rouge"]="#FF0000";


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

105 Programmation Web [Link] 106 Programmation Web [Link]

Structures de contrôle Fonctions

Inclusion de fichiers dans une page Squelette de définition de fonction


– Fonction require() : Provoque une erreur fatale si le fichier function nom_fn ($p1, $p2, …, $pn) {
requis manque (interruption du script) // Code de la fonction
– Fonction include() : Provoque seulement un avertissement return val_retour; // Optionnel
(warning) si le fichier requis manque }
– Évaluation des fichiers inclus en mode HTML
Exemple
Exemples (paramètre des fonctions : une URI) function mon_max ($n1, $n2) {
return ($n1>$n2) ? $n1 : $n2;
– require("mes_fonctions.[Link]");
}
– include("une_page_web.html");
– include('[Link]
Une fonction doit être définie avant d'être appelée.
107 Programmation Web [Link] 108 Programmation Web [Link]

18
Fonctions Visibilité des variables

Passage de paramètres par référence (paramètres passés Variables normales : visibles uniquement à l'intérieur
:&
par valeur par défaut) de la fonction où elles sont définies
– Ex. function alaligne(&$chaine) {
$chaine .= "<br />";
}
Variables globales
$ch="Coucou !"; – Ex. function exemple_global {
alaligne($ch); // <br /> ajouté à la fin global $vglob; // Visible hors de la fonction
–

Paramètres par défaut Variables statiques


– Ex. function cafe($type="expresso") {
return "Je fais un $type<br />"; – Ex. function exemple_static {
} static $vstat; // Conserve sa valeur entre
echo cafe(); // Je fais un expresso deux appels à la fonction
echo cafe("capucino"); // Je fais un capucino
109 Programmation Web [Link] 110 Programmation Web [Link]

Séparation de PHP et HTML Plan du cours

Séparation des tâches de programmation


et de design Web Langage HTML
Maintenance facilitée Éléments de design Web
– Lecture plus aisée des pages HTML + PHP Feuilles de style en cascade (CSS)
– Modification facile du code sans affecter la mise en page et Langage de script PHP
vice-versa
Réutilisation de code
Connexion à une base de données (MySQL)
⇒ Utilisation des fonctions include() et require()
– Ex. Définition dans des fichiers séparés d'en-têtes et de pieds
de page communs à plusieurs pages

111 Programmation Web [Link] 112 Programmation Web [Link]

Principe Éléments de langage SQL

Imbrication de requêtes SQL dans du code PHP + Base de données : ensemble de tables
formulaires HTML pour les mises à jour
Table : ensemble d'attributs et leurs valeurs
SGBD utilisé : MySQL – Ex. ETUDIANT (numetu, nom, prenom, datenaiss, note)
– Serveur de BD SQL multi-utilisateurs rapide
– Développé depuis 1995 (version actuelle : MySQL 5) Interrogation simple
– Disponible sous licence GPL ou commerciale SELECT liste_attributs FROM table
WHERE condition
– Ex. SELECT nom, prenom FROM etudiant WHERE note>=10
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+) Création de table
CREATE TABLE nom_table (liste(champ, type))
113 Programmation Web [Link] 114 Programmation Web [Link]

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

Types de données principaux


– Nombre entier : INT
– Nombre réel : FLOAT Exemple de création de table
– Chaîne de caractères : VARCHAR(taille)
CREATE TABLE etudiant ( numetu INT PRIMARY KEY,
– Date : DATE nom VARCHAR(50),
prenom VARCHAR(100),
Clé primaire : identifie de façon unique les datenaiss DATE,
note FLOAT )
n-uplets (lignes) de la table
– Mot-clé PRIMARY KEY après le type

115 Programmation Web [Link] 116 Programmation Web [Link]

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

Insertion d'un n-uplet Requête de jointure (multi-table)


INSERT INTO nom_table VALUES (liste_valeurs)
SELECT liste_attributs
– Ex. INSERT INTO etudiant VALUES (123, 'Darmont', 'Jérôme', '15-01-1972', 15.5)
FROM table1, table2, … tableN
WHERE condition_jointure_t1t2
Suppression d'un n-uplet …
DELETE FROM nom_table WHERE condition AND condition_jointure_tN-1tN
– Ex. DELETE FROM etudiant WHERE numetu = 123

Modification d'un n-uplet – Ex. SELECT *


UPDATE nom_table SET attribut = valeur WHERE condition FROM etudiant, diplome
– Ex. UPDATE etudiant SET note = 20 WHERE numetu = 123 WHERE etudiant.num_dipl = diplome.num_dipl

117 Programmation Web [Link] 118 Programmation Web [Link]

PDO : Connexion à une BD PDO : Exécution d’une requête

Connexion Requête d’interrogation


$idconn = new PDO(id_serveur_bd, login_mysql, mot_de_passe); $idconn->query(requête_SQL)
– id_serveur = pilote:host=serveur;dbname=nom_bd – Ex. $c->query("select nom, prenom from etudiant");
– Ex.
$c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
Accès au résultat de la requête (ligne par ligne)
– Ex. foreach($c->query("select nom, prenom from etudiant") as $l)
Gestion des erreurs echo $l["nom"] . " " . $l["prenom"] . "<br />\n";
try { instructions } catch () { traitement_des_erreurs }
– Ex. try { Requête de mise à jour
// Connexion
} catch (PDOException $erreur) {
$idconn->exec(requête_SQL)
echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n"; – Ex. $c->exec("update etudiant set note = note + 1");
} – Retourne le nombre de n-uplets mis à jour

119 Programmation Web [Link] 120 Programmation Web [Link]

20
PDO : Exemple pratique Conversion de jeux de caractères
try {
// Connexion Encodage de caractères Europe de l’Ouest : iso-8859-1
$c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x"); (sur 2 octets)
// Requête d’interrogation
$q = "select nom, prenom from etudiant"; Encodage de caractères international : utf-8
$res = $c->query($q);
echo "<ul>\n"; (sur 4 octets, plus récent)
foreach($res as $l)
echo "<li>". $l["nom"] . " " . $l["prenom"] . "</li>\n"; Si un texte contenu dans une BD est à un format et que
echo "</ul>\n"; le serveur Web utilise l’autre : problème (accents…)
echo "<p>" . $res->rowCount() . " résultat(s)</p>\n";
// Requête de mise à jour – Affichage de type è : caractères utf-8 affichés en iso-8859-1
$res = $c->exec("update etudiant set note = note + 1") ; ⇒ $idconn->exec("set names latin1");
echo "<p>$res ligne(s) modifiée(s)</p>\n";
} catch (PDOException $erreur) { // Gestion des erreurs – Affichage de type ? : caractères iso-8859-1 affichés en utf-8
echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n"; ⇒ $idconn->exec("set names utf8"); Une seule fois, après la
} commande de connexion
121 Programmation Web [Link] 122 Programmation Web [Link]

Formulaires HTML Formulaires HTML

Formulaires : permettent la saisie de données dans une Différence entre les méthodes get et post
page Web – get : apparition des valeurs saisies en paramètres de l'URI de
la page action
Définition : <form> </form> – post : . valeurs saisies cachées
– Attribut action : URI de la page PHP à exécuter après validation . quantité de données possible plus importante
du formulaire Exemple
– Attribut method : méthode de transmission des données (valeurs <form action="ajout_etu.php" method="post">…</form>
possibles : get et post)
– Attribut enctype : type d'encodage (par défaut application/x-
Structure d'un formulaire : ensemble de zones de
www-form-urlencoded ou saisie (groupes de champs)
multipart/form-data pour envoyer des fichiers) Groupe de champs : <fieldset> </fieldset>

123 Programmation Web [Link] 124 Programmation Web [Link]

Formulaires HTML Formulaires HTML

Saisie dans un formulaire : <input /> Vérification syntaxique : expressions régulières


– Attribut obligatoire : name, nom de la variable – Ex. <input type="email" pattern="[^ @]*@[^ @]*" />
Champ texte : <input type="text" size="" /> Champ mot de passe : <input type="password" />
– Ex. <input type="text" name="nom" size="30" /> – Ex. <input type="password" name="passwd" size="8" />
Suggestion de valeurs : <datalist>…</datalist>
Champ caché : <input type="hidden" value="" />
– Ex. <datalist id="prop_noms">
<option value="Dupond"> – Ex. <input type="hidden" name="numetu" value="10" />
<option value="Durand">
<option value="Martin"> Fichier : <input type="file" />
</datalist> – Ex. <input type="file" name="Fichier_téléchargé" />
<input type="text" name="nom" list="prop_noms" />
125 Programmation Web [Link] 126 Programmation Web [Link]

21
Formulaires HTML Formulaires HTML

Bouton radio : <input type="radio" value="" /> Boutons de commande


– Ex. – Attribut type = submit | reset : validation ou réinitialisation du
Homme : <input type="radio" name="genre" value="H" /> formulaire
Femme : <input type="radio" name="genre" value="F" /> – Attribut value : légende du bouton
– Ex. <input type="submit" name="Valider" value="Valider" />
<input type="reset" name="Annuler" value="Annuler" />
Case à cocher : <input type="checkbox" />
– Ex. Zone de texte long : <textarea> </textarea>
choix 1 : <input type="checkbox" name="choix1" />
– Attribut name : nom de la zone de texte
choix 2 : <input type ="checkbox" name="choix2" />
– Attributs rows et cols : nombre de lignes / colonnes
– Ex. <textarea name="texte" rows="10" cols="60">
</textarea>
127 Programmation Web [Link] 128 Programmation Web [Link]

Formulaires HTML Formulaires HTML

Options d'accessibilité (navigation alternative)


Liste déroulante : <select> </select>
– Attribut name : nom de la variable choix Description de champ : <label> </label>
– Balise <option> </option> : élément de la liste – Ex. <label for="id_nom">
– Attribut selected de <option> : choix par défaut Nom : <input type="text" id="id_nom" name="nom" />
</label>
– Ex. <select name="annee">
<option>Licence</option>
<option selected="selected">M1</option> Légende de zone de saisie : <legend> </legend>
<option>M2 professionnel</option> – Ex. <fieldset>
<option>M2 recherche</option> <legend>État civil de l'étudiant</legend>
</select> …
</fieldset>

129 Programmation Web [Link] 130 Programmation Web [Link]

Exploitation des données


Formulaires HTML d'un formulaire avec PHP

<!-- Exemple complet --> Dans la page cible (Ex. ajout_etu.php)


<form action="ajout_etu.php" method="post"> <fieldset> – Tableaux associatifs $_GET[] et $_POST[]
<p> Nom : <input type="text" name="nom" size="50" /> </p> – Permettent d'accéder aux valeurs transmises par les
méthodes get et post des formulaires, respectivement
<p> Âge : <input type="text" name="age" size="2" /> </p>
<p> Année : <select name="annee"> Exemple
<option>Licence</option> <?php
<option selected="selected">M1</option> echo "<p>L'étudiant " . $_POST["nom"];
<option>M2</option> echo " (" . $_POST["age"] . " ans)";
echo " est en " . $_POST["annee"] . ".</p>";
</select> </p> ?>
<input type="hidden" name="action" value="ajout" />
<p> <input type="reset" value="Annuler" /> Cas particuliers : case à cocher (valeur "on" si cochée)
<input type="submit" value="Valider" /> </p> et fichiers
</fieldset> </form>
131 Programmation Web [Link] 132 Programmation Web [Link]

22
Mise à jour d'une base de données
avec PHP Téléchargement de fichier

<?php // Suite de l'exemple : document ajout_etu.php Étape 1 : formulaire dans une page HTML
$c = new PDO("mysql:host=localhost;dbname=darmont", – Ex.
"darmont", "x"); <form action="[Link]" method="post"
enctype="multipart/form-data" />
<fieldset>
$nom = $_POST["nom"]; <input type="hidden" name="MAX_FILE_SIZE" value="50000" />
$age = $_POST["age"]; Fichier : <input name="monfichier" type="file" />
$annee = $_POST["annee"]; <input type="submit" value="Télécharger" />
</fieldset>
</form>
$requete = "insert into etudiant values ('$nom', $age, '$annee')";
$resultat = $c->exec($requete);
if ($resultat) echo "<p>Insertion effectuée</p>"; Étape 2 : traitement à l'aide de PHP
?>
133 Programmation Web [Link] 134 Programmation Web [Link]

Transmission de variables
Téléchargement de fichier d'une page PHP à une autre
Variables disponibles dans la page cible
– $_FILES["monfichier"]["name"] : nom original du fichier Exemple : On dispose du nom et de l'age du visiteur de
– $_FILES["monfichier"]["size"] : taille du fichier la page [Link] dans les variables $nom et $age.
– $_FILES["monfichier"]["tmp_name"] : nom temporaire du fichier sur la On souhaite les transmettre à la page [Link].
machine serveur

Exemple de code dans la page [Link] Méthode 1 : Utiliser les champs cachés d'un formulaire
$destination = "/home/jd/public_html/" . $_FILES["monfichier"]["name"];
$res = move_uploaded_file($_FILES["monfichier"]["tmp_name"],
$destination); Méthode 2 : Ajouter des paramètres à l'URI de la page
if ($res) echo "<p>Fichier téléchargé avec succès</p>"; cible
else echo "<p>Erreur : " . $_FILES["monfichier"]["error"] . "</p>";

135 Programmation Web [Link] 136 Programmation Web [Link]

Transmission de variables Transmission de variables


d'une page PHP à une autre d'une page PHP à une autre

<!-- [Link] --> <?php // [Link]

<!-- Méthode 1 --> // Méthode 1


<form action="[Link]" method="post"> <fieldset> $nom = $_POST["nom"];
<input type="hidden" name="nom" value="<?php echo $nom; ?>" /> $age = $_POST["age"];
<input type="hidden" name="age" value="<?php echo $age; ?>" />
<input type="submit" value="Envoyer" />
</fieldset> </form>
// Méthode 2
$nom = $_GET["nom"];
<!-- Méthode 2 --> $age = $_GET["age"];
<a href="[Link]?nom=<?php echo $nom; ?>&age=
<?php echo $age; ?>">Envoyer</a> ?>

137 Programmation Web [Link] 138 Programmation Web [Link]

23
Sessions Sessions
<!-- Exemple -->
Objectif : Stockage de variables lors de la navigation <?php session_start(); ?>
<!DOCTYPE html>
sur plusieurs pages Web successives
<html>
<head> <title>Session 1</title> </head>
<body>
Utilisations courantes : <form action="[Link]" method="post« >
– Identification des visiteurs d'un site par login et mot de passe <fieldset>
stockés dans une base de données Votre nom : <input type="text" name="nom" />
<input type="submit" value="Valider" />
– Gestion du profil des utilisateurs
</fieldset>
– … </form>
</body>
</html>

139 Programmation Web [Link] 140 Programmation Web [Link]

Sessions Sessions
<?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 3</title> </head>
?> <body>
<!DOCTYPE html> <p>Es-tu toujours là, <?php echo $_SESSION["s_nom"]; ?> ?<br />
<html> <a href="[Link]">Détruire la variable de session</a> ou
<head> <title>Session 2</title> </head> <a href="[Link]">clore la session</a> ?</p>
<body> </body>
<p>Identifiant de session : <?php echo session_id(); ?><br /> </html>
Nom de session : <?php echo session_name(); ?></p>
<p>Bienvenue sur ma page Web, <?php echo $_SESSION["s_nom"]; ?>.<br />
<a href="[Link]">Page suivante</a>.</p>
</body>
</html>
141 Programmation Web [Link] 142 Programmation Web [Link]

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

143 Programmation Web [Link] 144 Programmation Web [Link]

24
Plan du cours

Langage HTML
Éléments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion à une base de données (MySQL)

145 Programmation Web [Link]

25

Vous aimerez peut-être aussi