Les Tutos de Gabriel

Créer un Forum

Forum - Le Sommaire

Tableau de bord du Forum

Cette page va nous permettre de commencer à construire la page d'entrée de notre forum.
Nous y trouverons nos catégories et leurs rubriques, avec les liens qui permettront de créer les questions ou sujets.

Important : vous remplacerez le nom "sommaire" utilisé pour cet exemple, par le nom réel de votre table "sommaire" qui pourrait être préfixé comme : "sommaire" ou "af_sommaire", etc. Ou avoir un nom complètement différent pour le même usage.

Même chose pour les tables "categories", "rubriques", "billets", "reponses" et autres tables que nous serons amenés à utiliser.

1 - Commencez en créant une page "modules/forum/forum0001.php" dans le sommaire de votre base de données.
INSERT INTO `sommaire` (`id`, `Dates`, `Dossier`, `Fichier`, `Article`, `Titre`, `Soustitre`, `Rubrique`, `Auteur`, `MotsCles`, `Description`, `Protege`, `Vue`, `Compteur`, `commentaire`, `Sitemap`) VALUES (NULL, '2017-12-06', 'forum', 'forum001', '0', 'Bienvenue dans notre Forum', 'Sommaire du Forum', '8', 'Cisa', 'forum, discussion, groupe, billet', 'Cette page est le sommaire d''entrée de notre forum.', '2', 'forum', '0', '0', 'yearly');

2 - Dans Notepad++, créez également la nouvelle page avec ce nom : "modules/forum/forum001.php"

3 - Ecrivez les lignes suivantes pour créer le tableau :

<?php //////////////////////////////////////////////////////////// /* TUTOS=========== Zone de traitement ================= */ //////////////////////////////////////////////////////////// /*04*///1ère requête : ////////////////////////////////////////////////////////// /* =============== Zone d'affichage ====================*/ ////////////////////////////////////////////////////////// ?> /*20*/<table class="forum"> /*21*/<thead> /*22*/ <tr class="ftete"> /*23*/ <th colspan="2" class="colonne1">Catégories&nbsp; /*24*/ <?php /*25*/ if ($Permission >= 3){ /*26*/ echo '<a href="index.php?md=forum&amp;ac=forum004" ><img src="images/divers/fldroite.png" title="Créer une nouvelle catégorie" /></a>';} /*27*/ ?> /*28*/ <br /> /*29*/ <span class="txtpetit">Cliquez sur le <img src="images/divers/crayon.png" title="Créer une nouvelle catégorie" /> pour créer un nouveau sujet dans la catégorie.</span> /*30*/ </th> /*31*/ <th>Dernier message</th> /*32*/ </tr> /*33*/</thead> /*34*/<tbody>
/*50*/
<tr class="ftete"> /*51*/ <td class="finfo colonne1"> /*52*/ Catégorie 1
/*58*/ </td> /*59*/ <td class="fcat colonne1"> /*60*/ 2 sujets - 3 réponses /*70*/ <br>Dernier sujet : Bla, bla...
/*73*/
<br>Rubriques : Rubrique1 | Rubrique2 | Rubrique3 /*75*/ </td>
/*78*/
<td class="finfo"> /* */ Avatar Auteur /* */ <br>12-02-2018 10:11:25
/*83*/
</td> /*84*/ </tr>
/*88*/
</tbody> /*89*/</table>

Explications :

Lignes 24 à 27 : Si le visiteur est un animateur ou le webmaster, un lien est affiché pour pouvoir ajouter de nouvelles catégories. Fig3104 repère 1

formulaire, forum, catégorie, rubrique

Les lignes de css ci-dessous correspondent à la forme et aux couleurs de la copie d'écran ci-dessus :

4 - Dans votre fichier "forum.css", ajoutez les propriétés suivantes :
@charset "UTF-8";
:root{
--colorUn: var(--colorUn);
--colorDeux: var(--colorDeux);
--colorRouge: #f00 ;
}
*{
box-sizing: border-box;
}
.forum {
display: block;
width: 100%;
/*border: 1px solid red;*/
font-size: 1em;
border-collapse: collapse;
color: var(--colorDeux);
}
.ftete {
background-color: var(--colorUn);
font-size: 1.2em;
border: 2px solid var(--colorDeux);
text-align: center;
}
.ajout {
font-size: 0.8em;
float: right;
margin-right: 20px;
}
.fcat, .finfo {
background-color: var(--colorUn);
width: 100px;
font-size: 0.9em;
border-width :1px;
vertical-align: top;
text-align: center;
}
.fcat {
width: 750px;
vertical-align: top;
text-align: left;
}

Explications :

Bien entendu, il vous est tout à fait possible de choisir d'autres couleurs, ou autre forme de présentation.

Lignes 25, 26 et 27 : dans le cas où le visiteur est un administrateur ou animateur, un signe apparaît près du titre pour accéder à la page de création des "catégories".

Préparation des catégories :

5 - Passez à la ligne 3, en zone de traitement, et insérez les commandes suivantes :

/*05*///1ère requête : /*06*/$categories = $bdd->prepare(' /*07*/ SELECT * FROM afcategories /*08*/ ORDER BY NomCat'); /*09*/$categories->execute();

Explications :

Cette 1ère requête permet de lister toutes les catégories.

Reportons ces données dans l'affichage du tableau :

L'en-tête du tableau ne change pas, nous allons donc passer directement dans le corps du tableau.

6 - Juste après la ligne <tbody>, insérez les commandes suivantes :

/*35*/<?php /*36*/while ($cat = $categories->fetch()) /*37*/{
/*49*/?>

7 - A la ligne 52, remplacez "Catégorie 1" par la formule :

/*52*/ <?php echo $cat['NomCat'].' <a href="index.php?md=forum&amp;ac=forum002 &amp;categorie='.$cat['IdCat'].'"> <br><img src="images/divers/crayon.png" title="Cliquez pour créer un nouveau sujet dans la catégorie '.$cat['NomCat'].'"></a>'; ?>

8 - En bas de la page, entre les lignes </tr> et </tbody>, écrivez pour fermer l'accolade :

........ <!--84--> </tr> <!--85--><?php /*86*/}; /*87*/?> <!--88--></tbody> <!--89--></table>

Inscription des rubriques réelles :

Avant de continuer cette page, il nous faut créer les rubriques.

9 - Pour cela, nous ajoutons un lien avant le titre "Rubriques" de chaque catégorie.

<!--73--><br> <!--74--> <a href="index.php?md=forum&amp;ac=forum005&amp;IdCat= <?php echo $cat['IdCat']; ?>"> <img src="images/divers/plus.png" alt="Image plus nouvelle rubrique" title="Ajouter une nouvelle rubrique à la catégorie <?= $cat['NomCat'] ?>." /></a> Rubriques : Rubrique1 | Rubrique2 | Rubrique3

Ce lien, Fig3105 repère 3, sera donc constitué d'une petite Cible pour créer des rubriques que je vous laisse le soin de récupérer sur Internet ou de créer vous-même avec votre logiciel favori.

Résultat :

formulaire, forum, catégorie, rubrique

Notre tableau aura autant de lignes que de catégories.

En lignes 6, 7, 8 et 9, la requête $categories récupère la liste de celles qui sont déjà créées.
En ligne 36, la variable $cat enregistre la liste des catégories sous forme de tableau contenant les "IdCat" et "NomCat" de chacune.
En ligne 37, la boucle commence, tant qu'il y aura des catégories.
La boucle se terminera, en fin de programme, ligne 86.
Au passage, ligne 52, nous aurons alors l'affichage du nom de chaque catégorie et un lien qui pointera vers le formulaire "forum002" qui permettra de créer les questions (ou sujets) se rapportant à la catégorie cliquée. Fig3105 repère 2

Voir page suivante.

Remarques

Nous avons commencé la création du tableau sommaire de notre forum.

Dans la page suivante, nous allons écrire le formulaire pour créer les rubriques.