Programmation Internet et développement Web - Ivan Madjarov

Transcription

Ivan MADJAROV
Ivan MADJAROV
HTTP Client-Serveur
HTML 5.0
CSS3
HTML5
IvMad - 2014
Le modèle Client-Serveur
Le protocole HTTP
3
HTML5
IvMad - 2014
Le Web et son histoire
Le Client - Serveur Universel
• En mars 1993, Sir Tim Berners-Lee réussit à convaincre le CERN
• Le client gère l'interface Web et contrôle la saisie.
•
•
•
•
(Organisation européenne pour la recherche nucléaire) d’adopter le
World Wide Web (3W).
En inventant le Web, Sir Tim avait pour objectif de rendre simple et
facile le partage de fichiers entre deux ordinateurs connectés.
Le grand public a été rapidement conquis par les principes du 3W.
Aujourd’hui, plus de 40% de la population mondiale est connectée à
Internet, soit près de 3 milliards d'internautes dans le monde.
Des chiffres qui confirment une véritable réussite d'Internet et en
particulier celui du W3.
• Source:
http://www.developpez.com/actu/74785/Quel-avenir-pour-Internet-et-le-web-Leweb-serait-il-en-train-de-perdre-ses-principes-fondateurs/
• Le serveur HTTP relaie les données entre le client et le serveur.
• Le serveur d'application se charge du traitement des données.
• Le serveur de base de données se charge d'accéder aux données.
4
HTML5
IvMad - 2014
5
HTML5
IvMad - 2014
6
Les standards du Web
Le modèle Client-Serveur - thin client
• HTTP (HyperText Transfer Protocol) est un protocole de communication
• "Client léger" désigne une application accessible via une interface
et d’échange de données Client-Serveur.
• HTML (HyperText Markup Language) norme générique pour l'échange
de données multimédias.
Web consultable à l'aide d'un navigateur Web (universel):
• Firefox, IE, Opera, Safari, Google Chrome
• Un "client léger" traite des pages Web simple:
• Un document HTML (une page Web) se compose d'un ensemble de balises
délimitant des blocs de texte, en leur conférant des propriétés spécifiques à
la visualisation (présentation) par un navigateur universel (IE, Firefox,
Chrome, Opera, Safari).
• Handicap majeur: la structuration sémantique du document n'est pas prise
en compte.
• Dernière norme standardisée HTML 5.0 essaye de palier à ce problème
• HTML, CSS, Javascript ou VBScript
• Pour traiter certains formats non standardisés on installe des composants
téléchargeables: des plugins (ActiveX, Flash, etc.)
• L'essentiel des traitements sont réalisés du côté du serveur et
l'interface graphique est envoyée au navigateur à chaque requête
(demande du client).
• Point négatif: Surcharge du serveur
• CGI (Common Gateway Interface) est la norme qui définie l'interface
• Point positif: Technique AJAX permettant des interventions dynamiques sur
permettant l'exécution de programmes externes par un serveur HTTP.
le client sans recharge de page.
• Réalisation en mode ISAPI sur certains serveurs récents.
HTML5
IvMad - 2014
7
HTML5
IvMad - 2014
8
Le modèle Client-Serveur - heavy client
Le modèle Client-Serveur - mid-heavy client
• Le "Client lourd" est une application graphique exécutée sur le
• Un "Client semi-lourd" est une applet Java qui évolue dans le cadre
système d'exploitation de l'utilisateur (côté client).
Application généralement installée sous le système d'exploitation de
l'utilisateur.
La gestion des mises à jour se fait par Internet afin de la faire évoluer.
Excellentes fonctionnalités et rapidité dans un environnement intégré
d'un système d'exploitation.
Maintenances et mises à jour demandent une connexion réseau
permanente.
Existe des solutions de gestion à distances (problème de sécurité)
Point négatif: Souvent formats de données propriétaires
Point négatif: Exige la formation des clients utilisateurs
Point positif: Applications automatiquement mises à jour.
d'un navigateur et est gérée par la machine virtuelle de ce dernier.
Interface graphique bien développée;
Problèmes de sécurité résolus;
Rapidité satisfaisante, premier chargement long;
Maintenance et mises à jour faciles à distances;
Le langage Java autorise ce genre d'application.
Le langage Python évolue dans cette direction
Dans cette catégorie il faut mentionner aussi les composants
téléchargeables ActiveX (Microsoft) et Flash (Adobe).
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
• Très rependus sur le Web mais ils ne sont pas standardisés par W3C
HTML5
IvMad - 2014
9
HTML5
IvMad - 2014
• La gestion des pages statiques
• La gestion des pages dynamiques:
• Des pages HTML sont générées de manière statiques depuis une base de
10
• Solution à la base de CGI:
données avec une certaine régularité (hebdomadaire, mensuel, …).
• Une procédure exporte un contenu d’une BD vers l’espace public du
serveur Web
HTML5
IvMad - 2014
11
HTML5
IvMad - 2014
• La gestion des pages dynamiques:
• Cloud ou les environnements virtuels
• Solution à la base de API (le modèle ISAPI):
12
HTML5
IvMad - 2014
13
HTML5
IvMad - 2014
• Ajax : (Asynchronous JavaScript and XML) est une technique de mise à
• Application Ajax: Google Suggest
jour des parties d'une page sans la charger en entier.
• Cela permet de gagner du temps en chargement et avoir des réponses
quasi instantanément.
• La technique se base sur une méthode JavaScript intégrée aux
navigateurs.
Ivan MADJAROV
HTML CSS
5.0
3.0
PARTIE I
HTML 5.0
CSS3
14
HTML5
IvMad - 2014
17
HTML5
IvMad - 2014
C'est quoi HTML ?
C'est quoi HTML 5.0 ?
• Nous connaissons tous HTML plus ou moins
• HTML5 c'est avant tout le nouveau standard pour le langage HTML.
• Lorsque nous naviguons sur Internet c'est des pages HTML qui sont
visualisées à l'écran de notre navigateur Web
• ou quand nous écrivons nos propres pages Web nous le faisons en balisant
le texte, le hyperlien ou l'image à présenter avec des marqueurs HTML.
• L'évolution de ce langage de marquage standardisé par W3C abouti à
la formule: HTML5 = HTML4 + JavaScript + CSS3
• HTML5 est un standard en développement, mais déjà la majeure
partie des navigateurs Web supportent la plupart des nouveaux
éléments et les APIs.
• Pour le nouveau HTML5 certaines règles ont été établies:
• Les nouvelles options doivent être basées sur
•
•
•
•
•
•
HTML5
IvMad - 2014
19
18
HTML, CSS, DOM et
JavaScript;
Réduire l'utilisation de plugins externes (Flash par exemple);
Améliorer les rapports d'erreurs;
Plus de balises fonctionnelles pour remplacer les scripts (JavaScript);
HTML5 doit se rendre indépendant des unités d'utilisation (fixe et mobile)
Rendre transparent le processus de développement.
Les balises de base du HTML 4.01 restent opérationnelles.
HTML5
IvMad - 2014
20
L'histoire et les nouveaux éléments
Les balises HTML5
• Internet a beaucoup changé depuis que le HTML 4.01 est devenu
• Un langage est un ensemble de signes, doté d’une sémantique et d’une
standard en 1999.
• Aujourd'hui certains éléments du HTML 4.01 sont devenus obsolètes,
d'autres n'ont jamais été utilisés, ou bien ils ont été appliqués dans des
contextes différents de l'idées de leur création. Ces éléments sont
retirés ou entièrement réécrits dans HTML5.
• HTML5 propose de nouveaux éléments sémantiques pour mieux
structurer un document et fournir une meilleure manipulation de
forme, dessin et contenu multimédia.
• Les nouveaux éléments sont repartis:
syntaxe. Le HTML se soumet entièrement à cette règle en utilisant des
balises de marquage et des options de précision.
• Les balises HTML structurent le contenu du document, en délimitant
des blocs qui seront amenés à contenir:
• Nouveaux éléments sémantiques ou de structure
• Nouveaux éléments multimédias
• Nouveaux éléments de formulaire
• des paragraphes,
• des titres,
• des listes et tableaux,
• différents types de médias (images, sons, vidéos),
• des contrôles de formulaires
• des liens hypertextes.
• Une balise débute par le signe "inférieur à", et finit par le signe
"supérieur à" (on parle aussi de chevrons).
HTML5
IvMad - 2014
21
HTML5
IvMad - 2014
Le document HTML5 minimal
Un document HTML5 minimal
<!doctype html>
<!‐‐ Défini le type de document ‐‐>
<html lang="fr">
<!‐‐ début avec langue par défaut ‐‐>
<head>
<!‐‐ Entête du document ‐‐>
<meta charset="utf‐8"> <!‐‐ Codage par défaut ‐‐>
<title>Titre de la page</title> <!‐‐ titre navigateur ‐‐>
<!‐‐ Feuille de style externe à importer ‐‐>
<link rel="stylesheet" href="style.css">
<script src="script.js">
<!‐‐ Script externe à importer ‐‐>
</script>
</head>
<body>
<!‐‐ Corps du document ‐‐>
...
<!‐‐ Le contenu visualisé par le navigateur ‐‐>
...
</body>
</html>
• <!doctype html>
HTML5
IvMad - 2014
22
• Un document HTML5 doit toujours débuter par un doctype.
• Il s’agit d’une déclaration permettant de renseigner le navigateur sur le
type de document HTML délivré.
• L'élément <html>
• L’élément <html> constitue la racine de tout document HTML. Il clôt
l’ensemble en fin de page par une balise fermante </html>.
• L'élément <head>
• L’en-tête du document fournit des renseignements sur le document luimême: <title>, <meta>, <link>, <style>, <script>, <base>
• L'attribut lang de la balise <html>
• L'attribut lang précise la langue utilisée pour le contenu de la page.
Une
langue bien indiquée sera utile ainsi aux synthèses vocales
23
HTML5
IvMad - 2014
24
Un document HTML5 minimal
Les balises HTML5 : Texte (<p>) (I)
• L'attribut charset de la balise <meta>
• La balise <p> marque le début d’un nouveau paragraphe qui se voit
• <meta charset="utf‐8">
• Le choix de l'UTF-8 est désormais préconisé par le W3C pour tous les
protocoles échangeant du texte sur internet (dont HTML).
• L'élément <link>
•
•
•
• <link rel="stylesheet" href="style.css">
• Une balise <link> placée dans l'en-tête permet de mettre en relation la
page avec d'autres documents externes, une feuilles de style CSS par
exemple de type stylesheet.
• L'élément <script>
• <script src="script.js"></script>
• L'élément permet d'ajouter des scripts (JavaScript) qui vont s'exécuter dans
le navigateur dès leur chargement.
•
fermé par </p>. Un paragraphe ne peut contenir un autre paragraphe.
Son contenu est de type texte,
Un saut de ligne est signalé par la balise fermée <br />
C’est un élément de type bloc qui offre une information sémantique
au texte qu’il contient.
Exemple d’usage:
• <p>Ceci est mon premier paragraphe.</p>
• <p>Ceci est mon deuxième paragraphe <br /> sur deux lignes.</p>
• Le style par défaut des navigateurs Web introduit un espace avant et
après chacun des paragraphes.
HTML5
IvMad - 2014
25
HTML5
IvMad - 2014
26
Les balises HTML5 : Texte (<p>) (II)
Les balises HTML5 : Texte (<p>) (III)
<!doctype html>
<head>
<meta charset="utf‐8">
<title>Paragraphe</title>
</head>
<body>
<p>Présentation d'un premier paragraphe sur une ligne.</p>
<p>Composition d'un deuxième paragraphe <br />sur deux lignes.</p>
</body>
</html>
<!doctype html>
<head>
<title>Paragraphe</title>
</head>
<body>
<p>Présentation d'un premier paragraphe sur une ligne.</p>
<p>Composition d'un deuxième paragraphe <br />sur deux lignes.</p>
</body>
</html>
HTML5
IvMad - 2014
27
HTML5
IvMad - 2014
Les balises HTML5 : Lettre accentuée
Les balises HTML5 : Texte balisé
• Pour inclure des caractères accentués, vous devez remplacer la lettre
<!doctype html>
<html lang="fr">
<head>
<title>Modèle de document HTML5 simple</title>
</head>
<body>
<p>Ceci est un <strong>texte en gras</strong>.</p>
<p>Ceci est un <em>texte en italic</em>.</p>
</body>
</html>
La balise <strong> met le
texte encadré en gras
La balise <em> met le texte
encadré en italique
Le paragraphe entier peut être
stylé autrement
accentuée par l'entité correspondante (une microcommande qui
commence avec '&' et fini par ';').
• Ceci avant tout permet une harmonisation
entre les différents systèmes d'exploitations et
surtout entre les différentes particularités de
chaque langue et la configuration locale de chaque
navigateur Web.
Le principe est le même pour insérer des caractères
spéciaux: pour écrire € on compose €
• Voir les tableaux à l'adresse:
http://139.124.26.245/pi/html4/html‐1.html
28
HTML5
IvMad - 2014
29
HTML5
IvMad - 2014
La balise <h?> : Titre
La balise <ol> : Liste ordonnée
• L'élément TITRE permet de mettre en valeur un texte. Ainsi, on peut
<!doctype html>
nommer des section, sous-section, etc. Le retour à la ligne se fait
automatiquement.
<head>
<!doctype html>
<html lang="fr">
<head>
<title>Titre</title>
<body>
<h1>Titre de niveau 1</h1>
</body>
</html>
HTML5
<html lang="fr">
<title>Liste ordonnée</title>
</head>
Une liste ordonnée est équipée de
puces numérotées par le navigateur.
Le conteneur <ol> est toujours
parent de zéro ou plusieurs
éléments de liste <li> .
<body>
<ol>
<lh>Titre</lh> <!‐‐ obsolète ‐‐>
<li>élément 1</li>
</ol>
</body>
</html>
IvMad - 2014
31
HTML5
IvMad - 2014
La balise <ul> : Liste non ordonnée
HTML5: Listes
<!doctype html>
<!doctype html><html lang="fr"><head><meta charset="utf‐8">
<title>Listes</title><style>
ol.un { color: #2222CC;
font‐style: italic;
font‐size: 0.75em; }
ol.deux { color: #000077;
font‐weight: bold;
font‐size: 1.5em; }
</style></head>
<body>
<ol type="A" class="deux">
<li>Niveau un, élément un</li>
<li>Niveau un, élément deux
<!‐‐ pas de </li> ici ! ‐‐>
<ol start="5" class="un">
<li>Niveau deux, élément un</li>
<li>Niveau deux, élément deux</li>
<li>Niveau deux, élément utrois</li>
</ol>
</li>
<!‐‐ le </li> est placé ici ‐‐>
<li>Niveau un, élément trois</li>
</ol>
</body></html>
<html lang="fr">
<head>
<title>Liste non ordonnée</title>
</head>
<body>
<ul>
<lh>Titre</lh> <!‐‐ obsolète ‐‐>
</ul>
</body>
</html>
30
La liste non ordonnée <ul> est la
plus fréquemment utilisée. Comme
son nom l’indique, son contenu
n’est pas spécialement trié et son
ordre peut être changé sans altérer
significativement son sens.
32
HTML5
IvMad - 2014
33
Les couleurs en HTML 5 (I)
HTML5
IvMad - 2014
34
Les couleurs en HTML 5 (II)
• Le code RVB (Rouge-Vert-Bleu) – RGB (Red-Green-Blue) est un code
•
•
•
•
décimal ou hexadécimal constitué des trois composants RGB
La combinaison des trois couleurs conçoit la couleur affichée à
l'écran.
Les proportions évoluent selon un nombre à deux décimales en base
16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Pour chacune des trois couleurs, de "00" à "FF" il y a 256 nuances. La
combinaison des trois couleurs peut créer plus de 16 millions de
couleurs - un code de 6 décimales en base 16.
Le code d'une couleur en HTML s'écrit donc ainsi : "#11AADD".
HTML5
IvMad - 2014
35
HTML5
IvMad - 2014
36
Les balises HTML5 : Styler un texte
CSS3 - feuilles de styles (I)
<!doctype html>
<html lang="fr">
<head>
<title>Paragraphe en style</title>
‐‐> Le titre du document
<style type="text/css" media="screen"> ‐‐> définition des styles
body {
background:#EFECCA;
‐‐> couleur fond du document
}
p {
color:#78A419;
‐‐> Couleur du texte
font‐size:2em;
‐‐> Taille du texte
font‐style:italic;
‐‐> Style du texte
text‐align:center;
‐‐> Alignement du texte
}
</style>
</head>
<body>
<p>Un paragraphe stylé!</p>
</body>
</html>
Les Cascading Style Sheets (CSS) contrôlent la mise en page des éléments
composant un document. Ainsi, on peut définir la couleur et la taille
d'une police, le positionnement d'un objet, l'espacement entre les
paragraphes, ou gérer des effets de transition. Quatre méthodes pour
intégrer les feuilles de styles en HTML5:
1. L'instruction STYLE en tant qu'élément :
<style type="text/css"> … </style>
2. L'élément LINK pour établir un lien vers une feuille de style externe:
<link type="text/css" rel="stylesheet" href="feuille.css">
3. L'instruction STYLE en tant qu'attribut (obsolète):
<p style="font‐size: 12pt; color: green">
4. Importer une feuille de style dans l'instruction STYLE :
@import url(http://mon.site.fr/html/feuille.css); Note : Le fichier .css ne doit pas contenir de code HTML
HTML5
IvMad - 2014
37
La mise en forme avec CSS3 (II)
• Une feuille de style CSS
balise1
{
propriete1:
propriete2:
}
balise2
{
propriete1:
propriete2:
propriete3:
}
balise3
{
propriete1:
}
HTML5
valeur1;
valeur2;
valeur1;
valeur2;
valeur3;
valeur1;
Description (exemple)
font
Propriété de police (family, size, …)
text-align
left, center, right, justify
text-shadow
Ombre de texte (h, v, f, c)
color
Couleur du texte (nom, rgb)
backgroundcolor
Couleur de fond
padding-left
Marge intérieure à gauche
border-width
Épaisseur de bordure
margin-left
Marge à gauche
line-height
Hauteur de ligne
verticalalign
Alignement vertical (baseline, middle,
sub, super, top, bottom)
word-wrap
Césure forcée
box-shadow
Ombre de boîte
CSS3 - feuilles de styles (IV)
IvMad - 2014
38
CSS3 - feuilles de styles (III)
Propriété
IvMad - 2014
HTML5
39
HTML5
IvMad - 2014
CSS3 - feuilles de styles (V)
<!doctype html><html lang="fr">
<head><meta charset="utf‐8">
<title>Style</title>
<style type="text/css">
body {background‐color:silver;}
H1 {font‐family:Times;
font‐size:36pt; font‐variant:small‐caps; color:green; text‐align:center}
p.un {font‐size:9pt; color:black}
La balise <strong> donne de l'importance
p.deux {margin‐left:40px; font‐size:14pt; color:blue }
à un texte (un affichage en gras).
</style>
La balise <em> met le texte encadré en
</head>
italique.
<body>
La balise <u> souligne le texte encadré.
<h1>Le titre de page</h1>
<p class="deux">Ce paragraphe de <strong>14 points</strong> sera
placé à 40 pixels de la marge de gauche et sera en bleu.</p>
<p class="un">Un paragraphe aligné par défaut de <em>9 points
en <u>noir</u></em>.</p>
</body>
</html>
40
HTML5
IvMad - 2014
41
CSS3 - feuilles de styles (VI)
<!doctype html> <html lang="fr"> <head>
<meta charset="utf‐8"> <title>Paragraphe en style</title>
<style type="text/css" media="screen">
body { background:#EFECCA;
}
p {
color:#78A419;
font‐size:2em;
font‐weight:bold;
text‐align:center;
line‐height:200%;
border:2px solid;
border‐radius:25px;
box‐shadow: 10px 10px 5px #888888;
La propriété line‐height permet de
width:50%;
spécifier
la hauteur d'une ligne de texte.
margin:auto;
La propriété border‐radius crée des blocs
}
aux coins arrondis.
</style>
</head>
La propriété box‐shadow permet de
<body>
générer une ombre pour n'importe quel
<p>Un paragraphe stylé!</p>
élément HTML.
</body> </html>
Ivan MADJAROV
HTML CSS
5.0
3.0
HTML5
IvMad - 2014
CSS3 - Les marges (VII)
• Il y a deux types de marges réalisées avec les propriétés de CSS3
• marge externe: margin,
• marge interne: padding
PARTIE II
HTML 5.0
CSS3
margin: top, right, bottom, left; /* pixels, em, pourcentage ou auto */
margin‐top: espace en pixels, em, pourcentage ou auto;
margin‐left: espace en pixels, em, pourcentage ou auto;
margin‐right: espace en pixels, em, pourcentage ou auto;
margin‐bottom: espace en pixels, em, pourcentage ou auto;
44
HTML5
IvMad - 2014
45
HTML5
IvMad - 2014
CSS3 - Les marges internes (VIII)
CSS3 - feuilles de styles (IX)
<!doctype html><html lang="fr"><head><meta charset="utf‐8">
<title>Padding</title><style>
p {
background‐color: blue; color: yellow; margin: 2em 0em 0em 3em;
font‐size: 1.25em; width: 25em; }
p.padding {
color: yellow; font‐size: 1.5em; margin: 0.5em 1em 1em 0em;
padding‐top: 1.4em;
padding‐right: 2.9em;
padding‐bottom: 1.4em;
padding‐left: 2.9em;
width: 20em; }
</style>
</head>
<body>
<p>Un paragraphe sans espacement interne.</p>
<p class="padding">Un paragraphe avec un espacement interne.</p>
</body>
</html>
<!doctype html><html lang="fr"><head><meta charset="utf‐8"><title>Style</title>
p:first‐letter { /* Pour la première lettre de chaque paragraphes */
font‐size: 200%; /* Augmenter la taille de la police */
font‐weight: bold; /* en gras */
color: #0000AA; } /* de couleur bleu foncée */
/* type de police */
h1 { font‐family: serif; background: #0066CC none; /* fond du titre en bleu */
color: white; /* police blanche */
border: 3px dotted #9999FF; /* encadrer le titre en bleu clair de 3 pixels */
padding: 0.3em; /* espacement entre le texte et la bordure */
/* le titre centré */
text‐align: center; letter‐spacing: 0.3em; } /* espacement entre caractères */
h2 { text‐decoration: underline; /* on souligne ces titres */
font‐variant: small‐caps; /* et on les met en majuscules */
color: #000077; } /* texte de couleur bleu très foncé */
/* texte de couleur bleu */
h3 { color: #2222CC; font‐style: italic; /* texte en italique */
text‐indent: 2em; } /* indenter pour montrer la hiérarchie */
</style></head><body>
<h1>Le titre principal H1</h1>
<h2>Le sous‐titre H2</h2>
<h3>Le sous‐titre H3</h3>
<p>Un paragraphe de police large avec une première lettre augmentée</p>
</body></html>
HTML5
IvMad - 2014
CSS3 - feuilles de styles (X)
47
HTML5
IvMad - 2014
CSS3 - feuilles de styles (XI)
46
48
HTML5
IvMad - 2014
49
HTML5
IvMad - 2014
HTML5 : <table>
HTML5 : <table>
<!doctype html>
<html lang="fr"><head>
<title>tableau</title>
<meta charset="utf-8"></head>
<body>
<table border="1">
<caption>Légende du tableau</caption>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
</body>
</html>
• Fusionner les lignes et/ou les colonnes dans une table:
HTML5
<head>
<meta charset="utf-8">
<title>Exemple d'un tableau</title>
</head>
<body>
<table border="1">
<tr><td>Cellule 1</td>
<td colspan="2">2 cellules fusionnées (sur la même ligne)</td></tr>
<tr><td>Cellule 3</td><td>Cellule 4</td>
<td rowspan="2">2 cellules fusionnées (sur la même colonne)</td></tr>
<tr>
<td>Cellule 6</td>
<td>Cellule 7</td>
</tr>
</table>
</body>
</html>
<caption>
<tr> Ligne
<td> Cellule
IvMad - 2014
HTML5 : fusion lignes et colonnes
L'attribut:
border‐collapse: collapse;
réduit l'espace entre les bordure
en une seule bordure
50
51
HTML5
IvMad - 2014
52
HTML5 : <table>
<!doctype html><html lang="fr"><head><meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<title>Annuaire téléphonique</title></head><body>
<table align="center" cellpadding="2" cellspacing="3">
<caption>Annuaire téléphonique</caption>
<thead> 
<tr><th>Nom</th>
<th>Téléphone</th>
<th>Poste</th></tr>
</thead>
<tfoot> 
<tr>
<th>Nom</th>
<th>Téléphone</th>
<th>Poste</th>
</tr>
</tfoot>
<tbody> 
<tr><td class="nom"> Martin A. </td>
<td class="tel"> 04 76 98 45 34 </td><td class="pst"> 101 </td></tr>
<tr><td class="nom"> Dupont B. </td>
<tr><td class="nom"> Durand J. </td>
</tbody></table></body></html>
<caption>
<thead>
<tbody>
<tfoot>
HTML5
IvMad - 2014
53
HTML5
IvMad - 2014
54
HTML5 : Le CSS3 (style.css) pour le tableau
HTML5 : Les images bitmap (I)
table {
/* définition globale */
width: 22em;
background: #33cc66; }
tr {
/* alignement pour une ligne */
text-align: center; }
td {
/* une bordure de ~ 1px */
border: 0.063em solid black; }
td.nom {
/* les cellules des noms */
background-color: #FF0000;
color: #0000CD;
font-weight: bold; }
td.tel {
/* les cellules des tel */
background-color: blue;
color: yellow;
font-style: italic; }
td.pst {
/* les cellules des postes */
background-color: LightGrey;
color: black; }
caption {
/* titre du tableau */
font-family: Times;
font-size: 2em;
text-shadow: 0.12em 0.12em 0.12em #0000CD; }
th {
/* noms des colonnes */
font-family: Times;
color: white; }
• La balise <IMG> permet d'insérer une image dans un document HTML.
HTML5
IvMad - 2014
<IMG SRC="livres.gif" WIDTH="33" HEIGHT="34" ALT="Mes livres" /> • Les images ne sont pas intégrées
dans le fichier HTML, mais restent
stockées dans des fichiers externes.
• Une image pixellisée est un ensemble de points dans un tableau, dont
chaque pixel possède des valeurs décrivant sa couleur. Trois formats
bitmap sont reconnus sur le Web:
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphic)
55
HTML5
IvMad - 2014
HTML5 : Les images bitmap (II)
HTML5 : Les images bitmap (III)
• Le Format GIF est un format de fichier graphique bitmap (raster).
• Le Format JPEG est un format de fichier graphique bitmap (raster).
• Maximum 256 couleurs;
• Qualité 16.5 millions de couleurs;
• Option transparence (une couleur);
• Taux de compression de 1 à 99%;
• Option d'entrelacement qui permet d'afficher l'image progressivement;
• Ne gère pas l'effet de transparence;
• Animation
• Affichage progressif (interlaced).
• Le format est adapté à des images de petites tailles pour la
présentation sur le Web de:
• Logo
• Image animée
• Schéma
• Présentation graphique
• Présentation en qualité photographique des images.
• Volume des fichiers souvent important
56
HTML5
IvMad - 2014
57
HTML5
IvMad - 2014
58
HTML5 : Les images bitmap (IV)
HTML5 : Les images vectorielles (SVG)
• Le Format PNG
<!doctype html>
Les images vectorielles
<html lang="fr">
sont des représentations
<head>
d'entités géométriques:
cercle, rectangle,
<title>Image SVG</title>
segment, etc.
<body>
<svg width="300" height="300">
<circle cx="45" cy="60" r="40" stroke="green" stroke‐width="4" fill="yellow" />
<rect width="200" height="10" style="fill:rgb(2,3,255); stroke‐width:3; stroke:rgb(0,0,0)" />
<rect x="50" y="30" width="150" height="150" style="fill:blue;stroke:pink;stroke‐width:5;
fill‐opacity:0.1;stroke‐opacity:0.9" /> <polygon points="150,20 250,190 160,210" style="fill:lime;stroke:purple;stroke‐width:1" />
<text x="10" y="210" fill="red" font‐family="Times" font‐size="28">Image SVG</text>
</svg>
</body>
</html>
• compression sans perte de données;
• une palette indexée jusqu'à 256 couleurs, niveaux de gris jusqu'à 16 bits et
•
•
•
•
les couleurs réelles jusqu'à 42 bits;
transparence de 254 niveaux;
méthode d'entrelacement très performante;
ne permet pas de créer des animations;
moins performant que le JPEG
HTML5
IvMad - 2014
59
HTML5 : Les images bitmap (V)
• La balise <IMG> permet d'insérer une image dans un document HTML.
<IMG SRC="fichier" /* nom de fichier graphique et chemin */
WIDTH="px|%|auto" /* largeur de l'image */
HEIGHT="px|%|auto" /* hauteur de l'image */
ALT="text" /* texte de remplacement pour l'image */
border="px" /> /* bordure et taille en pixels */
• Les attributs width et height déterminent l'espace occupé par l'image.
• Pour éviter de déformer l'image et d'assurer en même temps son alignement
correct avec le reste du contenu dans la page, il est recommandable de laisser
une des dimensions en "auto".
• Exemple:
<img src="rt.png" alt="R&T" height="50" width="auto" />
HTML5
Les entités sont représentés par
des formules mathématiques:
un rectangle est défini par deux
points, un cercle par un centre
et un rayon, une courbe par
plusieurs points et une équation
IvMad - 2014
HTML5 : Les images bitmap (VI)
<figure>
<img src="rt.png" alt="R&T" width="250" height="auto" />
<figcaption>Réseaux Informatiques et Télécom</figcaption>
</figure>
• L'élément <figure> est une unité de contenu, un conteneur où
s'insèrent divers éléments: des images, des schémas, des vidéos, des
tableaux ou encore des blocs de code.
• L'élément <figcaption> attribut
direct de <figure> sert à
légender son parent,
sous forme de texte
et/ou de liens.
60
HTML5
IvMad - 2014
61
HTML5
IvMad - 2014
62
HTML5 : Les hyperliens <a> (I)
HTML5 : Les hyperliens <a> (II)
• La balise <a> (anchor) est un hyperlien. Pour l'exprimer il suffit de
• Une ancre (hash), permet de cibler une section de document désignée
par un identifiant unique id. L'ancre figure dans l’URL à la fin de
renseigner l'attribut href et cliquer sur le lien.
• L’attribut href fixe la cible du lien par l’adresse du document que le
navigateur chargera pour interpréter: une autre page HTML, un fichier
média qui sera interprété nativement ou à l’aide d’une extension (plug-in),
ou un fichier qui sera téléchargé.
<!‐‐ Lien relatif vers une page au même niveau d’arborescence ‐‐>
<a href="fichier.html">cliquez ici!</a>
<!‐‐ Lien relatif vers un fichier image dans le sous‐répertoire ‐‐>
<a href="images/schema.png">Voir le schéma</a>
<!‐‐ Lien relatif vers une page dans le répertoire au‐dessus ‐‐>
<a href="../home.html">Revenir à l'accueil</a>
<!‐‐ Lien externe ou absolu ‐‐>
<a href="http://www.iut.fr/"></a>
<!‐‐ Lien pour adresse e‐mail, ce qui fait appel à la messagerie ‐‐>
<a href="mailto:[email protected]"></a>
l’adresse du document, concaténée à celui-ci par un "#".
• Liens internes (même page)
<!‐‐ Définir la cible d'un lien ‐‐>
<a id="top"></a>
<!‐‐ Associer un lien à une ancre ‐‐>
<a href="#top">Cliquez ici pour aller en haut</a>
• Lien interne (page différente)
<a href="nom.htm">Cliquez ici</a>
<a href="nom.htm#bottom">Cliquez ici pour aller en bas</a>
• Ouvrir un lien externe dans une nouvelle fenêtre ou un nouvel onglet:
<!‐‐ initialiser un nouveau contexte de navigation ‐‐>
<a href="http://www.google.fr" target="_blank">Découvrez Google France</a>
Ivan MADJAROV
HTML CSS
5.0
3.0
PARTIE III
HTML 5.0
CSS3
Responsive Design
HTML5
IvMad - 2014
65
HTML5
IvMad - 2014
HTML5 : Les balises <meta> (I)
HTML5 : Les balises <meta> (II)
• Les balises <meta> sont placées dans la partie <head> (entête) du
• Exemples d'utilisation des balises <meta>
fichier HTML pour combler le besoin de méta-informations au sujet
du document sans les afficher dans le corps de la page.
<!‐‐ Rafraîchissement de la page toutes les minutes ‐‐>
<meta http‐equiv="refresh" content="60" />
<!‐‐ Redirection vers une autre URL au bout de 6 secondes ‐‐>
Attribut
Valeurs
Rôle
name
application-name
author
description
generator
keywords
Méta-informations relatives à la page : nom de l’application
web, auteur, description du contenu, programme de
conception utilisé, mots-clés relatifs au contenu.
refresh
default-style
content-type
Rafraîchissement de la page.
Feuille de style préférée. Déclaration de la page de code et du
type MIME.
content
texte
En combinaison avec name et http-equiv, confère sa valeur à
la balise.
charset
encodage des
caractères
Déclaration de la page de code qui doit être utilisée pour
l’interprétation, si celle-ci est différente de l’ASCII.
http-equiv
66
<meta http‐equiv="refresh" content="6;url=http://www.google.fr" />
<!‐‐ Renseigne le nom de l'auteur de la page ‐‐>
<meta name="author" content="nom_auteur">
<!‐‐ Sert à décrire le contenu de la page en bref ‐‐>
<meta name="description" content="Description de la page">
<!‐‐ Une liste de mots clés décrivant le contenu ‐‐>
<meta name="keywords" content="liste de mots clés">
<!‐‐ Assure un affichage homogène en fonction de média ‐‐>
<meta name="viewport" content="width=device‐width, initial‐scale=1.0, user‐scalable=yes" />
HTML5
IvMad - 2014
67
HTML5
IvMad - 2014
68
HTML5 : Les hyperliens <a> (I)
HTML5 : Les hyperliens <a> (II)
• La balise <a> (anchor) est un hyperlien. Pour l'exprimer il suffit de
• Une ancre (hash), permet de cibler une section de document désignée
par un identifiant unique id. L'ancre figure dans l’URL à la fin de
renseigner l'attribut href et cliquer sur le lien.
• L’attribut href fixe la cible du lien par l’adresse du document que le
navigateur chargera pour interpréter: une autre page HTML, un fichier
média qui sera interprété nativement ou à l’aide d’une extension (plug-in),
ou un fichier qui sera téléchargé.
<!‐‐ Lien relatif vers une page au même niveau d’arborescence ‐‐>
<a href="fichier.html">cliquez ici!</a>
<!‐‐ Lien relatif vers un fichier image dans le sous‐répertoire ‐‐>
<a href="images/schema.png">Voir le schéma</a>
<!‐‐ Lien relatif vers une page dans le répertoire au‐dessus ‐‐>
<a href="../home.html">Revenir à l'accueil</a>
<!‐‐ Lien externe ou absolu ‐‐>
<a href="http://www.iut.fr/"></a>
<!‐‐ Lien pour adresse e‐mail, ce qui fait appel à la messagerie ‐‐>
<a href="mailto:[email protected]"></a>
l’adresse du document, concaténée à celui-ci par un "#".
• Liens internes (même page)
<!‐‐ Définir la cible d'un lien ‐‐>
<a id="top"></a>
<!‐‐ Associer un lien à une ancre ‐‐>
<a href="#top">Cliquez ici pour aller en haut</a>
• Lien interne (page différente)
<a href="nom.htm">Cliquez ici</a>
<a href="nom.htm#bottom">Cliquez ici pour aller en bas</a>
• Ouvrir un lien externe dans une nouvelle fenêtre ou un nouvel onglet:
<!‐‐ initialiser un nouveau contexte de navigation ‐‐>
<a href="http://www.google.fr" target="_blank">Découvrez Google France</a>
HTML5
IvMad - 2014
69
HTML5
IvMad - 2014
HTML5 : Les éléments structurants
HTML5 : La structure complète
• HTML5 inclut la majorité des éléments HTML4 pour assurer une
<!doctype html>
<!‐‐ Défini le type de document ‐‐>
<html lang="fr">
<!‐‐ Début avec langue par défaut ‐‐>
<head>
<!‐‐ Début entête de fichier ‐‐>
<meta charset="utf‐8"> <!‐‐ Codage par défaut ‐‐>
<title>Titre de la page</title> <!‐‐ titre navigateur ‐‐>
<link rel="stylesheet" href="style.css"> <!‐‐ Lien vers feuille de style ‐‐>
<script src="script.js"> </script> <!‐‐ Script à importer ‐‐>
</head>
<!‐‐ Fin entête de fichier ‐‐>
<body>
<!‐‐ Début corps de page ‐‐>
<header>
<!‐‐ début entête de page ‐‐>
<nav></nav>
<!‐‐ liens de navigation ‐‐>
</header>
<!‐‐ Fin entête de page ‐‐>
<section>
<!‐‐ Début section ‐‐>
<article></article> <!‐‐ Contenu de page ‐‐>
</section>
<!‐‐ Fin section ‐‐>
<aside></aside>
<!‐‐ Contenu en complément ‐‐>
<footer></footer>
<!‐‐ Pied de page ‐‐>
</body>
<!‐‐ Fin corps de page ‐‐>
</html>
<!‐‐ Fin document HTML ‐‐>
rétrocompatibilité avec les navigateurs.
• Les éléments génériques comme <span> ou <div> ont un rôle
totalement neutre et ne servent qu'à regrouper d'autres éléments
HTML pour leur affecter un style CSS commun.
<div style="..."> .... </div>
• Les éléments de section :
<section>, <article>, <nav>, <aside>, <header>, <footer>
segmentent le document pour obtenir une structuration avec une valeur
sémantique particulière. Chaque <section> apporte un certain contexte
dans lequel un contenu est présenté dans un ou plusieurs <article>.
HTML5
IvMad - 2014
71
Nouvelle structure d'une page Web
•
•
•
•
•
L'élément <header>
convient parfaitement à
l'introduction d'un
document.
L'élément <nav> aide à
naviguer à travers des menus
L'élément <aside> revêt le
rôle de barre latérale
L'élément <section>
regroupe le contenu principal
Le <footer> est destiné au
pied-de-page. Il peut
accueillir des mentions
spécifiques, un rappel du titre
et du logo, des liens de
navigation, etc.
HTML5
IvMad - 2014
Nouvelle structure d'une page Web
• Le tableau suivant récapitule les nouveaux éléments de section.
Nom
Détails
<section>
Section générique qui regroupe un même sujet, une même fonctionnalité,
de préférence avec un en-tête, ou bien section d'application web.
<article>
Section de contenu indépendante, pouvant être extraite individuellement du
document ou syndiquée, sans pénaliser sa compréhension.
<nav>
Section possédant des liens de navigation principaux au sein du document
ou vers d'autres pages.
<aside>
La balise entoure un contenu en complément par rapport à l'objet principal
de la page mais peut aussi apporter des informations supplémentaires.
<header>
Section en-tête de page pour présenter ou introduire dans le contenu d'un
article, d'une autre section ou du document entier.
<footer>
Section pied de page qui peut servir de conclusion d'une section ou d'un
article, voire du document entier.
70
72
HTML5
IvMad - 2014
73
HTML5 : Le site Web des néticiens
HTML5
IvMad - 2014
74
HTML5 : le code du site Web "R&T"
<!DOCTYPE html><html><head><meta charset="utf-8" />
<link rel="stylesheet" href="sitestyle.css">
<title>Le Site Web</title></head>
<body><header>
<p><IMG SRC="logo-neticiens.gif" WIDTH="418" HEIGHT="78" ALT="Neticiens"
border="0"></p><h1>Les Néticiens</h1></header>
<nav><ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="enseignants.html">Enseignants</a></li>
<li><a href="etudiants.html">Etudiants</a></li></ul>
<aside><p><img src="rt.gif" /></p></aside></nav>
<section>
<article><h1>Á propos de la formation</h1>
<p>La formation en "Réseaux et Télécommunications" <br />a
pour avantage de promouvoir les techniques et <br />les technologies du Web et
du monde mobile <br />des GSM.</p>
</article><article>
<h1>La vie étudiante</h1>
<p>Loisirs, études, études loisirs</p>
</article></section>
<footer>
<p>Copyright IUT-R&T, Tous droits réservés<br />
<a href="mailto:[email protected]">Nous contacter!</a></p>
</footer>
</body></html>
HTML5
IvMad - 2014
HTML5 : Le CSS3 du site Web "R&T"
header { text-align: center;
text-shadow: 4px 4px 2px #A9A9A9;
color: #EF7800;
width: 520px;
border: 1px solid black;
background-color: #E6E6FA; }
nav { float: left;
width: 169px;
border: 1px solid red;
background-color: #AFEEEE; }
section { margin-left: 171px;
padding: 2px;
width: 345px;
border: 1px solid blue;
background-color: #90EE90; }
footer { text-align: center;
width: 520px;
background-color: #F0E68C; }
aside { text-align: center;
width: 165px; }
75
HTML5
IvMad - 2014
HTML5 : Un aspect plus épuré
76
HTML5
IvMad - 2014
77
HTML5
IvMad - 2014
78
Un document HTML5 complet
Les éléments HTML5 : <Form>
• La partie <body> d'un document place tous les autres éléments
• Le formulaire (<form>) est l'élément HTML5 interactif présenté côté
HTML pour formater le contenu à travers: paragraphes, listes, liens,
images, vidéos, tableaux de données, formulaires, etc.
• La majorité des éléments HTML sont toujours présents dans HTML5
complétés par de nouvelles balisages:
client pour l'envoi des informations côté serveur.
• Côté serveur les données reçues sont traitées par un langage de script.
• Un formulaire propose les fonctionnalités suivantes:
• Éléments de section <section>, <article>, <header>, <footer>, <nav> et <aside>
• sélectionner des options par les cases à cocher et les listes déroulantes
• valider avec un bouton
• Élément <datalist>
• activer des scripts (JavaScript) pour valider les saisies
• Éléments <details> et <summary>
• Un formulaire envoie les données saisies ou sélectionnées par l'action
• Éléments <figure> et <figcaption>
en précisant la méthode d'envoi:
• GET méthode peu adaptée car limitée à 255 caractères.
• POST est la méthode la plus utilisée pour les formulaires car elle permet
d'envoyer un grand nombre d'informations à l'adresse de l'action.
• Éléments média <audio> et <video> complétés par <source>
• Élément <canvas>
• Éléments <meter>, <output> et <progress>
• Élément <time> et <mark>
HTML5
• saisir du texte,
IvMad - 2014
79
HTML5
IvMad - 2014
80
Les éléments HTML5 : <Form>
Les éléments HTML5 : <Form> (I)
Balise
Description
<form>… </form>
Définir le formulaire
<input>
Définir un champ de saisie
• Un élément essentiel d'un formulaire c'est le champ de saisie de type
texte réalisé avec la balise <input />:
<textarea>
Définir un champ de saisie multi-lignes
<label>
Etiquette pour un champ de saisie <input>
<fieldset>
Regrouper des éléments liés dans un formulaire
<legend>
Définir le titre pour la balise <fieldset>
<select>
Définir une liste déroulante
<optgroup>
Définir un groupe d'options dans une liste déroulante
<option>
Définir un éléments dans une liste déroulante
<button>
Définir l'objet bouton
<datalist>
Définir une liste d'options prédéfinies pour une saisie
<keygen>
Définir un jeu de clés pour le cryptage et le décryptage
<output>
Représente la somme d'un calcul. Attribut: for, name, et form
<!doctype html>
<html lang="fr">
<head>
<title>Formulaire</title>
</head>
<body>
<form>
<label>Entrez votre nom: </label><input type="text" name="name">
</form>
</body>
Un texte d'accompagnement
</html>
est
encadré
<label>
par
la
balise
HTML5
IvMad - 2014
81
HTML5
IvMad - 2014
82
Les éléments HTML5 : <Form> (II)
Les éléments HTML5 : <Form> (III)
• Case à cocher dans un formulaire réalisé avec la balise <input />:
• Radio boutons dans un formulaire réalisés avec la balise <input />
pour un choix unique:
<!doctype html>
<html lang="fr">
<head>
</head>
<body>
<form>
<label>Entrez votre nom: </label><input type="text" name="name">
<label>Vous êtes étudiant R&T </label>
<input type="checkbox" name="chk" value="" checked>
</form>
</body>
Case à cocher qui est
</html>
<!doctype html>
<html lang="fr">
<head>
</head>
<body>
<form>
<label>Entrez votre nom:</label><input type="text" name="name"><br /><br />
<label>Vous êtes étudiant R&T</label>
<input type="checkbox" name="chk" value="" checked><br /><br />
<label>Vous êtes en:</label>
<input type="radio" name="ano" value="un">1A
<input type="radio" name="ano" value="deux">2A
</form>
</body>
</html>
checked par défaut
HTML5
IvMad - 2014
83
HTML5
IvMad - 2014
84
Les éléments HTML5 : <Form> (IV)
Les éléments HTML5 : <Form> (V)
• La balise <datalist> spécifie une liste d'éléments prédéfinis comme
des options (autocompléter) pour la balise <input>.
• La balise <datalist> avec la balise <select> spécifient une liste
d'éléments prédéfinis à choix optionnel pour la balise <input>.
<!doctype html>
<html lang="fr">
<head>
</head>
<body>
<form autocomplete="on">
<label>Votre navigateur préféré:</label><br />
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form></body></html>
<head>
</head>
<body>
Votre navigateur préféré:<br />
<input list="browsers">
<datalist id="browsers">
<select name="browsers">
<option value="Internet Explorer">
Au double click sur le
<option value="Firefox">
champ de saisie la liste
<option value="Chrome">
d'options
s'ouvre
<option value="Opera">
automatiquement
<option value="Safari">
</select>
</datalist>
HTML5
IvMad - 2014
85
HTML5
IvMad - 2014
Les éléments HTML5 : Formulaire
Les éléments HTML5 <Form>
<form method="post" action="etudes.php">
<p>Etudiant IUT-R&T</p><p><label>Nom: </label><input type="text" name="nom"></p>
<p><label>Prénom: </label>
<input type="text" name="prenom"></p>
<p><label>Age: </label>
<input type="text" name="age"></p>
<p>Année d'étude:<br />
<label>Première: </label>
<input type="radio" name="annee" value="1">
<label>Deuxième: </label>
<input type="radio" name="annee" value="2">
<label>Licence: </label>
<input type="radio" name="annee" value="3"></p>
<p><label>Matière: </label>
<select name="matiere">
<option value="Math">Math</option>
<option value="Info">Info</option>
<option value="WLAN">WLAN</option>
<option value="Comm">Comm</option>
<option value="TCom">TeleC</option>
</select></p>
<p><label>Moyenne: </label><input type="text" name="moyenne" value="0.0"></p>
<p><label>Soumettre: </label><input type="submit" value="Envoyer"></p></form>
<form method="post" action="traiter.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo"
placeholder="Ex: Zoro" size="30" maxlength="10"/>
</p>
<p>
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>
HTML5
IvMad - 2014
86
Pour lier LABEL
au INPUT:
for="nom"
id="nom"
placeholder: texte exemple
size: la taille du champ
maxlength: nombre de
caractères
name: nom de variable
id: identificateur local
champ type "password"
masque la saisie
87
HTML5
IvMad - 2014
88
HTML5 <Form>: saisie enrichies
Formulaire: attribut pattern
• HTML5 apporte des fonctionnalités nouvelles relatives aux types input.
• L'attribut pettern spécifie une expression régulière pour confirmer la
• Attention! Tous les navigateurs ne reconnaissent pas ces types de saisie
valeur du champ à saisir.
• Il devient ainsi facile de mettre en œuvre une validation spécifique
pour de codes de produit, numéro de facture, numéro de téléphone,
date, comptes bancaires, etc.
enrichies
• <input type="email" />
• Soit: [email protected]
• <input type="url" />
• Soit: http://abc.iut.fr
• <input type="tel" />
• Soit la saisie d'un numéro de téléphone
• <input type="number" />
• Soit un champ qui permet de saisir un nombre entier
• <input type="date" /> /* pour: date, time, week, month */
• Pour l'instant peu de navigateurs gèrent ce type de champ à part Opera
<!doctype html>
<html lang="fr">
<head>
</head>
<body>
<label>Entrez le numéro de licence du produit:
<input pattern="[0‐9][A‐Z]{3}" name="product"
type="text" title="Entrez une combinaison de lettres en majuscule et chiffres"/>
</label>
Le "pattern" autorise
un numéro de produit
constitué d'un seul
chiffre [0-9] suivi de
trois
lettres
en
majuscules [A-Z]{3}
HTML5
IvMad - 2014
89
HTML5
IvMad - 2014
90
Expression régulière
Expression régulière
• Les expressions régulières sont des modèles créés à l'aide de caractères
• Les symboles ^ et $ indiquent le début ou la fin d'une chaîne, et
ASCII permettant de manipuler des chaînes de caractères.
• Ils permettent notamment de trouver les portions de la chaîne de
caractères correspondant au modèle.
• C'est un système ingénieux et puissant permettant de retrouver un
mot, un chiffre, un nombre ou une phrase dans un texte, ressemblant
au modèle que l'on a construit.
• Ainsi, les expressions régulières permettent de rechercher des
occurrences (c'est-à-dire une suite de caractères correspondant à ce
que l'on recherche) grâce à une série de caractères spéciaux.
• L'expression régulière en elle-même est donc une chaîne de caractère
contenant des caractères spéciaux et des caractères standards.
HTML5
IvMad - 2014
91
HTML5 <Form> : contrôle par pattern
• Supporter par: Firefox 4b7, Chrome 6, Opera 9, Safari 5.0.3
Description
Pattern
Numéro de carte de crédit
[0‐9]{13,16}
Alphanumérique
[a‐zA‐Z0‐9]+
Lettres
[a‐zA‐Z]+
Adresse IPv4
((^|\.)((25[0‐5])|(2[0‐4]\d)|(1\d\d)|([1‐
9]?\d))){4}$
Adresse IPv6
((^|:)([0‐9a‐fA‐F]{0,4})){1,8}$
Date (MM/DD/YYYY)
(0[1‐9]|1[012])[‐ /.](0[1‐9]|[12][0‐
9]|3[01])[‐ /.](19|20)\d\d
Numéro de téléphone
(+99(99)9999-9999)
[\+]\d{2}[$]\d{2}[$]\d{4}[\‐]\d{4}
Prix (Format: 1,00)
\d+(,\d{2})?
permettent donc de la délimiter.
• Les symboles *, + et ?, respectivement "zéro ou plusieurs", "un ou
plusieurs", "un ou aucun", donnent une notions de nombre.
• Les accolades {X,Y} permettent de donner des limites de nombre.
• Les parenthèses ( ) représentent une séquence de caractères.
• La barre verticale | se comporte en tant qu'opérateur OU
• Le point . indique n'importe quel caractère (une fois)
• Les crochets [ ] définissent une liste de caractères autorisés (ou
interdits).
• Le signe ‐ permet de définir un intervalle.
• Le caractère ^ après le premier crochet indique une interdiction.
HTML5
IvMad - 2014
Formulaire HTML5 pattern control
92
HTML5
IvMad - 2014
93
HTML5
IvMad - 2014
HTML5 : Les formats audio
HTML5 : Les formats vidéo
• Pour diffuser de la musique ou des sons de nombreux formats sont
• Le stockage de la vidéo dépend de trois éléments :
disponibles.
94
• Un format conteneur : c'est la boîte qui sert à contenir les deux éléments
• MP3 : C'est le format le plus compatible. Tous les appareils et navigateurs
savent lire des MP3.
• AAC : Ce format est utilisé par Apple sur iTunes. C'est un format de
bonne qualité. Lu par les iPod et iPhone.
• OGG : Le format Ogg Vorbis est très répandu dans le monde du logiciel
libre, notamment sous Linux. Ce format a l'avantage d'être libre.
• WAV : C'est un format audio non compressé utilisé par les anciens
logiciels Microsoft. Il est à éviter autant que possible de l'utiliser car le
fichier est très volumineux avec ce format.
audio et vidéo. Le type de conteneur est reconnu à l'extension du fichier :
AVI, MP4, MKV…
• Un codec audio : c'est le format du son de la vidéo, généralement
compressé: MP3, AAC, OGG, …
• Un codec vidéo : c'est le format qui compresse les séquences d'images.
Les principaux pour le Web sont :
• H.264 : l'un des plus puissants et des plus utilisés, mais il n'est pas entièrement
gratuit.
• Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que
H.264. Il est bien reconnu sous Linux.
• WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par
Google, c'est un concurrent le direct du format H.264.
HTML5
IvMad - 2014
95
HTML5
IvMad - 2014
HTML5 : Insertion d'un fichier audio
HTML5 : Insertion d'une vidéo
• La balise <audio> et ses attributs:
• <audio src="musique.mp3"></audio>
• <video src="zoro.mp4"</video >
: ajoute les boutons "Lecture", "Pause" et la barre de
défilement.
width : pour modifier la largeur de l'outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page.
preload : indique si la musique peut être pré-chargée dès le chargement
de la page ou non. Cet attribut peut prendre les valeurs :
• poster : image
• controls
•
•
•
•
• auto (par
défaut) : le navigateur décide s'il doit pré-charger toute la musique,
• metadata
• none :
: charge uniquement les métadonnées,
pas de pré-chargement.
•
•
•
•
•
•
à afficher à la place de la vidéo tant qu'elle n'est pas
encore lancée.
controls : pour ajouter les boutons "Lecture", "Pause" et la barre de
défilement.
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page.
preload : indique si la vidéo peut être pré-chargée dès le chargement de
la page ou non suivant les attributs à préciser:
• auto (par défaut) : le navigateur décide s'il doit pré-charger toute la vidéo.
• metadata : charge uniquement les métadonnées
• none : pas de pré-chargement.
96
HTML5
IvMad - 2014
97
HTML5
IvMad - 2014
Responsive Web Design
• La spécification CSS3 Media Queries (requêtes de media) définit les
• Pour rendre responsive un site Web il faut prendre en compte:
techniques pour adapter de feuilles de styles (CSS) en fonction du
périphérique Web utilisé. Cette pratique est nommé "Responsive Web
Design", pour dénoter qu'il s'agit d'adapter dynamiquement la
présentation d'une page Web à l'aide de CSS.
• La méthode permet d'exploiter les avantages de la séparation du
contenu et de la forme (présentation):
1.
2.
3.
98
une grille d'affichage flexible qui ne dépend pas d'une résolution fixe;
des médias flexibles (images, vidéos) cadrés dans la grille d'affichage;
un ensemble de règles CSS basé sur Media Queries pour conditionner
l'affichage en fonction du type média.
• On peut satisfaire des contraintes de dimensions, de résolutions et d'autres
critères variés pour améliorer l'apparence graphique et la lisibilité d'un site
Web par des navigateurs mobiles de smartphones et tablettes, écrans à
faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.
HTML5
IvMad - 2014
99
HTML5
IvMad - 2014
100
Responsive Design: grille d'affichage
Responsive Web Design: média flexible
• Il faut éviter les mesures fixes pour décrire la largeur et la hauteur de la
• Pour un site Web responsive les images, les vidéos et les autres objets
zone d'action pour un élément HTML.
• Si on exprime les mesures de présentation, soit en pourcentage, soit en
mesure "em" (où 1em = 100%) la flexibilité est assurée à la fois pour la
taille des polices et pour la taille des éléments HTML.
• Pour se mettre dans le contexte, on peut estimer que la taille par
défaut d'un texte pour qu'il soit lisible est de 16px et on peut admettre
que cela correspondent à un 1em. Si un titre fait 24px, on peut
remplacer cette valeur par 1.5em.
• On obtient la conversion correcte en appliquant la formule:
médias ne doivent pas déborder le cadre défini.
• Il est désagréable de voir une image déborder l'écran ou être écrasée,
pratiquement invisible.
• Pour résoudre ce problème on peut faire appel à la propriété CSS
"max‐width" qui permet de spécifier la largeur maximum de
l'élément, par rapport à son parent.
cible / contexte = résultat
• où, "cible" correspond à la taille souhaitée, le "contexte" à la taille
"normale" et le "résultat" est exprimé en "em".
img, object, canvas, video, audio {
max‐width: 100%;
height: auto;
}
• Avec la propriété "height: auto" on peut conserver les proportions
des médias.
HTML5
IvMad - 2014
101
HTML5
IvMad - 2014
102
Responsive Web Design: Média Queries
• Pour rendre un site responsive il est important d'adapter l'affichage en
• On peut considérer qu'en mode portrait une largeur d'écran de moins
fonction de la résolution et du type de média (screen, print, tv…), mais
aussi en fonction des caractéristiques du support en prenant en
compte le ratio et l'orientation.
• On peut appliquer différents styles (CSS) suivant le profil d'utilisation.
Il s'agit de définir les paramètres suivants:
de 480px appartient à un smartphone, entre 480px et 1024px à une
tablette et une largeur d'écran supérieure à 1024px à un ordinateur de
bureau ou à un portable.
• On peut développer et enregistrer le code CSS pour chacun des profils
et les appliquer en fonction:
• l'orientation de la présentation
@media only screen and (max‐width: 480px){
/* propriétés pour une largeur de la
fenêtre navigateur jusqu'à 480px */
}
</style>
• mode portrait,
• mode paysage;
• les limites de la largeur effective avec les propriétés:
• min‐width,
• max‐width.
HTML5
IvMad - 2014
103
HTML5
IvMad - 2014
104
• Les Media Queries permettent donc de cibler :
• Les directives peuvent être intégrées au sein même d'une feuille de
• Le type de média
• La taille de l'écran
• La taille de la fenêtre
• La résolution
• Le nombre de couleurs
• L'orientation
• Fonctionne avec les navigateurs:
• Chrome
• Safari
• Firefox
• MSIE 9
• Opéra
style grâce à une règle @media suivie directement du type. L'exemple
suivant évite l'impression des menus, entête et des informations non
propres au contenu de la page Web:
@media print {
#menu, #footer, aside {
display:none;
}
body {
font‐size:120%;
color:black;
}
}
HTML5
IvMad - 2014
105
HTML5
IvMad - 2014
106
• L'attribut media peut prendre les valeurs suivantes :
• Une media query est une expression dont la valeur est toujours vraie ou
• aural (CSS 2.0) / speech (CSS 2.1) - Synthèses vocales
fausse. Il suffit d'associer les différentes déclarations possibles avec un
opérateur logique pour définir l'ensemble des conditions à réunir pour
l'application des styles compris dans le bloc adjacent.
• Les opérateurs logiques peuvent être: and, only et not.
• braille - Plages braille
• Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries
• screen - Écrans
• handheld - Périphériques mobiles ou de petite taille
• print - Impression
à la suite, séparées par des virgules.
• L'exemple suivant cible les écrans de largeur inférieure à 640 pixels et
supérieure à 200 pixels grâce à la règle max-width associée à la valeur 640px.
• embossed - Imprimantes braille
• projection - Projecteurs (ou présentations avec slides)
• tty - Terminal/police à pas fixe
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}
• tv - Téléviseur
HTML5
IvMad - 2014
107
HTML5
IvMad - 2014
Responsive Web Design : Exemple
• Un exemple qui suit la largeur de l'écran.
<!doctype html><html lang="fr"><head>
<title>HTML5 Media Queries</title>
<meta charset="utf‐8"><style type="text/css">
@media screen and (min‐width: 1024px) and (max‐width: 1920px) {
p { color: red; background‐color: black; font‐size: 1.0em; } }
p { color: yellow; background‐color: blue; font‐size: 1.5em; } }
p { color: green; background‐color: yellow; font‐size: 2.0em; } }
p { color: blue; background‐color: red; font‐size: 2.5em; } }
</style>
</head>
<body>
<p>Le responsive design avec la résolution: 
</p>
[Test]
</body>
</html>
• On déclare la couleur de fond (background-color) du body blanche,
• On déclare une couleur noire pour tout écran (screen) ayant une taille
maximum (max-width) de 800px:
body {
background-color:white;
color:black;
}
@media only screen and (max-width:800px) {
body {
background-color:black;
color:white
}
}
[Test]
• Avec max-device-width, on peut cibler l'écran (Smartphones & Tablettes)
108
HTML5
IvMad - 2014
109
Responsive Web Design : Exemple (I)
HTML5
IvMad - 2014
110
Responsive Web Design : Exemple (II)
[Test]
HTML5
IvMad - 2014
Responsive Web Design : Exemple (III)
111
HTML5
IvMad - 2014
Responsive Web Design : Exemple (IV)
112
JavaScript ‐ Le langage
Le Web dynamique
 Le modèle Client‐Serveur, les scripts et les langages interprétés
M2105
1. Côté Client : HTML/CSS/JavaScript
2. Côté Serveur : PHP/ASP/JSP
JavaScript
Le script côté client
Développement Web
Ivan Madjarov , IUT‐R&T, 2002‐2014
IvMad, 2002-2014
JavaScript ‐ Le langage
JavaScript ‐ Intégrer
 Le JavaScript est un langage de programmation de scripts orienté objet introduit dans le code HTML5.  Le navigateur Web du côté client interprète le code HTML et le script JavaScript de manière native.
 La qualité d'interprétation dépend du type de navigateur (IE, Firefox, Opera, Safari ou autre).
 JavaScript est un langage objet et événementiel.  Le développeur peut créer des objets interactifs avec des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par le client (passage de souris, clic, saisie clavier)
 Intégrer du code JavaScript dans une page HTML5
Développement Web
IvMad, 2002-2014
3
2
 dans le corps de la page <body>
 dans la partie entête <head>
<script language="JavaScript"> … </script>
 dans un événement d'un objet de la page.
onClick="alert('Vous avez cliqué')"
 faire appel à un script au clique sur un lien: <a href="javascript:mafonction()">Cliquez ici</a>
 depuis un fichier externe :
<script language = "Javascript" src="url/fichier.js"> ... </script>
Développement Web
IvMad, 2002-2014
4
JavaScript ‐ Intégrer
JavaScript ‐ Appeler
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf‐8" />
<title>Javascript</title>
</head>
<body>
<script>
alert("Bonjour tout le monde!");
</script>
</body>
</html>
<html>
<head>
<title>JavaScript</title>
<script>
function Charger() {
alert('Bienvenue sur le site');
} </script>
</head>
<body onLoad="Charger();" > <p>Texte HTML dans le corps de la page Web...</p> </body>
(Test)
</html>
Développement Web
TEST
IvMad, 2002-2014
5
Développement Web
IvMad, 2002-2014
JavaScript ‐ Les Variables
JavaScript – La notion d’Objets
 Instruction var pour la déclaration. Toute nouvelle variable doit être initialisée ce qui définie son type:
 Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. La hiérarchie d'objets est définie comme ceci :
 jardin var prenom_visiteur = "Marcel"; // type string
var age_visiteur = 29; // type numérique
 Une variable déclarée peut participer dans une expression (Concaténation): var accueil="Bonjour " + prenom_visiteur + " " + nom_visiteur;  La syntaxe: De manière générale, les instructions JavaScript doivent être séparées par un point‐
virgule (;).
Développement Web
IvMad, 2002-2014
7
6
 arbre
 branche  feuille  nid  largeur: 20  couleur: jaune  hauteur: 4 Développement Web
IvMad, 2002-2014
8
JavaScript – La notion d’Objets
JavaScript ‐ Les Objets
Notation
 Le nid sur l'arbre est donc désigné comme suit :  La déclaration se fait avec var.
 Pour créer un objet, il faut utiliser le mot‐clé new
suivi du type d'objet.
 Le respect des majuscules/minuscule est obligatoire.
jardin.arbre.branche.nid
 Pour changer la couleur du nid : jardin.arbre.branche.nid.couleur = vert;
var datejour = new Date();
var unedate = new Date(a, m, j, h, m, s);
Les objets du navigateur
 L'objet de la racine est l'objet fenêtre (window)  Dans la fenêtre s'affiche une page (document )
 Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc.  Cela correspond à la création d'un type objet et donne accès aux méthodes et propriétés prédéfinies
var a = datejour.getDay();
window.document.title = "titre de la page web";
Développement Web
IvMad, 2002-2014
9
Développement Web
IvMad, 2002-2014
10
JavaScript ‐ Les Objets
JavaScript ‐ Les Tableaux
<html>
<head>
<title>code javascript</title>
</head>
<body>
<script>
var t = new Array ("dimanche",
"lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
var dj = new Date();
alert("Le jour de la semaine est "+t[dj.getDay()]);
</script>
</body>
</html>
[Test]
 Un tableau, en Javascript, est une variable pouvant contenir plusieurs données indépendantes, indexées par un numéro, appelé indice, qui assure l'accès aux données. Développement Web
IvMad, 2002-2014
11
Indice
0
1
2
3
Données
donnée 1
donnée 2
donnée 3
donnée 4
 Tableaux associatifs
 indices personnalisés pour indexer les valeurs du tableau.
Indice
"Paul"
"André"
"Marie"
"Jean"
Données
1000
500
1200
4500
Développement Web
IvMad, 2002-2014
12
JavaScript ‐ Les Tableaux
JavaScript ‐ Les Fonctions
 En JavaScript, les tableaux sont des objets:
 Les fonctions et leurs instructions sont déclarées et codées dans l'entête de la page (<head>) et peuvent être appelées ensuite dans le corps de la page (<body>). var T = new Array(10); // Initialise un tableau de 10 el.
 Le premier élément est indexé à 0.
 Il est possible de déclarer un tableau sans dimension fixe. La taille du tableau s'adapte en fonction du contenu (taille variable).  Pour accéder aux éléments du tableau:
 function Nom (argument1, argument2, ...) { liste d'instructions }
 On l'appelle par: Nom_De_La_Fonction();
 Une variable déclarée dans la fonction (non précédée du mot‐clé var) sera globale et accessible après exécution de la fonction.
 Une variable déclarée avec le mot‐clé var sera locale, accessible uniquement dans la fonction.
T[0] = 10; T[9] = 5; T[2] = "Toto";
 Des propriétés associées à l'objet : T.length
 Retourne le nombre d'éléments de l'objet Array.
Développement Web
IvMad, 2002-2014
13
Développement Web
IvMad, 2002-2014
14
JavaScript ‐ Les Instructions
JavaScript ‐ Les méthodes
 Le test conditionnel:
 Une méthode est une fonction associée à un objet
 Appel d'une méthode: if (condition) { … } else { … }
 Les boucles:
For (initialisation; condition; opération) {
// Vos instructions }
while (condition) {
// Les instructions de la boucle
}
 Un commentaire:
// commentaire sur une ligne
/* des commentaires sur plusieurs lignes */
Développement Web
IvMad, 2002-2014
 window.objet1.objet2.methode();
window étant l'objet de base du navigateur
 Exemple:
 une page HTML est composée d'un objet appelé document.  A l'objet document est associée une méthode write(liste de paramètres).
 La méthode permet de modifier de façon dynamique le contenu de la page.
 window.document.write("bonjour"); (Test, Txt)
 La méthode writeln() ajoute un retour chariot à la fin.
15
Développement Web
IvMad, 2002-2014
16
JavaScript ‐ L'Objet
JavaScript – Objets prédéfinis
 Le mot‐clé this
 Les chaînes de caractères
• La déclaration
 Lorsqu'on fait appel à une fonction à partir d'un objet (formulaire), le mot clé this fait référence à l'objet en cours et se substitue à l'appel complet: window.objet1.objet2... ainsi lorsque l'on passe l'objet en cours en paramètre d'une fonction, il suffit de taper nom_de_la_fonction(this) pour pouvoir manipuler cet objet à partir de la fonction.  Pour manipuler les propriétés de l'objet il suffira de taper this.propriete (où propriete représente le nom de la propriété). Développement Web
IvMad, 2002-2014
17
var ch1="Bonjour";
• Les opérations:
Concaténation:
var chaine1="Vive le ";
var chaine2="JavaScript";
var chaine=chaine1+chaine2;
La variable chaine contient après cette concaténation
"Vive le JavaScript".
Développement Web
IvMad, 2002-2014
JavaScript ‐ Les chaînes de caractères
JavaScript ‐ Les chaînes de caractères
o La longueur d'une chaîne
 MAJUSCULES / minuscules
• Une chaîne de caractères en JavaScript est un objet string sur lequel s'appliquent des propriétés et des méthodes
• La propriété length indique le nombre de caractères de la chaîne • var chaine="azerty"; 6 <‐ chaine.length
o Récupérer le nième caractère
• La méthode charAt(n) récupère le caractère n : var chaine="azerty"; "z" <‐ chaine.charAt(1)
Développement Web
IvMad, 2002-2014
2005-2013
19
18
var chaine="Ceci est un texte";
var maj=chaine.toUpperCase();
var min=chaine.toLowerCase();
 Une sous‐chaîne dans une chaîne
var domaine = "www.javascript.com";
var extension = domaine.substring( domaine.lastIndexOf(".") );
 substring extrait une sous‐chaîne à partir de l'indice retournée par lastIndexOf qui retrouve la dernière occurrence de sous‐chaine Développement Web
Programmation
Internet
IvMad, 2002-2014
2005-2013
20
JavaScript – L'objet String
Développement Web
Programmation
Internet
IvMad, 2002-2014
2005-2013
JavaScript – L'objet String
21
Développement Web
Programmation
Internet
IvMad, 2002-2014
2005-2013
JavaScript ‐ Conversions
JavaScript – L'objet Math
 Les fonctions de conversion
 Utilisation:
• transformer une chaîne en un entier ou un réel: var chaîne = "3.14";
var entier = parseInt(chaîne);
var reel = parseFloat(chaîne);  Est‐ce un nombre
• Pour détecter qu'une chaîne a le format d'un nombre, on applique la fonction isNaN(valeur) qui renvoie :
‐ true si valeur n'est pas un nombre
‐ false si valeur est un nombre
Développement Web
Programmation
Internet
IvMad, 2002-2014
2005-2013
23
22
x = Math.propriété; x = Math.méthode(paramètre);
Méthode/Param
Valeur
Méthode/param
E
constante d'Euler
sqrt()
Racine carrée
LN2
logarithme naturel de 2
exp()
valeur exponentielle
LN10
logarithme naturel de 10
max()
le plus grand de deux chiffres
PI
constante PI
min()
le plus petit de deux chiffres
abs() valeur positive
pow()
puissance exposant
cos()
cosinus
random()
0 ou 1 aléatoire
sin()
sinus
round()
arrondi d'un nombre
Développement Web
Programmation
Internet
IvMad, 2002-2014
2005-2013
24
Un tableau HTML en JavaScript
JavaScript et les Maths
La plupart des fonctions de base mathématiques sont des méthodes de l'objet Math:
Math.abs(a)
Math.round(a)
Math.ceil(a)
Math.floor(a)
Math.sqrt(a)
Math.log(a)
Math.ln(a)
Math.exp(a)
Math.pow(a,b)
Math.min(a,b)
Math.max(a,b)
Développement Web
Retourne la valeur absolue de a
Retourne l'entier arrondi le plus proche de a
Pour avoir un arrondi deux chiffres après la virgule, il
faut utiliser Math.round(variable*100)/100;
Retourne l'entier immédiatement supérieur (ou égal) à a
Retourne l'entier immédiatement inférieur (ou égal) à a
Retourne la racine carrée de a
Retourne le logarithme de a
Retourne le logarithme népérien de a
Retourne l'exponentielle de a
Retourne a à la puissance b
Retourne le plus petit des paramètres a ou b
Retourne le plus grand des paramètres a ou b
IvMad, 2002-2014
25
<SCRIPT language=javascript>
document.write("<TABLE border='1'><TR>");
for (var i=0; i<5; i++) {
document.write("<TD>"+ 10*(Math.random())+"</TD>");
}
document.write("</TR></TABLE>");
</SCRIPT>
(Test)
 Ce script commence par initialiser le tableau.
 La boucle de 5 itérations crée 5 cellules de tableau et affiche à l'intérieur un nombre aléatoire.
 Le script clôt le tableau en fermant la balise </TABLE>
Développement Web
IvMad, 2002-2014
JavaScript ‐ les boîtes de dialogue
JavaScript ‐ les boîtes de dialogue
 La méthode alert() permet d'afficher dans une boîte composée d'une fenêtre et d'un bouton OK un texte fournit en paramètre. Exemple.
 La méthode prompt()
26
 La méthode prompt fournit un moyen simple de récupérer une information provenant de l'utilisateur.  La méthode prompt() requiert deux arguments :  le texte d'invite  Le texte par défaut dans le champ de saisie
 La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur true. Elle renvoie false dans le cas contraire... Exemple.
Développement Web
IvMad, 2002-2014
27
Développement Web
IvMad, 2002-2014
28
JavaScript ‐ Formulaires
JavaScript ‐ Formulaires
 Les éléments de formulaire sont des objets JavaScript. Soit le formulaire:
 Accéder à un élément:
<FORM name="general“>
<INPUT type="text" name="champ1" value="Valeur">
</FORM>
 Accéder au formulaire:
−
−
−

document.forms["general"]
document.forms[0]
document.general
 forms est le tableau des formulaires de document
IvMad, 2002-2014
 "elements" est le nom du tableau de tous les éléments du formulaire.  On peut atteindre un élément par :
 Un formulaire est un élément de l'objet document
Développement Web
document.forms["general"].elements["champ1"]
document.forms["general"].elements[0]
document.forms["general"].champ1
29
son nom,
son indice, son nom.
Utilisez le nom des éléments, plutôt que les indices. Les noms sont indépendants du formulaire.
Développement Web
IvMad, 2002-2014
30
JavaScript – Manipuler des formulaires
Formulaires ‐ onClick
 Manipuler les propriétés d'un élément
Intégrer du JavaScript dans un événement
 L'événement le plus classique est le clic sur un bouton appelé onClick
 Pour placer dans la zone de texte le mot "NOUVEAU", il faut juste écrire :
 document.forms["general"].elements["champ1"].
value="NOUVEAU"
 Appeler une méthode sur un élément
 Pour donner le focus à un champ texte il faut appeler la méthode focus() sur cet élément.
 document.forms["general"].elements["champ1"].
focus()
<FORM name="changer">
<INPUT type="text" name="zonetexte" value="Valeur
initiale"><br/>
<INPUT type="button" value="Changer la zone de
texte" onClick = '
document.forms["changer"].elements["zonetexte"].
value="NOUVEAU"'>
</FORM>
[Exécuter]
Développement Web
IvMad, 2002-2014
31
Développement Web
IvMad, 2002-2014
32
Formulaires ‐ alert
Formulaires ‐ this
 Au clic d'un bouton un événement est appelé de type onClick qui peut faire appel à une fonction ou directement à un code JavaScript.  Le code JavaScript doit se mettre entre " ou entre '. Il faut donc faire très attention de les alterner correctement!
Le mot clé this représente l'objet JavaScript en cours.
<FORM>
<INPUT type="text" name="zonedetexte"
value="Valeur initiale">
<INPUT type="button" value="Changer le contenu"
onClick='this.form.zonedetexte.value="nouveau"'>
</FORM>
onClick='alert("Bonjour")'
ou
onClick="alert('Bonjour')"
Développement Web
IvMad, 2002-2014
33
Développement Web
IvMad, 2002-2014
JavaScript ‐ méthodes d'accès
JavaScript ‐ méthodes d'accès
 Méthode : window.document.getElementById()
 Méthode : window.document.getElementsByName()
 Retourne un objet HTML à partir de son nom:
 Retourne un objet HTML à partir de son id
 On peut ainsi modifier les input dans un formulaire:
<html><head><script>
function f() {
var obj = document.getElementById("champ_input");
alert('le champ a pour valeur: "'+obj.value+"'")
obj.value="autre valeur";
alert('maintenant il contient: "'+obj.value+'"');
}
</script>
</head><body>
<form>
<input type="text" id="champ_input"><br>
<input type="button" onclick="f()" value="modifier">
</form>
[Tester]
</body></html>
Développement Web
IvMad, 2002-2014
34
<FORM name="form_fruit">
<INPUT type="checkbox" name="fruit" value="Fraise"> Fraise
<BR>
<INPUT type="checkbox" name="fruit" value="Banane"> Banane
<BR>
<INPUT type="checkbox" name="fruit" value="Pomme"> Pomme
<BR>
</FORM>
<SCRIPT language="javascript">
document.getElementsByName("fruit")[0].checked = true;
</script>
 Les cases sont repérées et cochées par programmation: [Tester]
35
Développement Web
IvMad, 2002-2014
36
Formulaires ‐ input
Formulaires ‐ Les cases à cocher
 Les zones de texte <input>
Détecter une case cochée. On utilise la propriété checked qui est de type booléen (true / false) pour vrai ou faux.
 La principale action sur une zone de texte est de manipuler son contenu.
 Un formulaire "monform" possède un champ texte "monchamp".  On accède au contenu du champ par :
 document.forms["monform"].elements["monchamp"].value
 Il faut ajouter la propriété .value pour accéder au contenu du champ!  Alors il faut penser aux opérations sur les chaînes de caractères.
Développement Web
IvMad, 2002-2014
37
Formulaires ‐ Les radio‐boutons
<FORM>
<INPUT type="checkbox" name="majeur">Enseignant
<INPUT type="checkbox" name="etudiant">Etudiant
<INPUT type="button" value="Tester"
onClick="alert(' Enseignant : '
+this.form.majeur.checked+
'\nEtudiant : '
+this.form.etudiant.checked);">
</FORM>
Développement Web
IvMad, 2002-2014
38
Formulaires ‐ Les radio‐boutons
La gestion des radio‐boutons est assez complexe. <FORM>
<INPUT type="radio" name="os" value="Windows 95"
checked>Windows 95
<INPUT type="radio" name="os" value="Windows 98">Windows 98
<INPUT type="radio" name="os" value="Windows NT">Windows NT
<INPUT type="radio" name="os" value="Linux">Linux
<INPUT type="radio" name="os" value="Autre">Autre
<INPUT type="button" value="Tester"
onClick="testerRadio(this.form.os)">
function testerRadio(radio) {
for (var i=0; i<radio.length; i++) {
if (radio[i].checked) { alert("Système =
"+radio[i].value) }
}
}
</SCRIPT>
Un groupe de radio‐boutons liés est créé sous le nom de 'os'. La fonction a comme paramètre le groupe des radio‐boutons. On repère en boucle la propriété checked à true et on affiche la valeur correspondante.
Développement Web
IvMad, 2002-2014
39
Développement Web
IvMad, 2002-2014
40
Formulaires ‐ SELECT
La structure d'un élément de type SELECT (voir Tableau)
Pour récupérer l'indice la ligne sélectionnée :
this.form.elements['liste'].selectedIndex
Pour récupérer le nombre de lignes :
this.form.elements['liste'].options.length
Pour récupérer la valeur de la ligne sélectionnée:
this.form.elements['liste'].options[this.for
m.elements['liste'].selectedIndex].value
Développement Web
Formulaires ‐ TEXTAREA
Nom
Nom de la liste
selectedIndex
Indice de la ligne sélectionnée
(ligne 1 : indice=0)
options
Tableau des lignes
length
Nombre de lignes
value
Valeur d'une ligne
text
Libellé d'une ligne
IvMad, 2002-2014
41
Une zone de texte multi‐lignes a comme propriété principale .value qui contient le texte de la zone. Pour récupérer le contenu:
document.forms["nom"].elements["zone"].value
Développement Web
IvMad, 2002-2014
JavaScript ‐ Changer un contenu
JavaScript ‐ Définir un objet
<!DOCTYPE html>
<html>
<head>
<title>Changer un contenu</title>
<script>
function uneFunction() {
x = document.getElementById("demo");
// Trouver l'élément
x.innerHTML = "Bonjour de JavaScript!"; // Changer le contenu
} // innerHTML défini le contenu
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="demo">
JavaScript peux changer le contenu d'un paragraphe HTML.
</p>
<button type="button" onclick="uneFunction()">Clic</button>
</body>
</html>
[Test]
<!DOCTYPE html>
<html>
<body>
<script>
var person=new Object();
person.firstname="John";
person.lastname="Despere";
person.age=45;
person.eyecolor="blue";
document.write(person.firstname + " is "
+ person.age + " years old.");
</script>
</body>
</html>
[Test]
Développement Web
IvMad, 2002-2014
43
Développement Web
IvMad, 2002-2014
42
44
JavaScript ‐ Les événements
JavaScript ‐ Liste des événements (1)
 Les évènements sont des actions de l'utilisateur, qui donnent lieu à une interactivité.  Ainsi, il est possible d'associer des fonctions, des méthodes à des événements:
 le passage de la souris au‐dessus d'une zone, le changement d'une valeur, …
 Les gestionnaires d'événements permettent d'associer une action à un événement.  onEvenement="Action_Javascript_ou_Fonction() ";
 Les gestionnaires d'événements sont associés à des objets …
Développement Web
IvMad, 2002-2014
45
JavaScript ‐ Liste des événements (2)
Développement Web
IvMad, 2002-2014
46
JavaScript ‐ Liste des événements
 Chaque événement ne peut pas être associé à n'importe quel objet... il est évident qu'un événement OnChange ne peut pas s'appliquer à un lien hypertexte par exemple, ...  Objets auxquels on peut associer des événements:
Développement Web
IvMad, 2002-2014
47
Développement Web
IvMad, 2002-2014
48
JavaScript ‐ Liste des événements
 Comparaison de deux champs mail:
Générer un nombre aléatoire entier entre 1 et N:
<form><p><label>Adresse e-mail: </label><input type="email"
id="email_addr" name="email_addr" required><br /><br />
<label>Confirmez l'adresse e-mail: </label><input type="email"
id="email_addr_repeat" name="email_addr_repeat" required
oninput="check(this)"></p>
</form><script>function check(input) { if (input.value !=
document.getElementById('email_addr').value) {
input.setCustomValidity('Les deux e-mail ne correspondent pas.');
} else {
// le champ est valide : on réinitialise le message d'erreur
input.setCustomValidity(''); } }
</script>
function aleatoire(N) {
return (Math.floor((N)*Math.random()+1));
}
Convertisseur Euros‐Francs:
<FORM>
<INPUT type="text" name="franc" size=10
onBlur="convF(this.form)" value="0"> FF
<INPUT type="button" value="< Convertir > ">
 La méthode setCustomValidity prend une chaîne vide pour valider l'élément, sinon, il sera marqué invalide et la chaîne sera utilisée dans l'aide apparaissant pour l'utilisateur.
Développement Web
IvMad, 2002-2014
<INPUT type="text" name="euro" size=10"
onBlur="convE(this.form)" value="0"> Euros
</FORM>
49
Développement Web
IvMad, 2002-2014
50
Formulaires ‐ Un exemple
<html><head><title>Exercice 1.5</title>
<SCRIPT LANGUAGE="JavaScript">
var taux=6.55957;
<script language="javascript">
function controle(form1) {
function convF(f) {
var E=Math.round(100*parseFloat(f.franc.value)/taux)/100;
if (isNaN(E)) { alert("Montant incorrect"); f.franc.focus();
} else { f.euro.value=E; }
}
var inpt = document.form1.input.value;
var tsts = parseFloat(inpt);
alert(inpt+" usd = "+(tsts*0.758)+" eur");
}
</script></head>
function convE(f) {
var F=Math.round(100*parseFloat(f.euro.value)*taux)/100;
if (isNaN(F)) { alert("Montant incorrect"); f.euro.focus();
} else { f.franc.value=F; }
}
</SCRIPT>
<body>
<form name="form1">
<p>Donnez une somme en USD :<br />
<INPUT TYPE="text" NAME="input" VALUE="0"><BR />
<INPUT TYPE="button" NAME="bouton" VALUE="Echanger" onClick="controle(form1)"></p>
</FORM></BODY></HTML>
Développement Web
IvMad, 2002-2014
51
Développement Web
IvMad, 2002-2014
52
Formulaires ‐ Contrôler la saisie
 Un nombre:
 Il peut être utile de vérifier que la saisie dans un champ de formulaire est bien un nombre : saisie de quantités, de prix...  Soit nb le champ à tester. Si !(isNaN(nb)) retourne true, alors nb est un nombre.
 Valider un formulaire par JavaScript :
<FORM name="form4">
<label>Adresse mail</label>
<INPUT type="text" name="mail"> <br />
<INPUT type="button" name="bouton" value="Valider"
onClick="ValiderMail(this.form)">
</FORM>
function CheckNombre(nb) {
// retourne true si c'est un nombre
// et false sinon
return !(isNaN(nb));
}
</SCRIPT>
Développement Web
IvMad, 2002-2014
 Il est souvent utile de vérifier la saisie d'un formulaire avant de le valider.
 L'idéal est de créer un bouton (de type "button" et pas "submit") qui appelle une fonction JavaScript qui contrôle la saisie et soumet ou non le formulaire.
53
Développement Web
IvMad, 2002-2014
54
 Pour vérifier qu'un mail est valide, il suffit de tester la présence de @ et du point.
 Pour vérifier la validité de deux champs qui contiennent deux adresses mail apriori identique (comparer si deux chaines de caractères sont égales)
<SCRIPT language="javascript" method="POST">
function ValiderMail(formulaire) {
if (formulaire.mail.value.indexOf("@")<0 &&
(formulaire.mail.value.indexOf(".")<0)) {
alert("Adresse mail invalide.")
} else {
alert("Formulaire validé");
// Pour valider le formulaire
// en JavaScript
formulaire.submit()
}
</SCRIPT>
Développement Web
IvMad, 2002-2014
function ComparerMail() {
var M1 = "[email protected]";
var M2 = "[email protected]";
if (M1 == M2) {
alert("Equivalence des adresses mail")
} else {
alert("Différence dans les adresses mail");
}
</SCRIPT>
55
Développement Web
IvMad, 2002-2014
56
Les pop‐ups
Les pop‐ups – 'page' et 'nom'
 Le mot popup peut être traduit par fenêtre surgissante.
 L'événement est déclenchée par l'utilisateur (clic, ouverture de site, minuterie, ...) via un code JavaScript.
 L'objet window possède la méthode open qui attend 3 paramètres chaînes de caractères :
window.open( page [,nom] [,options] )
 Pour ouvrir un popup sur un lien, voici la syntaxe HTML :
<A href = "javascript:popup('popup.html')">
Ouverture popup basique</A>
 Déclaration la fonction popup() :
function popup(page) {
window.open(page);
}
</SCRIPT>
− page contient l'adresse de la page à afficher.
− nom du popup qui va être ouvert.
− options paramétrage du popup. Développement Web
IvMad, 2002-2014
57
Développement Web
IvMad, 2002-2014
Les pop‐ups – 'options'
Les pop‐ups – 'options'
La chaîne d'options d'affichage:
Ouverture d'une fenêtre popup en fonction
58
<script LANGUAGE="JavaScript">
<!-function ShowWindow(cURL) {
var ControlWindow;
ControlWindow = window.open(cURL, "RFC", "status,
height=480, width=640, status=no, scrollbars=yes,
resizable=yes, toolbar=0");
if (parseInt(navigator.appVersion) >= 3)
ControlWindow.focus();
}
}
//-->
</script>
Aucune barre de menu, taille fixe :
OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200,
height=100, menubar=no, status=no, scrollbars=no, menubar=no')
Développement Web
IvMad, 2002-2014
{
[Test]
59
Développement Web
IvMad, 2002-2014
60
M4207C : Les objectifs
Web dynamique
avec
PHP et MySQL

Application informatique dédiée aux R&T
– Résoudre un problème depuis un cahier des charges
jusqu’à la mise à disposition d’une solution
fonctionnelle.
– Développement d’une application réseaux et/ou
télécommunication et/ou informatique
– Autonomie technique.

Application réseau:
– Java Socket (Java2SE) - UDP, TCP, Client-Serveur

Application télécommunication:
– Java Android - GUI, XML, eMail, SMS, Call, NFC
– Cordova - framework pour applis natives

Application informatique:
– Développement Web (HTML5, CSS3, PHP, MySQL)
Développement Web,
IvMad, 2005-2015
1
Modèle Client Serveur

Développement Web, IvMad, 2005-2015
2
Développement Web
Le modèle client serveur est tripartite, c.à.d.
constitué en trois parties:

1. Client Web qui visualise le contenu des pages HTML
et JavaScript demandées au serveur Web
2. Serveur Web qui stocke l'intégralité des pages d'un
site : HTML, PHP, JSP, ASP, CGI, JavaScript
3. Serveur d'application et de base de données qui
stocke et traite la partie dynamique d'un site.

Dans une application Web les tâches sont
reparties entre le client et le serveur.
Pour un formulaire par exemple:
– Traitement des données côté client avec
JavaScript:
• Avantage : rapidité, vérification pas à pas
• Inconvénient : JavaScript peut être désactivé
– Traitement des données côté serveur avec
CGI/PHP/ASP/JSP
• Avantage : vérification certaine
• Inconvénient : échanges fréquents avec serveur
– Traitement des données des deux côtés
• Rapidité, robustesse, mais double codage
3
4
Histoire
PHP: Introduction





Le PHP permet de réaliser des sites
dynamiquement du côté Serveur Web.
HTML est un script de marquage statique et
permet un dynamisme limité (JavaScript).
PHP est disponible pour plusieurs platesformes: Linux, Windows et Macintosh.
PHP est un langage de programmation
orientée objet spécialisé dans la génération de
code HTML.
PHP possède des outils pour manipuler des
images, le traitement de fichiers, accès aux
bases de données, etc.




5
6
Le langage PHP
Fonctionnalités PHP

Fonctions mathématiques et expressions régulières


Gestion des fichiers et des répertoires


Gestion du temps, de calendriers

Gestion des formulaires HTML

Gestion de protocoles Internet (HTTP, FTP, SMTP)

Analyse des documents XML

Gestion des cookies, des sessions, des sockets

Authentification http, manipulation des en-têtes http

Accès natif à des bases de données (MySQL, et autres)

Exécution de programmes externes et de shell

Encryptage, compression (gzip)

Création de documents PDF

Création et manipulation d'images GIF, JPEG et PNG
Le langage fut créé en 1994 par Rasmus Lerdorf
pour son site avec à l'origine une bibliothèque en
Perl pour conserver une trace des visiteurs.
Par la suite la bibliothèque fut transformée en une
implémentation en langage C, capable de
communiquer avec les BD et de créer des
applications dynamiques.
Ainsi en 1995 il rendit public son travail dans
l'espace free et open source. PHP s'appelait alors
PHP/FI (Personal Home Page Tools).
En 1997, deux étudiants, Andi Gutmans et Zeev
Suraski, redéveloppèrent le cœur de PHP/FI. Un an
plus tard, le résultat donna le Zend Engine devenu
alors PHP: Hypertext Preprocessor en version 3.
Le PHP est un langage complet, écrit en C.
Le moteur d'interprétation du langage lit un fichier
source PHP, puis génère un flux de sortie en
respectant les définitions et règles suivantes :
– Un bloc PHP est un groupe continu de lignes, encadré
par deux balises : <? et ?> ou <?php et php?>
– Toute ligne située à l'extérieur de ces balises n'est
pas interprétée et est envoyée telle quelle dans le
flux de sortie.
– Toute ligne située à l'intérieur de ces balises est
considérée comme une instruction PHP et est donc
interprétée par le moteur.
– Lorsqu'une erreur survient, un message est intégré
dans le flux de sortie, et la génération du script est
interrompue.
7
8
Premier programme
Fonctionnement

Le script PHP est réalisé avec un éditeur de
texte de type ASCII (Notepad++ ou autre).
<HTML><HEAD>
<TITLE>Premier programme PHP</TITLE></HEAD>
<BODY>
<?php
echo "<h2>Ça <br />marche <i>!</i></h2>";
?>
</BODY>
</HTML>

9
Premier programme



10
Premier programme
Si l'extension du fichier est maintenue
.html ou .htm l'interpréteur PHP ne sera
pas sollicité.
L'extension .php provoque l'intervention du
moteur "Zen" qui interprète les parties
encadrées par les balises
<?php et ?>
Les parties dynamiquement générées par
le serveur dans un fichier HTML sont
renvoyées au client par le flux de sortie.
L'extension de votre fichier doit être .php afin
d’être interprété par le moteur Zen installé
côté serveur Web (Apache, IIS, Tomcat, ou
autre).
11

L'exécution du fichier ca_marche.php du
côté serveur affiche le résultat suivant du
côté client:
12
Les variables
Premier programme

Du côté client, la page contient
uniquement du code HTML. Les lignes PHP
ont été converties:
<html>
<head>
<title>Un premier programme php</title>
</head>
<body>
<h2>ça <br />marche <i>!</i></h2>
</body>
</html>


Les variables sont toutes dotés du préfixe
$
Il existe 5 types de données :
–
–
–
–
–
13
Entier, (int, integer)
Décimal, (real, double, float)
Chaîne de caractères, (string)
Tableau, (array)
Objet (object)
14
Les constantes
La déclaration des variables en PHP sont
précédées du signe $ et se définissent au
moyen du signe "=" :

<?php
$variable = 'test';
$chiffre = 12;
$tableau[0] = 1;
$tableau[1] = 2;
?>
Comme tout langage interprété PHP ne contient
pas de partie déclarative. Pour déclarer une
variable, il suffit de l'initialiser et cela
détermine le type de la variable.
$ma_variable = 1;
Les variables


Pour définir une constante il suffit d'utiliser
l'instruction define
exemple :
define("MACONSTANTE", "Hello World") ;
if (defined("MACONSTANTE")) {
print "La valeur de ma constante est : ".MACONSTANTE
// Attention, on accède au contenu sans le $.
}
15
16
La concaténation


Portée des variables
La concaténation est une opération pour
assembler deux ou plusieurs informations
dans une variable.
l'opérateur de concaténation est le point (.)
Exemple:

1. Le niveau global. Il définit des variables
dans l'intégralité du code d'une page PHP.
2. Le niveau local. Il définit des variables
propres à une fonction, dont la durée de
vie ne dépasse pas le temps de cette
fonction.
3. Le niveau static. Il définit des variables
propres à une fonction, qui persistent
pendant l'intégralité du code de la page
PHP.
<?php
// Déclaration des variables
$prenom = 'Hugo';
$nom = 'Boss';
$identite = '';
// On concatène $nom et $prenom dans $identite
$identite = $prenom .' '. $nom;
// Affiche 'Hugo Boss'
echo $identite;
?>
17
Opérateurs mathématiques

18
Tests : if... then... else
Le code suivant montre l'utilisation des
opérateurs mathématiques

<?php // Déclaration des variables mathématiques
$a = 10;
$b = 2;
$c = 0;
$c = $a + $b; // $c vaut 10 + 2 = 12
$c = $a * $b; // $c vaut 10 x 2 = 20
$c = $a / $b; // $c vaut 10 / 2 = 5
$c = $a - $b; // $c vaut 10 - 2 = 8
// $c vaut le reste de la division de $a par $b soit 0
$c = $a % $b;
$a++; // Incrémentation de $a
$b--; // Décrémentation de $b
?>
Il existe trois niveaux de définition de
variables :
Si une condition est vrai alors on exécute des
instructions sinon (facultatif) on en exécute
d'autre.
if (condition1) {
Action 1
} elseif (condition2) {
Action 2
}
} else {
Action 3
}
19
20
Tests : if... then... else
Test : fonction empty()
Exemple :

– La variable existe ou non
– La variable contient une valeur ou bien est vide
<?php
$a=5;
$b=6;
echo"<p>a=".$a."<br />b=".$b."</p>";
if ($a == $b) {
echo "<p>A est égal à B</p>";
} elseif ($a > $b) {
echo "<p>A est supérieur à B</p>";
} else {
echo "<p>A est inférieur à B</p>";
}
?>
21
switch... case... default

<?php
// Déclaration de la variable
$prenom = 'Yves';
if(empty($prenom))
echo 'variable prenom vide';
else
echo 'valeur de prenom: '.$prenom;
echo '<br/>';
if(empty($nom))
echo 'variable non déclarée ou vide';
else
echo $nom;
?>
22
Boucles
Un 'switch' représente le choix multiple.
Boucle avec précondition
– La condition est associée à une variable,
– L'instruction 'break' est primordiale à la fin de
chaque bloc de conditions, sinon toutes les
conditions seront vérifiées et exécutées.
switch ($a) {
case $b:
echo "A est égal à B";
break;
case $b:
echo "A est supérieur à B";
break;
default:
echo "A est inférieur à B";
break;
}
La fonction empty() permet deux choses:
while ( condition ) {
Action;
}
Boucle avec postcondition
do {
Action;
} while (condition);
Boucle automatique
for (expr1; expr2; expr3) {
Action;
}
23
24
Break & Continue
Boucles
$i=1;
while ($i <= 10) {
echo "- $i -"; $i++;
}


$i=1;
do {
echo "- $i -";
$i++;
} while ($i <= 10);
for ($i=1; $i<=10; $i++) {
if ($i<=5) {
echo $i;
} else {
break;
}
echo "- ";
}
for ($i = 1; $i <= 10; $i++) {
echo "- $i -";
}
// cette boucle affichera : 1 - 2 - 3 - 4 - 5
25

Dans le langage PHP les tableaux sont une
structure de données très efficace:
incontournable.
La déclaration d'un tableau se fait de la même
manière que la déclaration d'une variable avec
un indice se trouvant entre [ et ] ou à travers la
fonction array().
$tableau = array();
$tableau[0] = 1;
26
Les tableaux
Les tableaux

Break : Cette instruction permet de sortir de n'importe
quelle boucle, à n'importe quel moment.
Continue : Cette instruction permet de ne pas exécuter
le code contenu dans la boucle et de passer à l'itération
suivante.
27
$tableau[0] = 1; // un tableau avec sa première valeur -> 1
Pour un tableau à deux dimensions, il suffit de mettre un
second indice au moment de l'affectation.
exemple :
 $tableau[0][0] = 1; // un tableau, et sa première valeur est 1
 Il n'est pas obligatoire de préciser l'indice pour affecter une
valeur.
exemple :
 $tableau[] = 1;
// équivaut à $tableau[0] = 1;
 $tableau[] = 45; // équivaut à $tableau[1] = 45;
 $tableau[] = 6; // équivaut à $tableau[2] = 6;
 La déclaration et l’initialisation d'un tableau peuvent
également se faire par l'intermédiaire de la fonction 'array()'.
Cette fonction permet de préciser les indices ainsi que les
valeurs du tableau (à l'aide de l'opérateur =>).


28
Variables d'environnement
Les tableaux

Tableau à indice numérique:

<?php
$prenoms = array();
$prenoms[0] = 'Maurice';
$prenoms[1] = 'Jean';
$prenoms[2] = 'Pierre';
$prenoms[3] = 'Paul';
?>


syntaxe équivalente

<?php
$prenoms = array(0 => 'Maurice', 1 => 'Jean',
2 => 'Pierre', 3 => 'Paul');
?>
29
Variables d'environnement

30
Variables d’environnement
Exemple :
Les variables sont accessibles en directe.
/* IP du client et son navigateur */
<?php
$IP=$_SERVER['REMOTE_ADDR'];
$NV=$_SERVER["HTTP_USER_AGENT"];
echo "Adresse IP du client: <br />".$IP;
echo "<br />";
echo " Avec le Navigateur: ";
echo "<br />";
echo $NV;
?>








L'utilisation des variables d'environnement du
serveur HTTP met en œuvre l'architecture des
applications client-serveur.
En PHP toutes les variables d'environnement
du serveur sont accessibles dans les scripts
PHP en tant que variables globales. Ainsi, ils
sont utilisées directement dans le code.
Ces variables sont en fait une variable
$_SERVER[] de type tableau contenant autant
d'entrées qu'il y a de valeurs récupérées.
31
$SERVER_NAME : Le nom du serveur hôte qui exécute le script.
Si le script est exécuté sur un hôte virtuel, ce sera la valeur
définie pour cet hôte virtuel.
$PHP_SELF : Le nom du fichier du script en cour d'exécution,
par rapport au document root.
$DOCUMENT_ROOT : La racine sous laquelle le script courant
est exécuté, comme défini dans la configuration du serveur.
$REMOTE_ADDR : L'adresse IP du client.
$REMOTE_PORT : Le port utilisé par la machine cliente pour
communiquer avec le serveur web.
$SCRIPT_FILENAME : Le chemin absolu jusqu'au script courant.
$SERVER_PORT : Le port de la machine serveur utilisé pour les
communications. Par défaut, c'est '80'. En utilisant SSL, par
exemple, il sera remplacé par le numéro de port HTTP sécurisé.
$REQUEST_URI : L'URI qui a été fourni pour accéder à cette
page. Par exemple : '/index.html'.
32
Variables de formulaires



Les variables sont issues des différents
champs positionnés entre les balises <FORM>
et </FORM>
La page qui reçoit ces variables est désignée
par l'attribut ACTION de la balise <FORM>.
Exemple :
<HTML>
<FORM ACTION="test.php" METHOD="POST">
Nom : <INPUT TYPE="text" NAME="nom">
<INPUT TYPE="submit" VALUE="Envoyer">
</FORM>
</HTML>
<HTML><HEAD><TITLE>
Affichage du nom
</TITLE></HEAD><body>
Le nom de l'utilisateur est: Didier
</body></html>
33
Exemple de formulaire

Les variables récupérées des méthodes GET et
POST sont accessibles comme des éléments de
tableaux :
– $HTTP_GET_VARS / $_GET
– $HTTP_POST_VARS / $_POST

Exemple avec la forme "nom"
<?php
$nom=$_POST["nom"];
echo "Le nom de l'utilisateur est: ".$nom;
?>
34
35
<form action="affiche-donnees.php" method="POST">
<p>Entrez votre nom
<input type="text" name="nom"><br/>
Entrez votre prénom
<input type="text" name="prenom"> <br />
De quel sexe êtes vous ?
<input type="radio" name="sexe" value="Homme"> Homme
<input type="radio" name="sexe" value="Femme"> Femme
<br />
Entrez votre pays d'origine
<select id="pays" name="pays">
<option value="Allemagne">Allemagne</option>
<option value="France">France</option>
<option value="Hollande">Italie</option>
</select><br />
<input type="submit" value="Envoyer"></p>
</form>
36
<?php
$nom = $_POST['nom'] ;
$prenom = $_POST['prenom'] ;
$sexe = $_POST['sexe'] ;
$pays = $_POST['pays'] ;
echo( "Votre nom: <b>".$nom."</b><br>\n" ) ;
echo( "Votre prénom: <b>".$prenom."</b><br>\n" ) ;
echo( "Votre sexe: <b>".$sexe."</b><br>\n" ) ;
echo( "Votre pays d'origine: <b>".$pays."</b><br>\n" ) ;
?>

Formulaire:

Résultat envoyé par le script PHP
37
38
Les checkbox cochée
Les checkbox en chaîne

<html><body> 
<input type="checkbox" name="jury[]" value="un"/>
<form action="checkbox.php" method="POST">
<input type="checkbox" name="jury[]" value="deux"/>
<input type="checkbox" name="options[]" value="bleu">bleu<br>
<input type="checkbox" name="jury[]" value="trois"/>
<input type="checkbox" name="options[]"
value="blanc">blanc<br>
<input type="checkbox" name="jury[]" value="quatre"/>


<input type="submit" value="Envoyer">
<?php
if(isset($_POST['jury'])){
<?php
// si au moins un moins un checkbox a été coché
// chechbox.php
$options = $_POST['options']; // Contenu des cases à cocher
foreach($_POST['jury'] as $chkbx){
$options_text = implode(', ',$options);
echo $chkbx;
// un séparateur est mis entre les éléments du tableau.
}
echo '<p>options:<br><br>'.$options_text.'</p>';
}
?>
?>
39
40
Les Fonctions
Les Fonctions
Une fonction est une sorte de sous-programme
isolé du reste du code, exécutable à tout
moment, depuis n’importe quelle partie du code
principal ou n’importe quelle autre fonction, par
simple appel.
Déclaration :
La syntaxe de déclaration s’appuie sur le mot clé
function. Ce mot clé est immédiatement suivi du
nom de la fonction, puis de parenthèses
(obligatoires) destinées à accueillir les éventuels
paramètres à passer à la fonction.
Exemple 1:
function bonjour() {
echo "Bonjour!";
}
La fonction affichera 'bonjour' et ne retourne
aucun résultat, on l’utilisera de la manière
suivante :
Bonjour() ; // affiche 'bonjour' à l’écran
Exemple 2:
function somme( $a, $b) {
return $a + $b ; }
La fonction retourne la somme de deux
paramètres.
41
Les Fonctions
Gestion de la date
Un exemple complet

<html>
<body>
<?php
function add($x,$y) {
$total = $x + $y;
return $total;
}
echo "1 + 16 = " . add(1,16);
?>
</body>
</html>
Fonction Date - nombreux paramètres :
echo date("d-m-Y"); // affiche : "03-03-2008"
echo date("d/m/y"); // affiche : 02/03/09
echo date("Y");
// affiche : "2008"
echo date("m/y"); // affiche : "03/08"
echo date("H:i:s"); // affiche 10:16:18
echo date("F j, Y, g:i a");
// March 3, 2009, 10:16 pm
La fonction est exécutée après son appel et
passage des paramètres.
42
43
44
Mail
Chaînes de caractères







strpos(chaîne, sous_chaîne) : retourne la position de la
première occurrence de la sous chaîne dans la chaîne.
strstr(chaîne, sous_chaîne) retourne la portion de la
première occurrence de la sous chaîne.
foreach (nom tableau) : A chaque appel, cette fonction
retourne la valeur suivante du tableau.
strlen (chaîne) : retourne la taille de la chaîne.
strtolower|strtoupper (chaîne) : retourne la chaîne passée
en paramètres an minuscules (majuscules).
str_replace (car d’origine, car de destination, chaîne) :
remplace le caractère d’origine par le caractère de
destination dans la chaîne.
ereg(chaîne à chercher, chaîne) : retourne vrai si la
chaîne à chercher (sous forme de chaîne ou sous forme
d’expression régulière) est contenue dans chaîne.
Le principe MVC est de dissocier les données et
la présentation en décomposant l'application en
trois couches:
– Modèle : pour décrire les actions, les traitements
métiers de l'application (connexion aux données,
algorithmique, vérification, sécurité…).
– Vue : pour la partie
restitution des
données aux
utilisateurs de
l'application
HTML, PDF, XML…
– Contrôleur :
interface la Vue
et le Modèle.

47
Envoyer un mail directement, sans appeler
un gestionnaire/serveur de courrier.
La fonction mail (ou email) paramètres:
Le destinataire,
L’objet du message,
Le corps du message.
<?
Mail("[email protected]", "Test de la
commande mail", "Voici le corps du mail") ;
?>

45
MVC : Modèle-Vue-Contrôleur


Très pratique pour réponses automatiques
d'un serveur Web
46

Architecture des dossiers
– La mise en place d'une structure de dossier permet
d'appréhender plus facilement l'implémentation du
MVC.
48

Contrôleur :
– Le contrôleur reçoit les requêtes de l'utilisateur et fait
l'intermédiaire entre le modèle et la vue pour
répondre aux requêtes.

Modèle :
– La partie métier de l'application.
– La partie modèle contient les classes, les fonctions, les
fichiers de paramètres, les scripts d'actions de
l'application sans aucun élément visuel.

Gestion des fichiers
La fonction fopen( ) permet d'ouvrir un
fichier pour un certain mode d'utilisation:
entier fopen(chaine nomdufichier, chaine mode);
Différents modes:



Vue :
– La vue contient les composants gérant la présentation
• fichiers HTML, fichiers textes, ou d'autres formats XML,
PDF…
– La vue représente un visuel et les données traitées
par le modèle.



49
r : ouverture en lecture seulement
w : ouverture en écriture seulement (la fonction crée le
fichier s'il n'existe pas)
a : ouverture en écriture seulement avec ajout du
contenu à la fin du fichier et le crée s'il n'existe pas
r+ : ouverture en lecture et écriture
w+ : ouverture en lecture et écriture (la fonction crée le
fichier s'il n'existe pas)
a+ : ouverture en lecture et écriture avec ajout du
contenu à la fin du fichier et le crée s'il n'existe pas.
50
Exemples :

File-diagram des opérations sur fichiers
// lecture
$fp = fopen("../fichier.txt", "r"); // écriture depuis début du fichier
$fp = fopen("ftp://iut.univ.fr/pub/fichier.txt","w"); // écriture depuis fin du fichier
$fp = fopen(http://www.nexen.com/fichier.txt,"a"); Remarque:
$fp contient l'adresse du buffer d'Entrée/Sortie
51
52
Écriture dans un fichier
Lecture dans un fichier
<?php
// ouverture en écriture
$monFichier = fopen("monfichier.txt","w") ;
if ( !($monfichier)) {
print("Impossible de créer le fichier \n") ;
exit ;
}
// on écrit deux lignes
fputs($monfichier, "ligne 1") ;
fputs($monfichier, "ligne 2") ;
fclose($monfichier) ;
// on ferme le fichier, on libère les ressources
?>
$monfichier = fopen("monfichier.txt","r") ;
if ( !($monfichier) ) {
print("Impossible d’ouvrir le fichier") ;
exit ;
}
while ( !feof($monfichier) ) {
$ligne = fgets($monfichier, 255);
// 255 caractères max. ou bien fin de ligne.
print " $ligne <BR>";
}
fclose ($monfichier) ;
53
Réaliser un compteur dans un fichier texte.

<?php
$fic="cpt.txt";
if (!file_exists($fic)) {
print "<h2>fichier compteur manquant</h2>"; exit;
} else { $fd = fopen($fic, "w+");
$hits = fgets($fd, 10); $hits++;
fseek($fd, 0); fputs($fd, $hits);
fclose($fd); print "<b><i>$hits</i></b>"; } ?>
54
Fonction Explode
Exemple de script


Il est fréquent d’avoir des fichiers
contenant différents champs séparés par
un délimiteur quelconque.
Une fonction très utile dans ces cas là:
explode ("caractère délimiteur",
chaîne de donnée)
Roose | Philippe | 27
Goudin | David
| 28
55
56
Programmation OO
Fonction Explode

<?php
if (!file_exists("test.txt")) {
print "<H3><BR>fichier manquant<BR>"; exit;
} else {
$fd = fopen($fic,"r");
while (!feof($fd)) {
$ligne = fgets($fd, 255);
$tab=explode("|",$ligne);
print "Nom : $tab[0]<br>";
print "Prénom : $tab[1]<br>";
print "Age : $tab[2]<br>";
}
fclose($fd); }
?>
class Personne { // attributs, méthodes
var $nom, $adresse;
function Personne($nom, $adresse, $age) {
$this‐>nom = $nom;
$this‐>adresse = $adresse;
}
function toprint() { print $this‐>nom; }
}


Référenciassions
print
57
$p‐>nom; $p‐>print();
58
Programmation OO
Héritage

class Cadre extends Personne {
var $poste, $salaire;
function Cadre($nom, $adresse, $poste, $salaire) {
$this‐>Person($nom, $adresse, $age);
$this‐>poste = $poste;
$this‐>salaire = $salaire;
}
function toprint() {
print parent::toprint();
print $this‐>salaire; print $this‐>poste;
}
}
Instanciation
$p = new Personne("Jacques","Aubagne");
Programmation OO

Déclaration de classe
Exécution
$p=new Personne("Jacques","Aubagne");
echo "<p><i>la classe Personne</i></p>";
print $p‐>nom;
echo "<p><i>la classe Cadre</i></p>";
$c=new Cadre("Ivan", "Marseille", "MCF", "XXX");
$c‐>toprint();
59
60
PHP et les BD
Modèle Client Serveur

Le modèle client serveur est tripartite, c.à.d.
constitué en trois parties:

1. Client Web qui visualise le contenu des pages HTML
et JavaScript demandées au serveur Web
2. Serveur Web qui stocke l'intégralité des pages d'un
site : HTML, PHP, JSP, ASP, CGI, JavaScript
3. Serveur d'application et de base de données qui
stocke et traite la partie dynamique d'un site.



61
PHP et MySQL

SGBD MySQL

Principe:
$user :
$passwd :
$host :
$bdd :
Le nom d'utilisateur;
Le mot de passe;
L'hôte hébergeant le SGBD;
Le nom de la base de données.
$bdd= "mabase";
$host="mysql.univ-mrs.fr";
$user= "etude";
$pass= "12345";
Différences entre MySQL et le standard SGBD
– Pas de gestion des transactions
– Pas de procédure stockée ni de trigger
– Pas de vue (view)
62
La première étape consiste à déclarer les
variables qui vont permettre la connexion à
la base de données:
–
–
–
–
– Utilisation de requêtes SQL dans du code PHP
– API MySQL : Ensemble de fonctions PHP permettant d'accéder aux bases de données MySQL

Connexion à une BD
– Libre ( GNU )
– Multiplateforme
– multi‐utilisateurs

PHP permet un interfaçage très simple avec un
grand nombre de bases de données. Lorsqu'une
base de données n'est pas directement supportée
par PHP, il est possible d'utiliser un driver ODBC,
pilote standard pour communiquer avec la BD.
La communication avec les bases de données se
fait à l'aide de requêtes SQL, un langage reconnu
par l'ensemble des SGBDR.
Le système de gestion de bases de données
(SGBDR) MySQL est un système gratuit et rapide
fonctionnant sous Linux et Windows.
MySQL est le SGBDR le plus utilisé avec PHP sur
des serveurs Web pour les petites et moyennes
entreprises.
63
64
Connexion à une BD

PHP fournit un grand choix de fonctions
permettant de manipuler les BD, dont
quatre fonctions sont essentielles :
–
–
–
–

Bases de Données
La
La
La
La
fonction
fonction
fonction
fonction
de
de
de
de

<?php
$bdd= "mabase";
// Base de données
$host="jumbo.univmed.fr"; // Serveur
$user= "etude";
// Utilisateur
$pass= "12345";
// Mot de passe
mysql_connect($host, $user, $pass) or die ("Impossible de se connecter à la BD"); mysql_select_db($bdd);
?>
connexion au serveur
choix de la base de données
requête
déconnexion
Avec MySQL ces fonctions sont :
–
–
–
–
mysql_connect();
mysql_select_db();
mysql_query();
mysql_close();
65

La requête SQL en chaîne de caractères
$query = "SELECT num, pays, date FROM $nomtable"; 
Le résultat
$result = mysql_query($query);

Traitement de l'erreur
if (mysql_error()) { print "Erreur dans la BD: " .mysql_error();
exit();
}
66
Requêtes SQL
Requêtes SQL

Connexion à une BD (MySQL)
67
Créer une table dans MySQL
<?php
$user="webuser"; $password="123456"; $database="hotel";
$dbserver="mysql.iut.fr";
mysql_connect($dbserver, $user, $password);
mysql_select_db($database) or die ("BD inaccessible");
$query="CREATE TABLE reservation (id int NOT NULL AUTO_INCREMENT PRIMARY KEY, nom varchar(25), email varchar(20), date_arr date, date_dep date, nbjours int);";
if(mysql_query($query))
echo "Création de la table";
else
echo "échec de création!"; mysql_close(); ?>
68
Requêtes SQL

Requêtes SQL
Insérer des données dans une table
<?php
$nom=$_POST["nom"]; $email=$_POST["email1"];
$date_arr=$_POST["date1"]; // la date en format jj/mm/aaaa
$date_dep=$_POST["date2"]; $nbjours=$_POST["jours"];
// passer la date en format yyyy‐mm‐dd
$date_arr = substr($date_arr, 6, 4)."‐".substr($date_arr, 3, 2)."‐
".substr($date_arr, 0, 2);
$date_dep = substr($date_dep, 6, 4)."‐".substr($date_dep, 3, 2)."‐
".substr($date_dep, 0, 2);
$database="hotel"; $user="user"; $password=""; $dbserver="s.iut.fr";
mysql_connect($dbserver, $user, $password);
mysql_select_db($database) or die("BD inaccessible");
$query = "INSERT INTO reservation (nom, email, date_arr, date_dep, nbjours) VALUES ('$nom','$email','$date_arr','$date_dep','$nbjours');";
$result = mysql_query($query);
if ($result) { echo "Une réservation ajoutée";
} else echo "Il y a un problème!";
mysql_close();
?>

69
La fonction mysql_fetch_row() array mysql_fetch_row ( $result )
– retourne un tableau qui contient tous les champs d’une rangée de résultat (un tuple). Chaque appel produit le tuple jusqu’à ce qu’il n’y en ait plus (FALSE).
– La ressource $result provient de la fonction mysql_query()
70
Récupération résultats

Afficher le contenu d’une table
<?php
$database="test";
mysql_connect("mysql.iut.fr", "user", "");
mysql_select_db($database) or die ("BD inaccessible");
$result = mysql_query
("SELECT nom, email, nbjours FROM reservation");
echo '<TABLE border="1">';
echo '<TR><TH>Nom</TH><th>Mail</TH><th>Jours</th></TR>';
while ($myrow = mysql_fetch_array($result)) {
echo "<TR><TD>"; echo $myrow["nom"];
echo "</td><td>";
echo $myrow["email"];
echo "</td><td>";
echo $myrow["nbjours"];
echo "</TD></tr>";
} echo "</TABLE>"; ?>
71
<?php
$result = mysql_query
("SELECT id, email FROM people WHERE id = '42'");
if (!$result) {
echo 'Requête impossible : '.mysql_error();
exit;
}
$row = mysql_fetch_row($result);
echo $row[0]; // 42
echo $row[1]; // [email protected]
?>
72
Fonctions utiles

while ($row = mysql_fetch_row($result))
// $result a été obtenu par le msql_query ()
{
// récupération des informations
$num = mysql_result($row[0]);
$pays = mysql_result($row[1]);
$date = mysql_result($row[2]);
print
mysql_list_dbs($connexion);

}
73
Fonctions utiles






74
Fonctions utiles
mysql_fetch_array() - Retourne une ligne de
résultat MySQL sous la forme d'un tableau associatif,
d'un tableau indexé, ou les deux
mysql_fetch_assoc() - Lit une ligne de résultat
MySQL dans un tableau associatif
mysql_fetch_object() - Retourne une ligne de
résultat MySQL sous la forme d'un objet
mysql_data_seek() - Déplace le pointeur interne de
résultat MySQL
mysql_fetch_lengths() - Retourne la taille de
chaque colonne d'une ligne de résultat MySQL
mysql_result() - Retourne un champ contenant le
résultat MySQL
État d'une base ou la liste des tables
contenues dans une BD (show tables;)
$pointeur_resultat = mysql_list_tables
($nom_de_la_table, $pointeur_de_connexion);
"… ";
État de MySQL ou connaître le contenu de
MySQL (show databases;):






75
mysql_drop_db : Efface une base de données MySQL
mysql_errno : Retourne le numéro d'erreur de la
dernière commande MySQL
mysql_error : Retourne le texte associé avec l'erreur
générée lors de la dernière requête
mysql_escape_string : Protège une chaîne pour la
passer à mysql_query
mysql_fetch_assoc : Lit une ligne de résultat MySQL
dans un tableau associatif
mysql_fetch_field : Retourne les données
enregistrées dans une colonne MySQL sous forme
d'objet
76
BD Perso Luminy

BD Perso Luminy

Connexion à la BD perso sans passer en clair
ses identifiants:
<?php
$link = mysql_connect (
$_SERVER['dbHost'], // le nom du serveur MySQL
$_SERVER['dbLogin'], // nom d'utilisateur MySQL
$_SERVER['dbPass']) // mot de passe associé
or die ("Impossible de se connecter : " . mysql_error() );
echo "Connexion réussie";
mysql_close($link);
?>

Une configuration assurée par la DOSI à
Luminy
77
BD Perso Luminy

78
BD Perso Luminy
Insertion de données dans la table "carnet" de la BD
'perso'

<?php $name="carnet";
$link = mysql_connect(
$_SERVER['dbHost'], $_SERVER['dbLogin'], $_SERVER['dbPass'])
or die("Impossible de se connecter : " . mysql_error());
echo 'Connexion réussie';
mysql_select_db($_SERVER['dbBd'], $link) or die( "Unable to select database");
$query = "INSERT INTO carnet VALUES ('1','Yves','BLANC', '[email protected]')";
$result = mysql_db_query($_SERVER['dbBd'], $query);
if ($result) { echo "<p>$name est ajouté à la base</p>";
} else { echo "<p>Il y a un problème!</p>"; }
mysql_close($link);
?>
Création d'une table dans votre BD perso:
<?php
$link = mysql_connect( $_SERVER['dbHost'], $_SERVER['dbLogin'], $_SERVER['dbPass'] ) or die("Impossible de se connecter : " . mysql_error());
echo 'Connexion réussie';
mysql_select_db($_SERVER['dbBd'], $link) or die( "Unable to select db");
echo 'BD selectionnée';
$query="CREATE TABLE carnet (id int, prenom varchar(25), nom varchar(20), email varchar(35), PRIMARY KEY (id))";
mysql_query($query);
echo 'Création réussie';
mysql_close($link);
?>
79
Afficher le contenu de la table "carnet"
<?php $name="carnet";
$link = mysql_connect($_SERVER['dbHost'], $_SERVER['dbLogin'], $_SERVER['dbPass']) or die("Impossible de se connecter : " . mysql_error());
mysql_select_db($_SERVER['dbBd'], $link) or die("Unable to select database");
$result = mysql_query("SELECT * FROM carnet",$link);
echo "<TABLE>";
echo "<TR><th>| Id </th><TH>| Prenom </TH><TH>| Nom </TH></TR>";
while ($myrow = mysql_fetch_array($result)) {
echo "<TR><TD>"; echo $myrow["| id "];
echo "</td><td>";
echo $myrow["prenom"]; echo " | </td>";
echo $myrow["nom"];
echo " | </td> </tr>";
} echo "</TABLE>";
mysql_close($link);
?>
80
BD Hôtel: Conception





PHP et les Images
Développer un site Web qui enregistre les
réservations des clients d'un hôtel.
Le modèle relationnel de la BD Hôtel avec les
tables alimentées par un
formulaire.

– JPG, GIF, PNG

81
Fonctions liées aux images

Récupération,
Création,
Modification,
Manipulation.
82
Une image dans une BD
Avec la bibliothèque GD

– id = getimagesize (nom de fichier)
– id = imagecreate(largeur, hauteur)
• GIF, JPG, PNG

– imagedestroy(identifiant image)
– imagefill (image, x, y, couleur)
– imagechar($image, police, x, y, "txt",
couleur)
– imagecharup ...
Fonctionnalités
–
–
–
–
Chambres (Num_Chambre, Prix, lits, pers, Conf, Equipe)
Clients (Num_Client, Nom, Prenom, Téléphone)
Reservations (Num_Client, Num_Chambre, Date_Arr, Date_Dep)
Formats supportés
Une image bitmap peut être insérée dans
un champ de type "blob" pour être
enregistrée dans une BD.
La création de la table "pictures"
CREATE TABLE pictures ( num_img int unsigned NOT NULL auto_increment, data_img blob NOT NULL, PRIMARY KEY (num_img) );
83
84
 Insérer une image dans la table "pictures":
<?php
mysql_connect("localhost","etudes","123456");
mysql_select_db("articles");
$img = "images/LG‐NEXUS‐5.jpg";
$fp = fopen($img,"r"); // Ouvrir le fichier en lecture seule
$data = fread($fp,filesize($img));
fclose($fp);
// échapper tous les caractères ', "", \
$data = addslashes($data);
$l=mysql_query(
"INSERT INTO pictures (data_img) VALUES ('$data')" ); if($l) echo "Image: ".filesize($img)." octets enregistrées";
else echo "Problème avec image: ".filesize($img);
?>
85


Afficher l'image direct de la BD sans création
de fichier temporaire.
Les possibilités de gérer l'image sont
réduites.
<?php
mysql_connect("localhost","etudes","123456");
mysql_select_db("articles");
// lecture des données pour la première image
$result = mysql_query(
"SELECT data_img FROM pictures where num_img=1");
// Envoie un en‐tête HTTP
header("Content‐Type:image/jpeg");
$row = mysql_fetch_array($result);
echo $row["data_img"];
?>
87

Afficher l'image à partir de la BD:
<?php
$connexion=mysql_connect("localhost","etudes","123456");
mysql_select_db("articles",$connexion);
// requête pour extraire la deuxième image
$requete="select data_img from pictures where num_img=2";
$resultat=mysql_query($requete,$connexion);
// récupération du résultat
$tableau=mysql_fetch_array($resultat);
mysql_close($connexion);
// création du nouveau fichier image
$fichier=fopen("images/img_tmp.jpg","w");
fwrite($fichier,$tableau['data_img']);
fclose($fichier);
// afficher l'image
echo '<img src="images/img_tmp.jpg">';
?>
86
Ivan MADJAROV
RWD
2
RESPONSIVE
WEB
DESIGN
• La spécification CSS3 Media Queries (requêtes de media) définit les
techniques pour adapter de feuilles de styles (CSS) en fonction du
périphérique Web utilisé.
• Cette pratique est nommé "Responsive Web Design", pour dénoter qu'il
s'agit d'adapter dynamiquement la présentation d'une page Web à l'aide
de CSS.
HTML5
CSS3
Media Queries
RWD
IvMad, 2014-2015
• La méthode permet d'exploiter les avantages de la séparation du
contenu et de la forme (présentation):
• On peut satisfaire des contraintes de dimensions, de résolutions et d'autres
critères variés pour améliorer l'apparence graphique et la lisibilité d'un site
Web par des navigateurs mobiles de smartphones et tablettes, écrans à
faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.
IvMad, 2014-2015
3
RWD
IvMad, 2014-2015
4
RWD : grille d'affichage
• Les éléments à prendre en compte pour rendre adaptif un site Web:
• Il faut éviter les mesures fixes pour décrire la largeur et la hauteur de la
1. une grille d'affichage flexible qui ne dépend pas d'une résolution fixe;
2. des médias flexibles (images, vidéos) cadrés dans la grille d'affichage;
3. un ensemble de règles CSS basé sur Media Queries pour conditionner
l'affichage en fonction du type média.
zone d'action pour un élément HTML.
• Si on exprime les mesures de présentation, soit en pourcentage, soit en
mesure "em" (où 1em = 100%) la flexibilité est assurée à la fois pour la
taille des polices et pour la taille des éléments HTML.
• Pour se mettre dans le contexte, on peut estimer que la taille par
défaut d'un texte pour qu'il soit lisible est de 16px et on peut admettre
que cela correspondent à un 1em. Si un titre fait 24px, on peut
remplacer cette valeur par 1.5em.
• On obtient la conversion correcte en appliquant la formule:
cible / contexte = résultat
• où, "cible" correspond à la taille souhaitée, le "contexte" à la taille "normale" et le
"résultat" est exprimé en "em".
RWD
IvMad, 2014-2015
5
RWD
IvMad, 2014-2015
6
RWD : média flexible
RWD : Média Queries
• Pour un site Web responsive les images, les vidéos et les autres objets
• Pour rendre un site responsive il est important d'adapter l'affichage en
médias ne doivent pas déborder le cadre défini.
• Il est désagréable de voir une image déborder l'écran ou être écrasée,
pratiquement invisible.
• Pour résoudre ce problème on peut faire appel à la propriété CSS
"max‐width" qui permet de spécifier la largeur maximum de l'élément,
par rapport à son parent.
fonction de la résolution et du type de média (screen, print, tv…), mais
aussi en fonction des caractéristiques du support en prenant en
compte le ratio et l'orientation.
• On peut appliquer différents styles (CSS) suivant le profil d'utilisation.
Il s'agit de définir les paramètres suivants:
• l'orientation de la présentation
• mode portrait,
img, object, canvas, video, audio {
max‐width: 100%;
height: auto;
}
• mode paysage;
• les limites de la largeur effective avec les propriétés:
• min‐width,
• Avec la propriété "height: auto" on peut conserver les proportions
• max‐width.
des médias.
RWD
IvMad, 2014-2015
7
RWD
IvMad, 2014-2015
• On peut considérer qu'en mode portrait une largeur d'écran de moins
de 480px appartient à un smartphone, entre 480px et 1024px à une
tablette et une largeur d'écran supérieure à 1024px à un ordinateur de
• Les Media Queries permettent de cibler :
bureau ou à un ordinateur portable.
• On peut développer et enregistrer le code CSS pour chacun des profils
et les appliquer en fonction:
@media only screen and (max‐width: 480px){
/* propriétés pour une largeur de la
fenêtre navigateur jusqu'à 480px */
}
</style>
• Le type de média
• La taille de l'écran
• La taille de la fenêtre
• La résolution
• Le nombre de couleurs
• L'orientation
• Cette propriété CSS3 fonctionne avec les navigateurs:
• Chrome
• Safari
• Firefox
• MSIE 9
• Opéra
8
RWD
IvMad, 2014-2015
9
RWD
IvMad, 2014-2015
• Les directives peuvent être intégrées au sein même d'une feuille de
• L'attribut media peut prendre les valeurs suivantes :
style grâce à une règle @media suivie directement du type.
• L'exemple suivant évite l'impression des menus, entête et des
informations non propres au contenu de la page Web:
• screen - Écrans
• handheld - Périphériques mobiles ou de petite taille
• print - Impression
• aural (CSS 2.0) / speech (CSS 2.1) - Synthèses vocales
@media print {
#menu, #footer, aside {
display:none;
}
body {
font‐size:120%;
color:black;
}
}
RWD
10
• braille - Plages braille
• embossed - Imprimantes braille
• projection - Projecteurs (ou présentations avec slides)
• tty - Terminal/police à pas fixe
• tv - Téléviseur
IvMad, 2014-2015
11
RWD
IvMad, 2014-2015
• Une media query est une expression dont la valeur est toujours vraie ou
• Un exemple qui suit la largeur de l'écran.
fausse. Il suffit d'associer les différentes déclarations possibles avec un
opérateur logique pour définir l'ensemble des conditions à réunir pour
l'application des styles compris dans le bloc adjacent.
• Les opérateurs logiques peuvent être: and, only et not.
• Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries
à la suite, séparées par des virgules.
• L'exemple suivant cible les écrans de largeur inférieure à 640 pixels et
supérieure à 200 pixels grâce à la règle max-width associée à la valeur 640px.
@media screen and (min-width: 200px) and (max-width: 640px)
{
.bloc {
display:block;
clear:both;
}
}
12
• On déclare la couleur de fond (background-color) du body blanche,
• On déclare une couleur noire pour tout écran (screen) ayant une taille
maximum (max-width) de 800px:
body {
background-color:white;
color:black;
}
@media only screen and (max-width:800px) {
body {
background-color:black;
color:white
}
}
[Test]
• Avec max-device-width, on peut cibler l'écran (Smartphones & Tablettes)
RWD
IvMad, 2014-2015
13
RWD
IvMad, 2014-2015
14
<!doctype html><html lang="fr"><head>
<title>HTML5 Media Queries</title>
<meta charset="utf‐8"><style type="text/css">
p { color: red; background‐color: black; font‐size: 1.0em; } }
p { color: yellow; background‐color: blue; font‐size: 1.5em; } }
p { color: green; background‐color: yellow; font‐size: 2.0em; } }
p { color: blue; background‐color: red; font‐size: 2.5em; } }
</style>
</head>
<body>
<p>Le responsive design avec la résolution: 
</p>
[Test]
</body>
</html>
RWD
IvMad, 2014-2015
15
Responsive Web Design: Exemple
RWD
IvMad, 2014-2015
Responsive Web Design: Exemple
[Test]
16
RWD
IvMad, 2014-2015
17
HTML5 : Formulaire adaptatif
RWD
IvMad, 2014-2015
IvMad, 2014-2015
HTML5 : Formulaire adaptatif
19
HTML5 : Le cours en ligne
https://ent.univ‐amu.fr (AmeTice)
Exemple:
http://139.124.26.245/pi/tp/neticiens.html
http://139.134.38.134/rwdform
Le cours:
http://ivmad.free.fr/pi
Convertisseur pixel‐>em:
http://pxtoem.com/
RWD
18
Asynchronous Javascript And XML
IvMad, 2013-2015
2
Introduction à AJAX
• Le modèle Web traditionnel est basé sur une suite de requêtes et de
réponses successives. La navigation est séquentielle de page en page.
• AJAX (Asynchronous JavaScript and XML) permet en créant une requête
HTTP la mise à jour ou la modification de la page web en fonction de
la requête HTTP récupérée. La modification peut être partielle.
• AJAX est une technique qui se base sur les technologies suivantes:
AJAX
• HTML5 et CSS3 pour la présentation;
• DOM (Document Object Model) pour la représentation en objets de la
JavaScript-HTML5-CSS3
page web;
• JavaScript et l'objet XMLHTTPRequest pour manipuler des requêtes et des
réponses.
• PHP ou un autre langage de scripts peut être utilisé coté serveur.
Ivan MADJAROV 2013-2015
IvMad, 2013-2015
3
Fonctionnement de la technique AJAX
• Pour recueillir des informations sur le serveur l'objet XHR dispose de
deux méthodes:
• open:
•
établit une connexion.
send: envoie une requête au serveur.
• Les données fournies par le serveur seront récupérées dans les champs
de l'objet XMLHttpRequest:
pour un fichier XML ou
responseText pour un fichier de texte bru.
• responseXml
•
• Il faut attendre la disponibilité des données, et l'état est donné par
l'attribut readyState de XMLHttpRequest.
• 0:
•
•
non initialisé
1: connexion établie
2: requête reçue.
3: réponse en cours 4: terminé.
IvMad, 2013-2015
Fonctionnement de la technique AJAX
4
IvMad, 2013-2015
5
IvMad, 2013-2015
L'objet XMLHttpRequest
Envoyer une requête au serveur
• Les navigateur récents (IE7+, Firefox, Chrome, Safari, and Opera)
• Deux méthodes sont disponibles: GET et POST
supportent tous l'objet XMLHttpRequest (IE5 et IE6 utilisent
ActiveXObject ).
• L'objet XMLHttpRequest est utilisé pour échanger des informations
entre le client et le serveur en arrière plan, c.à.d. de manière
asynchrone.
• Le code suivant vérifie l'état des navigateurs:
IvMad, 2013-2015
• GET est plus simple et plus rapide que la méthode POST et est le plus
souvent utilisée.
• POST est privilégiée quand il y a des informations de taille à envoyer au
serveur. La méthode est plus robuste et sécurisée que GET.
• Pour envoyer une requête simple au serveur on utilise les méthodes
open() et send() de l'objet XMLHttpRequest:
xmlhttp.open("GET","ajaxfile.txt",true);
var xmlhttp;
if (window.XMLHttpRequest) {
// code pour IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest(); // Création de l'objet
} else { // code pour IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
6
xmlhttp.send();
• Pour des requêtes compliquées (données d'un formulaire) on utilise la
méthode POST:
xmlhttp.open("POST","ajaxfile.php",true);
xmlhttp.setRequestHeader("Content‐type","application/x‐www‐form‐
urlencoded");
xmlhttp.send("prenom=Yves&nom=Gilles");
7
IvMad, 2013-2015
8
Récupérer la réponse du serveur
Un événement onreadystatechange
• Pour récupérer les informations du serveur il y a la possibilité d'utiliser
• En attendant le réponse du serveur suite à une requêtes Ajax plusieurs
la l'attribut responseText ou responseXML de l'objet XMLHttpRequest.
• responseText: pour des informations en format text
• responseXML: pour des information en format XML
• Ainsi, pour un code HTML:
<div name="unDiv">un texte à mettre à jour avec Ajax</div>
• On peut insérer l'information provenant du serveur par l'instruction:
document.getElementById("unDiv").innerHTML = xmlhttp.responseText;
• Le texte retourné par le serveur remplacera le texte existant dans la
balise <div>.
situations sont envisageable.
• La propriété readyState détient le statut de l'objet XMLHttpRequest.
• Chaque fois que le statut de readyState change l'événement
onreadystatechange est sollicité.
• L'évènement onreadystatechange traite les opérations à entreprendre
quand la réponse du serveur est prête:
• Si readyState a la valeur 4 et status a la valeur 200, alors la réponse est prête à
être récupérée:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("unDiv").innerHTML=xmlhttp.responseText;
}
}
IvMad, 2013-2015
9
Ajax : nombre de jours entre deux dates
IvMad, 2013-2015
10
Ajax: traitement côté serveur
dif‐date.php
Calcule le nombre de jours entre deux dates
traiter.php
Retourne accusé de réception au navigateur client
PHP - Ajax -MySQL
IvMad, 2013-2015
11
PHP - Ajax -MySQL
IvMad, 2013-2015
12

Programmation Internet et développement Web - Ivan Madjarov

Transcription

Documents pareils

phpMyAdmin (1/2) – Connection avec login / mot de passe

FORMATION : « INITIATION PHP / MySQL

Plan de cours PDF - Alias Formation inc.

specifications techniques generalités

Intitulé du poste : stage en informatique Mission

VENDS RAQUETTES HEAD

PHP (ET MYSQL)

Télécharger mon CV

Initiation à Javascript

TP no 1 – Introduction aux bases de données pour le Web