BDW1 :

BASES DE DONNÉES & PROGRAMMATION WEB

PARTIE
PROGRAMMATION WEB

Nicolas Lumineau
nicolas.lumineau@univ-lyon1.fr

Remerciements à Emmanuel Coquery et Fabien Duchateau

 BD ET WEB
 De nombreuses bases de données sont accessibles
via le Web

Serveur Client

Internet

BD BDW1

Oracle, MySql, Posgres, DB2….. 2

PAGES WEB STATIQUES
 Principe de fonctionnement :
 L'utilisateur demande l'accès à une page Web depuis son
navigateur (IE, FireFox, Chrome ….).
 Adresse saisie, clic sur un lien, utilisation d'un signet…
 Le navigateur envoie une demande à un serveur Web.
 Le serveur Web lit le fichier demande sur le disque dur.
 Le serveur Web envoie le contenu du fichier au navigateur.
 Le navigateur affiche le contenu de la page.

 Remarque:
 Le fichier peut lui-même référencer d’autres fichiers
nécessaire pour l’affichage (ex: images)
BDW1

Dans un contexte statique, le serveur Web ne fait que

transmettre le(s) fichier(s) demandé(s) 3
 ILLUSTRATION

Client

Serveur

navigateur Serveur Web

(1) : demande de la page index.html

(5) : affichage
(4) : envoi de index.html
de
index.html

(3) : lecture de
index.html (2) : accès à index.html

fichiers
index.html BDW1

4
REMARQUE
 Pour changer le contenu affiché d’une page statique, il
est nécessaire d’éditer le fichier au niveau du serveur.

 Question
 Que se passe-t-il si l’on souhaite changer le contenu d’une
page au moment où elle est demandée ?
en fonction :
 du contenu des données dans un SGBD
 de paramètres fournis au moment de la requêtes

(cf : les formulaires)

BDW1

Utiliser des pages web dynamiques 5

PAGES WEB DYNAMIQUES
 Principe
 L'utilisateur demande l'accès à une page Web depuis son
navigateur.
 Le navigateur envoie une demande au serveur web
comprenant :
 le nom de la page, qui correspond en fait a un programme ;
 éventuellement un ensemble de paramètres.

 Le serveur web cherche sur le disque le code source d'un

programme.
 Le serveur web exécute ce programme qui peut :
 utiliser les paramètres transmis avec la demande du navigateur ;
 aller chercher des données dans une base de données ou sur le
disque.
 Durant l'exécution, le programme génère un contenu HTML.
 Le contenu HTML est envoyé au navigateur. BDW1

 Le navigateur affiche le résultat.

6
EXEMPLE
Poste Serveur de
données
Poste Client

Poste Serveur Web

navigateur Serveur Web

(4) : envoi SQL
(1) : demande de la page index.php
+ paramètres
Module
(6) : retourne page HTML PHP SGBD
(index.php) (5) : retourne
tuples

(3) : lecture de
index.php (2) : accès à index.php

fichiers
index.php BDW1
(7) : affiche la
page HTML

7
EXEMPLES DE LANGAGES UTILISÉS
 Langages utilisés :
 Pour la structure et le contenu des pages :
 HTML, XML

 Pour la mise en forme des pages :

 CSS

 Pour les traitements de génération de contenu

 PHP, Javascript

 Pour interroger la base :

BDW1

 SQL
8
HTML
INTRODUCTION À HTML
 HTML : HyperText Markup Language
 Langage de balisage (structure + contenu)
 Créé au CERN en 1990
 Standard W3C depuis 1996

 Fichier .html
 En continuelle évaluation : HTML5 (depuis 2014)

BDW1

10
 HTML
 Fichier texte contenant des informations de structuration.
 La structure est indiquée à l'aide de balises :
 Le nom de la balise indique le type de mise en forme à appliquer.
 On met une balise ouvrante au début du morceau de texte
concerné :
<nom_balise>debut_du_texte…
 On met une balise fermante à la fin du texte concerné :
…fin_du_texte</nom_balise>
Attention: La différence entre une balise fermante et une balise
ouvrante se limite au slash (/)

 Exemple : <h1>Mon titre de page </h1> BDW1

11
 HTML

 Une balise ouvrante peut contenir des attributs de la forme :

nom="valeur"
<nom_balise att1="val1" att2="val2"
...>texte</nom_balise>

 Les attributs permettent de préciser des informations (concernant

généralement la mise en forme.)
 Les balises peuvent être imbriquées.

 Exemple : <table border=‘1’>

<tr> <td>1</td> <td>un</td> </tr>
</table>

 C'est le navigateur qui interprète les balises pour faire BDW1

l'affichage.
12
STRUCTURE D’UNE PAGE HTML
 Une page HTML a la structure suivante :

<!DOCTYPE html>
<html>
<head>
<title>titre de la page</title>
</head>
<body>
<p>Partie affichée dans le navigateur.</p>
</body>
</html>

 Les commentaires (non affichés) sont délimites BDW1

par < !-- et -->.
13
DÉFINITION DU TYPE DE DOCUMENT
 Balise DOCTYPE spécifie le type de document:
 Selon la versions (variante) de la norme HTML

 Pour que le navigateur interprète correctement le code

HTML fourni, il faut donc préciser quelle version on
utilise (et s’y tenir)

 La balise DOCTYPE est simplifiée en HTML5 …

<!DOCTYPE html>
… ce qui n’était pas le cas en HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
"http://www.w3.org/TR/html4/strict.dtd"> BDW1

14
 EN-TÊTE HTML
 Partie HEAD du fichier HTML
 Ne s’affiche pas dans le contenu du navigateur !!!

 Le Header peut contenir :

 Titre
<title>Titre affiché dans l’onglet</title>

 Métadonnées sur le document exploitables par les navigateurs ou les

moteurs de recherche (indexation)
<meta name=″propriété″ content=″valeur″>
 Exemple de métadonnées : Encodage du document (par ex. pour l’affichage
des caractères accentués)
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

 Lien vers d’autres fichiers (feuilles de styles ou scripts):

BDW1
<link rel="stylesheet" type="text/css"
ref="includes/styles.css">
15
CONTENU HTML
 Partie BODY du fichier HTML
 S’affiche dans le contenu du navigateur !!!

 Le Body peut contenir :

 Titre, sous-titre ….
 Paragraphe
 Mots plus ou moins importants
 Listes ordonnées ou non
 Liens hypertextes
 Images
 Regroupement
 Formulaires BDW1

 Onglets de saisie, boutons

16
CONTENU HTML
 Depuis HTML5, certaines balises apportent de la
sémantique à la structuration de la page
<header>…</header>
 header
 footer <section>
 nav <nav>
…
<article> <aside>
 section </nav> …
</aside>
 article
<aside>
 aside …
</article> </aside>
 …
</section>

<footer>…</footer> BDW1

17
ENTÊTE ET PIED DE PAGE
Balise: <header>…</header>

 L’entête d’une page est située en haut de la page et il inclut

généralement:
 le logo ou une bannière,
 le nom du site,
 un slogan

Balise: <footer>…</footer>

 Le pied de page est situé en bas de la page et il inclut généralement:

 les crédits,
 les mentions légales, BDW1

 un lien de contact
18
MENU DE NAVIGATION DE PAGE
Balise: <nav>…</nav>

 Le menu de navigation regroupe les principaux liens de

navigation à travers le site
 Les liens de navigation seront des liens hypertextes

BDW1

19
SECTION / ARTICLE / APARTÉ DE PAGE
Balise: <section>…</section>

 La section regroupe des contenus (paragraphes…) selon leur

thématique.

Balise: <article>…</article>

 L’article est une zone de contenu indépendant qui en théorie peut

être repris sur un autre site.

Balise: <aside>…</aside>

 L’aparté est une zone de contenu complémentaire ou indirect

avec le contenu principal. BDW1

20
PARAGRAPHE ET RETOUR À LA LIGNE
Balise paragraphe : <p>…</p>

<p>
Un texte qui s’étend sur plusieurs
lignes et qui forme un paragraphe
</p>

 un paragraphe est précédé et suivi d’un saut de ligne!

Balise retour à la ligne : <br/> ( balise ouvrante et fermante)

<p>
Un texte qui s’étend <br/>
sur plusieurs <br/>
lignes et qui forme un paragraphe
</p>
BDW1

21
MOTS PLUS OU MOINS IMPORTANTS
Balise pour mots très importants : <mark>…</mark>
<p> Un contenu avec <mark>des mots très importants </mark> à
l’intérieur.</p>

Balise pour mots importants : <strong>…</strong>

<p> Un contenu avec <strong>des mots importants </strong> à
l’intérieur.</p>

Balise pour mots relativement importants : <em>…</em>

<p> Un contenu avec <em>des mots avec emphase</em>.</p>

BDW1

22
TITRE ET SOUS-TITRE
Balise : <h1>…</h1>, <h2>…</h2>,<h3>…</h3>, ….

 <h1>un titre</h1>
 Forme un titre important (paragraphe avec un affichage
plus gros, en gras).

 <h2>un sous-titre</h2>
 Forme un titre moins important (affichage un peu moins
gros).
...
 <h6>un sous-sous-…-sous-titre</h6>
 Forme un petit titre. BDW1

23
EXEMPLE
<!DOCTYPE html>
<html>
<head>
<title>La page de Toto</title>
</head>
<body>
<h1>Toto</h1>
<h2>L'histoire de Toto</h2>
<p>Il était une fois ...</p>
<p>Chemin faisant …</p>
<h2>Les amis de Toto</h2>
<p>Ouioui</p>
<p>Casimir</p>
</body>
</html>

BDW1

24
LES LISTES
Les listes non ordonnées
Balise : <ul> <li> contenu ligne</li> </ul>
<ul>
<li>Ligne1</li> • Ligne1
<li>Ligne2</li> • Ligne2
<li>Ligne3</li> • Ligne3
</ul>

Les listes ordonnées

Balise : <ol> <li> contenu ligne</li> </ol>

<ol>
<li>Ligne1</li> 1. Ligne1
<li>Ligne2</li> 2. Ligne2 BDW1
<li>Ligne3</li> 3. Ligne3
</ol>
25
 LES TABLEAUX
Pour créer un tableau : <table> … </table>
Pour créer l’entête de
colonne : <th>…</th>

Pour créer une

entête:
Pour créer <thead>… </thead>
une ligne:
<tr>…</tr>

Pour créer un
contenu:
<tbody>… </tbody>

Pour créer une BDW1

cellule:
<td>…</td>
26
LES TABLEAUX
<table>
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</thead>
<tbody> Col1 Col2 Col3
<tr>
<td>Cell11</td>
Cell11 Cell12 Cell13
<td>Cell12</td> Cell21 Cell22 Cell23
<td>Cell13</td>
</tr>
<tr>
<td>Cell21</td>
<td>Cell22</td>
<td>Cell23</td>
</tr>
</tbody> BDW1
</table>

27
LES LIENS HYPERTEXTES
<a href="adresse_web">texte</a>
 texte devient un lien cliquable.
 lorsque l'on clique sur texte, le navigateur va à l'adresse
(URL) adresse_web.

 Exemples :
<a href="http ://www.w3.org/TR/html401/">Documentation HTML</a>
 Le texte « Documentation HTML » est un lien vers la page web dont
l'adresse est http ://www.w3.org/TR/html401/

<a href="./truc.html">Des trucs</a>

 Le texte « Des trucs » est un lien vers la page web ./truc.html située
BDW1
au même endroit que la page courante.
28
LES LIENS HYPERTEXTES
<a href="adresse_web">texte</a>
 texte devient un lien cliquable.
 lorsque l'on clique sur texte, le navigateur va à l'adresse
(URL) adresse_web.

Adresse absolue
 Exemples :
<a href="http ://www.w3.org/TR/html401/">Documentation HTML</a>
 Le texte « Documentation HTML » est un lien vers la page web dont
l'adresse est http ://www.w3.org/TR/html401/

Adresse relative

<a href="./truc.html">Des trucs</a>

 Le texte « Des trucs » est un lien vers la page web ./truc.html située
BDW1
au même endroit que la page courante.
29
LES IMAGES
 Inclure une image :

<img src="adresse_web_image" alt="texte_alternatif"/>

 <img /> est à la fois balise ouvrante et balise fermante

 adresse_web_image : adresse web où chercher l'image.
 texte_alternatif : attribut obligatoire pour des raisons
d’accessibilité

BDW1

30
LES IMAGES
 Inclure une image avec une légende :

<figure>
<img src="adresse_web_image" alt="texte_alternatif"/>
<figcaption> Figure 1 : un exemple </figcaption>
</figure>

 La balise <figcaption> introduit une légende à une figure

 La balise <figure> regroupe l’image et sa légende
BDW1

31
REGROUPEMENT
 Deux types de balises
 INLINE (ex: <a>, <img>)
 BLOCK (ex: <p>)

 Règle
 Un élément de type INLINE peut être placé dans un
élément de type BLOCK
 Mais la réciproque est fausse !

BDW1

32
REGROUPEMENT
Balises: <div>…</div> et <span>…</span>

 Les éléments <div> et <span> servent à regrouper

et structurer une page
 Un <div> permet de regrouper plusieurs éléments
BLOCK
<div><p>un paragraphe</p><p>et un autre</p></div>

 Un <span> permet de baliser des éléments dans une

élément de type BLOCK
<p>une ligne <span>et</span> une autre</p>

 Balises neutres sans effet sur la page … sauf en cas BDW1

de mise en forme associée (cf cours CSS)

33
LES FORMULAIRES
 Objectifs des formulaires web :
 permettre à l'utilisateur de saisir ces paramètres en ligne.
 Envoyer les valeurs saisies pour chaque paramètre au
serveur
 Accéder à une page dynamique générée par le serveur
selon les valeurs des paramètres

 Comment définir les paramètres?

 en utilisant des champs textuels, des listes déroulantes,
des cases à cocher ;
 à chacun des composants correspond un paramètre. BDW1

34
EXEMPLES DE FORMULAIRES BIEN CONNUS !

BDW1

35
FORMULAIRE: BALISE PRINCIPALE
<form action="adresse_web"
method="POST"
name="nomF">
contenu_formulaire
</form>

 contenu_formulaire : du texte contenant en

particulier des balises représentant les différents
composants de saisie ;
 adresse_web : l'adresse de la page web dynamique à
laquelle on souhaite accéder via ce formulaire ;
 POST : la méthode de transmission des paramètres
(on peut également mettre GET) ; BDW1

 nomF : le nom du formulaire.

36
 MÉTHODE DE TRANSMISSION DES PARAMÈTRES

 Deux méthodes de transmission des paramètres :

 GET
 Les paramètres sont encodés avec l'adresse de la page
 à la fin de l'adresse, on ajoute le caractère ?

 puis pour chaque paramètre on ajoute nom=val

 les paramètres sont séparés par le caractère &

 Utile pour spécifier des paramètres dans un lien hypertexte.

http://www710.univ-lyon1.fr/~nluminea/index.php?ue=licence

 POST
 Les paramètres sont encodés séparément de l'adresse web.
 Plus pratique pour les formulaires.

BDW1

37
COMPOSANTS DE FORMULAIRES
 Un formulaire peut contenir
 Des onglets de saisie de texte
 Des cases à cocher
Balise de type <input>
 Des groupes d’option
 Des boutons

 Des zones de texte long Balise de type <textarea>

 Des listes déroulantes Balise de type <select>

 Les composants sont identifiés et nommés

 Attribut id : identification du composant dans la page
 Attribut name : permet la récupération de la valeur du paramètre
par le nom du composant

 Les composants sont introduits par des textes descriptifs BDW1
(labels)
38
LABELS
 Un label permet d’associer un texte descriptif à un
composant de formulaire

<label for="idDuComposant"> Texte_descriptif</label>

 Affiche un label " Texte_descriptif" qui décrit le composant

identifié par "idDuComposant«

 Remarque:
 Un clic sur le label donne le focus au composant associé

BDW1

39
INPUT DE TYPE TEXT
<label for="i1">Un champ texte</label>
<input id="i1" type="text" name="nom_input"/>
 Crée un champ de saisie pour une ligne de texte (accompagné d’un
label).

 nom_input est le nom du paramètre correspondant à ce

composant.

 On peut ajouter les attributs suivants :

 size="un nombre" : la taille du champ en caractères ;
 value="une valeur" : texte pré-saisi
 utile pour modifier des informations.

 input est à la fois ouvrante et fermante

BDW1

40
INPUT DE TYPE PASSWORD
<input id="id2" type="password" name="nom_input" />
 Crée un champ de saisie pour une ligne de texte cachée.

BDW1

41
INPUT DE TYPE SUBMIT OU RESET
<input id="id3" type="submit" value="texte">
 Créée un bouton déclenchant le chargement de la page
de destination (attribut action de la balise <form>).
 texte est un texte qui sera affiche sur le bouton.

<input id="id4" type="reset" value="texte">

 Créée un bouton déclenchant la réinitialisation du
formulaire, en utilisant les valeurs pré-saisies
lorsqu'elles existent.
 texte est un texte qui sera ache sur le bouton.

BDW1

42
INPUT DE TYPE CHECKBOX
<label>Choix1<input type="checkbox" name="nomC"
id="id1" value="val1"></label>
<label>Choix2<input type="checkbox" name="nomC"
id="id2" value="val2"></label>

 Crée deux cases à cocher identifiées respectivement par id1

et id2 ayant le même nom nomC

 Si la première case est cochée, alors le paramètre retourne la

valeur val1, sinon si la seconde case est cochée, alors le paramètre
retourne la valeur val2
 Si les deux cases sont cochées, alors le paramètre retourne la liste
[val1, val2]
 Attribut optionnel checked permet de spécifier la case sélectionnée
par défaut BDW1

43
INPUT DE TYPE RADIO
<label>Choix1<input type="radio" name="nomC"
id="id1" value="val1"></label>
<label>Choix2<input type="radio" name="nomC"
id="id2" value="val2"></label>

 Crée deux boutons radios identifiés respectivement par id1

et id2 ayant le même nom nomC

 Un seul bouton radio peut être sélectionné à un instant

donné
 Si la première case est cochée, alors le paramètre retourne la
valeur val1, sinon si la seconde case est cochée, alors le paramètre
retourne la valeur val2
 Attribut optionnel checked permet de spécifier la case sélectionnée
par défaut BDW1

44
INPUT DE TYPE HIDDEN
<input type="hidden" name="nom" value="val" />

 C’est un paramètre caché qui ne peut être saisi par l’utilisateur

 Permet de donner la valeur val au paramètre nom.

 Ce composant n'est pas affiché.

 Utile pour spécifier un identifiant dans un formulaire de
modification des informations de la base.

BDW1

45
FORMULAIRE : SAISIE D’UN GRAND TEXTE
<textarea name="nom" rows="h" cols="l">
contenu
</textarea>

 Créée un champ de saisie pour du texte sur

plusieurs lignes.
 nom est le nom du paramètre correspondant a ce
composant.
 h est la hauteur du composant en nombre de lignes.
 l est la largeur du composant en nombre de caractères.

 contenu peut être vide et ne contient pas de balise.

BDW1

46
LISTE DÉROULANTE
<select name="nom">
<option value="val1">Texte 1</option>
<option value="val2">Texte 2</option>
...
</select>
 Crée une liste déroulante ayant comme sélection possible : Texte 1, Texte 2,. . .
 La valeur du paramètre nom est donnée par la sélection choisie par l'utilisateur :
 val1 pour Texte 1
 val2 pour Texte 2
 ...
 L'attribut value est optionnel.
 Par défaut c'est le texte dans la balise <option></option>
 On peut ajouter selected="true" dans une des balises
 options pour pré-sélectionner cette option.

<select name="nom">
<option value="val1">Texte 1</option>
BDW1
<option value="val2" selected=‘true’>Texte 2</option>
...
</select> 47
QUELQUES ÉLÉMENTS DE FORMULAIRES
HTML5
 Nouveaux types de l’élément input en HTML5:
 tel, url, email
 search
 datalist (auto-complète un champ grâce à une liste de
valeurs prédéfinies)
 date, time, datetime, week, month
 number
 range (barre de progression)
 color

BDW1

48
QUELQUES ATTRIBUTS SPÉCIFIQUE À
HTML5
 placeholder : texte indicatif dans un champ
textuel, qui s’efface quand l’utilisateur commence
à saisir un texte
 required : le formulaire ne peut être soumis si un
des composant avec l’attribut required n’est pas
rempli.
 pattern : vérifie que le champ respecte une
expression régulière donnée (ex: une url)
…

http://www.w3schools.com/tags/ BDW1

49
BONNES PRATIQUES
 Les navigateurs sont assez tolérants aux erreurs de
programmation en HTML … mais ce n’est pas une
raison !
 Aérer votre code ! Ce n’est pas du WYSWYG!!
 Commenter votre code avec les balises <!-- … -->
 Ecrire les balises en minuscules
 Penser à l’accessibilité
 en particulier pour les images : attribut alt
 Eviter les balises spécifiques à un navigateur
 Ne pas hésiter à consulter la documentation
 http://www.w3schools.com
 Valider votre code HTML avec un validateur
BDW1
 http://validator.w3.org
50
CSS

BDW1

51
UN PAGE WEB ÇA PEUT ÊTRE ÇA …

BDW1

52
…OU ÇA!

BDW1
TOUT EST QUESTION DE MISE EN FORME !
Car il s’agit de la même page qu’au transparent précédent 53
MISE EN FORME
 Avant : mise en forme et contenu mélangé dans le code HTML
 Balises dédiées : <center>, <font>, attribut align, etc.,

 corrélation forte entre contenu et mise en forme

 Aujourd’hui: séparation des données et de la mise en forme :

 Facilité de maintenance
 Facilité de portage pour un autre site
 Simplification et lisibilité du code
 Uniformisation du code entre les pages du même site et entre différents
médias (e.g., impression, écran)
 Améliorer l’accessibilité

BDW1

54
CSS
 Cascading Style Sheets

 Langage de mise en forme et mise en page de page

HTML

 Origine : 1994-1995 (standard W3C en 1996)

 Toujours en développement (CSS3 depuis 2010)

 Extension d’un fichier CSS : .css

 Tutoriaux et wikilivres disponibles BDW1

55
CSS

 1er principe élémentaire :

 affectation d’une valeur à une propriété.

propriété : valeur ;

 2ème principe élémentaire :

 Sélection de la ou des balises concernées par la mise
en forme

BDW1

sélecteur { propriété : valeur ; }

56
HTML + CSS
index.html
<html>
…
<body>
<h1>Mon titre coloré </h1>
</body>

styles.css +
h1{
Color:red;
}

=
Mon titre coloré
BDW1

57
DÉCLARATION DU CSS
 On peut placer du code CSS à trois niveaux :

 Dans une balise, via un attribut (inline)

<h1 style="color:red;">Mon titre coloré</h1>

 Dans un script intégré dans l’entête de la page web (interne)

<head>
<style type="text/css" title="styles" media="all">
h1{color:red;}
</style>
</head>
À privilégier
 Dans une ou plusieurs feuilles externes
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head> BDW1

avec un fichier styles.css dans le même répertoire que la page HTML

et qui contient : h1{Color:red;} 58
 DÉCLARATION DE PLUSIEURS FEUILLES
EXTERNES DE CSS
 Possibilité de décomposer le CSS en plusieurs fichiers
 Gain en lisibilité

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="types.css">
<link rel="stylesheet" type="text/css"
href="./autreCss/layout.css">
<link rel="stylesheet" type="text/css" href="color.css">
<head>
<body>
…
</body>
</html>
BDW1

59
 NOTION DE CASCADE

 Les styles peuvent être “en cascade”,

 i.e., possibilité de combiner des déclarations de styles
externe, interne ou inline

 Ordre de priorité :
 accordée à la déclaration la plus « proche » de l’élément à
styliser

inline, interne, externe

+ -
BDW1

60
 NOTION DE CASCADE
index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=" style.css">

<style type="text/css" title="styles" media="all">

h1{color:red;}
</style>
</head>
<body>
<h1 style="color:green;">Mon titre coloré</h1>
</body>
</html>

styles.css

h1{color:yellow;}
BDW1

De quelle couleur est le titre ? 61

 NOTION DE CASCADE
index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=" style.css">

<style type="text/css" title="styles" media="all">

h1{color:red;}
</style>
</head>
<body>
<h1 style="color:green;">Mon titre coloré</h1>
</body>
</html>

styles.css

h1{color:yellow;}
BDW1

Mon titre coloré 62

NOTION D’HÉRITAGE
 Imbrication des éléments HTML :
 La balise html contient les balises head et body, la
balise body contient des balises p, ul, etc.

 En CSS, un élément imbriqué hérite des

propriétés de son/ses parents, sauf les
propriétés redéfinies pour cet élément

 Exemple d’héritage
 Si on déclare une balise body avec une couleur de
fond bleue, un paragraphe, sans style spécifique et
dont le parent direct est la balise body, aura une BDW1
couleur de fond bleue
63
SYNTAXE EN CSS
sélecteur{
propriété1 : valeur1;
propriété2 : valeur2;
…
}

 Le sélecteur : pour spécifier un élément du document

HTML concerné par la mise en forme
 Les couples propriété/valeur : pour spécifier la valeur
d’une propriété de mise en forme

BDW1

64
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style

 Types de sélecteur possibles :

 Une balise

 Un nom de classe (introduit par .)

 Un identifiant d’élément (introduit par #)

BDW1

65
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style

 Types de sélecteur possibles :

 Une balise p{
color : yellow;
font-style : italic;
 Un nom de classe (introduit par .) }

 Un identifiant d’élément (introduit par #)

BDW1

66
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style
<html>
 Types
… de sélecteur possibles :
<body>
 Une<p>Tous
balise mes</p> p{
<p>paragraphes</p> color : yellow;
<p>seront jaunes</p> font-style : italic;
 Un nom de classe (introduit par .)
<p>et en italique</p> }
</body>
Un identifiant d’élément (introduit par #)
 </html>

BDW1

67
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style
.mesItems{
color : grey;
 Types de sélecteur possibles : font-style : bold;
 Une balise }

 Un nom de classe (introduit par .)

 Un identifiant d’élément (introduit par #)

BDW1

68
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style
<html>
…
<body> .mesItems{
<ul> color : grey;
 Types de sélecteur possibles :
<li class="MesItems"> font-style : bold;
Accueil
 Une balise }
</li>
<li class="MesItems">
Contact
Un nom de classe (introduit par .)
 </li>
<li class="MesItems">
Liens
Un identifiant d’élément (introduit par #)
 </li>
</body>
</html>
BDW1

69
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style
#monItem{
color : black;
 Types de sélecteur possibles : font-style : normal;
 Une balise }

 Un nom de classe (introduit par .)

 Un identifiant d’élément (introduit par #)

BDW1

70
SÉLECTEUR
 Sélecteur : “pattern” qui sélectionne l’élément ou
le groupe d’éléments sur lesquels va s’appliquer
le style
<html>
…
<body> #monItem{
<ul> color : black;
 Types de sélecteur possibles :
<li class="MesItems"> font-style : normal;
Accueil
 Une balise }
</li>
<li class="MesItems">
Contact
Un nom de classe (introduit par .)
 </li>
<li id="MonItem">
Liens
Un identifiant d’élément (introduit par #)
 </li>
</body>
</html>
BDW1
Un identifiant est unique par page !!!
71
COMBINAISON DE SÉLECTEURS
 Il est possible de spécifier :
 des sélecteurs à balises multiples:
h1, h2 { color:red;}
 des sélecteurs à balises imbriquées
.mesItems p { color:red;}
 des sélecteurs à balises possédant un attribut
[border]{ font-style:italic;}
 des sélecteurs à balises possédant un attribut avec une
valeur donnée
[border=2]{ font-style:italic;}
 …

Pour les autres possibilité : voir wwww.w3schools.com BDW1

http://www.w3schools.com/cssref/css_selectors.asp
72
GESTION DES PRIORITÉS
 Plusieurs insertions de CSS, plusieurs types de sélecteurs... Qui a
la priorité ?

 Du plus prioritaire au moins prioritaire :

 Style dans la balise HTML
<p style="color : red">…</p>
 Utilisation d’un identifiant
<p id="mompar">…</p> + #monpar{color:red;}
 Utilisation d’une classe
<p class="mespar">…</p> + .mespar{color:red;}
 Imbrication d’éléments
<div> <p>…</p></div> + div p {color:red;}
 Elément HTML
<p>…</p> + p{color:red;}

 Il est possible de modifier une priorité avec !important

 La déclaration avec !important devient la déclaration à appliquer : BDW1
propriete : valeur!important ;
73
PSEUDO-CLASSES
 Les actions des utilisateurs peuvent modifier l’état
d’un élément (par exemple, une image survolée par le
curseur de la souris)

 Une pseudo-classe permet d’exprimer l’état d’un

élément pour pouvoir lui associer une mise en forme
particulière. La pseudo-classe est placée au niveau du
sélecteur et est séparé par : de celui-ci.

sélecteur:pseudoclasse{
propriété1 : valeur1;
propriété2 : valeur2;
…
}
 BDW1

74
PSEUDO-CLASSES
 Parmi les pseudo-classes les plus utilisées:
 :hover pour le survol de l’élément
 :visited pour un lien hypertexte visité
 :focus pour un élément qui a le focus
 :active pour une élément activé par l’utilisateur
 …

BDW1

75
DES PROPRIÉTÉS ET DES VALEURS
 Quelles propriétés, quelles valeurs pour une
déclaration CSS ?
 Nombreuses propriétés disponibles en CSS3
 Une majorité de ces propriétés possède une liste restreinte
de valeurs
 On peut appliquer ces couples {propriété, valeur} à de
nombreux éléments HTML pour les besoins suivants :
 choix des couleurs (texte, arrière plan, . . .)
 choix des polices de caractères

 . . .

 Propriétés de texte, puis quelques exemples pour les

bordures, liens, . . .
BDW1

76
PROPRIÉTÉ DE FOND
 Couleur de l’arrière-plan :
background-color: <color>;
 donne la couleur <color> à l’arrière plan

 Image en arrière-plan:
background-image: url(‘<urlimg>’);
 met l’image se trouvant à l’adresse <urlimg> en
l’arrière plan
 Il est possible d’appliquer un traitement à l’image par:
background-repeat: no-repeat | repeat |
repeat-x | repeat-y; BDW1

77
PROPRIÉTÉS DE POLICE ET TEXTE
 Taille de police :
font-size : 100% ;
 Taille de police à 100%
Utiliser les % ou em comme mesure (pas de px, cm, pt
car non redimensionnables)

 Famille de police:
font-family : arial, sans-serif ;
 Fonte de police en Arial, famille sans serif
 Important de spécifier la famille, car si la fonte n’est
pas trouvée sur le système/navigateur, remplacement BDW1
par une fonte de la même famille
78
PROPRIÉTÉS DE POLICE ET TEXTE
 Style de fonte:

font-style : normal | italic | oblique ;

Style de police en normal, italique, oblique

 Variante de fonte:

font-variant : normal | small-caps ;

 Style de police en petites majuscules ou normal

BDW1

79
PROPRIÉTÉS DE POLICE ET TEXTE
 Couleur de police:
color : #000000 ;

Police de couleur noire (#000000 en code hexa)

 Epaisseur de fonte:
font-weight : normal | bold | bolder | lighter ;

Style de police en normal, gras ou très gras ou peu gras

 Alignement (de texte, mais aussi de contenu quelconque):

text-align : left | right | center | justify
BDW1

Alignement à gauche, droite, centré ou justifié

80
PROPRIÉTÉS DE POLICE ET TEXTE
 Décoration du texte:
text-decoration : none | underline | overline
| line-through | blink ;

Aucune décoration, souligné, surligné, barré, clignotant

 Transformation de texte:
text-transform : none | capitalize | uppercase
| lowercase ;

 Aucune transformation, tout en capitalisé, tout en

majuscules, tout en minuscules

 Hauteur de ligne:
line-height : normal | nombre | % ;
BDW1
 Hauteur de la ligne, en normal, valeur numérique ou pourcentage
81
 PROPRIÉTÉ DES LIENS HYPERTEXTES
 Il est possible d’affecter une mise en forme
différente en fonction que le lien soit:
 non déjà visité (link)
 visité (visited)
 survolé par le curseur de la souris (hover)
 En train d’être activé (active)

index.html styles.css
<!DOCTYPE html>
<html> a:link{color:blue;}
<head> a:visited{color:green;}
<title>Exo cours CSS</title> a:hover{color:red;}
<link rel="stylesheet" ype="text/css" a:active{color:pink;}
ref="styles.css">
</head>
<body>
<a href="./uneAutrePage.html">
lien vers une autre page BDW1
</a>
</body>
</html> 82
LES « BOITES »
 Toutes les balises HTML sont contenues dans des
“boîtes” :
 Ces boîtes sont invisibles la plupart du temps
(bordure non tracée)
 Possibilité de configurer leurs propriétés (bordure,
marge, espacements, etc.)

bordure
margin

padding

Un contenu

BDW1

83
MARGIN ET PADDING
 margin:
 Espace entre la bordure et un autre élément
 padding:
 Espace entre le contenu et sa bordure

bordure
margin-top

margin-left margin-right
Un contenu

BDW1
margin-bottom
84
MARGIN ET PADDING
 margin:
 Espace entre la bordure et un autre élément
 padding:
 Espace entre le contenu et sa bordure

bordure

padding-top
padding-left padding-right
Un contenu

padding-bottom
BDW1

85
BORDURE
 border:
 Bordure d’un élément

 Épaisseur du trait
border-width: thin | medium | thick | <n>px
 Trait fin, moyen , épais, de <n> pixel

 Style du trait
border-style: none | dotted | dashed | solid | double;
 Aucun trait, pointillé, en tiret, plein, double

 Couleur du trait
border-color: <color>;
BDW1

 Trait de couleur <color>

86
 styles.css
EXEMPLE html {
background-color: white;
 Que représente }
body { color: #656563;
le code suivant ? font-family: verdana, sans-serif;
font-size: 100%;
background-color: yellow;
margin-left: 5%;
index.html margin-top: 2.5%;
<!DOCTYPE html> padding: 5px 5px 5px 5px;
<html> }
<head> #carble{
<title>Exo cours CSS</title> border-color: darkblue;
<link rel="stylesheet" ype="text/css" border-style: dotted;
ref="styles.css"> background-color: cyan;
</head> margin-left: 3em;
<body> width:200px;
<div id="carble"> padding-left: 10px;
<ul> }
<li class= "ligita">Pim</li> ul{
<li class= "ligita">Pim</li> font-style: bold;
<li class= "ligita">Pim</li> border: solid 4px;
</ul> border-color: black;
</div> }
</body>
</html> .ligita{
BDW1
font-style: italic;
color:white;
}
87
RÉSULTAT

BDW1

88
POSITION DES ÉLÉMENTS
 Il existe aussi des couples {propriété, valeur} pour la
mise en page :
 Organisation des différentes parties d’une page (menu,
bannière, contenu, pied de page, etc.)
 Positionnement des éléments les uns par rapport aux
autres

BDW1

89
AFFICHAGE D’UN ÉLÉMENT HTML
 L’affichage d’un élément dépend de quatre
paramètres optionnels appliqués à la boîte qui le
contient.
 Son ordre d’apparition dans le flux
 Ses dimensions (hauteur, largeur, marges)
 Son type de boîte
 ce qui détermine le comportement de l’élément HTML en
termes d’affichage et de relation avec ses éléments voisins
 Son positionnement

BDW1

90
NOTION DE FLUX
 Le flux est l’ordre dans lequel les éléments HTML
sont lus par le navigateur et affichés :

 selon le type d’élément :

 Bloc (p, div) :
 éléments les uns en dessous des autres (succession verticale)

 inline (span, a, img):

 éléments les uns à côté des autres (succession horizontale)

 Selon les propriétés de style CSS display

 Remarque : il est possible de sortir un élément du flux

naturel, dans ce cas, l’espace libéré reste vacant BDW1

91
TYPE DE BOÎTE

 Types de rendu pour la propriété display :

 block
 inline
 inline-block
 list-item
 table, table-row, table-cell

 Les éléments bloc ont par défaut un type de

rendu block, et les éléments inline ont par défaut
un rendu inline
 Mais un élément peut être “reclassé” grâce à la
propriété display BDW1

92
TYPE DE BOÎTE
 Type non affiché
display : none ;
 n’est pas affiché

 Type de rendu block

display : block ;
 Elément placé sous un autre (succession verticale) :
 Occupe toute la largeur de son conteneur
 Redimensionnable avec les propriétés width, height, min-
width ou min-height
 Peut avoir des marges verticales
 Elements HTML block ont par défaut ce type de rendu CSS
BDW1

93
TYPE DE BOÎTE
 Type de rendu inline
display : inline ;
 Elément placé à côté d’un autre (succession
horizontale) :
 Largeur déterminée par leur contenu (texte, image, etc.)
 Pas redimensionnables (en théorie)
 Eléments HTML inline ont par défaut ce type de rendu
CSS

 Type de rendu inline-block

display : inline-block ;
Identique au rendu inline, mais les éléments sont
redimensionnables
BDW1
 Cas des balises <input>

94
TYPE DE BOÎTE
 Type de rendu list-item
display : list-item ;
 Elément de type block qui bénéficie des propriétés liées
aux puces
 Cas de la balise <li>

 Type de rendu table, table-row, table-cell

display : table | table-row | table-cell ;
 Même comportement que les balises HTML table, tr, td
 Peuvent être utilisées pour la mise en page

BDW1

95
POSITIONNEMENT
 On considère la page comme un repère orthonormé :
 Point de coordonnées d’origine (0, 0) en haut à gauche
 Possibilité de placer des éléments en indiquant leurs
coordonnées dans ce repère
 Méthode très précise, mais fastidieuse selon le nombre
d’éléments
0,0

Ma page
HTML

BDW1

96
POSITIONNEMENT ABSOLU
 Positionnement absolu
position : absolute ;
L’élément déclaré en position absolue est
totalement retiré du flux :
 Positionnement par rapport au premier ancêtre
positionné rencontré (sinon la fenêtre du navigateur)
 Propriétés top, left, bottom, right pour indiquer l’écart
entre le côté représenté par la propriété et l’élément

BDW1

97
POSITIONNEMENT ABSOLU

BDW1

98
http://www.pompage.net/IMG/html/page_modele09.html
POSITIONNEMENT FIXE
 Positionnement fixe
position : fixed ;
 Idem que la position absolue, mais :
 Positionnement par rapport à la fenêtre du
navigateur suivant un ou plusieurs côtés
 Propriétés top, left, bottom, right pour indiquer
l’écart entre le côté représenté par la propriété et
l’élément
 Même avec une barre de défilement, l’élément fixe
gardera toujours la même position dans la page

BDW1

99
POSITIONNEMENT RELATIF
 Positionnement relatif
position : relative ;
Décale l’élément par rapport à sa position dans le
flux
 Les autres éléments considèrent que celui-ci est
toujours à sa position initiale dans le flux
 Utile pour servir de référence ancêtre à un élément
positionné en absolu
 Utile pour utiliser la superposition d’éléments avec la
propriété z-index

BDW1

100
PROPRIÉTÉ FLOAT
 Positionnement flottant
float : left | right | none | initial ;
Indique qu’un élément s’enroule à son voisin par le
gauche ou la droite
 Effet “d’habillage”
 Largeur dictée par son contenu

Bla bla bla

float: float: bla bla bla
left; left; bla bla bla
bla bla bla
bla bla bla bla bla bla bla bla
BDW1
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
101
FLEXBOX
 Modèle de boîtes « flex » proposée dans CSS3

 Agencement automatique et adaptatif à

l’intérieur d’un contenant

 Avantage: moins contraignant que la gestion des

positionnement

 Bientôt complété par une grille (principe utilisé

dans les frameworks CSS)
BDW1

102
ADAPTATIVITÉ DE LA FLEXBOX

BDW1

103
PRINCIPES DE LA FLEXBOX
 Un container ‘flex’ définit un agencement pour les
élements de type flex qu’il contient

 L’agencement se fait selon l’axe principal des

éléments et un axe secondaire (perpendiculaire à
l’axe principal)

 Les autres éléments de la page sont affichés

normalement.

BDW1

104
DÉCLARATION D’UNE FLEXBOX

 Propriété display :

display: flex ; (pour un container en mode bloc)

display: inline-flex; (pour un container en mode inline)

Remarque : tous les enfants directs du container sont des

éléments flex

BDW1

105
ALIGNEMENT SUR L’AXE PRINCIPAL

 Propriété justify-content :

justify-content : flex-start | flex-end | center | space-

between | space-around ;

BDW1

106
ALIGNEMENT SUR L’AXE SECONDAIRE

 Propriété align-item :

align-item : flex-start | flex-end | center | strech | baseline ;

BDW1

107
ET ENCORE PLUS SUR …

BDW1

108
LIMITES DE HTML
 HTML et CSS insuffisants pour des besoins
comme :
 Manipulation de bases de données
 Interactions avec le système de fichiers
 Utilisation de bibliothèques logicielles
 Plus généralement pour des traitements complexes

BDW1

109
PAGES WEB DYNAMIQUES
Poste Serveur de
données
Poste Client

Poste Serveur Web

navigateur Serveur Web

(4) : envoi SQL
(1) : demande de la page index.php
+ paramètres
Module
(6) : retourne page HTML PHP SGBD
(index.php) (5) : retourne
tuples

(3) : lecture de
index.php (2) : accès à index.php

fichiers
index.php BDW1
(7) : affiche la
page HTML

110
PHP
PHP: HYPERTEXT PREPROCESSOR
 Langage de programmation Web dont l’objectif est de produire du
code HTML

 Origine : 1994 (Rasmus Lerdorf)

 Toujours en développement (version actuelle 5:4:8)

 PHP Licence (code ouvert, restriction sur le nom d’un produit dérivé)

 Extension d’un fichier PHP : .php

 Un fichier PHP est le code source d'un programme.

 Typage faible en PHP (typage lors de l’instanciation,conversions

implicites) BDW1

112
TUTORIAUX ET WIKILIVRES DISPONIBLES

 http://fr.wikibooks.org/wiki/Programmation_PHP

 http://sylvie-vauthier.developpez.com/tutoriels/php/grand-
debutant/

 http://fr.html.net/tutorials/php/

 …

BDW1

113
INTÉRÊT DE PHP
 Exploitation des données saisies dans les
formulaires HTML

 Permettre d’interagir avec une base de données

 visualisation du contenu de la base
 Requêtes SQL : SELECT … FROM…
 Modification du contenu de la base
 Requêtes SQL : UPDATE, INSERT, DELETE

BDW1

114
ENVIRONNEMENT DE TRAVAIL
 Editeur de texte
 Notepad++ ….

 Framework ;
 Symfony2, Zend Framework, CodeIgniter, CakePHP

BDW1

115
PHP : DEUX TYPES DE ZONES
 Délimitées par <?php et ?>

<!-- code HTML -->

<?php
/* code PHP à exécuter */
?>
<!-- code HTML -->

 Zones à l'extérieur de <?php et ?> : texte et

balises qui seront recopiés directement dans le
contenu HTML généré. BDW1

116
PHP : DEUX TYPES DE ZONES
 Délimitées par <?php et ?>

…
<body>
<p>Je commence à écrire en HTML ! </p>
<?php
echo ‘<p>Je continue à écrire du HTML mais cette
fois grâce à une fonction PHP</p>’;
?>
<p>Et je finis en écrivant directement du HTML! </p>
</body>
…

 echo étant une fonction PHP affichant la chaine de caractères qui

le suit. BDW1

Une commande PHP se finit par un point-virgule (;) 117

PHP : DEUX TYPES DE ZONES
 Délimitées par <?php et ?>

…
<body>
<p>Je commence à écrire en HTML ! </p>
<?php
echo ‘<p>Je continue à écrire du HTML mais cette
fois grâce à une fonction PHP</p>’;
?>
<p>Et je finis en écrivant directement du HTML! </p>
</body>
…

 echo (ou print) étant une fonction PHP affichant la chaine de

caractères qui le suit.
BDW1

118
PHP : DEUX TYPES DE ZONES
 Délimitées par <?php et ?>

…
Je commence à écrire en HTML !
<body>
<p>Je commence à écrire en HTML ! </p>
<?phpJe continue à écrire du HTML
echomais
‘<p>Je continue
cette fois à grâce
écrire àduune
HTML mais cette
fois grâce à une fonction PHP’;
?> fonction PHP.
<p>Et je finis en écrivant directement du HTML! </p>
</body>
Et je finis en écrivant
…
directement du HTML!
 echo (ou print) étant une fonction PHP affichant la chaine de
caractères qui le suit.
BDW1

119
PHP : GÉNÉRATION DU CONTENU
 Deux méthodes :
 Mettre du texte à l'extérieur de <?php et ?>.
 Utiliser l'instruction print (ou echo) :
echo ‘Hello LIF4’;
print ‘valeur’ ;
 valeur est évalué puis transformé en texte.
 Ce texte est ajouté à la suite du contenu HTML déjà généré.

 On peut considérer que le texte mis à l'extérieur

de <?php et ?> est passé en argument à un print.

BDW1

120
PHP : LES COMMENTAIRES
 Commentaires uniligne

<?php
// ceci est un commentaire uniligne
// qui respecte la syntaxe PHP
?>
// ceci est un bug, car ne respecte pas la syntaxe HTML

 Commentaires multi-lignes

<?php
/* ceci est un commentaire multi-lignes
qui respecte la syntaxe PHP */
?>
/* ceci est un bug, car ne respecte pas la syntaxe HTML */
BDW1

121
PHP : LES COMMENTAIRES
 Commentaires uniligne

<?php
// ceci est un commentaire uniligne
// qui respecte la syntaxe PHP
?>
// ceci est un bug, car ne respecte pas la syntaxe HTML

 Commentaires multi-lignes

<?php
/* ceci est un commentaire multi-lignes
qui respecte la syntaxe PHP */
?>
/* ceci est un bug, car ne respecte pas la syntaxe HTML */
BDW1

122
PHP : VARIABLES
 Le nom d'une variable commence par un $
$i, $utilisateur, $id, . . .

 Affectation comme en C :
$i = valeur ;

 Les variables ne sont pas explicitement déclarées

comme en C (Une variable existe dès que l'on a
fait une affectation dessus).
 Une variable peut contenir un nombre, une
chaîne de caractères, un booléen (en réalité un BDW1
entier comme en C) ou un tableau (array).
123
PHP: CHAINE DE CARACTÈRES
 Délimitées par des guillemets simples ('chaîne') ou
doubles ("chaîne").
 Si une variable apparaît dans une chaîne avec
guillemets doubles, elle est remplacée par sa valeur
(convertie en chaîne de caractères).
Mon nom est Bond!
$nom = ‘Bond’;
print "<p>Mon nom est $nom!</p>" ;
 Les variables apparaissant dans des guillemets
simples ne sont pas remplacées. Mon nom est $nom!
$nom = ‘Bond’;
print ‘<p>Mon nom est $nom!</p>’ ;

 L’opérateur de concaténation de deux chaînes de

caractères est le point (.) BDW1
print "<p>Mon nom est ". $nom ."!</p>" ;
Mon nom est Bond! 124
OPÉRATEURS COURANTS
 Arithmétiques :
+ (addition), - (soustraction), * (multiplie), / (divise),
% (modulo), ++ (incrément), -- (décrément).
 De comparaison :
== (égalité), < (inferieur strict), <= (inferieur large),
>, >=, != (différence)
 Logiques :
Conjonction (et) : and, &&
Disjonction (ou) : or, ||
ou exclusif: xor
Négation (non) : !
BDW1

125
PHP : LES TABLEAUX
 Syntaxe similaire au C.

 Affectation:
$mon_tableau[indice] = "coucou" ;
 Range "coucou" dans la case numero indice.
 Affichage
 Une valeur du tableau (la valeur se trouvant à la case indice)
print $mon_tableau[indice] ;

 Toutes les valeurs du tableau

print_r($mon_tableau);

 La première case d'un tableau porte le numéro 0.

 $mon_tableau[] = valeur ;
 Ajoute une case au tableau $mon_tableau et y range valeur. BDW1

 Pour créer un tableau vide, on peut utiliser : $mon_tableau = array() ;

126
PHP: LES TABLEAUX ASSOCIATIFS
 Un tableau associatif est un tableau associant une valeur à une
chaîne de caractères :
 Associe la valeur val à la chaîne 'clé' :
$tab_asso['clé'] = valeur;

 Syntaxe :
 Affectation
$personne[‘Nom'] = ‘Doe' ; $personne['Prenom'] = ‘John' ;
$personne = array( ‘Nom’ => ‘Doe’, ‘Prenom’ => ‘John’ );

 Affichage
print $personne['Prenom'] ;
Affiche le texte associé à la chaîne ‘Prenom’.

print_r($personne) ; BDW1
Affiche toutes les valeurs stockées dans le tableau
127
EXISTENCE ET ABSENCE DE VALEUR
D’UNE VARIABLE
 ISSET($var)
 Fonction pour tester si une variable $var existe :
 Retourne true (1) si la variable existe
 Très utile pour savoir si un formulaire a été soumis

 EMPTY($var)
 Fonction pour tester si une variable $var est nulle
 Retourne true (1) si la variable est n’est pas valuée

 Exemples:
$chiffre = 4 ;
$chaine = 'hello' ;
print isset($chiffre) ; // retourne 1
print isset($chaine) ; // retourne 1
print isset($jexistepas) ; // aucun retour
print empty($chaine) ; // aucun retour BDW1
print empty($jexistepas) ; // retourne 1
128
CONTRÔLES
 Structures de contrôles similaires à celles de C :
 Conditionnelle
 IF … ELSE
 Boucles
 WHILE
 FOR

 FOREACH

BDW1

129
STRUCTURE CONDITIONNELLE
 Structure conditionnelle similaire à celle de C :
 Si conditions renvoient true, exécution des instructions dans le bloc du if
 Sinon, s’il existe, on exécute les instructions dans le bloc du else

 Conditionnelle avec bloc if uniligne

if ( conditions )
// l’unique commande à exécuter;
 Conditionnelle avec bloc if multi-lignes
if ( conditions ) {
// le bloc if
}
 Conditionnelle avec bloc if multi-lignes et alternative
if ( conditions ) {
// le bloc if
}else{
BDW1
// le bloc else
} 130
STRUCTURE CONDITIONNELLE

<?php
$chaine = ‘Hello’ ;
if($chaine==‘Hello’) {
print ‘Salut !’ ;
}
else {
print "Au ". "revoir!" ;
}
/* ce script affichera Salut! */
?>
BDW1

131
STRUCTURE CONDITIONNELLE
 En cas de tests multiples, on peut ajouter une ou plusieurs structures
conditionnelles elseif

 Syntaxe du if. . .elseif. . .else

if(conditions) {
//instructions pour conditions vérifiées
}
elseif(conditions2) {
//instructions pour conditions2 vérfiées
}
elseif(condition3) {
//instructions pour conditions3 vérifiées
}
else {
/* instructions pour le cas où aucune condition
n’a été vérifiée */ BDW1
}

132
STRUCTURE CONDITIONNELLE

<?php
$chaine = ‘Bye' ;
if($chaine == ‘Hello’) {
print ‘Salut!’;
}
elseif($chaine == ‘Bye’) {
print ‘Au revoir!’;
}
else{
print ‘Euhhhhh…’;
}
// retournera ‘Au revoir!’
BDW1
?>
133
STRUCTURE CONDITIONNELLE
 Une autre possibilité pour exprimer un conditionnelle : switch…
case…

 Syntaxe du switch… case…

switch($variable) {
case val1: //instructions pour $variable=val1 vérifiée
break;
case val2: //instructions pour $variable=val2 vérifiée
break;
case val3: //instructions pour $variable=val1 vérifiée
break;
default: /* instructions pour le cas où aucune
condition n’a été vérifiée */
}
BDW1

134
STRUCTURE CONDITIONNELLE

<?php
$chaine = ‘Coucou’ ;
switch ($chaine) {
case ‘Hello’: print ‘Salut !’ ; break;
case ‘Bye’: print ‘Au revoir !’ ; break;
default : print $chaine . ‘!’ ;
}
/* ce script affichera Coucou! */
?>

BDW1

135
STRUCTURE CONDITIONNELLE

Ne pas oublier les BREAK;

<?php
$chaine = ‘Hello’ ;
switch ($chaine) {
case ‘Hello’: print ‘Salut !’ ;
case ‘Bye’: print ‘Au revoir !’ ;
default : print $chaine . ‘!’ ;
}
/* ce script affichera Salut !Au revoir !Hello! */
?>

BDW1

136
LES BOUCLES
 Permettent de répéter un bloc d’instructions tant
qu’une condition est vérifiée

 Utile pour parcourir un tableau, ou lire un

fichier, etc.

 Trois types de boucles en PHP :

 while
 for
 foreach

BDW1

137
BOUCLE WHILE
La boucle while (“tant que”)

while(conditions) {
/* les instructions à exécuter tant
que les conditions sont vérifiées */
}

 Exemple
<?php
$n = 0 ;
while($n < 5) {
print " " . (2 * $n + 1) ;
$n++;
}
BDW1
// résultat : “1 3 5 7 9”
?>
138
BOUCLE FOR
 La boucle FOR (“pour”)

for(initialisation ; conditions; itération) {

// instructions;
}

 La boucle FOR exécute les instructions tant que les

conditions sont vérifiées.
 L’étape initialisation est exécutée une fois en début de
boucle.
 Si les conditions sont vérifiées, instructions et itération
sont exécutées,
 puis si la condition est à nouveau vérifiée, instructions et BDW1
itération sont exécutées, . . .
139
BOUCLE FOR
 Exemple
<?php
for($n=0; $n < 5; $n++) {
print " " . (2 * $n + 1) ;
}
// résultat : “1 3 5 7 9”
?>

BDW1

140
BOUCLE FOREACH
 La boucle FOREACH (“pour chaque”)

foreach($tableau as $valeur) {
// instructions;
}

 La boucle FOREACH ) permet de parcourir des tableaux

vus comme un ensemble de valeurs

 Exemple
<?php
$monTableau=array(1,3,5,7,9);
foreach($monTableau as $val){
print ‘ ’ . $val;
} BDW1
// résultat : “1 3 5 7 9”
?> 141
BOUCLE FOREACH POUR TABLEAU
ASSOCIATIF
 La boucle FOREACH (“pour chaque”)

foreach($tableau as $key => $valeur) {

// instructions;
}

 Exemple
<?php
$monTableau=array( ‘nom’ => ‘Lumineau’ ,
‘prenom’ => ‘Nicolas’ ,
‘grade’ => ‘MCF’);
foreach($monTableau as $k => $val){
print $k . ‘: ’ . $val . ‘<br/>’;
}
/* résultat : nom: Lumineau
prenom: Nicolas BDW1

grade: MCF
*/ ?> 142
INCLUSION DE FICHIERS : INCLUDE / REQUIRE

 Il est possible de décomposer un fichier PHP en

plusieurs fichiers qui ensuite peuvent être inclus dans
le fichier PHP principal
 Factorisation du code

<?php
include("./entete.php") ;
require ("./corps.php") ;
include("./rep/piedpage.php") ;
require("./mesFonctions/fonctions.php") ;

?> BDW1

143
INCLUSION DE FICHIERS : INCLUDE / REQUIRE
 Il est possible de décomposer un fichier PHP en plusieurs
fichiers qui ensuite peuvent être inclus dans le fichier PHP
principal (include produit un warning, require une fatal error)
 Factorisation du code

<?php
include("./entete.php") ;
require ("./corps.php") ;
include("./rep/piedpage.php") ;
require("./mesFonctions/fonctions.php") ;
?>

Variante : PHP vérifie si le fichier a déjà été inclus et si c'est le

cas, ne l'inclut pas une deuxième fois.
<?php
include_once("./fonctions.php") ; BDW1
require_once ("./ressources/fonctions.php") ;
?> 144
PHP : FONCTIONS
 Syntaxe de la définition de fonction
function nom_fonction([$param1, $param2]) {
//instructions
[return $valeur;]
}

 Une fonction est définie par le mot clé function, un nom et

éventuellement des paramètres :
 nom_fonction est le nom de la fonction
 $param1, $param2, …. sont des paramètres (optionnels)
 Une fonction sans paramètre est déclaré par :
function maFonction(){ //instruction }
BDW1
 $valeur est une valeur retournée par la fonction (optionnelle)

145
PHP : FONCTIONS
 Créer une fonction qui attribue l’appréciation ‘Admis’
si l’étudiant a une note supérieure ou égale à 10, et
‘Ajournée’ sinon.

 On dispose du tableau associatif suivant:

<?php
$lesNotes = array(‘Pim’ => 12, ‘Pam’ => 16, ‘Poum’ => 9,
‘Riri’ => 2, ‘Fifi’ => 17, ‘Loulou’ => 10);
?>

BDW1

146
PHP : FONCTIONS
 On va créer la fonction appreciation
<?php
function appreciation( $tab ){
foreach( $tab as $nom => $note ){
if( $note >= 10 ){
echo $nom . ‘: Admis <br/>’;
}else{
echo $nom . ‘: Ajourné <br/>’;

}
}
}

$lesNotes = array(‘Pim’ => 12, ‘Pam’ => 16, ‘Poum’ => 9,

‘Riri’ => 2, ‘Fifi’ => 17, ‘Loulou’ => 10);
BDW1
?>

147
PHP : FONCTIONS
 On fait l’appel à la fonction
<?php
function appreciation( $tab ){
foreach( $tab as $nom => $note ){
if( $note >= 10 ){
echo $nom . ‘: Admis’;
}else{
echo $nom . ‘: Ajourné’;

}
}
}

$lesNotes = array(‘Pim’ => 12, ‘Pam’ => 16, ‘Poum’ => 9,

‘Riri’ => 2, ‘Fifi’ => 17, ‘Loulou’ => 10);
BDW1
appreciation($lesNotes);

?> 148
PHP : FONCTIONS
<?php
function appreciation( $tab ){
foreach( $tab as $nom => $note ){
if( $note >= 10 ){
echo $nom . ‘: Admis <br/>’;
}else{
echo $nom . ‘: Ajourné <br/>’;

}
}
}

$lesNotes = array(‘Pim’ => 12, ‘Pam’ => 16, ‘Poum’ => 9,

‘Riri’ => 2, ‘Fifi’ => 17, ‘Loulou’ => 10);

appreciation($lesNotes);

/* Résultat obtenu:
Pim: Admis
Pam: Admis
Poum: Ajourné
Riri: Ajourné
BDW1
Fifi: Admis
Loulou: Admis
*/
?>
149
PHP : FONCTIONS (ALTERNATIVE)
<?php
function appreciation( $tab ){
$res = ‘’;
foreach( $tab as $nom => $note ){
if( $note >= 10 ){
$res .= $nom . ‘: Admis <br/>’;
}else{
$res .= $nom . ‘: Ajourné <br/>’;

}
}
return $res;
}

$lesNotes = array(‘Pim’ => 12, ‘Pam’ => 16, ‘Poum’ => 9,

‘Riri’ => 2, ‘Fifi’ => 17, ‘Loulou’ => 10);

echo appreciation($lesNotes);
BDW1

?>

150
FONCTIONS DISPONIBLES EN PHP
 En plus des fonctions que vous pouvez créer, le
noyau (core) de PHP intègre de nombreuses
fonctions :
 Manipulation de tableaux
 Manipulation de chaînes
 Manipulation du système de fichiers
 Manipulation de bases de données
 ...

http://www.php.net/manual/fr/langref.php
BDW1

151
VARIABLES SUPERGLOBALES
 PHP définit un certain nombre de variables
superglobales :
 Accessibles de n’importe où
 Représentées par des tableaux associatifs

 Une dizaine de superglobales dont :

 Variables d’environnement passées au script ($_ENV)
 Variables de session ($_SESSION)
 Variables de serveur ($_SERVER)
 contient les paramètres de $_GET, $_POST et $_COOKIE
 Variables de paramètres ($_REQUEST, $_GET,
$_POST,$_COOKIE)
BDW1
 ...
152
VARIABLE SUPERGLOBALE $_GET
 La variable $_GET :
 Contient les paramètres d’un formulaire soumis
 Ces paramètres ont été transmis via la méthode get

 Accès au paramètre nomParam soumis par get

$_GET['nomParam']

 Retourne la valeur pour le paramètre nomParam

BDW1

153
VARIABLE SUPERGLOBALE $_GET
<?php
if(isset($_GET['bValider'])){ // formulaire soumis
echo "Le formulaire a bien été soumis !" ;
}else { // formulaire non soumis
?>
<form action="" method="get">
<input type="text" name="nom">
<input type="submit" name="bValider" value="Soumettre">
</form>
<?
}
?>
BDW1

154
VARIABLE SUPERGLOBALE $_POST
 La variable $_POST :
 Contient les paramètres d’un formulaire soumis
 Ces paramètres ont été transmis via la méthode post

 Accès au paramètre nomParam soumis par post

$_POST['nomParam']

 Retourne la valeur pour le paramètre nomParam

BDW1

155
VARIABLE SUPERGLOBALE $_POST
<?php
if(isset($_POST['bValider'])){ // formulaire soumis
echo "Le formulaire a bien été soumis !" ;
}else { // formulaire non soumis
?>
<form action="" method="post">
<input type="text" name="nom">
<input type="submit" name="bValider" value="Soumettre">
</form>
<?
}
?>
BDW1

156
VARIABLE SUPERGLOBALE $_SESSION
 Une page PHP utilisant une session doit
obligatoirement, avant même d'afficher quoi que
ce soit, commencer par l'instruction :
session_start() ;

 Cette instruction crée la variable $_SESSION et

la remplit avec les valeurs qu'elle avait dans la
page PHP précédente.

 La variable $_SESSION se manipule ensuite

comme un tableau associatif classique.
BDW1

157
EXTENSIONS PHP
 PHP inclut des extensions spécifiques à des
applications tierces, classées en différentes catégories :
 Extensions noyau (e.g., Arrays, Date/Time, FileSystem)
 Extensions intégrées (e.g., FTP, PostgreSQL, Zip)
 Extensions externes (e.g., MySQL, GeoIP)

Pour manipuler les bases de données,

PHP possède plus d’une vingtaine
d’extensions et des couches d’abstraction
BDW1

158
EXTENSIONS PHP
 Pour la base de données MySQL, trois API différentes :
 mysql : API d’origine, aujourd’hui obsolète
 mysqli : mysql improved, avec de nouvelles fonctionnalités
 PDO_MySQL : couche d’abstraction d’accès aux données à
travers des PHP Data Objects

 Utilisation de l’API mysqli :

 Support des paradigmes de programmation procédurale et
orientée objet
 Support des transactions
 Support des requêtes multiples
BDW1

159
ACCÈS À UN BASE MYSQL
 Quatre étapes :
1. Connexion au SGBD et sélection d’une base
2. Envoi d’une requête
3. Récupération et utilisation du résultat
4. Fermeture de la connexion

 On peut itérer les étapes 2 et 3 autant de fois que

l’on veut avant de fermer la connexion à l’étape 4

BDW1

160
CONNEXION AU SGBD ET SÉLECTION D’UNE BASE

$user = 'nom_utilisateur' ;
$mdp = 'mon_de_passe' ;
$machine = 'localhost' ; // machine locale (127.0.0.1)
$bd = 'une_bd' ;

$connexion = mysqli_connect($machine,$user,$mdp, $bd);

if(mysqli_connect_errno()) // erreur si > 0

printf("Échec de la connexion : %s", mysqli_connect_error());
else {
// utilisation de la base
}
BDW1

161
CONNEXION AU SGBD ET SÉLECTION D’UNE BASE

$user = 'nom_utilisateur' ;
$mdp = 'mon_de_passe' ;
$machine = 'localhost' ; // machine locale (127.0.0.1)
$bd = 'une_bd' ;

$connexion = mysqli_connect($machine,$user,$mdp, $bd);

if(mysqli_connect_errno()) // erreur si > 0

printf("Échec de la connexion : %s", mysqli_connect_error());
else {
// utilisation de la base
}
BDW1

162
CONNEXION AU SGBD ET SÉLECTION D’UNE BASE

$user = 'nom_utilisateur' ;
$mdp = 'mon_de_passe' ;
$machine = 'localhost' ; // machine locale (127.0.0.1)
$bd = 'une_bd' ;

$connexion = mysqli_connect($machine,$user,$mdp, $bd);

if(mysqli_connect_errno()) // erreur si > 0

printf("Échec de la connexion : %s", mysqli_connect_error());
else {
Tentative de connexion avec mysqli_connect et les
// machine,
arguments utilisation de lamot
utilisateur, base
de passe et base de données.
}
L’objet $connexion représente le lien de connexion vers la base deBDW1
données sélectionnée
163
CONNEXION AU SGBD ET SÉLECTION D’UNE BASE

$user = 'nom_utilisateur' ;
$mdp = 'mon_de_passe' ;
$machine = 'localhost' ; // machine locale (127.0.0.1)
$bd = 'une_bd' ;

$connexion = mysqli_connect($machine,$user,$mdp, $bd);

if(mysqli_connect_errno()) // erreur si > 0

printf("Échec de la connexion : %s", mysqli_connect_error());
else {
// utilisation de la base
}
BDW1

164
CONNEXION AU SGBD ET SÉLECTION D’UNE BASE

$user = 'nom_utilisateur' ;
$mdp = 'mon_de_passe' ;
$machine = 'localhost' ; // machine locale (127.0.0.1)
$bd = 'une_bd' ;

$connexion = mysqli_connect($machine,$user,$mdp, $bd);

if(mysqli_connect_errno()) // erreur si > 0

printf("Échec de la connexion : %s", mysqli_connect_error());
else {
// utilisation de la base
}
Vérification de la connexion avec mysqli_connect_errno() qui
BDW1
retourne le code d’erreur (ou 0 en cas de succès)
165
ENVOI D’UNE REQUÊTE
// on possède un lien de connexion $connexion

$req = 'une_requete_sql' ;
$resultat = mysqli_query($connexion, $req) ;

if($resultat == FALSE) // échec si FALSE

printf("Échec de la requête" ;
else {
// utilisation du résultat
}

BDW1

166
 ENVOI D’UNE REQUÊTE
// on possède un lien de connexion $connexion

$req = 'une_requete_sql' ;
$resultat = mysqli_query($connexion, $req) ;

if($resultat == FALSE) // échec si FALSE

printf("Échec de la requête" ;
else {
// utilisation du résultat
}
Envoie la requête $req à la base, et récupère un objet $resultat
BDW1

167
ENVOI D’UNE REQUÊTE
 Si la requête est construite avec les données d’un
formulaire, il faut échapper ces données avec la
fonction mysqli_real_escape_string
 Durant la phase de développement, il peut être utile
d’afficher $req avant son envoi au SGBD

 Une seule requête avec la fonction mysqli_query.

 Utiliser mysqli_multi_query pour envoyer plusieurs

requêtes séparées par des point-virgules.

BDW1

168
RÉCUPÉRATION ET UTILISATION DU RÉSULTAT
// on possède un objet résultat $resultat
while ($ligne = mysqli_fetch_assoc($resultat))
{
//instructions utilisant les champs
$ligne['champ1'], …
}
 La variable $ligne récupère successivement chaque ligne
de résultat (une par itération) dans un tableau associatif :
 Accès aux valeurs par $ligne['champ']
 Autres fonctions pour récupérer dans un tableau à indices
numériques (mysqli_fetch_array)
 Pour les requêtes update, delete, pas besoin de parcourir leBDW1
résultat
169
FERMETURE DE LA CONNEXION
// on possède un lien de connexion $connexion
mysqli_close($connexion) ;

 Ferme une connexion $connexion

 mysqli_close peut être précédée de mysqli_kill pour
détruire le thread MySQL

BDW1

170
EXEMPLE
<?php
$salaire_max = 20000 ;

$requete = "SELECT nom,salaire FROM employe WHERE salaire <= $salaire_max" ;

$resultat = mysqli_query($connexion, $requete);

if($resultat == FALSE) // échec si FALSE

printf("Échec de la requête") ;
else {
print "<h3>Employés gagnant moins de $salaire_max euros par an</h3>" ;

while ($nuplet = mysqli_fetch_assoc($resultat)) {

$nom = $nuplet['nom'] ;
$sal = $nuplet['salaire'] ;
print "<p>$nom gagne $salaire euros par an.</p>" ;
}
}
?> BDW1

171
EXERCICE

Modifiez votre CV de manière à stocker dans la

base de données les informations concernant vos
domaines de compétences et vos compétences
techniques.
Votre CV sera donc généré dynamiquement grâce à
votre code PHP.

Cette version de votre CV sera toujours

SANS MISE EN FORME
BDW1

172
SYSTÈME DE FICHIERS
 Avec PHP, il est possible de manipuler le système de
fichiers du serveur :
 Lister les fichiers d’un répertoire
 Lire ou écrire dans un fichier texte
 Gérer des fichiers uploadés par l’utilisateur
 ...

 Extension filesystem incluse dans le noyau de PHP

BDW1

173
CHEMINS DES FICHIERS
 Plusieurs types de système de fichiers (e.g., EXT3, FAT)
 slash comme séparateur dans les chemins (/)

 Récupération du nom d’un fichier à partir d’un chemin:

basename($chemin_fichier)

Extrait le nom de fichier à partir de son chemin $chemin_fichier

 Exemple:
basename($_SERVER['SCRIPT_FILENAME'])
retourne le nom de fichier du script courant

 Récupération du répertoire parent d’un chemin

dirname($chemin_fichier)

 Retourne le répertoire parent d’un chemin

 Exemple:
dirname('/home/lif4/CM/cours.php']) retourne /home/lif4/CM/

BDW1
 Les commandes dirname et basename agissent seulement sur la chaîne de
caractères représentant le chemin !
174
TEST SUR LES FICHIERS
 Existence d’un fichier ou répertoire
file_exists($chemin)
 Retourne true si le fichier ou répertoire représenté par
$chemin existe

Existence d’un fichier

is_file($nom_fichier)
Retourne true si $nom_fichier existe et est un fichier

Existence d’un fichier

is_dir($nom_rep)
 Retourne true si $nom_rep existe et est un répertoire
BDW1

175
TESTS SUR LES FICHIERS
is_readable($chemin)
is_writable($chemin)
 Retourne true si le fichier ou répertoire représenté par
$chemin existe avec les droits de lecture ou écriture

is_executable($nom_fichier)
 Retourne true si le fichier représenté par $nom_fichier
existe avec les droits d’exécution

 Remarque:
 Les droits sont ceux de l’utilisateur qui fait tourner le BDW1
serveur Web
176
LECTURE D’UN FICHIER
$contenu = file_get_contents($fichier
[, FILE_USE_INCLUDE_PATH]);

 Lit le contenu du fichier $fichier et place son

contenu dans la chaîne $contenu :
 Retourne false en cas d’échec
 Drapeau booléen optionnel
FILE_USE_INCLUDE_PATH pour rechercher le
fichier dans les chemins définis dans include_path

BDW1

177
ECRITURE DANS UN FICHIER
$nb = file_put_contents($fichier, $donnees
[,$drapeaux]);
Ecrit le contenu de la variable $donnees dans le fichier
$fichier :
 Retourne le nombre d’octets écrits, sinon false
 Si $fichier n’existe pas, il est créé
 La variable $donnees peut être une chaîne ou un tableau
 Les drapeaux sont optionnels (concaténation de drapeaux
avec |) :
 LOCK_EX (verrouillage du fichier pendant l’écriture)
 FILE_APPEND (concaténation des données au fichier s’il existe)

 FILE_USE_INCLUDE_PATH (recherche du fichier dans le

include_path) BDW1

178
LECTURE ET ÉCRITURE DANS UN FICHIER
$chaine1 = "Ceci est une première ligne";
$chaine2 = "Ceci est une seconde ligne";
$fichier = "foo.txt";

$nb = file_put_contents($fichier, $chaine1);

$retour = file_put_contents($fichier, " ".nb, LOCK_EX
| FILE_APPEND);

$contenu = file_get_contents($fichier);
file_put_contents($fichier, $chaine2 ." ".$contenu);

Que contient "foo.txt" à la fin de ce script ?

BDW1
Réponse:
Ceci est une seconde ligne Ceci est une première ligne 27
179
FICHIER TEMPORAIRE
$fichier_temp = tmpfile();
 Crée un fichier temporaire au nom unique dans le
répertoire système utilisé pour les fichiers temporaires :
 Retourne un pointeur $fichier_temp sur le fichier créé, ou
false en cas d’erreur
 Fichier ouvert en lecture et écriture
 Fichier automatiquement effacé à la fin du script ou
lorsque l’on ferme le fichier avec la fonction
fclose($fichier_temp)

BDW1

180
RÉPERTOIRES
 $contenu = scandir($repertoire [, $tri]);
 Retourne un tableau $contenu contenant la liste des
fichiers et sous-répertoires de $repertoire.
Variable optionnelle $tri pour changer l’ordre de tri à
SCANDIR_SORT_DESCENDING ou
SCANDIR_SORT_NONE

 Autres fonctions :
mkdir($repertoire) pour créer un dossier $repertoire
rmdir($repertoire) pour supprimer un dossier $repertoire

BDW1

181