LIFASR2 Introduction réseaux et web : TP1

Le jeu 2048, première séance

Ce document est soumis au Copyright © présent sur cette page.

Tous les TP se font en environnement Unix.

Vous devez redémarrer votre machine de la salle de TP sous Unix si elle est sous Windows.

Objectifs du TP

Au cours de cette UE, vous développerez deux mini-projets : le jeu 2048 et un réseau social. Les deux premières séances sont consacrées au jeu 2048. Les objectifs de cette première séance sont :

A faire avant la prochaine séance

Entre deux séances de TP, vous avez au moins 15 jours pour :

Avant la deuxième séance de TP, il est impératif que vous ayez fini la page web du jeu 2048 telle que définie dans ce sujet et que vous ayez commencé la réflexion sur la programmation du jeu côté serveur :

Aide / Mémo

Pour travailler depuis chez vous sur le serveur web que vous utilisez en TP, suivez les instructions sur cette page.

Prise en main des outils et premiers pas

Pour faire ce TP, vous aurez besoin des outils suivants :

La plupart des questions posées dans les sujets de TP sont suivies d'une Aide / Mémo.
Avant de faire une question, il faut lire l'Aide / Mémo qui suit la question.

Affichage d'une page web dans un navigateur web, URL et serveur web

Vous allez travailler sur un serveur web distant, commun à tous les étudiants, dont l'adresse (URL) est https://lifasr2.univ-lyon1.fr/.

Question

Cliquez sur l'URL du serveur ci-dessus et affichez le code source de la page web grâce à un clic droit dans la page.

Vous venez d'afficher et de visualiser le code source d'une première page web renvoyée par le serveur web. La page demandée en cliquant sur le lien ci-dessus correspond au document racine du serveur web noté /. lifasr2.univ-lyon1.fr est le nom du serveur web. Malheureusement, vous n'avez pas accès à cette page. Sur le serveur web, vous n'aurez accès qu'aux fichiers qui vous appartiennent. Vos fichiers sont stockés dans un dossier qui vous appartient sur la machine lifasr2.univ-lyon1.fr. Le nom de ce dossier est prenom.nom, exactement les mêmes que ceux utilisés dans votre adresse mail.

Question

Pour visualiser la page web racine hébergée dans votre dossier, cliquez sur l'URL https://lifasr2.univ-lyon1.fr/prenom.nom. Bien entendu, il faut remplacer prenom.nom

Connexion au serveur web à l'aide d'un terminal et copie de fichiers à distance

Vous allez maintenant essayer de trouver le nom du fichier qui vient de s'afficher dans votre navigateur web. Pour accéder à vos fichiers hébergés sur le serveur web, vous allez devoir faire une connexion à distance vers la machine lifasr2.univ-lyon1.fr en utilisant votre identifiant et mot de passe habituels.

Question

Ouvrez un terminal. Utilisez la commande ssh pour vous connecter à la machine serveur :
ssh lifasr2.univ-lyon1.fr
Si un message d'alerte s'affiche, répondre yes. Le mot de passe demandé est votre mot de passe habituel. Vous êtes désormais dans votre dossier sur le serveur web. Cette fenêtre sera le terminal distant.

Question

Dans le terminal distant, utilisez la commande pwd pour afficher le chemin complet de votre dossier.
Visualisez le contenu de ce dossier à l'aide de la commande ls puis ls -l. Quelle est la différence entre ces deux commandes ? Quel est le nom du fichier qui stocke le contenu de la page web que vous avez affichée à la question précédente ? Pour le confirmer, affichez le contenu de ce fichier grâce à la commande cat.
Pour le confirmer d'une autre manière, affichez dans votre navigateur le code source de la page https://lifasr2.univ-lyon1.fr/prenom.nom/index.html toujours en remplaçant prenom.nom

Vous allez maintenant remplacer la page racine de votre dossier par le sujet du TP. Pour cela, il faut récupérer le code source de cette page et la stocker localement dans un fichier index.html puis transférer ce fichier vers le serveur.

Question

Dans le terminal distant, c'est à dire celui où vous êtes connectés au serveur, utilisez la commande mv pour renommer le fichier index.html d'origine : mv index.html index.html.orig
Que se passe t-il quand vous actualisez la page https://lifasr2.univ-lyon1.fr/prenom.nom/ dans votre navigateur ? Pourquoi ? Utilisez la commande ls -l pour voir qui est le propriétaire du fichier index.html.orig. A quoi correspond rw-rw-r-- ? Qu'est-ce que www-data ?

Question

Ouvrez une autre fenêtre terminal. Cette fenêtre sera le terminal local. Tapez gedit index.html &
Dans le navigateur web, cliquez droit sur la page du sujet de TP pour afficher son code source. Copiez/Collez tout le code de la page dans la fenêtre gedit et sauvegardez le fichier. Le fichier index.html local doit maintenant contenir le code source du sujet de TP.

Question

Dans le terminal local, utilisez la commande scp pour copier le sujet du TP dans votre dossier sur le serveur : scp index.html lifasr2.univ-lyon1.fr:
Dans le terminal distant, utilisez les commandes ls et cat pour vérifier que le transfert s'est bien passé. Pour le confirmer, actualisez la page https://lifasr2.univ-lyon1.fr/prenom.nom/ dans votre navigateur web. Que constatez-vous ?!
Utilisez la commande ls -l pour voir qui est le propriétaire du fichier index.html ? Qu'est-ce qui a changé par rapport à index.html.orig ?

Aide / Mémo

Pour copier un dossier local vers le serveur, utilisez scp -r nom_dossier/ lifasr2.univ-lyon1.fr:
Si le login sur la machine distante est différent de celui sur la machine locale, utilisez l'option -l login de ssh ou scp pour préciser le login distant.

Sous Unix, dans le terminal, utilisez la flèche du haut du clavier pour remonter dans l'historique des commandes. Cela permet de rappeler une commande sans avoir à la retaper.

Pour gagner du temps, tout au long du TP, faites un maximum de copier/coller que ce soit pour copier une commande Unix ou du code HTML/CSS/PHP. Sous Unix, pour faire un copier/coller, il suffit de sélectionner ce que l'on veut copier, de placer le curseur de la souris là où on veut coller et d'appuyer sur la roulette de la souris pour coller le texte sélectionné. Essayez !

Si vous rencontrez des problèmes d'accès à vos fichers, utilisez la commande chmod pour changer les droits du fichier. Pour plus d'informations sur cette commande, utilisez man chmod. La commande man vous permet d'avoir de l'aide sur n'importe quelle commande Unix.

Code source d'une page HTML et feuille de styles

Le style de la page n'est pas le même que celui d'origine. En effet, les styles du sujet de TP ont été définis dans un fichier séparé, la feuille de styles. Vous allez récupérer ce fichier et le transférer dans votre dossier sur le serveur afin de régler ce problème.

Question

Examinez les premières lignes du code source de la page qui contient le sujet du TP et en déduire le nom du fichier qui contient les styles.
Affichez ce fichier dans un nouvel onglet du navigateur web en remplaçant dans l'URL TP1.html par le nom de la feuille de style.
Répétez toutes les étapes réalisées à la question précédente pour récupérer le code source de la feuille de styles et le transférer dans votre dossier sur le serveur.

Désormais, la page https://lifasr2.univ-lyon1.fr/prenom.nom/ doit afficher le sujet du TP avec les bons styles. Ces styles peuvent ne pas vous convenir, les couleurs par exemple ! Vous allez pouvoir les modifier à votre guise puisque vous êtes maintenant propriétaire du code source de la page et de sa feuille de styles !

Question

Editez la feuille de styles et modifiez, par exemple, la couleur du fond de la page ou la couleur des titres. Pour cela, consultez l'aide ci-dessous. Pour tester vos modifications, vous pouvez ouvrir le fichier local dans votre navigateur web mais n'oubliez pas de transférer vers le serveur tous les fichiers modifiés quand vous avez terminé.

Aide / Mémo

En HTML, les couleurs sont définies par 3 octets écrits en hexadécimal. Chaque octet a une valeur comprise entre 00 et FF. Le premier octet donne la quantité de rouge, le deuxième la quantité de vert, le troisième de bleu. Ainsi rouge=#FF0000, vert=#00FF00, bleu=#0000FF, blanc=#FFFFFF, noir=#000000. Un code couleur est disponible ici

Attention : pour qu'une feuille de styles s'applique, il ne faut pas oublier de recharger la page du navigateur pour récupérer sur le serveur la feuille de styles modifiée. Si vos modifications ne sont pas visibles, il se peut qu'il soit nécessaire de vider le cache du navigateur. Pour cela, dans les menus, choisissez Historique puis Effacer l'historique récent et choisissez comme intervalle à effacer tout puis affichez les détails, cochez cache et validez.

Les outils d'aide au développement de Firefox

Le navigateur Firefox met à disposition plusieurs outils qui peuvent vous être utiles pour vos développements en HTML, CSS et PHP.

Question

Ouvrez les outils de développement de Firefox, soit en passant par le menu Outils, soit en cliquant sur la clé en bas à droite de la fenêtre, soit en appuyant sur la touche F12.

Découvrez las différents outils mis à votre disposition après avoir lu l'aide ci-dessous.

Question

Placez vous dans l'outil Inspecteur et observez les styles qui s'appliquent à cette page en cliquant sur différents éléments. En particulier, observez les marges et espacements qui s'appliquent à différents éléments de la page dans l'onglet Calculé puis Modèle de boîte.

Question

Utilisez l'Inspecteur pour voir quelle est la taille originale des logos qui se trouvent en haut de cette page. Quelle réduction a été appliquée à chaque image ? Pour le confirmer, affichez une des images en ouvrant une nouvelle fenêtre du navigateur et en mettant dans l'URL le chemin pour n'afficher que l'image.

Question

Rafraîchissez votre page et consultez l'onglet Réseau. Quelles sont les différentes requêtes HTTP faites au serveur ? Sont-elles effectuées avec succès ?

Aide / Mémo

L'outil Inspecteur vous permet de visualiser le code HTML de la page en même temps que son affichage dans la fenêtre du navigateur. Vous pouvez :

L'outil Console affiche d'éventuelles alertes ou erreurs liées à la page chargée dans la fenêtre. Vous pouvez choisir les erreurs à afficher (Réseau, CSS...) en sélectionnant ou non l'onglet correspondant.

L'outil Réseau permet de visualiser tous les échanges qui ont lieu entre le navigateur web et le serveur web. En particulier, vous pouvez voir dans le détail toutes les requêtes/réponses HTTP.

Quelques liens qui peuvent vous être utiles
Création de l'arborescence pour stocker les fichiers des TP 1 à 4

Vous allez maintenant créer les dossiers qui vont stocker vos fichiers pour tous les TP : jeu-2048 pour les TP1 et TP2, reseau-social pour les TP3 et TP4.

Question

Dans le terminal distant, utilisez la commande mkdir pour créer les deux dossiers. Vérifiez avec la commande ls -l la présence des dossiers jeu-2048 et reseau-social. Dans le terminal local, vous pouvez exécuter les mêmes commandes pour ranger vos fichiers de la même manière sur la machine cliente et sur le serveur.

Pour changer de dossier, la commande UNIX est cd. En local et en distant, placez-vous maintenant dans le dossier jeu-2048.

Vous allez maintenant créer la page web qui va contenir le jeu 2048. Si vous ne connaissez pas ce jeu, cliquez ici. Pour tester le jeu, cliquez par exemple ici.

Création de la page HTML contenant le jeu 2048

La page web du jeu 2048 doit contenir les éléments suivants :

Structuration de la page du jeu et premiers pas en HTML
Question

Editez un nouveau fichier index.html dans le répertoire local jeu-2048 qui va contenir la page du jeu. Pour que gedit fasse l'indentation automatique, allez dans le menu Edit puis Préférences.

En vous aidant de l'encadré ci-dessous et du contenu des autres pages web éditées jusqu'à présent, ajoutez dans votre fichier index.html la structure de la page en la personnalisant. Mettez Le jeu 2048 dans le titre de l'onglet et comme titre principal à votre page.

Ouvrez votre page dans votre navigateur web et observez le résultat.

Aide / Mémo

Rappel : pour gagner du temps, tout au long du TP, faites un maximum de copier/coller que ce soit pour copier une commande Unix ou du code HTML/CSS/PHP. Sous Unix, pour faire un copier/coller, il suffit de sélectionner ce que l'on veut copier, de placer le curseur de la souris là où on veut coller et d'appuyer sur la roulette de la souris pour coller le texte sélectionné.

La structure de base d'une page HTML ressemble à ceci :

	<!doctype html> 
	<!-- Ceci est un commentaire -->
	<html> 
		<head> 						
			<title>Titre de votre page</title>
			<link rel="stylesheet" href="style.css" />
		</head> 
		<body> 
			Le contenu de votre page ici.....	
			<h1>Ceci est un titre très important</h1>
			<h2>Ceci est un titre important</h2>
			<h3>Ceci est un titre un peu moins important</h3>
			<p>Ceci est un paragraphe</p>
		</body> 
	</html> 
			

En HTML, comme pour toute écriture d'un code structuré, il faut respecter l'indentation du code. Les balises permettent de décrire les différents éléments contenus dans une page web. Elles vont permettre au navigateur web d'interpréter leur signification pour afficher la page.
La balise <head> contient l'entête du fichier, les informations globales, telles que le titre et la feuille de styles qui va être utilisée pour définir le format et la mise en forme appliqués aux éléments de la page web.
Une balise doit toujours être refermée. Par exemple, </head> termine la définition de l'en-tête de la page.
La balise <body> contient le corps de la page qui va être affiché dans le navigateur.
Les balises <h1> ou <h2> permettent d'appliquer un style prédéfini à un titre de niveau 1 ou 2. La balise <p> définit un nouveau paragraphe... Pour faire un saut de ligne, il faut utiliser la balise <br />.

Vous allez maintenant ajouter les règles du jeu en haut de la page. Le but du jeu est de faire glisser des tuiles sur une grille, pour combiner les tuiles de mêmes valeurs et créer ainsi une tuile portant le nombre 2048. Le joueur peut toutefois continuer à jouer après cet objectif atteint pour faire le meilleur score possible.
Le jeu se présente sous la forme d'une grille 4*4. Au début de la partie, deux cases contiennent un chiffre (2 ou 4). Les nombres peuvent se déplacer à droite, à gauche, en haut ou en bas. Quand deux cases de même valeur se rencontrent, elles fusionnent en une case qui vaut la somme des 2 cases fusionnées. Après chaque action du joueur, une nouvelle case apparaît avec pour valeur 2 ou 4. Le but est donc d'obtenir une case valant 2048 avant que la grille ne soit pleine et qu'aucun mouvement ne soit plus possible. Si plus aucun mouvement n'est possible, la partie est perdue.

Question

Affichez un petit paragraphe avec les règles du jeu. Placez également le score dans la page. Au début de la partie, le score est 0.
Testez l'affichage de votre page dans le navigateur web.

Amélioration des styles et premiers pas en CSS
Vous allez maintenant améliorer le style de votre page web. Tous les styles que vous allez définir seront inclus dans un fichier séparé, la feuille de styles, que vous nommerez styles2048.css.
Question

Affichez le code source de la page du sujet de TP ainsi que celui de la feuille de styles associée et répondez aux questions suivantes en comparant le code et l'affichage. Vous pouvez aussi utiliser les outils de développement de Firefox.

Question

Ouvrez votre feuille de styles en tapant gedit styles2048.css & dans le terminal local. Améliorez votre page web en ajoutant un peu de couleurs, en justifiant le texte des paragraphes, en mettant le score en gras...
N'oubliez pas de vérifier l'affichage obtenu dans votre navigateur.

Aide / Mémo

Le CSS permet d'appliquer des styles, mises en forme, positionnement de certains éléments de la page web. Il existe deux façons d'utiliser le CSS. Vous pouvez inclure des éléments de styles directement dans une balise HTML ou définir les styles dans un fichier séparé. Cela est préférable pour ne pas alourdir le code source de la page web. Voici un exemple très simple de feuille de styles :

	p { color: blue; }
	h1, h2 { color: red; font-size: 40px; }			 
	.question { background-color: #FFFFFF; }			
			
Cette feuille de styles affiche le texte des paragraphes en bleu, celui des titres de type h1 et h2 en rouge avec une taille de police de 40 pixels. Enfin, tous les éléments se réclamant de la classe question se verront appliquer la couleur blanche comme couleur de fond.

Pour structurer une page web et positionner correctement les différents objets d'une page web, on définit des conteneurs ou blocs grâce à la balise div. Il est ensuite possible d'appliquer un ensemble de propriétés de styles à un bloc grâce à l'attribut class.

Aide / Mémo

Par exemple, le code ci-dessous permet de mettre un fond blanc au titre et au paragraphe contenus dans le bloc.

 
	<div class="question"/>
		<h2> Un titre </h2>
		<p> Un paragraphe <br/>
		sur plusieurs <br/>
		lignes. </p>
	</div>
			

Question

Créez un bloc contenant les règles du jeu écrites précédemment et changez l'apparence du bloc en ajoutant une couleur de fond différente et des coins arrondis.

Affichage de la grille du jeu avec un tableau ou des blocs

La grille du jeu est une grille 4*4. Il s'agit donc d'un tableau à deux dimensions avec 4 lignes et 4 colonnes.

Question

Affichez une grille de 4*4 cases en dessous de votre titre et de votre paragraphe. Chaque case contiendra la valeur 0 pour l'instant. Cette valeur devra être centrée dans la case de la grille.

Aide / Mémo

Pour créer un tableau en HTML, il faut utiliser la balise <table> ... </table> pour délimiter l'ensemble du tableau. La balise <tr> ... </tr> permet de définir une nouvelle ligne et la balise <td>valeur</td> permet de définir une cellule et de lui donner une valeur à afficher. Il faut donc imbriquer les balises <td> dans les balises <tr>.

Pour définir la taille d'une cellule, vous utiliserez les propriétés CSS width:100px; et height:100px;

Pour centrer un nombre dans une cellule, vous utiliserez les propriétés CSS margin et/ou padding. Aidez vous de l'Inspecteur pour visualiser où les marges et espacements s'appliquent !

Question

Changez l'apparence de votre grille pour que toutes les cases soient des carrés gris, de même taille avec une bordure noire pour les cellules et une bordure rouge pour la grille.

Pour définir une grille, on peut également utiliser des blocs div plutôt qu'un tableau comme vous venez de le faire. Il s'agit alors de définir un bloc div qui va contenir toute la grille, lequel va contenir un autre bloc pour chaque nouvelle ligne, lequel contiendra également d'autres blocs pour chaque nouvelle cellule de la ligne. Il faut donc imbriquer les blocs div et appliquer les styles CSS appropriés à chaque type de bloc selon qu'il s'agit de la grille entière, d'une ligne ou d'une case de la grille.

Question

En dessous de votre première grille, affichez une nouvelle grille en utilisant des blocs div imbriqués auxquels vous appliquerez des styles comme suit :

Cette nouvelle grille doit avoir la même apparence que la première : des cases grises avec une bordure noire, une bordure rouge pour la grille et le nombre centré dans la case. Testez l'affichage : vos deux grilles doivent avoir la même apparence !

Aide / Mémo

Pour que la taille de la grille s'adapte à son contenu et ne prenne pas toute la page, vous pourrez appliquer les styles
.grille { width : auto; height : auto; ​position : absolute; }

Pour que les cellules se placent les unes à côté des autres, vous utiliserez
.cellule { display: inline-block; }

Vous pouvez désormais afficher un tableau avec des cases carrées de taille identique, indépendamment du contenu. Cependant, si la taille de la fenêtre du navigateur change (sur un écran plus petit par exemple), votre grille ne sera pas redimensionnée en fonction de la taille de la fenêtre. Pour cela, vous pouvez définir les dimensions des cellules en pourcentage plutôt qu'en nombre de pixels.

Vous n'allez garder qu'une seule grille dans votre page. Vous pouvez choisir celle que vous voulez, cela est équivalent pour la suite du TP.

Ajout de liens et boutons, notion de formulaire

Pour prendre en compte l'action du joueur, il faut, soit intercepter un événement comme l'appui sur une touche du clavier ou un clic de souris, soit permettre au joueur de cliquer sur un lien ou un bouton dans la page du jeu. Nous allons utiliser les liens et/ou les boutons pour prendre en compte l'action du joueur car la première méthode nécessite l'utilisation du langage javascript qui sera vu en L2.

Question

Ajoutez sur votre page un lien vers la page web de l'UE (http://perso.univ-lyon1.fr/olivier.gluck/supports_enseig.html#LIFASR2). Cette page doit s'ouvrir dans un nouvel onglet lorsque l'on clique sur le lien. A quoi sert le #LIFASR2 dans l'URL ?

Question

Ajoutez un autre lien qui permet de recharger la page de jeu c'est à dire un lien vers la page index.html qui se trouve dans le dossier jeu-2048.

Aide / Mémo

Cliquer sur un lien hypertexte est une action qui permet d'ouvrir une autre page web que la page actuelle. Il s'agit donc de charger dans le navigateur une nouvelle URL. La nouvelle page peut s'ouvrir soit en remplaçant la page actuelle (comportement par défaut), soit dans un nouvel onglet ou une nouvelle fenêtre.
Pour définir un lien, utilisez <a href="URL du lien">ici</a>. Le texte ici devient alors un lien cliquable (en bleu souligné par défaut, sauf si défini autrement dans la feuille de style) vers l'URL du lien. Pour ouvrir le lien dans un nouvel onglet, utilisez l'attribut target="_blank" dans la balise <a>.

Un bouton cliquable est un élément d'un formulaire. Un formulaire peut contenir plusieurs types d'éléments : des boutons, des cases à cocher, des zones de texte à remplir... On parle aussi des champs d'un formulaire. Quand le formulaire est soumis, toutes les valeurs saisies dans les champs du formulaire sont transmises au serveur web et une action est exécutée. Généralement, l'action consiste à exécuter un programme PHP qui va traiter les valeurs du formulaire et renvoyer une nouvelle page HTML au client. Cette page est dite dynamique car son contenu est généré dynamiquement en fonction de ce qui a été saisi dans le formulaire.

Cliquer sur un bouton est donc une action qui va permettre l'exécution d'un programme PHP sur le serveur.

Question

En vous aidant de l'aide ci-dessous, ajoutez un bouton centré au-dessus de la grille permettant de démarrer une nouvelle partie. Ce bouton doit être inclus dans un formulaire dont l'action sera l'exécution d'un programme nommé jeu-2048.php. Le nom du bouton doit être action-joueur. Le texte qui s'affiche dans le bouton doit être Nouvelle partie.

Question

Complétez votre feuille de styles pour améliorer l'apparence du bouton. Vous pourrez par exemple mettre un fond jaune-orange et une bordure invisible.

Question

Ajoutez sous la grille les 4 boutons permettant les actions du joueur : gauche, haut, droite, bas. Ils seront insérés dans le même formulaire que précédemment. Un clic sur l'un de ces boutons exécutera également jeu-2048.php. Le nom de tous les boutons doit être action-joueur. Ce qui permettra de distinguer le bouton cliqué sera la valeur du bouton qui sera transmise au programme PHP.

Positionnez les 4 boutons de manière intuitive pour le joueur.

Aide / Mémo
Un formulaire se définit ainsi :
<form name="jeu-2048" method="get" action="action.php">
Les principaux champs d'un formulaire sont :

Les zones de saisie de texte :

<input type="text" name="email" value="saisissez ici" size="30" maxlength="20" />

Les cases à cocher : HTML PHP

<input type="checkbox" name="cours1" value="1" checked />HTML

<input type="checkbox" name="cours1" value="2" />PHP

Les boutons radios : HTML PHP

<input type="radio" name="cours2" value="1" />HTML

<input type="radio" name="cours2" value="2" checked />PHP

Les menus déroulants ?

Les boutons de soumission du formulaire :

<input type="submit" name="action-joueur" value="<" />

<input type="submit" name="action-joueur" value=">" />

Un bouton de réinitialisation du formulaire :

Un clic sur ce bouton n'exécute pas action.php mais recharge les valeurs par défaut du formulaire.

<input type="reset" name="recharge" value="Reset" />

</form>

Il est aussi possible d'inclure dans un formulaire des menus déroulants, des zones de saisie sur plusieurs lignes, des zones de saisie de type password...

A ce stade, vous avez construit une page web statique jeu-2048/index.html qui contient la page de démarrage du jeu. Nous allons maintenant construire l'interaction avec le serveur web qui va exécuter les programmes permettant de traiter les actions du joueur.

Traitement des actions du joueur côté serveur et premiers pas en PHP

Le serveur web est distant : il ne s'exécute pas sur votre machine de la salle de TP. A chaque fois que le joueur veut faire une action, le navigateur web construit une nouvelle requête HTTP qui contient non seulement le nom du programme que le serveur doit exécuter pour traiter l'action du joueur mais aussi les informations sur l'action qui doit être réalisée.

Pour toutes les questions ci-dessous, après chaque clic sur un bouton, utilisez les outils de développement de Firefox pour observer les requêtes/réponses HTTP avec l'outil Réseau. Il faut cliquer sur une requête pour voir les en-têtes, les paramètres et la réponse.

Question

Cliquez sur le bouton Nouvelle partie. Que se passe t-il ? Pourquoi ? Quelle est l'URL qui s'affiche dans la barre du navigateur ?

Question

Cliquez maintenant sur un des 4 boutons de direction qui permet au joueur de jouer un coup. Quelle est l'URL qui s'affiche dans la barre du navigateur ? Qu'est-ce qui a changé par rapport au clic sur le bouton Nouvelle partie ?

Cliquez sur les autres boutons de direction et comparez l'URL.

Question

Modifiez les valeurs saisies dans le formulaire qui se trouve un peu plus haut dans la page du sujet de TP (cette page !). Vous pouvez saisir un texte, changer la case à cocher et le bouton radio.

Cliquez sur le bouton Reset. Que se passe t-il ? Est-ce que l'URL a changé ? Cliquez maintenant sur l'un des deux boutons de soumission. Que se passe t-il ? Observez le contenu de l'URL et vérifiez que vous retrouvez toutes les valeurs que vous avez saisies dans les différents champs du formulaire.

Aide / Mémo

Comme le formulaire de la page du jeu utilise la méthode get, ces informations sont transmises au serveur via l'URL. Celle-ci contient donc le nom du programme à exécuter et toutes les variables du formulaire. Cette URL est transmise au serveur web dans la requête HTTP qui est fabriquée par le navigateur web et envoyée au serveur web en passant par le réseau Internet.

Quand le serveur reçoit la requête HTTP, il récupère le nom du programme et l'exécute en lui transmettant les variables du formulaire. Le programme s'exécute, traite l'action du joueur et doit renvoyer une nouvelle page web qui va s'afficher dans le navigateur web du joueur.

Il faut donc maintenant commencer à écrire le programme PHP qui va traiter les actions du joueur ! Dans un premier temps, vous allez simplement afficher un message qui permet de savoir sur quel bouton le joueur a cliqué.

Question

Dans le terminal local, exécutez la commande gedit jeu-2048.php &. Copiez/Collez le petit programme ci-dessous dans jeu-2048.php et testez le dans votre navigateur. Décrivez le contenu de chacune des sept variables affichées.

Question

Ajoutez dans votre programme PHP un appel à la fonction phpinfo(). Que fait cette fonction ?

Aide / Mémo

Un programme PHP peut contenir soit du code HTML soit du code PHP. Le code PHP doit se situer à l'intérieur de la balise prévue à cet effet comme suit : <?php Votre code php ici ?>.
Pour afficher un message en PHP, il faut utiliser la commande echo.
Pour mettre des commentaires dans un code PHP, il faut utiliser /*...*/ ou //.
Pour définir/utiliser une variable, il faut utiliser $. Voici un premier exemple :

<!-- jeu-2048.php -->
<html>
 <head>
 	<?php 
 	 /* ici commence le code PHP 
 	 qui va être éxécuté par le serveur */
 	 $TITRE = "2048" 
 	 // TITRE est une variable qui contient "2048"
 	?>
 	<title>
 	 <?php echo $TITRE; ?>
 	</title>
 </head>
 <body>
 	<h2>Bienvenue dans le jeu 2048 !</h2>
 	<?php
 	 echo "HTTP_USER_AGENT="; echo $_SERVER['HTTP_USER_AGENT']; echo "<br />";
 	 echo "HTTP_HOST="; echo $_SERVER['HTTP_HOST']; echo "<br />";
 	 echo "DOCUMENT_ROOT="; echo $_SERVER['DOCUMENT_ROOT']; echo "<br />";
 	 echo "SCRIPT_FILENAME="; echo $_SERVER['SCRIPT_FILENAME']; echo "<br />";
 	 echo "PHP_SELF="; echo $_SERVER['PHP_SELF']; echo "<br />";
 	 echo "REQUEST_URI="; echo $_SERVER['REQUEST_URI']; echo "<br />";
 	 echo "action-joueur="; echo $_GET['action-joueur']; echo "<br />";	
 	?>
 </body>
</html>	
			

Désormais, vous savez comment on récupère la valeur des champs saisis dans un formulaire. Ces champs permettent l'interactivité entre le client et le serveur.

Question

Pour prendre en compte les actions du joueur, vous auriez pu utiliser des liens hypertextes plutôt que des boutons d'un formulaire. Comment feriez-vous cela ? Quel serait le lien hypertexte correspondant à un clic sur le bouton bas par exemple ?

Question

Pour changer l'action du joueur, comment feriez-vous sans cliquer ni sur un bouton ni sur un lien hypertexte ?

Utilisation d'un fichier de logs pour débugger côté serveur

Le problème de la programmation en PHP est que le code s'exécute côté serveur. C'est donc plus difficile à débugger qu'un programme qui peut faire des affichages pendant son exécution. Pour pallier au problème, vous allez créer un fichier de logs qui contiendra tous les messages que vous souhaiteriez voir affichés à l'écran par votre programme PHP.

Création du fichier de logs et écriture des actions du joueur

Vous allez créer un fichier PHP qui va contenir toutes les fonctions qui vous seront utiles pour le jeu 2048. Cela permet d'alléger la page du jeu et de séparer le code des fonctions PHP de la page qui gère l'exécution du jeu. Dans ce fichier, vous allez écrire une nouvelle fonction qui permet d'ajouter un message dans un fichier texte, le fichier de logs. Dans un premier temps, ce fichier contiendra toutes les actions réalisées par le joueur. Par la suite, vous pourrez utiliser ce fichier pour débugger votre programme à chaque fois que cela sera nécessaire.

Question

Ouvrez un nouveau fichier fonctions-2048.php dans votre éditeur. Ajoutez dedans une fonction affiche_sept_variables() qui contient le code permettant d'afficher les sept variables vues précédemment. N'oubliez pas que tout code PHP ne sera exécuté par le serveur que s'il est situé entre les balises <?php //mon code PHP ici; ?>. Dans le cas contraire, le code s'affichera dans la page du navigateur.

Question

Dans jeu-2048.php, remplacez les lignes qui affichent les sept variables par l'appel à votre fonction. Testez et vérifiez que l'affichage est correct dans le navigateur.

Question

Dans le terminal distant, placez vous dans le dossier jeu-2048 et copiez/collez la commande touch logs-2048.txt Cette commande permet de créer un fichier vide qui vous appartient. Si cette opération n'est pas faite, le fichier sera créé par le serveur web et vous ne pourrez plus le modifier ou le supprimer !

Question

Ajoutez dans le fichier fonctions-2048.php, une fonction write_log($mesg) qui prend en paramètre une chaîne de caractères (le message) et l'ajoute dans le fichier de logs logs-2048.txt.

Question

Appelez la fonction write_log($mesg) pour ajouter dans le fichier de logs un message indiquant sur quel bouton le joueur a cliqué. Testez les cinq cas et vérifiez avec la commande Unix cat que les messages s'ajoutent correctement dans votre fichier de logs. Exécutez la commande Unix ls -l dans le dossier qui contient le fichier de logs. Qui est propriétaire de ce fichier ? Quels sont les droits Unix sur ce fichier ? Avez-vous le droit de le modifier ?

Aide / Mémo

Pour pouvoir utiliser vos fonctions, il faut inclure le fichier fonctions-2048.php dans jeu-2048.php. Pour cela, ajoutez <?php require_once 'fonctions-2048.php'; ?> en haut du fichier jeu-2048.php.
Une fonction en PHP se définit ainsi :
function nom_fonction ($param_fonction) { instructions; }
Pour ajouter le texte de la variable $log à la fin du fichier $file, appelez la fonction
file_put_contents($file, $log, FILE_APPEND).

Lecture et affichage du fichier de logs

Voyons maintenant comment consulter aisément le fichier de logs sans passer par le terminal distant du serveur. Vous pouvez soit utiliser une commande Unix dans le terminal local soit afficher les logs dans votre navigateur web. Pour cela, vous allez écrire une fonction permettant la lecture du fichier de logs et l'écriture de son contenu dans une page HTML destinée au navigateur web.

Question

Dans le terminal local, tapez la commande suivante :

ssh lifasr2.univ-lyon1.fr "tail -f -n 5 jeu-2048/logs-2048.txt"

Dans la page du jeu, cliquez sur les boutons et vérifiez l'affichage des logs en temps réel dans le terminal.

A quoi sert -n 5 ? Et -f ? Utiliser la commande Unix man tail pour répondre à ces questions.

Question

Dans le navigateur web, ouvrez une nouvelle fenêtre dans laquelle vous chargerez le fichier de logs en mettant son nom dans l'URL. Cela pourrait être satisfaisant mais ne permet pas un rechargement automatique de la page. Pour ce faire, il faut impérativement charger une page HTML ou PHP.

Question

Editez un nouveau fichier affiche-logs.php. Ajoutez la structure habituelle d'une page HTML. Dans l'en-tête, insérez la balise meta qui permet le rechargement automatique de la page toutes les 5 secondes.

Dans fonctions-2048.php, ajoutez une fonction affiche_logs($nbl) qui ouvre le fichier de logs, lit les $nbl dernières lignes et les renvoie dans la page HTML destinée au client.

Enfin, appelez cette fonction dans affiche-logs.php et testez l'affichage dans le navigateur.

Aide / Mémo

Pour recharger la page courante toutes les 5 secondes, ajoutez

<meta http-equiv="refresh" content="5" /> entre <head> et </head>

Pour ouvrir un fichier, on utilise la fonction file("nom_fichier.txt") qui renvoie le contenu du fichier sous la forme d'un tableau, chaque élément du tableau correspondant à une ligne du fichier.

Stockez le résultat de la fonction dans une variable $logs. Pour afficher le fichier ligne par ligne, il faut donc utiliser une boucle qui va afficher chaque élément du tableau.

Pour n'afficher que les $nbl dernières lignes, il faut donc récupérer la taille du tableau avec sizeof($logs);.

Pour tester une condition en php, il faut utiliser le if :

if ($a <5) { instruction1; } else { instruction2; }

Adaptez et utilisez la boucle suivante pour n'afficher que les éléments souhaités du tableau :

 foreach ($logs as $i => $line) {
  // $logs est un tableau qui contient toutes les lignes du fichier
  // $i est l'indice du tableau donc le numéro de la ligne - 1 (l'indice commence à 0)
  // $line contient la ligne d'indice i
  echo "Ligne " . ($i+1) . " : " . htmlspecialchars($line) . "<br />\n"; }
			
Le . permet la concaténation de chaînes de caractères. La fonction htmlspecialchars($ch) renvoie la chaîne de caractères contenue dans $ch après avoir remplacé les caractères spéciaux (& " ' < >) par leur équivalent en HTML. \n permet un saut de ligne dans le code source de la page HTML alors que <br /> permet un saut de ligne dans la page qui s'affiche dans le navigateur.

Vous pouvez maintenant lire et écrire dans votre fichier de logs. Pensez à l'utiliser lors des prochaines séances de TP pour vous aider à résoudre vos problèmes en PHP.

Si vous avez le temps, faites la question ci-dessous sinon vous pourrez la faire chez vous avant la prochaine séance.

Question

Améliorez l'affichage des logs en ajoutant des styles à la page affiche-logs.php : si l'action est Nouvelle partie, affichez la ligne en gras ; si l'action est un bouton de direction, affichez la ligne dans une couleur différente selon la direction (bleu pour gauche, rouge pour droite, vert pour haut et orange pour bas).

Question

Pour que le fichier de logs ne devienne pas trop volumineux, faites en sorte qu'il ne contienne pas plus de 50 lignes. Pour cela, dès que les 50 lignes ont été atteintes, il faut supprimer la ligne la plus ancienne, décaler toutes les lignes vers le haut et insérer la nouvelle ligne à la fin du fichier.

A faire avant la prochaine séance

Entre deux séances de TP, vous avez au moins 15 jours pour :

Avant la deuxième séance de TP, il est impératif que vous ayez fini à minima :

Il faut également que vous ayez commencé la réflexion sur la programmation du jeu côté serveur :

Aide / Mémo

Pour travailler depuis chez vous sur le serveur web que vous utilisez en TP, suivez les instructions sur cette page.


Ce document est soumis au Copyright © présent sur cette page.