Décryptage - viewtopic_body - phpBB2

Tout d'abord, ce décryptage a été écrit pour la version phpBB2 de forumactif. Même si les variables & boucles peuvent être identique sur les autres versions, les balises HTML sont différentes sur les autres versions et les lignes données à titre indicatif seront fausses.

Ce template, gère l'affichage d'un sujet sur votre forum (le poste, les profils, les signatures ...).


OUI, c'est un long tuto... Mais soit je le faisais complet, soit je ne faisais rien ... Pardonnez mon zèle donc ! x)

Bon déjà, ouvrez votre template par défaut, et prenez un peu de recul pour regarder le code dans sa globalité. Vous pourriez même le décrypter sans moi en vrai, vous allez voir, un vrai jeu d’enfant !
Ce template commence par 43 lignes de code JavaScript. Un langage de programmation un peu complexe que je ne maîtrise pas à la perfection alors je vais sauter ces lignes de code plutôt que de vous les décrire et risquer de dire des bêtises. N’y touchez simplement pas, sinon, ça risque de faire planter votre code.

Ensuite, le reste n'est simplement que 10 tableaux affichés les uns après les autres. Voyons un peu ça en détail.

tableau n°1 va coder pour les boutons nouveau, répondre, mais aussi pour afficher l'arborescence site:catégorie:forum ... Et le bouton twitter/fb/+ si c'est activé !

tableau n°2 c'est celui que je vais détailler, il code pour l'affichage des messages, des avatars et des signatures

---

Le tableau n°2 - avatar/message/signature

Tableau qui contient 6 lignes, allons y progressivement

1) 1ère ligne (ligne 108 à 120).

C'est le haut du tableau
Une ligne avec une cellule. Cette dernière a une taille définie et un colspan (c'est à dire une fusion de 3 cellules sur la même ligne). On retourne donc lire le tuto sur les tableaux si ce n'est pas clair !

Dans cette cellule, on a la présence d'une table imbriquée. Cela aurait pu être évité, mais bon, les choix de FA sont parfois étranges ...  :-D:

Dans ce tableau il y a une ligne de trois colonnes.
La première, inutile, fait 9% de large, et devinez quoi, est invisible ... M'enfin, c'est pour que le td suivant puisse s'aligner puisqu'on a une dernière colonne de 9% également après ...

La deuxième contient la variable :
{TOPIC_TITLE}, qui sans vous surprendre, affiche le titre du sujet !

Et enfin, la troisième, va afficher les petites icônes (ici flèches jaunes) qui permettent de naviguer d'un sujet à un autre ou de descendre à la fin de ce sujet !

Je suis sûre que vous ne vous en êtes jamais servis (moi en tout cas jamais ! x)

Mais sachez que les variables :
{U_VIEW_OLDER_TOPIC} > appelle le lien vers le sujet précédent
{L_VIEW_PREVIOUS_TOPIC} > affiche le logo pour aller voir le sujet précédent dans la liste.
{U_VIEW_NEWER_TOPIC} > appelle le lien vers le sujet suivant
{L_VIEW_NEXT_TOPIC} > affiche le logo pour aller voir le sujet suivant dans la liste.
==> on est d'accord que ce n'est pas la réponse suivante/précédente dont je parle ici. C'est carrément le sujet suivant / précédent dans le forum/sous forum !
{L_GOTO_DOWN} > affiche le logo pour aller voir le dernier message posté dans le sujet

Et le lien vers le dernier sujet me direz-vous ?
Et bien voici !

Code:

href="#bottom"

non, ce n'est pas une variable !
C'est via un identifiant qu'on envoi la fenêtre tout en bas !

Allez, on passe à la ligne suivante !

2) 2ème ligne (ligne 125 à 129).

Rapide et efficace ! C'est une toute petite ligne ! Concrètement, on a l'ouverture de la boucle :
topicpagination, qui va permettre d'affiche si besoin le nombre de page que le sujet contient, et de créer des liens vers les différentes pages !

{PAGINATION} > affiche la pagination (que c'est surprenant !)

3) 3ème ligne (ligne 132 à 135).

Avant de commencer la 3ème ligne, nous avons une variable, comme ça, qui sort de nulle part. Mais qu'est ce donc ? Les amoureux de la langue de Shakespeare rirons de mon ajout, mais si je vous dit que poll c'est le mot anglais de sondage, et display c'est pour position, ça vous parle ?  :lovely:

{POLL_DISPLAY} > affiche le template viewtopic_poll_ballot, soit une ligne de tableau supplémentaire qui affichera les sondages si besoin.

La ligne suivant, et aussi courte que la précédente. 2 colones sont crées, et si on ne se souvient plus de la différence entre td et th, on retourne dans le tuto des tableaux. Je vous l'ai dit, c'est la base et la référence !

A gauche, on a l'affichage du mot auteur du sujet via la variable : {L_AUTHOR}. Et à droite, l'affichage du mot message via la variable {L_MESSAGE}. Fastoch' !
Donc si on veut changer ces mots, on enlève les variables, et on écrit le texte de nos rêves !

ouuuh !! on y arrive !! ENFIN !
Ouverture la boucle postrow. Celle qui gère l'affichage des messages d'un sujet ! C'est une boucle, c'est à dire que la structure codée ici se répétera autant de fois qu'il y aura de message !!

4) 4ème ligne (ligne 137 à 141).

Encore un choix que FA a fait et que je trouve étrange ... Mais il doit y avoir une raison !! x) Ici, on a une boucle qui dit : contenu caché... voilà voilà ! x)
Si un jour, la lumière se fait dans mon esprit sur ces lignes, vous serez les premiers au courant !  :-D:

5) 5ème ligne (ligne 153 à 253).

Allez on respire un bout coup et on plonge. C'est la meilleure partie de ce tuto !!  :superhero:

Il s'agit de coder ceci !  :ordi:


On a donc une super ligne, qui appelle dans ses attributs via des variables les informations à propos des messages référencés dans ce sujet.

Puis, on se détend, car il n'y a que 2 colonnes !! Rien de compliqué donc dans ce tableau !

a) première colonne - l'avatar et les informations du posteur

Cette première colonne fait 150px de large, et on trouve deux variables dans ses attributs :
{postrow.displayed.ROW_CLASS} et {postrow.displayed.THANK_BGCOLOR}. La première va permettre de mettre en style la colonne en appelant la classe de base, la deuxième va écraser le style de la première si le message à été remercier en changeant la couleur de fond !

Ensuite, on a la variable : {postrow.displayed.POSTER_NAME} qui est stylisée via la class name. Cela va afficher le nom de votre pseudo, comme vous vous en doutez. C'est un affichage sous forme de lien, et l'adresse de votre profil est récupéré via la variable {postrow.displayed.U_POST_ID} .

Ensuite, on a l'ouverture d'une balise span, qui va permettre la mise en page de toute la liste de variables qui suit.

Tout simplement :
{postrow.displayed.POSTER_RANK} > affiche le rang du posteur
{postrow.displayed.RANK_IMAGE} > affiche l'image du rang du posteur
{postrow.displayed.POSTER_AVATAR} > affiche l'avatar du posteur

Simple comme bonjour quand on prend la peine de lire le contenu de la variable !

Ensuite, on a une boucle : profile_field, ni plus ni moins, cela correspond à toutes les informations qu'on peut remplir (field > champ en anglais) dans les profils !

{postrow.displayed.profile_field.LABEL} > affiche l'intitulé du champ
{postrow.displayed.profile_field.CONTENT} > affiche le contenu du champ {postrow.displayed.profile_field.SEPARATOR} > affiche le séparateur choisi entre les champs.

Après cela, on a une dernière variable :
{postrow.displayed.POSTER_RPG} > qui va afficher les informations de la feuille de personnage si vous l'avez activé ! et les champs qu'elle contient.

La colonne est presque terminée !! En effet, pour être parfaitement complète, je dois juste signaler que oui, il y a bien une image qui s'affiche ici. Encore un choix étrange ...  :fou: Mais ça sert à faire un espacement, ni plus ni moins ^^

b) deuxième colonne - le message et informations à propos

On continue avec la mise en forme du message ? allez! GO !

Cette colonne contient un tableau, à 3 lignes.

La première ligne va coder pour le titre du sujet, la date à laquelle il a été posté et aussi les boutons pour citer, répondre, supprimer... Contient deux colonnes :

La première colonne contient : {postrow.displayed.MINI_POST_IMG} qui récupère l'url qui va permettre la petite icône de sujet (la petite page blanche par défaut).  {L_POST_SUBJECT} qui va afficher le texte Sujet.
{postrow.displayed.POST_SUBJECT} va afficher le titre du sujet.
{postrow.displayed.MINI_TIME_IMG} récupère l'url qui va permettre la petite icône de date (la petite horloge par défaut). Enfin, {postrow.displayed.POST_DATE} va afficher la date à laquelle le sujet ou la réponse à été posté.

La deuxième colonne n'est qu'une suite de variable qui vont permettre l'affichage des boutons :
{postrow.displayed.THANK_IMG} >> pour remercier
{postrow.displayed.MULTIQUOTE_IMG} >> pour citer plusieurs fois la réponse
{postrow.displayed.QUOTE_IMG} >> pour citer la réponse
{postrow.displayed.EDIT_IMG} >> pour éditer la réponse
{postrow.displayed.DELETE_IMG} >> pour supprimer la réponse
{postrow.displayed.IP_IMG} >> pour voir l'adresse IP du posteur
{postrow.displayed.REPORT_IMG} >> pour envoyer un rapport

La ligne suivante ne contient qu'une colonne qui prend toute la place, et ne contient qu'une balise : hr, elle permet de faire un trait horizontal de séparation.

Voyons maintenant la 3ème et dernière ligne de ce tableau :

Comprend plusieurs boucles dont : switch_vote_active. Cela signifie que tout ce qui est codé entre la boucle BEGIN et END ne va s'afficher si vous avez activé les votes sur votre forum.

Rarement activé sur les forums, je ne vais pas m'attarder dessus, mais sachez que la première partie code pour le bouton +, puis l'affichage de la barre en elle même, et enfin en dernière partie pour le bouton -.

Ensuite, nous avons une balise div qui s'ouvre, avec comme class postbody. Elle contient la variable {postrow.displayed.MESSAGE} qui affiche le texte du message contenu dans cette réponse.

Autrement dit, si vous voulez justifier automatiquement les postes de votre forum, c'est à cette class qu'il faut ajouter le text-align:jusfity;

Une boucle s'ouvre après cela : switch_attachments, c'est pour si vous avez des pièces jointes à votre message, le contenu de la boucle s'affichera si besoin !

Après cette boucle que je ne vais pas détailler car presque jamais utilisé, vous avez la boucle : switch_signature, elle très répendu ! C'est l'affichage des signatures. La signature en elle même est appelée par la variable : {postrow.displayed.SIGNATURE} et est entourée par une div qui a pour class signature_div (nom très recherché comme vous pouvez le constater ! x))

Avant de fermer la ligne, et le tableau vous avez la variable : {postrow.displayed.EDITED_MESSAGE} qui va afficher si le message a été édité, si oui, par qui, quand et pourquoi.

Et cela clôture le tableau, puis la 5ème ligne !

6) 6ème ligne (ligne 153 à 253).

Allez, courage ! Vous avez fait le pire ! Il ne reste plus qu'une petite ligne que je vais vous décrire pour ce tutoriel !

Deux colonnes, on retrouve un cadre en dessous de l'avatar et une colonne en dessous du messages postés.

sous l'avatar, on a 2 flèches (jaune par défaut), qui permettent d'aller en haut du sujet ou tout en bas.

Grâce à deux liens contenant des ancres (#top ou #bottom), pour tout savoir des ancres, je vous renvois à

{L_BACK_TO_TOP} affiche l'icone de la flèche vers le haut, et {L_GOTO_DOWN} l'icone de la flèche vers le bas comme vous pouvez vous en douter !

Dans la deuxième colonne on rencontre ces variables suivantes :
{postrow.displayed.PROFILE_IMG} > affiche le bouton pour aller voir le profil du posteur
{postrow.displayed.PM_IMG} > affiche le bouton pour envoyer un MP au posteur
{postrow.displayed.EMAIL_IMG} > affiche le bouton pour envoyer un mail au posteur

La boucle contact_field permet un affichage de la variable {postrow.displayed.contact_field.CONTENT} uniquement si les champs de contacte ont été développés dans votre panneau d'admindistraiton, et vont afficher le site web, le lien fb etc...
                                       
La dernière variable qui clôture ce tuto sera : {postrow.displayed.ONLINE_IMG} > affiche le bouton pour signaler si le posteur est en ligne ou non !

Et c'est terminé pour ce tableau !!  :superhero:

J'essayerai de détailler les autres tableaux de ce templates un peu plus tard !

Vous avez déjà de quoi bien bidouiller ! Je vous attend dans la rubrique avis sur vos code ou LS pour contempler vos merveilles !

---

Récap des variables importantes!

• {TOPIC_TITLE} > affiche le titre du sujet
  
• {U_VIEW_OLDER_TOPIC} > appelle le lien vers le sujet précédent
  
• {L_VIEW_PREVIOUS_TOPIC} > affiche le logo pour aller voir le sujet précédent dans la liste.
  
• {U_VIEW_NEWER_TOPIC} > appelle le lien vers le sujet suivant
  
• {L_VIEW_NEXT_TOPIC} > affiche le logo pour aller voir le sujet suivant dans la liste.
  
• {L_GOTO_DOWN} > affiche le logo pour aller voir le dernier message posté dans le sujet
  
  
• {PAGINATION} > affiche la pagination
  
  
• {POLL_DISPLAY} > affiche le templates viewtopic_poll_ballot, soit une ligne de tableau supplémentaire qui affichera les sondages.
  
  
• {L_AUTHOR} > affiche le mot auteur
  
• {L_MESSAGE} > affiche le mot message
  
  
• {postrow.displayed.ROW_CLASS} > mise en forme du cadre de l'avatar
  
• {postrow.displayed.THANK_BGCOLOR} > changemment de la couleur de fond si le message est remercié.
  
• {postrow.displayed.POSTER_NAME} > affiche le pseudo
  
• {postrow.displayed.U_POST_ID} > récupère le lien vers le profil du posteur
  
• {postrow.displayed.POSTER_RANK} > afficher le rang du posteur
  
• {postrow.displayed.RANK_IMAGE} > affiche l'image du rang du posteur
  
• {postrow.displayed.POSTER_AVATAR} > affiche l'avatar du posteur
  
• {postrow.displayed.profile_field.LABEL} > affiche l'intitulé du champ
  
• {postrow.displayed.profile_field.CONTENT} > affiche le contenu du champ
  
• {postrow.displayed.profile_field.SEPARATOR} > affiche le séparateur choisit entre les champs.
  
• {postrow.displayed.POSTER_RPG} > affiche les informations de la feuille de personnage
  
  
• {postrow.displayed.MINI_POST_IMG} > récupère l'url qui va permettre la petite icone de sujet (la petite page blanche par défaut).  
  
• {L_POST_SUBJECT} > affiche le texte Sujet.
  
• {postrow.displayed.POST_SUBJECT} > affiche le titre du sujet.
  
• {postrow.displayed.MINI_TIME_IMG} > récupère l'url qui va permettre la petite icone de date (la petite horloge par défaut).
  
• {postrow.displayed.POST_DATE} > affiche la date à laquelle le sujet ou la réponse à été posté.
  
  
• {postrow.displayed.THANK_IMG} > affiche le bouton pour remercier
  
• {postrow.displayed.MULTIQUOTE_IMG} > affiche le bouton pour citer plusieurs fois la réponse
  
• {postrow.displayed.QUOTE_IMG} > affiche le bouton pour citer la réponse
  
• {postrow.displayed.EDIT_IMG} > affiche le bouton pour éditer la réponse
  
• {postrow.displayed.DELETE_IMG} > affiche le bouton pour pour supprimer la réponse
  
• {postrow.displayed.IP_IMG} > affiche le bouton pour pour voir l'adresse IP du posteur
  
• {postrow.displayed.REPORT_IMG} > affiche le bouton pour pour envoyer un rapport
  
  
• {postrow.displayed.MESSAGE} > affiche le texte du message contenu dans cette réponse.
  
  
• {postrow.displayed.SIGNATURE} > affiche la signature du posteur
  
  
• {postrow.displayed.EDITED_MESSAGE} > affiche si le message a été édité, si oui, par qui, quand et pourquoi.
  
  
• {L_BACK_TO_TOP} > affiche l'icone de la flèche vers le haut
  
• {L_GOTO_DOWN} > affiche l'icone de la flèche vers le bas
  
  
• {postrow.displayed.PROFILE_IMG} > affiche le bouton pour aller voir le profil du posteur
  
• {postrow.displayed.PM_IMG} > affiche le bouton pour envoyer un MP au posteur
  
• {postrow.displayed.EMAIL_IMG} > affiche le bouton pour envoyer un mail au posteur
  
• {postrow.displayed.contact_field.CONTENT} affiche les champs de contacte développés
  
• {postrow.displayed.ONLINE_IMG} > affiche le bouton pour signaler si le posteur est en ligne ou non !
  

---

En espérant que ce tuto, vous a permis d’y voir un plus clair ! Si une question subsiste, n'hésitez pas à répondre à ce sujet pour demander des éclaircissements.

Enjoy coding !