Voir un ancien billet sur le sujet, présentant un site jouet utilisant une base de données mysql simple.
Le billet a été mis à jour pour refléter les modifications apportées pendant le cours sur la page d’accueil (découpage en fonctions).
Le partiel
Vendredi 9 mars 2012
Amphi 2A (Attention : ce n’est pas l’amphi habituel du cours)
2 sessions de 20 min chacune, convocation selon la première lettre du nom de famille :
- de A à I : 14h30
- de J à Z : 15h
Seuls documents autorisés : une feuille A4 recto-verso, contenu libre.
Ni téléphone, ni ordinateur.
[Mise à jour du 8 mars : changement d'amphi]
Publié dans Organisation
3 commentaires
Mauvaise Saint Valentin pour Christine Boutin
une des merveilles du défunt "Martine cover generator"
Cas d’école : un exemple d’injection de code css par transmission de formulaire. Continuer la lecture
Cours 4 : php, le langage
La doc officielle
php6, par exinside php
Les types
Voir la section correspondante
dans le manuel.
Les expressions ont un type, les variables pas toujours (« Le type d’une variable n’est pas toujours défini par le programmeur ; il peut être défini par PHP au moment de l’exécution, suivant le contexte dans lequel la variable est utilisée », nous dit le manuel).
Nombreuses conversions implicites (c’est à dire qu’on n’a pas toujours conscience que l’interpréteur change le type des expressions quand on les manipule).
Exemple avec le type booleen (True, False)
<?php
function test_bool($b)
{
echo "$b -> ";
if($b)
echo 'vrai';
else
echo 'faux';
echo "\n";
}
test_bool(True);
test_bool(False);
test_bool(0);
test_bool(00);
test_bool(1);
test_bool('');
test_bool('0');
test_bool('00');
test_bool('1');
test_bool('toto');
test_bool('True');
test_bool('False');
?>
Voici le résultat de l’exécution de ce script depuis une fenêtre de terminal :
[4-php] php types.php
1 -> vrai
-> faux
0 -> faux
0 -> faux
1 -> vrai
-> faux
0 -> faux
00 -> vrai
1 -> vrai
toto -> vrai
True -> vrai
False -> vrai
Rappel sur le fonctionnement de php
php ne connaît pas le langage html
- Il ne fait que reproduire des chaînes de caractères
- Il n’interprète que ce qui est signalé par des balises php
- Ce qui est à l’intérieur de balises php doit être du php
- Ce qui est en dehors de balises php sera recopié tel quel
- À l’intérieur des balises, pour écrire quelque chose, il faut le dire (avec
echo)
Exemple :
Bonjour, ceci est un fichier php, qui s'appelle "texte.php".
<?php
function affiche($i)
{
echo "On m'a dit d'afficher ";
echo "$i\n";
}
echo "<p>ceci est du html</p>\n";
affiche(3);
affiche('truc');
$bob = 4+6;
affiche($bob);
?>
Maintenant je vais calculer 2+3
<?php
affiche(2+3);
echo "Encore une pour la route : ";
echo 2+3;
echo "\n";
?>
On exécute ce script php
NB : sur les machines des salles de TP, si la commande php n’existe pas, il
faut peut-être essayer php-cli. Je vais me renseigner.
[4-php] php texte.php
Bonjour, ceci est un fichier php, qui s'appelle "texte.php".
<p>ceci est du html</p>
On m'a dit d'afficher 3
On m'a dit d'afficher truc
On m'a dit d'afficher 10
Maintenant je vais calculer 2+3
On m'a dit d'afficher 5
Encore une pour la route : 5
[4-php]
Remarquez bien :
- Les balises <
p>sont recopiées telles quelles - Le 2+3 n’est pas interprété, ni les guillemets, en dehors des balises
- Les sauts de ligne dans le code php, dans les balises php, ne sont
pas pris en compte - Une commande
echone produit pas de saut de ligne par défaut - Pour aller à la ligne, on utilise le caractère spécial
\n(regardez bien à quels moments le texte va à la ligne)
Mais alors pourquoi utilise-t-on php avec html ?
Le processus est le suivant :
- Le navigateur du client demande au serveur un fichier qui a l’extension
.php - Le serveur transmet ce fichier à l’interpréteur php qui se trouve
chez lui (chez le serveur) - Une fois interprété, ce fichier produit du code html (à condition que le
développeur lui ait fait produire du html) - Le serveur envoie ce code html au navigateur du client
- Le navigateur affiche ce code html comme s’il avait demandé au
serveur un fichier html
Ceci permet de générer du code html qui change en fonction des
paramètres choisis par l’utilisateur.
include
Ce qui est inclus avec include sera traité comme le fichier php
principal, et donc selon les mêmes règles que décrit plus haut :
- Ce qui est en dehors de balises php sera recopié tel quel
- Ce qui est à l’intérieur de balises php doit être du php
- etc.
Ayez toujours en tête la structure du fichier html qui devra être
produit à la fin.
Exemple : Le fichier test-html.php ci-dessous.
<!DOCTYPE html>
<html>
<?php
include('head.php');
include('body.php');
?>
</html>
Le fichier head.php :
<head>
<meta charset="utf8" />
<title>Test</title>
</head>
Le fichier body.php :
<body>
<h1>Voilà</h1>
<p>Ca marche</p>
<p>
<?php
echo 5*8;
?>
</p>
</body>
Le résultat sur le terminal :
[4-php] php test-html.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>Test</title>
</head>
<body>
<h1>Voilà</h1>
<p>Ca marche</p>
<p>
40 </p>
</body>
</html>
Je mets le résultat dans un fichier :
[4-php] php test-html.php > test-html.html
Je charge ce fichier dans mon navigateur :
test-html.html dans le navigateur
Comment procéder
- Avant tout, écrire le html que vous voulez afficher à la fin
- Ensuite, découper ce html pour attribuer chaque morceau à une
partie de code php - Gardez bien en tête l’ordre dans lequel doivent apparaître les
différents morceaux dans le code html final - En cas de doute, utilisez l’interpréteur du terminal pour vérifier le
code html produit
Les tableaux
Voir la section correspondante
dans le manuel.
Contrairement à java, les tableaux en php sont des dictionnaires (ou
tableaux associatifs, ou maps en anglais), c’est à dire des listes
de couples
[ clef => valeur ]
La clef est soit une chaîne de caractère, soit un entier.
Vous avez déjà pu voir ça avec le tableau $_GET ou le tableau
$_REQUEST pour le traitement des formulaires (voir cours précédent).
Les tableaux se parcourent fréquemment au moyen de la boucle foreach :
foreach($tab as $val)
echo "valeur suivante : $val";
foreach($tab as $key => $val)
echo "à la clef $key est associée la valeur $val";
Exemple :
<?php
function affiche_tab($tab)
{
foreach($tab as $param => $valeur)
echo "$param donne $valeur.\n";
echo "\n";
}
function affiche_valeurs($tab)
{
echo "Les valeurs de mon tableau :\n";
foreach($tab as $valeur)
echo "$valeur.\n";
echo "\n";
}
$cp = array(
'nom' => 'Prieur',
'prénom' => 'Christophe',
'email' => 'prieur@liafa.fr');
echo "\n";
affiche_tab($cp);
affiche_valeurs($cp);
?>
Résultat :
[4-php] php array.php
nom donne Prieur.
prénom donne Christophe.
email donne prieur@liafa.fr.
Les valeurs de mon tableau :
Prieur.
Christophe.
prieur@liafa.fr.
On peut aussi ajouter des valeurs à un tableau sans en spécifier la
clef :
$tab[] = 'toto';
Dans ce cas, la clef est fixée automatiquement à un entier, qui est le
plus petit entier qui n’a pas déjà été attribué comme clef (et 0 si
aucune valeur n’a été attribuée précédemment).
Exemple :
<?php
$tab['test'] = 6;
$tab[] = 42;
$tab[2] = 56;
echo "\n";
affiche_valeurs($tab);
for($i=0; isSet($tab[$i]); $i++)
echo "$i donne " . $tab[$i] . "\n";
echo "\n";
?>
Résultat :
Les valeurs de mon tableau :
6.
42.
56.
0 => 42
Remarquez bien :
- il n’y a pas de valeur associée à la clef 1, donc la boucle s’est
arrêtée après 0 et n’est pas allé jusqu’à 2 - la clef
'test'n’est pas un entier mais elle définit une valeur du
tableau, comme 0 et 2 (mais pas 1).
Récapitulatif (et plus encore)
En particulier :
Mais aussi :
- Les structures de contrôle
- Les opérateurs de comparaison,
qui sont encore l’occasion de voir (comme pour les booléens au début
de ce cours) que les types sont beaucoup plus « souples » qu’en java.Bien noter la distinction == vs. ===
(et donc != vs. !==), et les tableaux
récapitulatifs de
comparaison entre types
et bon courage pour les migraines
Retenir surtout qu’il faut toujours faire plein de tests quand
vous manipulez ensemble des expressions qui n’ont pas le même type. - Les chaînes de caractères,
avec la distinction entre guillemets ‘simples’ et "doubles"
(l’interpréteur évaluera les expressions qu’il trouve à l’intérieur
des guillemets doubles, par les guillemets simples. Voir les
guillemets utilisés dans tous les exemples ci-dessus).
Sécurisation des formulaires : éviter les injections
Voir l’exemple du piratage du site de Christine Boutin à l’annonce du retrait
de sa candidature, traité dans un autre billet.
Cours 3 : traiter les formulaires en php
Retour sur les formulaires
un exemple
<form action="traite.php" method="get">
<p>
Surnom : <input type="text" /><br/>
<label for="prenom">Prénom : </label>
<input type="text" id="prenom" name="prenom"/><br/>
<label for="nom">Nom : </label>
<input type="text" id="nom" name="nom"/><br/>
<label for="email">email : </label>
<input type="email" id="email" name="email"/><br/>
<input type="radio" name="sexe" id="hom" value="homme" />
<label for="hom">Homme</label><br/>
<input type="radio" name="sexe" id="femme" value="femme" />
<label for="femme">Femme</label><br/>
<input type="submit" value="Envoyer le formulaire" />
<input type="reset" />
</p>
</form>
le formulaire
Remarque
Navigation et saisie possibles intégralement au clavier dans le formulaire (touches Tab, Shift-Tab, flèches pour les boutons radio, espace pour les checkbox, les listes et les boutons, Entrée pour envoyer le formulaire).
Rôles des différents attributs :
id- permet de désigner un élément (par exemple les
input,
désignés par leslabel) for- attache un
labelà un élément de saisie désigné
par sonid. Ainsi, quand on clique sur le label, l’élément est
activé. name- nom du paramètre qui sera envoyé par le
formulaire au moyen de l’élément correspondant (voir
ci-dessous) value- valeur renvoyée pour le paramètre
correspondant. Pour lesinput type="radio", il faut la
spécifier. Pour lesinput type="text", cet attribut permet de
fixer une valeur par défaut (qui sera affichée dans le champ de saisie).
Ce qui s’affiche dans la barre d’adresse (ici on a découpé l’url pour la rendre plus lisible) :
http://localhost:8888/HOME/IO2/traite.php?
surnom=chris&
prenom=Christophe&
nom=Prieur&
email=prieur%40liafa.fr&
sexe=homme
Traitement en php
Pour le tester en local sur son ordinateur, il faut installer un
serveur web avec interpréteur php.
- Xampp, avec une
version pour les trois grands systèmes (linux, windows, mac).
Un tutorial, écrit par un collègue de l’École Polytechnique. - Wamp, sous
Windows, easyphp est très
utilisé. - Mamp (pour Mac)
Le manuel de référence du langage et sa
traduction en français, qui a parfois
tendance à basculer en anglais, mais ça ne vous fera pas de mal…
Exemple de traitement
<!-- début d'un document html normal, mais dans un fichier
-- portant l'extension .php, en l'occurrence traite.php
-- puisque c'est ce que j'ai indiqué dans l'attribut action
-- de mon formulaire
-->
<table border="1">
<?php
affiche_parametre("nom");
affiche_parametre("prenom");
affiche_parametre("surnom");
affiche_parametre("sexe");
?>
</table>
où la fonction affiche_parametre est définie plus tôt dans le
fichier :
<?php
function affiche_parametre($nom_param)
{
echo '<tr>';
echo '<td>' . $nom_param . '</td>';
echo '<td>' . $_REQUEST[$nom_param] . '</td>';
echo '</tr>';
}
?>;
En cas d’erreur, utiliser la commande shell php dans un terminal
peut simplifier le debugage (ici, php traite.php).
Séparation du code html et php
Toujours bien séparer les parties « surtout php » et les parties « surtout html ».
Par exemple, définir des fonctions
à l’intérieur du head (de même qu’on y met des
directives de style), et dans le body, insérer seulement des
appels de fonctions
Vérification des paramètres transmis (1ère partie)
if(isSet($_REQUEST["nom"]) && $_REQUEST["nom"] != "")
{
$nom = $_REQUEST["nom"];
echo "<p>Vous vous appelez $nom.</p>";
}
else
{
echo "<p>Votre nom s'il vous plait ?</p>";
affiche_formulaire();
}
Dans cet exemple, le même fichier php sera utilisé pour afficher le
formulaire et pour le traiter. Il suffira alors, dans les attribut du
formulaire, d’indiquer action="", ce qui signifie « le fichier courant ».
La vérification des paramètres sera traitée plus en détail la
prochaine fois, pour les questions de sécurité.
À retenir
- les balises
<?php ?>signalent du code php, le reste est renvoyé
tel quel - commande
echopour envoyer du code html functionpour définir une fonction, par exemple dans lehead- tableau
$_REQUESTpour récupérer les valeurs des paramètres transmis isSet()pour tester si un paramètre a été fourni
Un mot sur l’autocomplétion dans les formulaires
Les suggestions qui sont parfois apportées quand on remplit un champ
dans un formulaire, peuvent être fournies par des moyens différents :
- le plus souvent, c’est le navigateur, qui a mémorisé les réponses
qu’on a fournies sur d’autres pages d’autres sites, dans
des input ayant le même identifiant que celui sur lequel
on se trouve. - cela peut être programmé en javascript par le site sur lequel on se
trouve, et en interaction avec le serveur, pour proposer
les réponses les plus courantes (comme une recherche
Google) - cela peut être aussi fourni par le formulaire lui-même, au moyen de
l’utilisation d’un élémentdatalistassocié à l’élément
input(exemple sur w3schools)
Cours 2 : html
D’abord, partiel le 9 mars (voir détails)
Balises sans contenu
Pas de balise fermante
- dans le head :
metalink
- dans le body :
imgbr(voir ci-dessous)input(voir plus bas, sur les formulaires)hr(horizontal rule, ne pas utiliser, le css est fait pour ça)
Attention à br : dans la grande majorité des cas, on peut faire sans
et c’est mieux. Là encore, c’est le travail de css. Exemple typique :
au lieu de mettre un br pour aller à la ligne et changer de paragraphe, mettre la suite dans un
nouveau paragraphe (balise p).
Exemple de cas où on peut utiliser br :
<h1>Adresse</h1>
<p>
Jean Bon<br/>
3, rue du Cochon qui rit<br/>
61400 Mortagne au Perche
</p>
Deux types d’éléments
- bloc
- prend toute la largeur disponible -> voir note ci-dessous
- sauts de ligne avant et apres
- en ligne
- même placement qu’un caractère
(une img sera « posée » sur la ligne du texte et sa hauteur déterminera la hauteur de la ligne) - ne doit pas être directement dans body (mais dans un bloc qui est dans body)
- même placement qu’un caractère
Deux éléments « neutres » (aucun comportement par défaut) :
- div (bloc)
- span (en ligne)
Leur rôle est de délimiter des zones pour leur attribuer un style particulier.
Exemples d’utilisation des div sur Facebook
le div pour le bandeau du haut
le div pour le reste de la page
un span dans une cascade de div
Dans la cascade de div, noter que le div le plus bas (de classe « TickerFeedMessage ») est lui-même contenu dans un span.
Note : la largeur « disponible » pour un bloc c’est la largeur
intérieure de l’élément qui le contient.
Les tableaux
Balises table, th, tr et td.
À utiliser seulement quand c’est vraiment un tableau qu’on veut
afficher (impossible ou très difficile de changer la disposition des
cases entre elles avec css)
Depuis html5, <table border="1"> est recommandé pour un tableau qui
affiche des données. Ce n’est plus un attribut de style (la bordure
pourra ne pas être affichée si on le spécifie autrement dans une
feuille de style), mais un
attribut sémantique.
Comment transmettre des informations au serveur : les formulaires
php : le serveur reçoit des infos, les traite et renvoie du html comme résultat.
Comment lui transmettre des infos ?
Exemples sur Facebook
élément textarea dans un formulaire
input type=submit, pour envoyer le formulaire rempli au serveur
un autre formulaire, pour le champ de recherche
Tous les éléments de saisie (input, textarea, etc.) doivent être mis dans un élément form, définissant un formulaire, dont on envoie les valeurs avec un input type= »submit ».
- Exemple très simple de formulaire sur w3schools
Quand on soumet le formulaire, on constate que le serveur a reçu les
infos (on n’a pas encore vu comment, on le verra au prochain cours) - Un autre type d’élément de formulaire
Bien sûr il faut le mettre dans un élémentform - Les autres types d’éléments, sur w3schools
Attention, form n’est pas un élément de type bloc, par conséquent
les éléments de saisie qu’il contient (input etc.), qui sont de
type en-ligne, doivent être placés dans un bloc (contenu dans ou
contenant form).
Contôle continu
Partiel
Le 9 mars dans l’amphi du cours, 3 sessions de 20 min, sur feuille.
Seul document autorisé : une feuille A4 recto-verso préparée par vous.
Projet
Sujet distribué peu après le partiel
Calcul de la note finale
- session 1
- max(exam final , (15% partiel, 30% projet, 55% examen final))
- session 2
- note de l’exam 2, point barre.
petite graine
petite graine, par Luc Damas
Une lecture qui vous changera de l’informatique…
En préambule au deuxième semestre, je vous recommande vivement de parcourir cet article, écrit par un sociologue qui a suivi quatre étudiants des « cités » pendant leur première année à l’université… et leur échec prévisible.
Il n’est pas facile à lire, mais les personnages vous seront peut-être vaguement familiers, vous pouvez survoler le texte et piocher ici et là quelques unes de leurs péripéties, et les réflexions qu’elles suggèrent au chercheur. En particulier sur ce qui leur a manqué dans leur manière d’organiser leur travail et leur temps.
Stéphane Beaud, 2007,
Un temps élastique : étudiants des « cités » et examens universitaires
Cours 1 : de html à mysql, tour d’horizon de cinq langages
Dans le semestre, on verra 4 voire 5 langages : html, css, php, mysql, et un peu de javascript
Html
un document html à partir de rien : premier.html
<!DOCTYPE html> <html dir="ltr" xml:lang="fr-FR" lang="fr-FR"> <head> <meta charset="utf8" /> <title>IO2</title> <meta name="author" content="Christophe Prieur" /> </head> <body> <p>Hello, world!</p> </body> </html>
<!doctype html> :
avant, ici on indiquait la version. Maintenant, version courante html5, mais on ne l’indique plus (ce qui suffit à dire html5, du coup)
html5 pas encore finalisé en tant que format (défini par le W3C, consortium qui se charge des formats web) mais déjà partiellement pris en compte par les navigateurs (à des degrés variables).
différence entre norme et standard
Accéder au panneau d'outils de dev dans Chrome (ici, sur Mac)
Affichage du document html ci-dessus dans un navigateur puis analyse du source (dans Chrome : Afficher > Options pour les développeurs > Outils de développements. Pour Firefox, peut-être un menu similaire pour les dernières versions, sinon utiliser l’extension firebug).
html : contient head + body
body contient « hello world »
seul le contenu du body est affiché
HTML : HyperText Markup Language
Vient de SGML, qui a donné aussi XML
markup : « balises »
balise ouvrante / fermante, comme des parenthèses
Deux balises ouvrante / fermante et leur contenu définissent un « élément »
structure hiérarchique
Ca, c’est de la syntaxe (la grammaire du langage).
Les noms des balises, c’est du vocabulaire.
Un exemple un peu plus riche : deuxieme.html
<!DOCTYPE html> <html dir="ltr" xml:lang="fr-FR" lang="fr-FR"> <head> <meta charset="utf8" /> <title>IO2</title> <meta name="author" content="Christophe Prieur" /> </head> <body> <header> <h1>Bienvenue !!</h1> <p>Ceci est la <em>première page</em> du cours d'<abbr title="Internet & Outils">IO2</abbr> !!</p> </header> <section> <header> <h1>D'abord, il faut dire bonjour</h1> </header> <p>Hello, world!</p> </section> </body> </html>
Attention : ne pas confondre head, header et h1, h2 etc.
header est un ajout de html5, on y reviendra (un autre jour).
Pour le vocabulaire du langage (les balises existantes), se reporter à un dictionnaire.
- l’aide-mémoire sur ce blog
- la référence officielle sur le site du W3C, le consortium qui définit le html (et plus généralement les normes du web)
- le site w3schools, documentation non officielle, qui fournit une interface très pratique pour tester les balises (mais n’est pas officielle et peut parfois se tromper)
Analyse rendu / source dans Chrome
Le html généré par un outil
La plupart du temps, le html est généré par des logiciels.
Exemple sur didel : édition d’un texte avec interface wysiwyg
(wysiwyg : what you see is what you get)
affichage du html produit
affichage du html en mode edit sur didel
version html du texte édité
Affichage du résultat sur didel, intégré dans une page, analyse du code avec Chrome.
Le code html précédent, dans un div, est encastré dans la page
On retrouve le html qu’on a vu, inséré dans un élément div encastré dans le reste de la page.
D’où l’intérêt de l’organisation hiérarchique du document.
Parenthèse : pourquoi apprendre le html ? Pas seulement savoir l’écrire, mais savoir le générer, savoir le parser (décomposer ses éléments à l’aide d’un programme)
-> savoir écrire des programmes qui le manipulent.
Comparaison du résultat sur didel et en local sur un fichier vierge.
comparaison des deux rendus
Sur didel, puces carrées, couleur de fond, police sans serif.
Affichage du style de l’élément ul dans Chrome -> square
le style de l'élément ul
Séparation fond (html) / forme (css)
Travail du rédacteur / du graphiste
Le tour des cinq langages sur un site web
Exemple sur Facebook
La page, c’est du html.
css
Les couleurs, les polices
mais aussi le positionnement des éléments dans la page.
Exemple de l’affichage avec une mauvaise connexion (genre smartphone), où la page s’affiche sans que le css ait été chargé (le fichier html est chargé, il indique le nom d’un fichier css, qui ne peut pas être chargé à cause de la mauvaise connexion).
javascript
On survole le nom d’un utilisateur, une boîte s’affiche avec des infos sur lui : javascript, exécuté par mon navigateur, a demandé des infos à Facebook, et une fois qu’il les a reçues, insère un élément dans le document html, dont le css indique qu’il doit être par-dessus le reste.
php
Quand je clique sur une photo, l’url change.
www.facebook.com/photo.php
une photo avec son url sur Facebook
-> le navigateur a demandé à Facebook d’exécuter le programme photo.php, avec les paramètres indiqués dans la suite de l’url.
Le résultat est un document html, que mon navigateur affiche.
accès à la base de données
Entre-temps, le php, chez FB, a interrogé la base de données.
L’interrogation de la base se fait au moyen d’un autre langage encore.
Sur des sites courant (pas de la taille de FB), on utilise la plupart du temps un langage de la famille SQL, MySQL par exemple.