Introduction réseaux et web

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.

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

Ouvrez un terminal. Utilisez la commande ssh pour vous connecter à la machine serveur :
ssh lifrw.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.

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://lifrw.univ-lyon1.fr/prenom.nom/index.html toujours en remplaçant prenom.nom

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://lifrw.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---- ? Qu'est-ce que www-data ?

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

Dans le terminal local, utilisez la commande scp pour copier le sujet du TP dans votre dossier sur le serveur : scp index.html lifrw.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://lifrw.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 ?

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 TPcalculatrice.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.

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é.

Ouvrez les outils de développement de Firefox en cliquant droit et en choisissant Examiner l'élément, soit en appuyant sur la touche F12.

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

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 Mise en page / Modèle de boîte puis Calculé.

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.

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

Depuis un terminal local, connectez-vous avec ssh -X au serveur web lifrw.univ-lyon1.fr L'option -X avec un X MAJUSCULE va vous permettre d'ouvrir des fenêtres et donc d'éditer vos fichiers directement sur le serveur.

Une fois connecté au serveur, créez avec mkdir un dossier TP-calculatrice

Allez dans le dossier TP-calculatrice avec cd et lancez l'éditeur de texte geany pour ouvrir le nouveau fichier calculatrice.php

Ajoutez dans ce fichier, le squelette ci-dessous :

<!doctype html>
<!-- calculatrice.php -->
<html>
	<head>
		<meta charset="utf-8" />
		<title>  </title>
		<style type="text/css"> 
		/* Déclarez les styles ici */
		   
		</style>
	</head>
	
	<?php 
	/* Écrivez ici les fonctions php */
	
	?>
            
	<body>	
	
	</body>
</html>	

ATTENTION : tout ce que vous allez faire par la suite doit se trouver dans UN SEUL fichier, le fichier calculatrice.php que vous venez de créer.

Dans le fichier calculatrice.php, ajoutez dans l'en-tête Une petite calculatrice comme titre de l'onglet.

Dans le corps de la page, ajoutez les 4 éléments de la page (sans vous pré-occuper des styles pour l'instant) :

• le titre Calculatrice de type h1
• le paragraphe introductif de type p avec son contenu tel qu'il est sur l'image
• un bloc div dont la classe est calculatrice dans lequel vous pouvez dores et déjà insérer la première ligne visible sur l'image ; vous ajouterez par la suite le formulaire et l'affichage du résultat
• le paragraphe qui affichera les éléments du formulaire transmis au serveur dans lequel vous pouvez dores et déjà insérer la première ligne visible sur l'image

Dans Firefox, affichez votre page calculatrice.php pour vérifier ce que vous avez fait jusqu'à présent. Attention à mettre le bon chemin d'accès au fichier dans l'URL.

Dans le bloc div dont le nom est calculatrice, ajoutez son contenu comme il figure sur l'image. Ce bloc contient un formulaire qui doit être soumis avec la méthode GET et dont l'action est de rappeler votre page calculatrice.php

Sur la deuxième et quatrième ligne du bloc, à l'intérieur du formulaire, placez une zone qui permet de saisir un nombre dont le nom doit être respectivement nombre1 et nombre2.

Sur la troisième ligne du bloc, à l'intérieur du formulaire, placez un menu déroulant qui permet de choisir l'opération +, -, / ou *. La valeur associée à chaque choix doit être respectivement plus, moins, div ou mult.

Sur la cinquième ligne du bloc, à l'intérieur du formulaire, placez le bouton de soumission du formulaire dont le nom doit être action et la valeur celle visible sur l'image. Que constatez-vous dans l'URL après avoir cliqué sur le bouton de soumission ? Faites plusieurs saisies différentes, cliquez sur le bouton de soumission et observez comment l'URL est modifiée.

Dans l'en-tête, définissez les styles pour body, h1, p, p.param et le bloc calculatrice afin d'obtenir un affichage conforme à l'image. Pour les couleurs, vous pouvez utiliser cette page.

Dans le dernier paragraphe de la page, ajoutez le code PHP qui permet d'afficher tous les éléments transmis au serveur par le formulaire comme cela apparait sur l'image. Vous utiliserez une boucle foreach qui parcourt le tableau $_GET comme cela a été vu en cours (CM3 sur PHP). Est-ce que l'affichage que vous obtenez correspond à ce que vous pouvez observer dans l'URL ?

Entre la fin de l'en-tête et le début du corps de la page, ajoutez une fonction PHP calculatrice($nb1, $nb2, $op) qui retourne le résultat du calcul si $nb1 et $nb2 sont des nombres, un message d'erreur sinon (cf. image ci-dessous). Vous pourrez utiliser la fonction is_numeric($nb) du langage.

Dans le bloc calculatrice, à la suite du formulaire, ajoutez le code PHP qui permet d'afficher (comme sur l'image) le résultat du calcul en appelant votre fonction PHP.

Pensez à bien tester tous les cas possibles de saisie : les deux nombres saisis sont des nombres (cf. image ci-dessus), l'un des nombres n'est pas un nombre (cf. image ci-dessous).

Pour éviter le message d'erreur qui s'affiche tant que l'utilisateur n'a pas cliqué sur le bouton de soumission du formulaire, utilisez la fonction isset(). Vous devez alors obtenir l'affichage conforme à la deuxième image ci-dessous.

Vérifiez que les styles que vous avez définis dans l'en-tête permettent d'obtenir un affichage conforme aux trois images.

Faites en sorte que les nombres et l'opération saisis dans le formulaire restent affichés dans le formulaire après sa soumission.

Lorsque la saisie n'est pas correcte, affichez le message d'erreur en rouge.