Introduction réseaux et web : TP
Le réseau social, deuxième séance
Ce document est soumis auCopyright © présent sur cette page.
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.
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.
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 :
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.
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é.
Aimer et Commenter 
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".
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.
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 ?
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.
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";
}
?>
Aimer et Commenter dans l'affichage d'un postVoici 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 :
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 où $post est égal à 0-msg si le post est stocké dans le fichier 0-msg.txt.
Dans le fichier fonctions-res.php, modifiez la fonction affiche_post($fichier) pour qu'elle contienne les éléments suivants :
$post qui doit contenir le nom du fichier sans l'extension .txt,
Aimer (via la balise
<button>) dont l'attribut name vaut "action" et value vaut "Aimer_$post",
class est nbLike,
Commenter dont les attributs name et value valent respectivement "action" et "Commenter_$post",
class et name sont respectivement
"commentaire" et "post_com_$post".
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.
Aimer et Commenter "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.
Regardez le code de la fonction aimer($fichier) qui se trouve dans la librairie. Que fait-elle ? Que doit contenir $fichier avant l'appel ?
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.
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.
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 où $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é.
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
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.
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.
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 !
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.
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".
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.
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".
Pour parcourir le tableau des fichiers de type commentaire, vous pouvez utiliser une boucle foreach ($tab_coms as $fichier_com).
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.
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
message et/ou image),1, 5, 10, 25 ou 50.
Dans le fichier res.php, modifiez le bloc menu en lui ajoutant :
name est "choix_img" pour l'une, "choix_msg" pour l'autre et l'attribut value est "images" pour l'une, "messages" pour l'autre,
name est "choix_com" et l'attribut value est "Avec commentaires" pour l'une, "Sans commentaires" pour l'autre,
name est "choix_nbp",
Afficher dont l'attribut name est "action" et l'attribut
value est "Afficher".
<form> si nécessaire pour que tous les champs de la page soient à l'intérieur du même formulaire.
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.
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.
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.
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.
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()
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 !
Pour travailler depuis chez vous sur le serveur web que vous utilisez en TP, suivez les instructions sur cette page.