LIFASR2 Introduction réseaux et web : TP4

Le réseau social, deuxième 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

Lors de la séance précédente, vous avez mis en place l'architecture de la page du réseau social et vous avez réalisé la partie qui permet de poster un message ou une image dans le réseau social.

Lors de cette deuxième séance, il faudra :


Voici un rappel de la structure des fichiers stockés dans le répertoire DATA et contenant des posts de type message, image ou commentaire :
            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 !
            -------------------	-------------------	-------------------
        
Le fichier nb-post.txt contient le numéro du prochain post. Il est aussi égal au nombre de posts déjà effectués.

Affichage du dernier post

Lors du précédent TP, vous avez réalisé le formulaire et les programmes qui permettent la création des fichiers stockant les posts créés côté serveur. Dans cette section, l'objectif est d'afficher dans votre navigateur le dernier post publié.

Affichage du dernier post sans les boutons Aimer et Commenter
Voici un exemple de ce que vous devez obtenir après avoir traité les trois questions suivantes dans le cas où le dernier post est de type message :
Voici un exemple de ce que vous devez obtenir après avoir traité les trois questions suivantes dans le cas où le dernier post est de type image :
Question

Dans le fichier fonctions-res.php, créez la fonction affiche_post($fichier) qui prend en paramètre un nom de fichier contenant un post et l'affiche au sein d'un nouveau bloc. L'attribut class du bloc doit prendre la valeur "publication".

Question

Editez le fichier style-res.css et ajoutez un nouveau style .publication qui s'appliquera à chaque post affiché dans la page. Dans ce style, vous pourrez préciser les propriétés background-color, padding et margin qui vous conviennent.

Question

La librairie librairie-res.php contient une fonction retourne_dernier_post() qui retourne le nom du dernier post (message ou image) créé. Dans le ficher res.php, affichez le dernier post créé en utilisant la fonction de la librairie et la fonction affiche_post($fichier) que vous venez de créer.
Testez votre code. Pourquoi le dernier post affiché n'est pas forcément un post à vous ? Quel post s'affiche si le dernier post est un commentaire ?

Question

Entre le bloc qui permet de faire les posts et celui qui permet d'afficher les post, affichez le nom et la valeur de chaque champ en provenance du formulaire. Cela vous aidera pendant tout le TP.

Aide

Pour récupérer le contenu du fichier $fichier, utilisez la fonction file($chemin-fichier) qui retourne un tableau dont chaque élément est une ligne du fichier.

L'affichage d'un post est différent selon qu'il est de type message ou image. Pour savoir quel est le type du post, il suffit de récupérer la valeur de la première ligne du fichier.

Pour créer du code HTML dans une fonction php, il faut utiliser echo suivi du code HTML que l'on veut renvoyer au navigateur.
Pour afficher une image en HTML, il faut utiliser la balise <img>.

Pour afficher tous les champs en provenance du formulaire, il faut parcourir le tableau $_POST :

               <?php
                   foreach ($_POST as $nom => $valeur) {
                       echo "$nom = $valeur <br/> \n";
                   }
               ?>
            

Ajout des boutons Aimer et Commenter dans l'affichage d'un post

Voici un exemple de ce que vous devez obtenir après avoir traité les questions suivantes dans le cas où le dernier post est de type message :

Voici un exemple de ce que vous devez obtenir après avoir traité les questions suivantes dans le cas où le dernier post est de type image :

A chaque post affiché dans la page doit correspondre un bouton Aimer et un bouton Commenter. Comme pour les autres boutons de soumission du formulaire, ces boutons auront tous comme attribut name="action". Néanmoins, il est nécessaire de distinguer tous les boutons Aimer (respectivement Commenter) puisqu'un clic sur l'un de ses boutons correspond à une action à effectuer pour le post auquel le bouton est associé. Pour cela, nous vous proposons d'associer une valeur différente à chaque bouton. Par exemple, vous utiliserez value="Aimer_$post" pour les boutons Aimer$post est égal à 0-msg si le post est stocké dans le fichier 0-msg.txt.

Question

Dans le fichier fonctions-res.php, modifiez la fonction affiche_post($fichier) pour qu'elle contienne les éléments suivants :

Vérifiez que l'affichage du dernier post est correct et que le code source de la page est conforme à ce qui est demandé.

Aide

Pour que la valeur du bouton soit différente de ce qui s'affiche dans le bouton, il faut utiliser la balise <button> au lieu de <input>.

Attention : la valeur d'un champ de formulaire ne doit pas contenir le caractère point. Il faut donc extraire la partie du nom de fichier sans l'extension avec la fonction explode().

Attention : les boutons Aimer et Commenter doivent faire partie de votre formulaire. Il faut donc placer la balise </form> qui ferme le formulaire en conséquence.

Maintenant que les boutons Aimer et Commenter ont été ajoutés, il faut écrire les programmes qui vont réaliser l'action demandée.

Ajout des fonctionnalités Aimer et Commenter
Ajout d'un "j'aime"

Quand un utilisateur clique sur le bouton Aimer, il faut récupérer le nom du post associé à ce bouton et modifier le fichier qui contient ce post en incrémentant la quatrième ligne du fichier. Pour vous aider, nous vous fournissons dans la librairie la fonction qui fait cela.

Question

Regardez le code de la fonction aimer($fichier) qui se trouve dans la librairie. Que fait-elle ? Que doit contenir $fichier avant l'appel ?

Question

Dans le fichier res.php, appelez la fonction aimer($fichier) lorsque l'utilisateur clique sur le bouton Aimer. Testez en cliquant plusieurs fois sur le bouton Aimer.

Aide

La valeur d'un bouton Aimer est Aimer_$post. Donc pour savoir si l'utilisateur a cliqué sur un de ces boutons, il faut utiliser la fonction explode pour récupérer la première partie de l'action, Aimer dans ce cas. Cet appel de explode vous permettra également de récupérer la deuxième partie, $post dans ce cas.

Ajout d'un commentaire

Quand un utilisateur commente un post dans la zone multilignes dédiée et clique sur le bouton Commenter, il faut récupérer le nom du post associé à ce bouton et créer un nouveau fichier $nbPost-com.txt$nbPost contient le numéro du post à créer. Ce numéro se trouve dans le fichier nb-post.txt. Pour créer le fichier $nbPost-com.txt, vous devez respecter le format présenté un peu plus haut dans les fichiers exemple 3-com.txt et 5-com.txt.

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_com() qui crée le fichier $nbPost-com.txt en mettant dedans :
commentaire 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
le nom du fichier contenant le post commenté sur la sixième ligne (par exemple ./4-msg.txt s'il s'agit d'un commentaire du post numéro 4)
la valeur du commentaire 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 deux conditions suivantes sont réunies : l'utilisateur a cliqué sur le bouton Commenter et la zone multilignes associée à ce bouton est non vide. 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_com() 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 $nbPost-com.txt, vous procéderez de la même manière que pour un post de type message en adaptant le contenu du fichier.

Pour récupérer $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.

La valeur d'un bouton Commenter est Commenter_$post. Donc pour savoir si l'utilisateur a cliqué sur un de ces boutons, il faut utiliser la fonction explode pour récupérer la première partie de l'action, Commenter dans ce cas. Cet appel de explode vous permettra également de récupérer la deuxième partie, notée $post dans ce cas. C'est grâce à $post que vous pouvez construire le nom du fichier contenant le post commenté à mettre sur la sixième ligne.

Maintenant que vous pouvez poster des commentaires, il faut les afficher au bon endroit dans la page !

Affichage des commentaires liés à un post

Pour récupérer tous les commentaires associés au post $fichier, vous pouvez utiliser la fonction retourne_tab_coms($fichier) de la librairie qui retourne un tableau contenant les noms de tous les fichiers de type commentaire qui sont liés au post $fichier. A l'aide de cette fonction, vous allez pouvoir ajouter l'affichage de tous les commentaires relatifs à un post en dessous de ce post.

Question

A l'aide de la fonction retourne_tab_coms($fichier), modifiez la fonction affiche_post($fichier) contenue dans le fichier fonctions-res.php pour que celle-ci gère aussi l'affichage des commentaires liés à un post. Votre fonction doit afficher les commentaires au sein d'un bloc possédant l'attribut class="commentaire".

Question

Vérifiez que l'affichage des commentaires est correct. N'oubliez pas de tester le cas où plusieurs commentaires sont associés à un même post.

Question

Ajoutez la possibilité d'aimer un commentaire via un bouton Aimer avec comme attributs name="action" et value="Aimer_$post"). Le nombre de like liés à ce commentaire doit être contenu dans un bloc class="nbLike".

Aide

Pour parcourir le tableau des fichiers de type commentaire, vous pouvez utiliser une boucle foreach ($tab_coms as $fichier_com).

Choix par l'utilisateur des posts à afficher dans la page

Dans cette partie, il s'agit de permettre à l'utilisateur de choisir les posts qu'il souhaite afficher dans sa page. Pour cela, il faut créer un formulaire qui permet d'exprimer ses choix puis écrire le programme qui va faire l'affichage en fonction des choix exprimés dans le formulaire.

Création du menu permettant de choisir les posts à afficher

Dans cette section, il faut créer le menu du bloc de gauche qui est resté vide jusqu'à présent. Pour cela, vous allez ajouter des champs dans le formulaire de la page. En effet, la page doit contenir un seul formulaire afin de conserver les informations de tous les blocs lorsque l'utilisateur clique sur un bouton de soumission. Le menu doit permettre de choisir

Voici un exemple de ce que vous devez obtenir après avoir répondu aux questions qui suivent :

Question

Dans le fichier res.php, modifiez le bloc menu en lui ajoutant :

N'oubliez pas de déplacer la balise <form> si nécessaire pour que tous les champs de la page soient à l'intérieur du même formulaire.

Aide

Pour créer des boutons radio ou des cases à cocher il faut que l'attribut type de la balise input soit respectivement radio et checkbox.

Pour qu'une case soit cochée par défaut, il faut ajouter le mot-clé checked dans les balises input de type checkbox et radio. Pour une liste déroulante, il faut utiliser la propriété selected="selected".

Lorsque l'utilisateur fait un post (bouton Poster ou Commenter) ou un like (bouton Aimer), il clique sur un bouton qui n'est pas le bouton Afficher. Pourtant, il faut que la page qui va être renvoyée au navigateur conserve les choix qui ont été faits dans le menu d'affichage. Il s'agit donc de remettre dans le menu du formulaire les valeurs des différents champs telles qu'elles étaient avant la soumission.

Question

Que fait la fonction choix_courant() contenue dans librairie-res.php ? Dans res.php, modifiez le menu en appelant cette fonction plusieurs fois avec le bon paramètre pour re-cocher les cases qui étaient déjà cochées et remettre dans la liste déroulante la valeur précédente. Vérifiez que tout fonctionne comme prévu.

Les appels de la fonction choix_courant() remplacent les valeurs par défaut que vous avez pu mettre dans la première version du menu.

Réalisation de l'affichage selon les choix de l'utilisateur

Il s'agit maintenant de modifier l'affichage des posts pour afficher les posts qui correspondent aux choix exprimés par l'utilisateur dans le menu d'affichage.

Question

Modifiez la fonction affiche_post($fichier) du fichier fonctions-res.php afin de n'afficher les commentaires du post que si l'utilisateur a choisi "Avec commentaires" dans le menu.

Question

Que fait la fonction retourne_tab_50derniersposts($choix) contenue dans librairie-res.php ? Appelez cette fonction et affichez le tableau retourné dans la page à l'aide d'une boucle foreach()

Question

Modifiez le fichier res.php pour afficher les posts selon les choix effectués dans le menu d'affichage. Vous pouvez utiliser les fonctions retourne_tab_50derniersposts($choix) et affiche_post($fichier). Vérifiez que tout fonctionne en testant tous les cas possibles.

Bravo, vous avez fini le réseau social ! Si vous avez du temps, n'hésitez pas à faire des améliorations !

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.