Du tableau en HTML

Cet article est la suite de l’article précédent, c’est à dire la suite des exercices d’application du cours de Programmation et Projet Encadré.

Les consignes de la deuxième partie étaient de créer un fichier texte qui contiendrait le nom du blog et le mot étudié, puis un fichier HTML qui contiendrait un tableau de deux cellules sur deux lignes avec ces mêmes informations. Ensuite, il fallait programmer un scripts shell permettant de créer de manière automatique ce même tableau. Pris au jeu, j’ai décidé de ne faire qu’un seul script qui s’occuperait des deux premières tâches.

html
Script entier

Le script est séparé en deux blocs, la partie création du fichier texte et la partie création du fichier HTML.

shebang
Shebang

La première ligne qui commence par #!, le « shebang », est un en-tête du fichier qui indique au système d’exploitation que le fichier est un script et quel interpréteur utiliser pour l’exécuter.

Création du fichier .txt
Création du fichier .txt

Le premier bloc va donc créer un fichier contenu.txt dans le dossier DUMP-TEST. Ainsi, il demande à l’utilisateur via la console d’entrer le nom de son blog et le mot qu’il étudie. La commande read va assigner aux variables $NOM et $MOT les réponses de l’utilisateur pour pouvoir les écrire dans contenu.txt immédiatement avec echo, et pour remplir le tableau plus tard.

Création du fichier .html
Création du fichier .html

Le second bloc quant à lui va créer le fichier tableau.html dans le dossier TABLEAUX. Pour écrire chaque ligne du fichier HTML, il faut encore une fois utiliser echo. On remarque que là aussi, on se sert des variables associées avec read.

Parlons maintenant un peu plus précisément de la structure du fichier du tableau. HTML est un langage de balisage, c’est-à-dire qu’il est composé de balises au format <balise>contenu</balise>. Le premier mot entre chevrons indique que le contenu entre les balises va avoir des propriétés particulières à l’affichage, comme par exemple qu’il s’agit d’un titre, d’un texte en gras, d’un lien hypertexte…  Il doit absolument être suivi après son contenu de sa balise fermante, écrite avec un slash après le premier chevron. Une balise peut comprendre dans son contenu d’autres balises.

Le fichier HTML assez simple qui est présenté ici peut-être décomposé en trois parties.

doctype
Doctype

Comme le script shell, le fichier HTML commence par un en-tête qui indique au navigateur qu’il est bien écrit en HTML, <!DOCTYPE html>. Il est suivi de l’élément <html>, qui comprend comme son nom l’indique tout le code HTML.

head

L’élément qui suit est <head>, qui contient les méta-données du fichier. Il peut par exemple indiquer l’encodage du fichier, définir les styles pour les différents types de paragraphes du fichier, ou même les importer d’un fichier CSS. Ici, on s’en sert pour pouvoir afficher le titre de la page web dans la barre d’onglets du navigateur avec la balise <title> qui contient la variable $NOM, le nom du blog que l’on a demandé à l’utilisateur plus tôt avec read.

body et table
body et table

La dernière partie de ce fichier est <body>, le contenu affiché de la page web. Elle contient le corps du document, son contenu. Dans notre cas, il ne contient que le tableau.

Le tableau commence par la balise <table>. Cependant, utiliser la balise nue de cette façon donne une organisation en lignes et en colonnes, mais sans bordures. Si on en veut une, on y rajoute donc l’argument border= »1″ pour obtenir une bordure de largeur 1. Chaque ligne du tableau est délimitée par les balises <tr>, et chaque cellule par <td>.

Maintenant, vérifions que le script fonctionne bien. D’abord, on entre les réponses demandées par la machine.

read enregistre les valeurs entrées dans les variables $NOM et $MOT
read enregistre les valeurs entrées dans les variables $NOM et $MOT

Le script tourne, regardons si les fichiers ont bien été écrits comme on le souhaitait.

Cet output a été obtenu grâce à la commande less
Cet output a été obtenu grâce à la commande less
tableau.html
tableau.html

Le script a donc bien fonctionné, on a obtenu les deux fichiers qu’on voulait créer. Maintenant, il faut encore voir si tableau.html s’affiche correctement dans un navigateur.

firefox
tableau.html sous Firefox

Le tableau n’est pas très beau, mais il contient bien les bonnes informations, le bon nombre de lignes et de cellules et porte le bon titre.

Ainsi s’achèvent les premiers exercices d’application du cours de PPE. N’hésitez pas à nous indiquer si vous repérez des erreurs dans les exercices, elles seront corrigées aussi vite que possible.

Publicités

De la ligne de commande et l’environnement Unix

Aujourd’hui, il s’agira de mettre en pratique ce qui nous a été présenté en cours sur Unix et l’utilisation du terminal ces deux dernières semaines. On verra comment se déplacer dans l’arborescence de fichiers, comment créer un dossier et observer son contenu, comment créer et lire des fichiers.

On commence par créer un environnement de travail en lançant un script fourni au préalable. On obtient un dossier plein d’autres dossiers vides, pour nous aider à organiser notre travail au fur et à mesure de l’avancement du projet.

Un environnement de travail plein de promesses

Ensuite, nous allons créer des dossiers tests pour pouvoir appliquer quelques commandes Unix. D’abord, on demande à travailler dans /zak/Travaux/PPE avec la commande cd, puis on crée trois dossiers tests, TEST1, TEST2 et TEST3 avec mkdir.

cd et mkdir à l'oeuvre
cd et mkdir à l’oeuvre

Après ça, essayons de créer des fichiers nommés vide1.txt dans TEST1 et vide2.txt dans TEST2 avec touch.

On ajoute un fichier dans TEST2 tout en continuant à travailler dans TEST1 grâce à la référence ../
On ajoute un fichier dans TEST2 tout en continuant à travailler dans TEST1 grâce à la référence ../

On ajoute ensuite une ligne de texte dans vide1.txt avec echo et l’opérateur de redirection >, puis on en rajoute une autre sans écraser le texte précédent avec un autre opérateur, >>.

L'opérateur >> permet d'ajouter une ligne sans écraser le texte déjà existant
L’opérateur >> permet d’ajouter une ligne sans écraser le texte déjà existant

Puisque vide1.txt contient quelque chose, on le renomme jenesuisplusvide.txt grâce à mv.

mv
mv permet soit de déplacer un fichier, soit de le renommer

Pour finir, on déplace ce fichier vers TEST2, et dans TEST1 on crée une copie du fichier nommée moinonplus.txt en utilisant cp.

cp permet soit de déplacer un fichier soit de le renommer
Il est possible de copier des fichiers vers d’autres dossiers

Avant de continuer avec d’autres créations de fichier, on vérifie que tout s’est bien passé. On utilise donc ls pour observer la liste des fichiers présents dans un dossier, et cat pour pouvoir lire le contenu d’un fichier.

 Tout va bien, on respire.
Tout va bien, on respire

Et si on voulait garder le résultat d’une commande dans un fichier ? Encore une fois, on va utiliser l’opérateur > pour rediriger l’output d’une commande vers un fichier. Ici, on redirige l’output de ls vers le fichier liste.txt, puis on va rajouter une autre fois cet output à la fin de notre fichier.

Rediriger vers un fichier inexistant va créer ce fichier
Rediriger vers un fichier inexistant va créer ce fichier

En cours, on a vu un autre opérateur de redirection, 2>. Celui-ci permet d’écrire les messages d’erreur dans un fichier plutôt que de les afficher dans le terminal. Par exemple, on va utiliser la commande lsd, qui n’existe pas, et on va rediriger le message d’erreur vers erreur.txt.

On voit ici que le message d'erreur n'apparait pas avec 2>
Le message d’erreur n’apparaît pas avec 2>

On en a fini de manipuler ces fichiers. Cependant, on remarque qu’on n’a pas touché à vide2.txt dans TEST2, ni à TEST3. On va donc les supprimer avec respectivement rm et rmdir.

rm pour supprimer un fichier, rmdir pour un dossier
rm pour supprimer un fichier, rmdir pour un dossier

On veut maintenant savoir combien de fichiers il y a dans TEST2, et combien de dossiers il y a dans notre environnement de travail. On va donc créer un fichier contenant l’output d’un ls pour chaque dossier, puis on on utilisera wc -l pour compter le nombre de lignes de chaque fichier, donc le nombre d’éléments qu’ils contiennent.

ls prend en compte le fichier qu'on crée avec la redirection
ls prend en compte le fichier qu’on crée avec la redirection, donc wc aussi

Dernières subtilités d’Unix à être présentées dans cet article, on va parler de quelques symboles utiles. On va commencer avec le séparateur ; qui permet d’exécuter plusieurs commandes à la suite, indépendamment les unes des autres. Dans notre exemple, on utilise who qui indique les utilisateurs connectés en ce moment, et pwd qui affiche le répertoire de travail actuel.

On obtient les outputs de chaque commande dans leur ordre respectif
On obtient les outputs de chaque commande dans leur ordre respectif

Dans la même idée, le regroupement permet de rediriger plusieurs commandes vers le même fichier. Il suffit de mettre les commandes souhaitées entre parenthèses et séparées d’un point-virgule.

L'output va être identique à celui du screenshot précédent
L’output va être identique à celui du screenshot précédent

On finit d’effleurer les possibilités d’Unix avec l’imbrication, qui permet d’utiliser le résultat d’une commande comme argument d’une autre commande. On utilise la syntaxe qui suit :

Le résultat est une version plus loquace de pwd
Le résultat est une version plus loquace de pwd

C’est tout pour Unix aujourd’hui. Mais il est certain qu’au fil du temps, nous découvrirons encore de nombreuses commandes utiles pour la réalisation de notre projet, et elles seront documentées au moment venu, au fur et à mesure.

Cet article commençant à être suffisamment long et peu digeste, la partie HTML des exercices d’application suit dans un second article.