jaascriptv - fnac-static.com · 29,90 € isbn : 978-2-409-01473-4 ce livre s’adresse aux...
Post on 03-Apr-2020
1 Views
Preview:
TRANSCRIPT
ISBN
: 97
8-2-
409-
0147
3-4
29,9
0 €
Ce livre s’adresse aux développeurs qui souhaitent se lancer dans le développement de sites et d’applications web dynamiques avec PHP et JavaScript. Pour tirer pleinement profit de la lecture de ce livre, la maî-trise du langage HTML, des connaissances sur CSS ainsi que quelques connaissances sur les bases de données sont un plus.
À l’instar de la conception d’un site internet, ce livre s’articule en deux parties. Dans la première, vous posez les fondations. À l’aide de PHP, vous composez ainsi les bases des pages (avec HTML et CSS), leur contenu, le moteur et tout ce qui gravite autour de l’application comme les données, les échanges, les interactions avec l’utilisateur, les liens, les images...
Puis une fois que la structure de l’application est bien en place, vous verrez dans la seconde partie comment la rendre plus dynamique à l’aide de JavaScript pour arriver à une application esthétique et fonc-tionnelle. Vous découvrirez ainsi par exemple comment réaliser des effets de style, animer vos pages, gérer également l’interaction avec l’utilisateur, mais cette fois côté navigateur…
Tout au long du livre, l’auteur propose de nombreux exemples pour illustrer la plupart des fonctionnalités décrites. Il met également à disposition du lecteur à la fin du livre une série d’exercices (avec propositions de solution) pour mettre en pratique les notions étudiées.
Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.
PHP et JavaScriptDynamisez vos sites et applications web (avec exercices et corrigés)
Pour plus d’informations :
PHP
et JavaScript Dynamisez vos sites et applications web
(avec exercices et corrigés)
Mickaël ROULEAU
PHP
et J
avaS
crip
t D
ynam
isez
vos
site
s et
app
licat
ions
web
Mickaël ROULEAU
Développeur depuis plus de 20 ans, Mickaël ROULEAU a eu l’occasion de développer avec de nombreux langages et pour des environnements très différents. Depuis plus de 10 ans, il s’est spécialisé dans le développement web. Après un passage en tant que développeur PHP indépendant, il a ensuite intégré une équipe de développeurs dans une start-up toujours à la pointe des dernières technologies. Cette riche expérience acquise depuis toutes ces années le conduit aujourd’hui à proposer un livre très opéra-tionnel sur le développement d’applications web dynamiques avec PHP et JavaScript.
Avant-propos • Préparer son environne-ment de travail • Partie 1 - PHP : Introduc-tion au langage PHP • Les bases du langage PHP • Les conditions • Les boucles • Les tableaux • Les tableaux multidimension-nels • Les fonctions • Les variables super-globales • Transmettre des données entre les pages • Transmettre des données via les formulaires • Les fichiers • Les objets • Les bases de données SQL • L’architecture MVC • PHP 7 • Partie 2 - JavaScript : Appor-ter du dynamisme avec JavaScript • Les bases du langage JavaScript • Les expres-sions en JavaScript • Les fonctions JavaScript • Les objets JavaScript • Les tableaux JavaScript • Les expressions régulières • Utilisation de JavaScript sur les formulaires • Utilisation d’Ajax • Manipula-tion des propriétés CSS • Introduction à jQuery • Partie 3 : Exercices et corrigés : Mise en pratique
Les chapitres du livre
Téléchargementwww.editions-eni.fr.fr
sur www.editions-eni.fr : b Le code source
des exemples du livre
1Table des matières
Avant-propos
1. Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2. À qui s'adresse ce livre et prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Chapitre 1
Préparer son environnement de travail
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2. Sous Windows : WAMP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3. Sous Mac OS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4. Sous Linux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5. Les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6. Utiliser un éditeur de texte ou un IDE . . . . . . . . . . . . . . . . . . . . . . . . 25
7. Une première page PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Partie 1 : PHP - Introduction au langage PHP
Chapitre 2
Les bases du langage PHP
1. Les balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2. Afficher du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4. Sauvegarder et tester sa page PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.1 Sauvegarder sa page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.2 Tester sa page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Les exemples à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr
Saisissez la référence ENI de l'ouvrage RIPHPJAV dans la zone de rechercheet validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.
2Dynamisez vos sites et applications web
PHP et JavaScript
5. Les inclusions de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345.1 Principe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345.2 En pratique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6. Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396.1 Description. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396.2 Affecter une valeur à une variable . . . . . . . . . . . . . . . . . . . . . . . 406.3 Les types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
6.3.1 Le type string . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416.3.2 Le type integer (nombre entier). . . . . . . . . . . . . . . . . . . . 426.3.3 Le type float (nombre décimal) . . . . . . . . . . . . . . . . . . . . 436.3.4 Le type booléen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436.3.5 Le type NULL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
6.4 Manipuler les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446.4.1 Afficher le contenu d'une variable . . . . . . . . . . . . . . . . . . 446.4.2 Concaténer les variables. . . . . . . . . . . . . . . . . . . . . . . . . . 446.4.3 Les variables dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . 466.4.4 Les calculs simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
7. Les constantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapitre 3
Les conditions
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
2. Quelques opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 51
3. Les conditions simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.1 If... else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.2 Elseif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.3 L'imbrication de conditions if . . . . . . . . . . . . . . . . . . . . . . . . . . . 553.4 Les booléens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.5 Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4. Les conditions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5. L'opérateur ternaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3Table des matières
Chapitre 4
Les boucles
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
2. La boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
3. La boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4. La boucle do…while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Chapitre 5
Les tableaux
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2. Les tableaux numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3. Les tableaux associatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
4. Les constantes de type tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
5. Parcourir un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725.1 La boucle for. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735.2 La boucle foreach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745.3 La fonction print_r . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.4 La fonction var_dump . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6. Les fonctions sur les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796.1 Rechercher dans un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
6.1.1 La fonction in_array() . . . . . . . . . . . . . . . . . . . . . . . . . . . 796.1.2 La fonction array_key_exist() . . . . . . . . . . . . . . . . . . . . . 806.1.3 La fonction array_search() . . . . . . . . . . . . . . . . . . . . . . . . 81
6.2 Autres fonctions utiles sur les tableaux . . . . . . . . . . . . . . . . . . . 826.2.1 Ajouter une valeur dans un tableau
à la fin d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 826.2.2 Modifier une valeur dans un tableau. . . . . . . . . . . . . . . . 836.2.3 Supprimer une valeur dans un tableau . . . . . . . . . . . . . . 836.2.4 Supprimer entièrement le contenu d'un tableau . . . . . . 846.2.5 Nombre d'éléments dans un tableau . . . . . . . . . . . . . . . . 846.2.6 Trier un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
4Dynamisez vos sites et applications web
PHP et JavaScript
6.3 Une multitude de fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
7. Les tableaux multidimensionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Chapitre 6
Les fonctions
1. Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
2. Créer une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
3. Les fonctions existantes de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Chapitre 7
Les variables superglobales
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
2. Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 992.1 $GLOBALS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002.2 $_SERVER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012.3 $_ENV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012.4 $_SESSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.5 $_COOKIE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1042.6 $_FILES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072.7 $_GET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072.8 $_POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Chapitre 8
Transmettre des données entre les pages
1. Envoyer des paramètres via l'URL . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
2. Testez l'existence et le type de vos paramètres . . . . . . . . . . . . . . . . 112
3. $_POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
5Table des matières
Chapitre 9
Transmettre des données via les formulaires
1. Description d'un formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
2. La méthode POST. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
3. $_POST avec les autres types d'éléments . . . . . . . . . . . . . . . . . . . . . 1193.1 Type mot de passe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1193.2 Type Liste déroulante à choix unique . . . . . . . . . . . . . . . . . . . 1203.3 Type Liste déroulante à choix multiples . . . . . . . . . . . . . . . . . 1213.4 Type cases à cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1233.5 Type boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1243.6 Type champs cachés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
4. Prévention des failles de sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Chapitre 10
Les fichiers
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
2. Ouverture d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
3. Fermeture d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
4. Lecture du contenu d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.1 Lecture avec fgetc() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.2 Lecture avec fgets() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1314.3 Lecture avec fread() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1324.4 Lecture avec file_get_contents() . . . . . . . . . . . . . . . . . . . . . . . . 1334.5 Lecture avec readfile() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1334.6 Lecture avec file(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
5. Écriture dans un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.1 Écriture avec fputs() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.2 Écriture avec fwrite(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1355.3 Écriture avec file_put_contents() . . . . . . . . . . . . . . . . . . . . . . . 135
6Dynamisez vos sites et applications web
PHP et JavaScript
6. Autres fonctions utiles sur les fichiers . . . . . . . . . . . . . . . . . . . . . . . 1356.1 Fseek() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1356.2 Ftell() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.3 Rewind() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.4 File_exists() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.5 Unlink() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.6 Rename() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Chapitre 11
Les objets
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
2. Les classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1382.1 Déclaration d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1382.2 Instancier une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1392.3 L'encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1392.4 La visibilité des attributs et des méthodes . . . . . . . . . . . . . . . . 1392.5 Utilisation d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1412.6 Passage d'une instance ou d'un objet en paramètre. . . . . . . . . 1472.7 Le constructeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1482.8 Le destructeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1532.9 Les constantes de classe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1532.10 Les méthodes statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1562.11 Les attributs statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1572.12 Notion d'héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1612.13 Redéfinition d'une méthode ou d'un attribut
dans une classe fille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1652.14 Les attributs protected . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1662.15 Classes ou méthodes abstraites . . . . . . . . . . . . . . . . . . . . . . . . 1682.16 Classes ou méthodes finales . . . . . . . . . . . . . . . . . . . . . . . . . . . 1702.17 Les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1702.18 Les exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.19 Les traits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1752.20 Déclarer et cloner un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
7Table des matières
Chapitre 12
Les bases de données SQL
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
2. Structure d'une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
3. PhpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1853.1 Création d'une table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1893.2 Index et clé primaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1923.3 Insérer des enregistrements. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1933.4 Afficher le contenu d'une table. . . . . . . . . . . . . . . . . . . . . . . . . 1933.5 Exporter les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1943.6 Importer des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1973.7 Les opérations sur les tables . . . . . . . . . . . . . . . . . . . . . . . . . . . 1973.8 Rechercher des données dans une table . . . . . . . . . . . . . . . . . . 198
4. PHP et le langage SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2004.1 Connexion à la base de données à l'aide de PHP . . . . . . . . . . . 2004.2 Lire les données de la base de données . . . . . . . . . . . . . . . . . . . 2034.3 Les requêtes préparées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2084.4 Écrire des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2104.5 Modifier des données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2124.6 Supprimer des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Chapitre 13
L'architecture MVC
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
2. Les avantages de cette architecture . . . . . . . . . . . . . . . . . . . . . . . . . . 216
3. Fonctionnement MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
4. Le routeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
5. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
8Dynamisez vos sites et applications web
PHP et JavaScript
Chapitre 14
PHP 7
1. Les différences avec PHP 5.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2191.1 L'opérateur <=>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2191.2 L'opérateur ?? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2201.3 Mysql_query . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2201.4 Définition du type des arguments dans une fonction . . . . . . 2211.5 Retour de fonction typé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2211.6 Et bien d'autres... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Partie 2 : JavaScript - Apporter du dynamisme avec JavaScript
Chapitre 15
Les bases du langage JavaScript
1. Introduction - Pourquoi JavaScript ?. . . . . . . . . . . . . . . . . . . . . . . . . 223
2. JavaScript, un langage balisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
3. Un premier exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
4. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
5. Les inclusions de pages JS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
6. Débogage du code JS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
7. Point-virgule en fin d'instruction. . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
8. Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2298.1 Les variables de chaînes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2298.2 Les variables numériques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2308.3 Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2308.4 Les tableaux multidimensionnels . . . . . . . . . . . . . . . . . . . . . . . 231
9. Les opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2319.1 Les opérateurs arithmétiques . . . . . . . . . . . . . . . . . . . . . . . . . . 2319.2 Les opérateurs d'affectation . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
9Table des matières
9.3 Les opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 2339.4 Les opérateurs logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2339.5 Les concaténations de chaînes . . . . . . . . . . . . . . . . . . . . . . . . . 2349.6 Les caractères d'échappement . . . . . . . . . . . . . . . . . . . . . . . . . . 234
10. Les types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
11. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
12. Les variables globales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
13. Les variables locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
14. Le DOM (Document Object Model). . . . . . . . . . . . . . . . . . . . . . . . . 23814.1 Utilisation du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
15. Document.write() et autres fonctionnalités . . . . . . . . . . . . . . . . . . 242
Chapitre 16
Les expressions en JavaScript
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
2. Les expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
3. Littéraux et variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
4. Les opérateurs relationnels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2474.1 L'opérateur d'égalité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2474.2 Les opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 2484.3 Les opérateurs logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
5. L'instruction with . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
6. Capter les erreurs JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2506.1 onerror . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2506.2 try ... catch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
7. Les conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2537.1 L'instruction if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2537.2 L'instruction else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2537.3 L'instruction switch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2547.4 L'opérateur ternaire (… ? … : …) . . . . . . . . . . . . . . . . . . . . . . . 256
10Dynamisez vos sites et applications web
PHP et JavaScript
8. Les boucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2568.1 Les boucles while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2568.2 Les boucles do ... while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2578.3 Les boucles for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2588.4 Sortir d'une boucle avant la fin. . . . . . . . . . . . . . . . . . . . . . . . . 2598.5 L'instruction continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Chapitre 17
Les fonctions JavaScript
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
2. Création d'une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
3. Les paramètres d'une fonction : arguments . . . . . . . . . . . . . . . . . . . 263
4. Valeur de retour d'une fonction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Chapitre 18
Les objets JavaScript
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
2. Déclarer et utiliser un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
3. Convention et bonne pratique de nommage . . . . . . . . . . . . . . . . . . 269
4. Le mot-clé prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Chapitre 19
Les tableaux JavaScript
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
2. Les tableaux numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2732.1 Déclaration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2732.2 Ajouter des éléments dans un tableau . . . . . . . . . . . . . . . . . . . 2742.3 Taille d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2742.4 Parcourir un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
11Table des matières
3. Les tableaux associatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2763.1 Déclaration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2763.2 Ajouter un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2773.3 Parcourir le tableau associatif . . . . . . . . . . . . . . . . . . . . . . . . . . 277
4. Manipulation des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2784.1 La concaténation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2784.2 Parcourir un tableau à l'aide de forEach . . . . . . . . . . . . . . . . . . 2794.3 Utilisation de la méthode join . . . . . . . . . . . . . . . . . . . . . . . . . 2804.4 Ajouter ou supprimer des éléments d'un tableau . . . . . . . . . . 2804.5 La méthode reverse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2814.6 Trier un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Chapitre 20
Les expressions régulières
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
2. La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
3. Utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2863.1 Utilisation de regex et de la méthode test(). . . . . . . . . . . . . . . 286
3.1.1 Tenir compte de la casse . . . . . . . . . . . . . . . . . . . . . . . . 2873.1.2 Plusieurs valeurs possibles : Ou . . . . . . . . . . . . . . . . . . . 2873.1.3 Vérification en début de chaîne . . . . . . . . . . . . . . . . . . . 2883.1.4 Vérification en fin de chaîne . . . . . . . . . . . . . . . . . . . . . 2893.1.5 Ensemble de caractères ou classe de caractères. . . . . . . 2903.1.6 Les intervalles de caractères . . . . . . . . . . . . . . . . . . . . . . 2913.1.7 L'exclusion de caractères . . . . . . . . . . . . . . . . . . . . . . . . 2913.1.8 Rechercher un caractère quelconque . . . . . . . . . . . . . . . 2923.1.9 Les ensembles prédéfinis . . . . . . . . . . . . . . . . . . . . . . . . 2923.1.10 Les quantificateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2933.1.11 L'échappement et les caractères spéciaux . . . . . . . . . . . 294
3.2 Exemple pratique : le numéro de téléphone. . . . . . . . . . . . . . . 2953.3 Exemple pratique : l'adresse e-mail. . . . . . . . . . . . . . . . . . . . . . 2963.4 Utilisation de l'objet RegExp. . . . . . . . . . . . . . . . . . . . . . . . . . . 298
12Dynamisez vos sites et applications web
PHP et JavaScript
Chapitre 21
Utilisation de JavaScript sur les formulaires
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
2. Élaboration du formulaire en PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . 300
3. Introduction du code JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3033.1 Vérifier que les champs ne sont pas vides . . . . . . . . . . . . . . . . 3033.2 Ajouter du contrôle de contenu . . . . . . . . . . . . . . . . . . . . . . . . 3053.3 Testez vos fonctions JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 307
Chapitre 22
Utilisation d'Ajax
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
2. Utilisation de l'objet XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . 3122.1 Instanciation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122.2 Description des méthodes et des propriétés . . . . . . . . . . . . . . 3132.3 Envoyer une requête HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . 3142.4 Traitement côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3162.5 Récupération des données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3172.6 Une seule requête à la fois. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Chapitre 23
Manipulation des propriétés CSS
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
2. La fonction getElementById() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
3. La fonction getElementByClassName() . . . . . . . . . . . . . . . . . . . . . . 324
4. La fonction setAttribute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
5. La fonction hasAttribute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
6. La fonction removeAttribute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
7. Exemple de mise en forme d'un élément du DOM . . . . . . . . . . . . . 328
8. Accéder aux propriétés de la fenêtre . . . . . . . . . . . . . . . . . . . . . . . . . 329
13Table des matières
9. JavaScript en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
10. Les évènements que JavaScript peut capter . . . . . . . . . . . . . . . . . . . 333
11. Ajouter un élément au DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
12. Supprimer un élément du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
13. Alternative à la création et à la suppression d'un élément. . . . . . . . 344
14. Utilisation d'un timer via setTimeout . . . . . . . . . . . . . . . . . . . . . . . 345
15. La fonction setInterval() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
16. Simplifiez le code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34916.1 Première simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34916.2 Deuxième simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34916.3 Troisième simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Chapitre 24
Introduction à jQuery
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3531.1 Les différences entre jQuery et JavaScript . . . . . . . . . . . . . . . . 3541.2 Comment utiliser jQuery ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3541.3 La syntaxe jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3561.4 La documentation jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
2. Sélectionner des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3572.1 Relation parent enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3582.2 Les enfants immédiats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3602.3 Les éléments frères immédiats ou jumeaux . . . . . . . . . . . . . . . 3602.4 La sélection par les filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
2.4.1 :first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.4.2 :last . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.4.3 :eq(indice) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.4.4 :gt(indice) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3632.4.5 :lt(indice). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3642.4.6 :not(sélecteur) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
2.5 Les filtres additionnels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
14Dynamisez vos sites et applications web
PHP et JavaScript
3. Utilisation des méthodes jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . 3653.1 Manipuler le contenu du document. . . . . . . . . . . . . . . . . . . . . 365
3.1.1 .html() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3663.1.2 .replaceWith() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.1.3 .text(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.1.4 .append() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.1.5 .prepend() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3683.1.6 .after() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.1.7 .before() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.1.8 .remove() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.1.9 .attr() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3703.1.10 .removeAttr() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.1.11 .addClass(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.1.12 .removeClass() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.1.13 .toggleClass() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3723.1.14 .css(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
3.2 Appliquer des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3733.2.1 .show() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3733.2.2 .hide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3733.2.3 .toggle() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3743.2.4 .fadeIn(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3753.2.5 .fadeOut() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3763.2.6 .fadeTo() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3763.2.7 .slideUp(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3773.2.8 .slideDown() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3773.2.9 .slideToggle(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
3.3 Ajuster la taille des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . 3783.3.1 .height() et .width() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3783.3.2 .innerHeight() et .innerWidth(). . . . . . . . . . . . . . . . . . . 3793.3.3 .outerHeight() et .outerWidth() . . . . . . . . . . . . . . . . . . 3803.3.4 .outerHeight(true) et .outerWidth(true) . . . . . . . . . . . 3803.3.5 .offset() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3803.3.6 .position() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
15Table des matières
3.4 Les méthodes pour parcourir les éléments . . . . . . . . . . . . . . . . 3813.4.1 .find(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3813.4.2 .parent(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3833.4.3 .children() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
3.5 Les évènements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3853.5.1 La méthode .on(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3853.5.2 L'objet event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Partie 3 : Exercices et corrigés
Chapitre 25
Mise en pratique
1. Exercice 1 - Manipulation des tableaux. . . . . . . . . . . . . . . . . . . . . . . 3891.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3891.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
1.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3901.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3901.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3921.2.4 Question 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3921.2.5 Question 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3921.2.6 Question 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
2. Exercice 2 - Manipulation des classes . . . . . . . . . . . . . . . . . . . . . . . . 3972.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3972.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
2.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3982.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3982.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3992.2.4 Question 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4002.2.5 Question 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
16Dynamisez vos sites et applications web
PHP et JavaScript
3. Exercice 3 - Manipulation des classes (complet) . . . . . . . . . . . . . . . 4013.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4013.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
3.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4033.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4043.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4053.2.4 Question 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4063.2.5 Question 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4073.2.6 Question 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
4. Exercice 4 - Manipulation de JavaScript . . . . . . . . . . . . . . . . . . . . . . 4134.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4134.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
4.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4154.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4184.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
5. Exercice 5 - PHP, MySql et Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4235.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4235.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
5.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4245.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
115
Chapitre 9
Transmettre des données viales formulaires
Transmettre des données via les formulaires1. Description d'un formulaire
Vous avez certainement déjà saisi des informations pour vous connecter à unsite web, pour dialoguer sur un blog, pour demander des compléments d'infor-mation sur un site marchand, etc.
Pour échanger ces informations, vous avez utilisé des formulaires, ils sont par-tout sur les sites web, c'est le meilleur moyen pour transmettre des données.
Vous verrez dans les paragraphes suivants que pour récupérer les informationssaisies par le visiteur, on utilisera essentiellement la méthode POST (on abor-dera succinctement la méthode GET, vue au chapitre précédent).
Remarque
Le but de ce chapitre n'est pas de concevoir des formulaires, mais d'en récu-pérer les données transmises au serveur.
© E
dit
ions
EN
I -
All r
ights
rese
rved
116Dynamisez vos sites et applications web
PHP et JavaScript
2. La méthode POST
Afin de comprendre la transmission des données via les formulaires, on vasuivre un exemple à partir d'un petit formulaire de contact, qui permettra auvisiteur de saisir quelques données le concernant et de poser une question.
Voici l'affichage que l'on souhaite obtenir :
Le formulaire est écrit en HTML, en voici le code source :
<h2>Formulaire de contact</h2>
<form action="ch11_traitement_du_formulaire.php" method="post"> Nom<br /><input type "text" name="nom"><br /><br /> Prenom<br /><input type "text" name="prenom"><br /><br /> Question<br /><textarea rows="5" cols="40"name="question"></textarea><br /> <br /> <input type="submit" name="valider" value="Valider"></form>
117Transmettre des données via les formulairesChapitre 9
On va s'attarder un peu sur la balise <form> du formulaire et ses deux attri-buts importants : action et method :
– Action : cet attribut contient tout simplement le nom de la page PHP quisera appelée lorsque le visiteur aura cliqué sur le bouton Valider, et c'estdans cette page que l'on pourra récupérer les données saisies par le visiteur.
– Method : c'est le mode ou la méthode de récupération des données, vous enconnaissez déjà une, GET (cf. chapitre Transmettre des données entre lespages) qui permet de récupérer les valeurs via l'URL, et la méthode POST,qui permet de récupérer les données transmises à la page décrite dans l'attri-but action, via la variable superglobale $_POST.
Dès que le visiteur va cliquer sur le bouton Valider, les données seront trans-mises à la page PHP "ch11_traitement_du_formulaire.php" :
Bien entendu, vous pouvez nommer comme bon vous semble la page définiedans l'attribut action, par exemple "reception_données.php", ou "post.php",etc. Vous pouvez même utiliser le même nom que le fichier d'origine :"ch11ex01.php", cela veut dire que la gestion de la récupération des donnéessera effectuée dans le même fichier que celui qui décrit le formulaire en HTML.
Voici maintenant (ci-dessous) un exemple de fichier PHP qui permettra degérer les données transmises dans le tableau associatif $_POST :
<?php if (isset($_POST['nom'])) { $nom=$_POST['nom']; }
if (isset($_POST['prenom'])) { $prenom=$_POST['prenom']; }
if (isset($_POST['question'])) { $question=$_POST['question']; }
© E
dit
ions
EN
I -
All r
ights
rese
rved
118Dynamisez vos sites et applications web
PHP et JavaScript
echo "Le visiteur se nomme ".$nom." ".$prenom."<br>"; echo "Sa question est: ".$question."<br>";?>
<p>Cliquez <a href="ch11_ex01.php">ici</a> pour revenir au formu-laire.</p>
dTestez la page du formulaire, puis voyez le résultat, en supposant que vousayez saisi les trois champs :
Ce n'est pas plus compliqué que ça! N'oubliez jamais de tester l'existence desdifférentes données attendues (on le répète, on n’est jamais à l'abri d'incohé-rences).
Si vous modifiez le premier fichier en appliquant la méthode GET, vous devrezégalement modifier le second fichier en changeant tous les $_POST par$_GET.
Comme on l'a évoqué au chapitre précédent, la méthode GET permet de passerles données dans l'URL, voici ce que l'on obtiendrait :
La méthode POST permettra de gérer tous les types d'éléments du formulaire,c'est ce que l'on va voir ci-dessous.
119Transmettre des données via les formulairesChapitre 9
3. $_POST avec les autres types d'éléments
Dans l'exemple ci-dessus, on a vu les zones de texte classiques et les grandeszones de texte (textarea). Il en existe bien d'autres que vous allez découvrir ci-après.
3.1 Type mot de passe
La zone de texte mot de passe est une zone de type texte qui permet de ca-cher la saisie du visiteur (tous les caractères sont remplacés par des astérisques(*)), voyez plutôt :
Pour obtenir cet affichage, il faudra écrire en HTML :
Mot de passe<br /><input type="password" name="motdp">
Et pour récupérer la valeur, il faudra écrire en PHP :
<?php echo $_POST['motdp'];?>
Ceci affichera le mot de passe que vous avez saisi.
© E
dit
ions
EN
I -
All r
ights
rese
rved
120Dynamisez vos sites et applications web
PHP et JavaScript
3.2 Type Liste déroulante à choix unique
Vous avez déjà tous eu à choisir une valeur dans une liste déroulante commecelle ci-dessous :
Le code HTML de cet exemple :
<h2>Formulaire de contact</h2> <form action="ch11_ex03_post.php" method="post"> Quel sport pratiquez-vous?<br /> <select name="choix_sport"> <option value="Football">Football</option> <option value="Tennis">Tennis</option> <option value="Rugby">Rugby</option> <option value="Autre">Autre</option> </select></form>
Et pour récupérer la valeur sélectionnée, il faudra utiliser le tableau $_POSTcomme ceci :
<?php echo $_POST['choix_sport'];?>
Ce code affiche Tennis si c'est votre choix. C'est la valeur qui est inscrite dansla balise value qui est transmise à la variable superglobale $_POST.
Si vous omettez de définir les attributs value, c'est la valeur entre les balises<option> qui sera transmise.
top related