Les Tutos de Gabriel

Création de site Web

Forum - Les Catégories

Principes de fonctionnement et tables de la base de données :

Nous allons créer en premier une table qui listera toutes les catégories permises sur le site.
Voici la structure de la table :

1 - Les catégories :
CREATE TABLE IF NOT EXISTS `afcategories` (
`IdCat` int(11) NOT NULL AUTO_INCREMENT, `NomCat` varchar(50) NOT NULL,
PRIMARY KEY (`IdCat`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

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

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

Exemples de catégories : Windows 10, PhotoFiltre, Magix, PhotoShop, Première, Généalogie ...

Pour afficher la page "forum004.php" et commencer votre saisie :

Enregistrez cette page dans la table "sommaire" de votre bdd.
Prenez soin de marquer "forum" dans le champ "Vue" de cet enregistrement.
On met aussi une protection de niveau 3 pour cette page, car les catégories seront créées uniquement par les animateurs ou administrateurs.

2 - Dans Notepad++, modifiez le fichier "vues/menu.php" pour y ajouter la commande suivante :
................
<li class="sousmenu"><a href="#">Forum</a>
<ul class="niveau2">
<li><a href="#">Présentation</a></li>
<li><a href="index.php?&md=forum&ac=forum004">Catégories</a></li>
</ul>
</li>

Commentaire :

Cette ligne de commande est provisoire dans la construction et les essais du forum.

Création du fichier CSS spécifique :

3 - Lignes de caractéristiques CSS :
section header h1 {margin : 10px 0 0 -100px;}
.fdform {background-color: #87cefa; text-align: left; width: 100%}
.message {background-color: #87cefa; color: #f00; font-size: 1em; font-weight: bold}

Bien sûr, libre à vous d'affecter d'autres couleurs ou présentations à votre css.

Fichier "vues/forum.php" spécifique

Prenez soin de créer un fichier d'affichage spécifique, dans lequel vous aurez la ligne d'appel du CSS.

4 - Lignes de commandes dans le fichier "vues/forum.php" :
<head>
..........
<link rel="stylesheet" media="screen" type="text/css" title="Gabarit de pages" href="css/gabarit.css">
<link rel="stylesheet" media="screen" type="text/css" title="Gabarit du forum" href="css/forum.css">

............
</head>

Le formulaire pour créer des catégories :

Créons la page spéciale : "forum004.php"

5 - Ecrivez :

/*1*/<?php /*2*////////// Création catégories //////////////////////////////////////////////// /*3*/// ========================== Zone de traitement ============================ /*4*/////////////////////////////////////////////////////////////////////////////// /*5*/if ((isset($_POST['Creation'], $_POST['NomCat'] )) AND !empty($_POST['NomCat'])) /*6*/{ /*7*/ $NomCat = htmlspecialchars($_POST['NomCat']); /*8*/ $message = 'La categorie que vous voulez créer est : '.$NomCat.'<br />' ; /*19*/} else { $message ='Veuillez nommer une nouvelle catégorie.';} /*20*/////////////////////////////////////////////////////////////////////////////// /*21*//* ======================= Zone d'affichage ================================*/ /*22*/////////////////////////////////////////////////////////////////////////////// /*23*/echo '<a href="index.php?md=forum&amp;ac=forum001">Retour à l\'accueil du forum</a>'; /*24*/?> /*25*/<form action="#" method="post" class="fdform" > /*26*/<fieldset> /*27*/<legend>Créer une catégorie :</legend> /*28*/ <input type="text" name="NomCat" value="<?php if (isset($_POST['NomCat'])) {echo $NomCat;}?>" placeholder="Saisir la catégorie à créer" style="width: 250px" required > /*29*/ <input type="submit" name="Creation" value="Créer"> /*30*/</fieldset> /*31*/<?php /*32*/$message = ($message)? $message : ''; /*33*/echo '<p class="message">'.$message.'</p>'; /*34*/?> /*35*/</form>

6 - Tapez le raccourci clavier Ctrl + Maj + S pour enregistrer sous... le nom de forum004.php, dans le dossier "modules/forum/"

Visuel de ce formulaire :

formulaire, forum, categorie

Comment ça fonctionne :

L'image ci-dessous, fig3102, vous montre la partie supérieure des codes que nous allons écrire pour le "traitement" et pour l' "affichage".

formulaire, forum, catégorie, rubrique

Quand la page forum004.php s'affiche, le programme arrive en Ligne 5 qui se traduit comme ceci :
- Si vous avez cliqué sur le bouton "Créer" et si la zone de saisie n'est pas vide.
Comme ce n'est pas le cas, le programme passe à la ligne 18 qui contient le message et affiche alors le formulaire en 24 pour permettre de faire la saisie de la Catégorie.

Il affiche alors le message en 32 et attend que vous saisissiez une catégorie, puis fassiez un click sur le bouton "Créer" en ligne 28.

7 - Tapez un nom de catégorie, par exemple "Essais", puis cliquez sur le bouton Créer

Résultat :

formulaire, forum, categorie

Le fait de cliquer sur ce bouton déclenche l'action du formulaire définie par la ligne 24 : action="#" qui indique qu'il va recharger la même page.

Ce faisant, le programme crée alors les variables superglobales de method $_POST['Creation'] qui prend la valeur "Créer" et $_POST['NomCat'] qui prend la valeur "Nom de catégorie "Essais" saisi par vous."

On remonte donc au début.
Les superglobales $_POST['Creation'] et $_POST['NomCat'] existent et $_POST['NomCat'] n'est pas vide (!empty).

La condition "if" est donc "vraie".

On suit les flèches vertes...

Ligne 7 : on applique la fonction htmlspecialchars qui sécurise la saisie, en remplaçant les caractères spéciaux pour empêcher une tentative d'injonction de code malveillant.

Dans la ligne 7, on récupère le nom de la catégorie.

Dans la ligne 8, la variable $message est enregistrée.

Dans la ligne 28, la variable $NomCat permet de maintenir affiché le mot "Essais" que nous avons écrit.

La ligne 33, affiche le message récupéré en ligne 8.

Cas où le champ de saisi est vide quand on clique :

Ligne 28, nous avons mis l'attribut "required" à la fin de la ligne.
Celui-ci est reconnu par la plupart des navigateurs récents.
Dans ce cas, vous aurez un message comme ci-dessous, fig3132 :

 dans cours2046

8 - On continue :

/*9*/$nm = $bdd->prepare("SELECT NomCat FROM afcategories WHERE NomCat = ? "); /*10*/ $nm->execute(array($NomCat)); /*11*/ $nb = $nm->rowCount(); /*12*/ if ($nb == 0) /*13*/ { /*14*/ $message = 'La catégorie '.$NomCat.' n\'existe pas !'; /*17*/ } /*18*/ else { $message = 'La catégorie '.$NomCat.' existe déjà ! <br />Veuillez éventuellement saisir une autre catégorie.';}

9 - Essayez à nouveau de saisir le mot "Essais"

Résultat, fig3133 :

 dans cours2046

Comment ça fonctionne :

Nous sommes dans le cas où nous avons saisi le mot exemple "Essais"
et avons cliqué sur le bouton Créer.

Après avoir vérifié en ligne 5 que les variables $_POST['Creation'] et $_POST['NomCat'] sont vraies et non-vides, le programme récupère la valeur de $NomCat.

Ligne 9 : on prepare une requète $nm pour rechercher dans la table "afcategories" s'il y en a une ayant la valeur de la variable $NomCat qui est reprise à la ligne 10.

Ligne 11 : la fonction rowCount() compte le nombre de valeurs.

Ligne 12 : si ce nombre est identique (==) à 0, la condition est "True", o, obtient donc le message de la ligne 14

Ligne 17 : sinon, la condition est "False", et on obtient le message de la ligne 18.

10 - Effacez la ligne 14 et écrivez les lignes ci-dessous :

/*14*/ $ins = $bdd->prepare("INSERT INTO afcategories (IdCat, NomCat) VALUES('', ?)"); /*15*/ $ins->execute(array($NomCat)); /*16*/ $message = 'La catégorie '.$NomCat.' a bien été créée !';

11 - Recommencez votre test pour la catégorie "Essais"

Résultat, fig3134 :

 dans cours2046

Pour parfaire notre essai, nous pouvons créer plusieurs catégories comme, par exemple : Audacity, Windows, Word, Excel, Php, ...

Résultats dans la table dans EasyPhp, fig3135 :

 dans cours2046

Liste des Catégories déjà créées :

Pour être sûrs de ne pas recréer des catégories déjà existantes, nous allons ajouter quelques lignes.

12 - Après le formulaire, écrivez :

/*37*/<div class="btecat"> /*38*/ <div class="btes1 btes3"> /*39*/ <h4>Catégories déjà créées :</h4> /*40*/ <?php /*41*/ $nc = $bdd->prepare("SELECT NomCat FROM afcategories ORDER BY NomCat"); /*42*/ $nc->execute(); /*43*/ echo '<p>'; /*44*/ while ($donnee = $nc->fetch()) /*45*/ { /*46*/ echo $donnee['NomCat'].'<br />'; /*47*/ } /*48*/ echo '</p>'; /*49*/ ?> /*50*/ </div> /*51*/ <div class="btes1 btes3"> /*52*/ <h4>Recommandations :</h4> /*53*/ <p>Avant de créer une nouvelle catégorie, merci de vérifier que celle-ci n'existe pas.</p> /*54*/ </div> /*55*/</div>

Explications :

Entre les lignes 37 et 55, nous désignons une "div" qui sert de container "flexbox" de class="btecat".

Dans ce container, nous créons 2 autres boîtes "div" entre les lignes 38 et 50, puis 51 et 54 qui auront les attributs des class="btes1 btes3".

De la ligne 40 à 49, le programme va chercher la liste dans la table de la base de données.

Nous allons donc définir les attributs en conséquence dans le Css, pour que chacune de ces 2 boîtes occupe la moitié de la largeur disponible.

13 - Dans votre fichier forum.css, ajoutez : .btecat {
display: flex;
border: 1px solid #0f287c;
justify-content: space-between;
width: 100%;
background-color: #87cefa;
}
.btes1, .btes2 {padding-left: 10px;}
.btes3 {width: 49%;}

Nous avons ainsi 2 boîtes qui occupent, chacune, 49% de la place disponible.

Résultat :

 dans cours2046

Si tout s'est bien passé, vous devriez pouvoir faire vos essais et, selon les cas, le message en rouge changera,en fonction de vos saisies.



Le code complet de la page :

<?php ///////// Création catégories //////////////////////////////////////////////// // ========================== Zone de traitement ============================ ////////////////////////////////////////////////////////////////////////////// if ((isset($_POST['Creation'], $_POST['NomCat'] )) AND !empty($_POST['NomCat'])) { $NomCat = htmlspecialchars($_POST['NomCat']); $message = 'La categorie que vous voulez créer est : '.$NomCat.'<br />' ; $nm = $bdd->prepare("SELECT NomCat FROM afcategories WHERE NomCat = ? "); $nm->execute(array($NomCat)); $nb = $nm->rowCount(); if ($nb == 0) { $ins = $bdd->prepare("INSERT INTO afcategories (IdCat, NomCat) VALUES('', ?)"); $ins->execute(array($NomCat)); $message = 'La catégorie '.$NomCat.' a bien été créée !'; } else { $message = 'La catégorie '.$NomCat.' existe déjà ! <br />Veuillez éventuellement saisir une autre catégorie.';} } else { $message ='Veuillez nommer une nouvelle catégorie.';} ////////////////////////////////////////////////////////////////////////////// /* ======================= Zone d'affichage ================================*/ ////////////////////////////////////////////////////////////////////////////// echo '<a href="index.php?md=forum&amp;ac=forum001">Retour à l\'accueil du forum</a>'; ?> <form action="#" method="post" class="fdform" > <fieldset> <legend>Créer une catégorie :</legend> <input type="text" name="NomCat" value="<?php if (isset($_POST['NomCat'])) {echo $NomCat;}?>" placeholder="Saisir la catégorie à créer" style="width: 250px" required > <input type="submit" name="Creation" value="Créer"> </fieldset> <?php $message = ($message)? $message : ''; echo '<p class="message">'.$message.'</p>'; ?> </form> <div class="btecat"> <div class="btes1 btes3"> <h4>Catégories déjà créées :</h4> <?php $nc = $bdd->prepare("SELECT NomCat FROM afcategories ORDER BY NomCat"); $nc->execute(); echo '<p>'; while ($donnee = $nc->fetch()) { echo $donnee['NomCat'].'<br />'; } echo '</p>'; ?> </div> <div class="btes1 btes3"> <h4>Recommandations :</h4> <p>Avant de créer une nouvelle catégorie, merci de vérifier que celle-ci n'existe pas.</p> </div> </div>

Remarques

Nous avons créé le premier formulaire de notre forum. Il est très simple et vous avez pu voir son fonctionnement pour une action où il se recharge lui-même.

Dans la page suivante, nous allons créer le tableau d'entrée de notre forum.