TP 1 - HTTP, HTML, PHP

Déroulement des TP

Ce premier TP est destiné à vous initier aux technologies de base qu'on utilisera ensuite. Il ne sera pas évalué, mais les deux suivants le seront. Le TP comporte plusieurs exercices de difficultés variables (indiquées). Il n'est pas conçu pour être "terminé" mais pour que vous puissiez vous familiariser ou progresser, et combler vos lacunes.

Vous pouvez demander de l'aide, mais essayez de chercher par vous-même avant. Les liens disponibles dans la section documentation et les paragraphes "Hint" sont prévus pour ça. Les Hints proposent des pistes d'aide, mais vous pouvez trouver une autre méthode qui ne les utilise pas. Les paragraphes de "contexte" donnent quelques indications de culture informatique générale liée à l'exercice du TP, que vous pouvez creuser pour mieux comprendre les tenants et aboutissants des questions posées.

Réalisation en pratique

Le TP se déroule sous Linux à la fois :

• en environnement web : exécution de PHP dans le serveur Apache, utilisation d'un navigateur sur le PC local
• en ligne de commande (CLI, command line interface) en partie pour PHP.

Vous devrez utiliser un éditeur de texte adapté à la programmation (vim, Gedit, Atom, etc.)

Installation sur les machines personnelles

Vous utiliserez vos machines personnelles pour effectuer le TP. L'enseignant ne fournira aucune aide "système" sur les machines personnelles. Vous devez installer les dépendances nécessaires à l'avance et vous assurer que toutes les composantes fonctionnent.

Les paquets (Debian ou Ubuntu) à installer :

• apache2, libapache2-mod-php, php-cli,
• les extensions php php-curl, php-mbstring,
• la commande auxiliaire unicode.

Selon l'ancienneté de votre système, les paquets PHP seront en version 5.6, 7.0 ou 7.1, mais cela n'a aucun impact sur la suite.

Vérifiez que http://localhost sert bien la page d'accueil par défaut d'Apache.

Configuration Apache et PHP

Activez les messages d'erreur dans votre configuration PHP/Apache :

Dans le fichier /etc/php/7.0/apache2/php.ini (ou équivalent) configurez les lignes suivantes selon leur valeur de Développement (et non de production) :

error_reporting = E_ALL
display_errors = On
display_startup_errors = On
log_errors = On

Puis redémarrez Apache et examinez le fichier de log : /var/log/apache2/error.log, qui contient

• les logs d'erreur Apache (toujours) ;
• les logs d'erreur PHP, selon la configuration.

Si vous n'avez pas le droit de modifier la configuration Apache/PHP (cas très peu probable), vous mettrez en début de chaque fichier php les deux directives :

ini_set('display_errors', 1);
ini_set('error_reporting', E_ALL);

Pour lier Apache à votre répertoire local, la façon la plus simple est de créer un lien symbolique dans le répertoire racine d'Apache, généralement /var/www/html (sous Debian/Ubuntu). Cela se fait par exemple avec les commandes (à adapter) :

mkdir ~/MMDO
cd /var/www/html
sudo ln -s ~/MMDO

Notez que le tilda ~ sous un shell unix représente le chemin de votre répertoire personnel. Puis visualisez dans un navigateur l'url http://localhost/MMDO.

Documentation

• W3Schools, documentation orientée débutants, simple, mais parfois approximative
• Référence W3C HTML5
• Documentation PHP officielle

Exercices PHP

Prise en main - diagnostic PHP (niv. 1)

Une archive de modèles modeles.tgz est disponible dans l'espace de cours Moodle ou éventuellement dans le répertoire polytech silecs. Récupérer l'archive et décompressez-la (tar -zxf en ligne de commande).

• exécutez info.php dans l'environnement web (Apache et navigateur). Elle repose sur la fonction de diagnostic phpinfo().
• comparez le résultat avec php -i en ligne de commande (CLI), notamment pour Server API..
• testez le fichier debogage.php dans les deux environnements, et modifiez-le pour mener vos propres tests.

Calcul d'intérêts composés (niv. 1-2)

Le but est de proposer une calculatrice d'intérêts composés très simple.

1. Réalisez une page calcul.html comportant un formulaire à 3 champs : somme, taux (en pourcentage), duree (en années), traité dans une deuxième page "resultat.php" affichant la décomposition du calcul et le résultat
   • vous partirez du modèle formulaire.html,
   • dans resultat.php, vous utiliserez la variable superglobale (typée tableau associatif) $_GET ou $_POST,
   • pour rappel, la formule de calcul est "cumul = somme * ( 1 + taux/100 ) ^ duree"
   • pour le calcul, utilisez la fonction pow() ou l'opérateur exposant **
2. Testez la différence de traitement entre les méthodes GET et POST. Laquelle est la plus adaptée ici, d'après les bonnes pratiques W3C ?
3. Faites la même chose en ligne de commande, en utilisant les 3 paramètres d'entrée en CLI
   • pour l'appel en CLI, la syntaxe est $ php monscript.php (arg1) (arg2)...
   • dans le code, on utilise le tableau positionnel $argv (similaire au C)
4. Utilisez une fonction et une inclusion PHP (require_once()) pour structurer le calcul :
   • une fonction cumul($somme, $taux, $duree) dans une bibliothèque libcalcul.php,
   • deux pages calcul.html et resultat.php pour l'interface web,
   • un script clicalcul.php en ligne de commande.

Un peu de style en CSS (niv. 1)

On va maintenant se servir de la norme CSS pour améliorer un peu l'affichage HTML. On va se baser sur les fichiers elements.html et elements.css.

1. Copiez elements.html pour le modifier. Commencez par visualiser l'arbre html (Ctrl + Shift + I > Inspecteur). Quel est l'élément de niveau le plus profond ? à quel niveau cela correspond-t-il ? (en comptant <html> à 0).
2. Avec les styles CSS, ajoutez un cadre autour de la table.
3. Passez en vert non souligné les liens par défaut, puis en vert gras les liens dans des énumérations <ul>

Hints

• Les sélecteurs de css : table, tr, td puis li et a seront utiles (seuls ou combinés).
• Les directives border, color et background-color pourront servir.

Quelques mots de contexte

La hiérarchie de l'arbre html est importante. Elle sert aussi bien pour les sélecteurs CSS que pour les requêtes DOM (Document Object Model), en PHP ou en JavaScript. L'Inspecteur intégré à chaque navigateur (ou presque) vous permet de l'explorer facilement.

Table de multiplication (niv. 1-2)

1. Affichez une table de multiplication classique de 10 lignes et 10 colonnes.
   • la boucle for () est votre amie.
   • en CSS les directives border et padding seront utiles
2. Ajoutez la possibilité de passer en paramètres d'url (GET) le nombre de lignes et de colonnes.
   • pour rendre le paramètre optionnel, la fonction de test isset() pourra être utile
3. Ajoutez un paramètre pour permettre de surligner (fond jaune) une ligne particulière.
   • utilisez une classe CSS (par exemple surlignee) pour gérer proprement la mise en évidence.
   • une CSS interne est toute indiquée, avec dans l'entête html le code <style type="text/css">...</style>, avec la directive background-color.

Analyse des Caractères Unicode (niv. 2)

Le but est d'afficher une analyse "Unicode" des caractères tapés dans un formulaire ou en ligne de commande. Par exemple "A" a pour codepoint "U+0041" (41 en hexadécimal ou 65 en décimal). En utilisant les deux bibliothèques données (libunicodega.php et portable-utf8.php),

1. Écrivez un script CLI qui affiche le code de l'initiale de chaque mot passé en argument
   • il faut utiliser les fonctions mb_substr() et mb_internal_encoding() de l'extension php-mbstring si on a des caractères non ASCII (ce qui est l'intérêt de l'exercice). MB signifie "multi-bytes".
   • parmi les modèles vous disposez d'un fichier multiscripts.html contenant un échantillonnage de textes en plusieurs écritures, le tout encodé en UTF-8/Unicode.
2. Faites la même chose en interface web, à partir d'un champ de formulaire (GET).
3. Les chartes unicode sont traditionnellement représentées comme des tableaux de 16 colonnes et N lignes, alignés sur les codes hexadécimaux. Affichez un tableau html de la ligne complète contenant un caractère donné.
4. Ajoutez au bas de chaque case le code 'U+xxxx' en petit, et un lien vers la page de référence du caractère.
   • en CSS, la directive font-size
   • pour exemple, une page de référence Unicode (par exemple 😊)
5. (niv. 3) En utilisant la commande shell unicode (à installer) et l'appel système PHP exec(), ajoutez au rollover le nom normalisé du caractère pointé."
   • pour la CSS, je vous conseille d'utiliser les classes "char" pour le caractère et "extra" pour le sous-titre
   • un effet rollover simple s'obtient en utilisant l'attribut title, par exemple dans <span title="message d'aide">support</span>.

Exemple d'affichage à obtenir

Quelques mots de contexte

Le codage des caractères en informatique a évolué ces dernières années. Initialement basé sur le code ASCII (pour l'anglais seulement), puis étendu pour correspondre à plusieurs langues européennes, il ne permettait pas de stocker des documents multilingues ou contenant plus de 256 caractères (chinois, coréen, japonais...). On utilise maintenant le standard Unicode qui permet notamment de cataloguer quasiment tous les caractères de toutes les langues sur Terre (y compris certaines langues antiques). Le point important est qu'en Unicode, chaque caractère a un code (de 4 à 6 chiffres hexadécimaux), et un nom normalisé en anglais. Par exemple, le caractère "A" est codé U+0041 et nommé LATIN CAPITAL LETTER A ; le caractère "Ω" est codé U+03A9 et nommé GREEK CAPITAL LETTER OMEGA. Même des symboles et des emojis sont inclus ; par exemple 💻 est normalisé en U+1F4BB PERSONAL COMPUTER.

Unicode permet lui-même plusieurs encodages mais le seul réellement utilisé sur le web est l'UTF-8, au point que certains logiciels confondent parfois Unicode et UTF-8.

Analyse (parsing) d'un document HTML (niv. 3)

On cherche à récupérer automatiquement les grands titres (h2) d'un document html distant, par exemple un article de Wikipédia, avec comme entrée une adresse URL.

1. Au préalable, examiner l'arbre du document dans le navigateur, toujours avec l'Inspecteur (Ctrl+Shift+I)
2. En CLI, réaliser un script permettant d'afficher les titres h2 en utilisant les fonctions DOM de PHP
   • les méthodes DOMDocument::getElementsByTagName() et DOMNode::textContent() feront l'affaire.
     Les exemples de la page de doc PHP sont relativement clairs.
3. Complétez en affichant les titres h2 et h3, bien sûr en respectant l'ordre de la hiérarchie. Est-ce plus difficile, et pourquoi ?
4. Essayez de refaire la question 2 sans DOM, en utilisant des expressions régulières (preg_match). Qu'en pensez-vous ?

Quelques mots de contexte

L'exercice constitue un exemple simple de web scraping. C'est une méthode qui consiste à parcourir automatiquement le contenu d'un site classique (ie prévu pour la lecture humaine) et d'en extraire une synthèse, pour indexation, analyse locale ou autre. Il faut que le contenu soit raisonnablement structuré, ce qui est possible grâce aux éléments h1, h2, h3... très communs. Pour des sites très "sales" (peu respectueux des standards), le scraping peut être très pénible, et obliger à écrire beaucoup de code de nettoyage.

Plusieurs techniques différentes d'analyse sont autorisés en scraping. Pour du html raisonnablement propre, c'est souvent l'analyse DOM qui est le plus efficace. Dans d'autres cas, on recourt aussi aux expressions régulières (regexp), mais c'est bien plus délicat à manier pour des traitements complexes.

Pour la communication "machine" on prévoit plutôt d'utiliser des API web et des formats très structurés (XML, json ou autres), ce qui fera l'objet du prochain TP.