Introduction réseaux et web : TP

Le réseau social, 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.

Rappels
Aide / Mémo

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

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.

Objectifs du TP

Pendant deux séances, vous allez concevoir le réseau social de la promotion. Chaque étudiant doit pouvoir poster un texte ou une image ou un commentaire associé à une image ou un texte déjà posté. Il doit être également possible de dire "Aimer" à un texte, une image ou un commentaire déjà posté.

L'objectif de cette première séance est de concevoir l'interface cliente du réseau social et de permettre l'ajout d'un post de type texte ou image dans le réseau social. Vous allez donc réaliser une page web en HTML/CSS qui contient un ou plusieurs formulaires permettant à l'utilisateur de faire les posts. Vous écrirez des fonctions en PHP pour faire les posts, c'est à dire pour stocker des fichiers contenant les posts dans un dossier partagé par tous les étudiants. Vous utiliserez les outils fournis par votre navigateur pour visualiser chaque type de post et le contenu des requêtes/réponses HTTP.

Lors de la deuxième séance, vous écrirez les programmes qui permettent l'affichage des posts selon les choix faits par l'utilisateur du réseau social. Vous écrirez les programmes qui permettent l'ajout de commentaires et la gestion des like.

Mise en place de l'interface du réseau social

Le but de cette section est de mettre en place l'interface du réseau social. Vous travaillerez dans le répertoire reseau-social créé lors du premier TP du jeu 2048.

L'image ci-dessous représente l'allure de la page que vous devez réaliser :

Vous aurez la liberté d'appliquer les styles que vous souhaitez mais vous devrez respecter la structure de la page, en particulier la position des différents éléments, les zones de saisie et les boutons d'action. La page est divisée en trois blocs distincts :

Structure de l'interface

Dans cette partie, vous allez construire la page web et positionner les trois blocs de la page : la zone menu en rouge, la zone création de posts en rose et la zone affichage des posts en orange.
La maquette de la page est la suivante :

La zone bleue contient le titre de la page en haut ainsi que les zones rose et orange.

Question

Dans le dossier reseau-social, éditez un fichier res.php qui va contenir la page du réseau social. Ajoutez dans ce fichier la structure de base d'une page HTML et donnez-lui le titre "Le réseau social de LIFRW".

Question

A l'aide de la balise <div>, ajoutez les quatre blocs suivants dans votre page :

  • En rouge le premier bloc, son attribut class prend la valeur "menu"
  • En bleu le deuxième bloc, son attribut class prend la valeur "contenu"
  • En rose le troisième bloc, son attribut class prend la valeur "nouveau_post"
  • En orange le quatrième bloc, son attribut class prend la valeur "affiche_post"
Le bloc bleu doit contenir les blocs rose et orange.

Question

Dans le dossier reseau-social, éditez un fichier style-res.css qui va contenir les styles du réseau social. Dans l'en-tête de la page res.php, incluez la feuille de styles que vous venez de créer.

Aide

La structure de base d'une page HTML est la suivante : 

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8" /> 
		<title>
			<!-- Le titre de votre page -->  
		</title>                        
	</head> 
	<body> 
		<!-- Code HTML du réseau social -->
	</body>
</html>
Pour inclure une feuille de styles CSS dans une page, il faut placer la balise <link> dans l'en-tête : 
 
	<link rel="stylesheet" type="text/css" href="nom-fichier.css">

En utilisant les styles CSS, vous allez maintenant donner une taille et une position à chaque bloc.

Question

Dans le fichier style-res.css, utilisez les noms de class spécifiés précédemment pour appliquer les éléments de styles suivants à chaque bloc :

  • Pour le bloc rouge :
    • Sa position doit être fixe afin de rester visible lorsque le contenu de la page défile vers le bas.
    • Il est positionné de manière flottante à gauche.
    • Sa largeur est de 180px.
    • Son contenu doit être éloigné de 10px par rapport à ses bordures.
    • Son contenu textuel est aligné à gauche.
  • Pour le bloc bleu :
    • Il est positionné de manière flottante à droite.
    • Sa largeur prend 70% de la page.
    • Son contenu doit être éloigné de 10px par rapport à ses bordures.
    • Ses marges gauche et droite doivent être de 10px.
  • Pour les blocs rose et orange :
    • Leur hauteur et largeur prennent la valeur auto.
    • Leur contenu doit être éloigné de 10px par rapport à leurs bordures.
    • L'espace entre le bloc rose et le bloc orange doit être de 10px.
    • Leur contenu textuel est centré.

Pour bien visualiser les différents blocs, vous pouvez donner une hauteur et une couleur de fond à chaque bloc.

Aide

Pour positionner un élément de manière fixe en cas de défilement, il faut utiliser la propriété CSS position et sa valeur fixed.

Pour positionner un bloc de manière flottante, il faut utiliser la propriété CSS float dont la valeur peut être left ou right.

Pour donner une taille à un bloc, il faut utiliser les propriétés CSS height et width. La taille peut être donnée en pixels (taille fixe) ou en pourcentage (taille relative aux autres tailles).

Pour définir des espaces intérieurs à un bloc (entre les bordures et le contenu), utilisez la propriété padding. Pour définir des espaces extérieurs à un bloc (entre les bordures et les autres blocs), il faut utiliser margin. Que ce soit pour padding ou margin, il est possible de n'appliquer les espaces qu'à certains côtés avec -left, -right, -top, -bottom.

Dans cette partie, il est indispensable d'utiliser les outils fournis par votre navigateur afin de visualiser et vérifier que les propriétés CSS s'appliquent comme indiqué dans le sujet :

  • Faites un clic droit dans votre navigateur et cliquez sur Inspecter l'élément.
  • Cliquez sur l'onglet Inspecteur.
  • Sélectionnez l'élément à modifier avec votre curseur.
  • A droite, vous pouvez modifier les valeurs des propriétés CSS que vous voulez tester/modifier.
  • Si vous arrivez au résultat escompté, revenez dans la feuille de styles et modifiez-la en conséquence.

Affichage du nom de l'auteur des posts

Dans cette partie, vous devez afficher en haut de la page dans le bloc contenu le titre suivant : Bonjour prenom.nom ! où prenom.nom est remplacé par sa valeur dans l'URL.

Question

Dans le dossier reseau-social, éditez un nouveau fichier fonctions-res.php et ajoutez une fonction retourne_auteur() qui retourne une chaîne de caractères contenant la valeur de prenom.nom se trouvant dans l'URL de la page.

Question

Dans l'en-tête de res.php, créez une variable globale $auteur en lui affectant la valeur retournée par votre fonction retourne_auteur() et incluez le fichier fonctions-res.php à l'aide de require_once.

Question

En haut du bloc contenu, affichez en gras et au centre le titre Bonjour $auteur ! où $auteur est remplacé par sa valeur.

Aide

Tout code PHP doit se trouver à l'intérieur des balises <?php instructions; ?>.

L'URL de la page se trouve dans la variable $_SERVER['REQUEST_URI']. Pour récupérer prenom.nom, il faut utiliser la fonction explode() avec "/" comme séparateur. Cette fonction retourne un tableau dont le deuxième élément est prenom.nom.

Interface pour créer un nouveau post

Vous allez maintenant mettre dans le bloc rose l'équivalent du formulaire suivant :

Question

Dans le bloc rose du fichier res.php, ajoutez un formulaire contenant les éléments suivants :

  • Une zone de saisie de texte multilignes nommée post_msg qui permet d'écrire un message à publier.
  • Un bouton Parcourir... nommé post_img qui permet de choisir localement une image à poster dont la taille maximale est de 500000 octets.
  • Un bouton Poster nommé action qui permet à l'utilisateur de soumettre sa publication.
Pour l'instant, les données du formulaire doivent être envoyées avec la méthode get.

Aide

Pour faire cette question, consultez la Partie 3 du cours.

Les élèments d'un formulaire se placent entre les balises <form> et </form>. Pour mettre en place un formulaire qui permet l'envoi de fichiers depuis la machine cliente vers le serveur, il faut utiliser <input type="file"> et ajouter l'attribut enctype="multipart/form-data" à la balise <form>.
Pour limiter la taille d'un fichier avant de l'envoyer au serveur, il faut utiliser <input type="hidden" name="MAX_FILE_SIZE" value="taille_max_octets" />

Pour en savoir plus sur les formulaires, vous pouvez aussi consulter cette page : https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires

Vous allez maintenant tester votre formulaire en postant un message de type texte et en l'affichant dans le bloc orange de la page.

Question

Dans le fichier res.php, affichez dans le bloc orange le message texte qui est saisi dans le champ multilignes du formulaire.

Complétez l'affichage précédent en ajoutant l'auteur du post ainsi que la date et l'heure.

Aide

Pour récupérer le contenu d'un champ du formulaire soumis avec la méthode get, il faut utiliser $_GET['nom_du_champ']. Par exemple, si vous avez donné le nom action au bouton de soumission du formulaire, vous pouvez faire : 

if ($_GET['action'] == "Poster") {
	echo "auteur : " . $auteur; }

Pour afficher la date et l'heure, il faut utiliser la fonction date(). Il y a plusieurs formats d'affichage. Vous pouvez par exemple utiliser le format date("Y-m-d H:i:s").

Utilisation des outils du navigateur pour visualiser le contenu de la requête HTTP

Dans cette partie, vous allez analyser ce qui se passe lorsque vous postez un message depuis votre navigateur.

Question

Ouvrez l'outil de votre navigateur qui permet de visualiser les requêtes HTTP et postez un message de type texte. Placez-vous sur la requête que vous venez de faire et observez les en-têtes et les paramètres de cette requête. Quelle est l'URL qui s'affiche ? Quels sont les paramètres qui sont transmis au serveur ? Pourquoi les paramètres sont-ils visibles dans l'URL ? Quelle est la taille de la requête en octets ?

Copiez tout le texte du sujet de TP et collez-le dans la zone de texte multilignes puis cliquez sur Poster. Que se passe t-il ? Pourquoi ? Quelle est la taille de la requête en octets ?

Aide

A priori, la taille maximale d'une URL est de 2048 caractères. La méthode GET transmet les paramètres du formulaire dans l'URL. Elle n'est donc pas adaptée pour transmettre des grosses quantités d'information. En particulier, elle ne permet pas de transmettre des fichiers. Dans ce cas, il faut utiliser la méthode POST : les données du formulaire sont alors transmises dans le corps de la requête HTTP plutôt que dans l'URL.

Les posts effectués dans le réseau social peuvent avoir une taille importante. Il est donc nécessaire d'utiliser la méthode POST plutôt que la méthode GET.

Question

Dans res.php, modifiez l'attribut method de la balise <form> en remplaçant get par post. Dans res.php et fonctions-res.php, remplacez toutes les occurrences de $_GET par $_POST.

Postez un nouveau message et observez la différence entre GET et POST en utilisant l'outil fourni par votre navigateur qui permet de voir les requêtes HTTP. Quelle est l'URL qui s'affiche ? Quels sont les paramètres qui sont transmis au serveur ? Que se passe t-il si vous postez un message qui contient tout le sujet du TP ?

Pour l'instant, le message posté s'affiche dans la zone orange et n'apparaît donc que dans la fenêtre de votre navigateur. Les autres étudiants ne peuvent pas visualiser ce message. Or, le but d'un réseau social est de partager les différents posts entre utilisateurs.

Stockage des données du réseau social dans un dossier partagé

Dans cette section, vous allez voir comment stocker et partager les posts de tous les utilisateurs du réseau social. Pour cela, il faut un espace partagé qui soit accessible en écriture par le serveur web et en lecture par tous les étudiants. Cet espace partagé est le dossier DATA qui se trouve dans le dossier parent de votre répertoire de connexion pxxxxxxxx.

Emplacement et contenu du répertoire DATA
Question

Ouvrez un terminal distant sur le serveur à l'aide de la commande ssh. Utilisez la commande pwd pour voir dans quel dossier vous êtes. Listez le contenu du répertoire DATA qui se trouve dans le répertoire parent de votre répertoire de connexion. Quelle commande utilisez-vous ? Que contient le répertoire DATA ?

Question

Utilisez la commande ls -l pour afficher les droits rwx du répertoire DATA et de son contenu. Essayez de créer un fichier dans le répertoire DATA avec la commande touch. Que constatez-vous ? Que contiennent les fichiers stockés dans le répertoire DATA ?

Aide

Sous Unix, le répertoire .. désigne le répertoire parent du répertoire courant.

Pour en savoir plus sur les droits sous Unix, consultez https://doc.ubuntu-fr.org/permissions

Format d'écriture des posts dans le répertoire DATA

Tous les posts de tous les utilisateurs sont stockés dans le répertoire DATA. Les posts sont soit un message texte (noté msg), soit une image (noté img), soit un commentaire (noté com). Pour chaque nouveau post, un fichier est créé dans le répertoire DATA dont le nom est $nbPost-$type.txt où $type correspond au type du post : msg, img ou com. Le premier post a le numéro 0. $nbPost est le numéro du nouveau post. Il est aussi égal au nombre de posts déjà effectués.
Si 7 posts ont déjà été effectués, le répertoire DATA contient 7 fichiers numérotés de 0 à 6. Par exemple : 

0-msg.txt  1-img.txt  2-img.txt  3-com.txt  4-msg.txt  5-com.txt  6-msg.txt

Chaque fichier stocke les informations relatives à un post : type du post, auteur, date, nombre de like et le contenu du post. Le contenu varie selon le type du post. Voici des exemples de fichiers de chaque type stockés dans le répertoire DATA : 

0-msg.txt		1-img.txt		2-img.txt
-------------------	-------------------	-------------------
message			image			image
prenom.nom1		prenom.nom2		prenom.nom1
2017-02-07 12:51:48	2017-02-07 12:52:48	2017-02-07 12:53:48
0			2			1

Bonjour les amis !	./IMG/1-chien.jpeg	./IMG/2-chaton.png
Mon 1er message !				Mon chat !
-------------------	-------------------	-------------------

3-com.txt		4-msg.txt		5-com.txt
-------------------	-------------------	-------------------
commentaire		message			commentaire
prenom.nom3		prenom.nom3		prenom.nom3
2017-02-07 12:54:48	2017-02-07 12:55:48	2017-02-07 12:56:48
10			0			5

./1-img.txt		J'aime vos images !	./4-msg.txt
Joli chien !		Continuez !		Moi aussi !
-------------------	-------------------	-------------------

Les quatre premières lignes de chaque fichier constituent ce que l'on appelle les métadonnées. La cinquième ligne est un retour à la ligne ("\n"). Il sépare les métadonnées du véritable contenu du post qui commence à la sixième ligne et qui varie selon le type de post.

Pour les posts de type image, l'image n'est pas contenue dans le fichier texte mais stockée dans le répertoire DATA/IMG/. Le fichier texte contient le chemin relatif de l'image. Un message texte peut être associé à l'image comme vous pouvez le voir dans les exemples ci-dessus. Par exemple, Mon chat ! est un petit texte associé à l'image 2-chaton.png. Remarquez que le nom d'une image est toujours précédé de $nbPost-.

Un commentaire peut être associé à une image ou un message déjà posté. Par exemple, le commentaire Joli chien ! qui correspond au 4ème post est associé au post 1-img.txt. Ce commentaire a été aimé 10 fois alors que l'image du chien n'a été aimée que 2 fois.

Question

Regardez les exemples de posts ci-dessus et répondez aux questions suivantes :
Quel est le contenu du premier message posté ? Par qui a t-il été posté ? Combien de fois ce message a t-il été aimé ?
Un texte a t-il été saisi dans la zone multilignes lors du post de l'image chien.jpeg ?
De quel type est le 6ème post ? Combien de fois a t-il été aimé ? A quel autre post fait-il référence ?

Utilisation d'une librairie déjà écrite

En informatique, une librairie est un ensemble de fonctions mises à disposition d'autres programmes. Pour vous aider, nous avons écrit une partie des fonctions PHP permettant de réaliser le réseau-social. Ces fonctions sont accessibles dans le fichier ../../LIB/librairie-res.php qui se trouve sur le serveur. Vous pouvez/devez lire le contenu de ce fichier mais vous ne pouvez pas le modifier.

Question

Dans un terminal distant, éditez le fichier ../../LIB/librairie-res.php. Regardez son contenu et essayez de le modifier. Que constatez-vous ? Utilisez la commande ls -l pour voir quels sont les droits Unix de la librairie. Pourquoi ne pouvez-vous pas modifier ce fichier ?

Question

En regardant le contenu de la librairie et le contenu du répertoire DATA, répondez aux questions suivantes :
Que contient la variable $nbPost ? Que contient le fichier nb-post.txt ?
Que fait la fonction prendre_un_post() ? Que retourne t-elle ?

Question

En haut de fonctions-res.php, à l'aide de require_once, incluez le fichier librairie-res.php en indiquant le bon chemin d'accès à ce fichier.

Aide

Attention : la fonction prendre_un_post() ne doit être appelée que lors de la création d'un nouveau post.

Ajout des posts de type message dans le répertoire partagé

Quand un utilisateur poste un message de type texte dans la zone multilignes sans inclure une image, il faut créer un fichier $nbPost-msg.txt où $nbPost contient le numéro du post à créer. Pour créer ce fichier, vous devez respecter le format présenté un peu plus haut. Dans un premier temps, vous allez créer ce fichier dans votre dossier reseau-social. Après avoir vérifié que la création du fichier est correcte, vous modifierez votre code pour que le fichier soit créé dans le répertoire partagé.

Question

Dans le fichier fonctions-res.php, ajoutez une fonction ajout_post_msg() qui crée le fichier $nbPost-msg.txt en mettant dedans :
message sur la première ligne
prenom.nom sur la deuxième ligne
la date sur la troisième ligne
0 sur la quatrième ligne
\n sur la cinquième ligne
la valeur du message posté par l'utilisateur sur les lignes suivantes

Question

Dans res.php, testez la fonction que vous venez d'écrire en l'appelant si les trois conditions suivantes sont réunies : l'utilisateur a cliqué sur le bouton Poster, la zone multilignes est non vide et aucune image n'a été postée. En utilisant la commande cat dans le terminal distant, vérifiez que le fichier créé a le bon nom et qu'il contient les informations attendues.

Question

Après avoir fait plusieurs tests, modifiez le code de la fonction ajout_post_msg() pour que les nouveaux posts soient créés dans le répertoire DATA partagé plutôt que dans votre dossier. Vérifiez que les posts que vous faites sont bien présents dans le répertoire partagé avec les posts des autres utilisateurs.

Aide

Pour initialiser $nbPost, il faut appeler la fonction prendre_un_post(); mais vous ne devez l'appeler qu'une seule fois et seulement si vous créez un nouveau post.

Pour faire un saut de ligne dans un fichier texte, il faut ajouter \n à la fin de la ligne.

Pour ajouter la première ligne dans le fichier $fichier, utilisez file_put_contents($fichier, "message\n", LOCK_EX);

Pour ajouter la ligne $ligne à la fin du fichier, il faut faire file_put_contents($fichier, $ligne, FILE_APPEND|LOCK_EX);.

Pour récupérer l'auteur du post, il faut utiliser la variable globale $auteur. N'oubliez pas de faire global $auteur au début de chaque fonction qui utilise la variable globale.

Pour récupérer la date, vous pouvez utiliser à la fonction date("Y-m-d H:i:s").

Pour récupérer la valeur du message posté par l'utilisateur, il faut utiliser $_POST['nom_du_champ'] où nom_du_champ est le nom que vous avez donné à la zone multilignes.

Pour tester si un texte a été saisi dans la zone multilignes sans joindre d'image, vous pouvez faire le test suivant : if (!empty($_POST['post_msg']) && empty($_FILES['post_img']['name'])) {

Ajout des posts de type image dans le répertoire partagé

Quand un utilisateur poste un message de type image, il clique sur le bouton Parcourir... et choisit un fichier image sur l'ordinateur local. Ce fichier sera envoyé au serveur lors du clic sur le bouton Poster. S'il le souhaite, l'utilisateur peut associer un texte à l'image en remplissant la zone de saisie de texte multilignes. Après le post, il faut créer sur le serveur un fichier $nbPost-img.txt où $nbPost contient le numéro du post à créer. Pour créer ce fichier, vous devez respecter le format présenté un peu plus haut. Dans un premier temps, vous allez créer ce fichier dans votre dossier reseau-social. Après avoir vérifié que la création du fichier est correcte, vous modifierez votre code pour que le fichier soit créé dans le répertoire partagé.

Question

Dans le fichier fonctions-res.php, ajoutez une fonction ajout_post_img() qui crée le fichier $nbPost-img.txt en mettant dedans :
image sur la première ligne
prenom.nom sur la deuxième ligne
la date sur la troisième ligne
0 sur la quatrième ligne
\n sur la cinquième ligne
./IMG/$nbPost-nom_image sur la sixième ligne
le texte associé à l'image (si l'utilisateur en a mis un) sur les lignes suivantes

Question

Dans res.php, testez la fonction que vous venez d'écrire en l'appelant si l'utilisateur a cliqué sur le bouton Poster et si une image a été postée. En utilisant la commande cat dans le terminal distant, vérifiez que le fichier créé a le bon nom et qu'il contient les informations attendues.

Question

Après avoir fait plusieurs tests, modifiez le code de la fonction ajout_post_img() pour que les nouveaux posts soient créés dans le répertoire DATA partagé plutôt que dans votre dossier. Vérifiez que les posts que vous faites sont bien présents dans le répertoire partagé avec les posts des autres utilisateurs.

Aide

Pour construire le fichier, vous procéderez de la même manière que pour un post de type message.

Pour récupérer le nom du fichier image posté, il faut utiliser $_FILES['post_img']['name'].

Pour terminer l'ajout d'un post de type image, il faut stocker le fichier image reçu par le serveur dans le dossier partagé DATA/IMG/. La librairie contient une fonction verifie_image($fichier) qui renvoie true si le fichier reçu est bien une image et que sa taille est inférieure à 500 Ko, false sinon. Dans le cas où la fonction renvoie true, elle stocke le fichier image reçu dans le répertoire partagé. $fichier doit contenir le nom du fichier image.

Question

Au début de votre fonction ajout_post_img(), créez la variable $fichier comme suit :
$fichier=$nbPost . "-" . $_FILES['post_img']['name'];
Appelez la fonction verifie_image($fichier). Si elle retourne true, votre fonction doit faire la création du post image comme auparavant, sinon elle doit afficher un message d'erreur indiquant à l'utilisateur que l'image postée n'a pas été acceptée par le serveur.

Question

Testez que tout fonctionne correctement dans les deux cas : image valide ou invalide. Vérifiez systématiquement ce qui est ajouté ou non dans les dossiers DATA et DATA/IMG.

Aide

Remarque : vous êtes obligés de prendre un post avant d'appeler la fonction verifie_image($fichier). Du coup, des posts peuvent être pris sans qu'aucun fichier ne soit créé dans le répertoire DATA.

A faire avant la prochaine séance

Pendant cette séance, vous avez mis en place l'architecture de la page du réseau social et vous avez terminé la partie qui permet de poster un message ou une image dans le réseau social. A la prochaine séance, il faudra :

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

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.