Comme tous les formulaires qu'on a vus jusqu'ici, il va falloir créer un script en 2 parties : une proposant de poster un message, et une autre pour le traiter, et afficher un message d'erreur. Ici exceptionnellement nous allons séparer les deux parties sur deux pages différentes. La raison est que les codes sont assez lourds et que c'est beaucoup plus clair comme ça.
On va, dans un premier temps, voir la page de formulaire :
poster.php.
Il faut bien définir deux cas bien distincts dans le script de la page poster.php : on peut vouloir poster un nouveau
message ou un nouveau
topic. Dans le premier cas, il s'agit simplement de répondre à un sujet déjà commencé. Dans le second, il faut définir un titre en plus du message.
Quoi qu'il en soit, le visiteur souhaitant poster son message est souvent amené à vouloir mettre en forme son texte, pour le mettre en gras, par exemple. Le problème est qu'il est hors de question d'afficher un message contenant des balises html, c'est pourquoi les forums utilisent un code spécial. Dans le cas du Site du Zér0, il s'agit du zCode, dans le cas de phpbb il s'agit du bbcode, etc.
Créons notre BBcode !
La page
poster.php est très spéciale et n'a rien à voir avec les autres, la raison est simple : on doit utiliser du javascript pour les balises de codes. Vous savez, les boutons sur lesquels on clique pour afficher un texte en gras, en italique, etc.
On va devoir en fabriquer nous-mêmes.

Pour cela, j'ai recopié un code qui provient d'un ancien tuto, maintenant disparu du SDZ, pour ceux que ça intéresse, je vous envoie vers le tuto suivant :
Insertion de balises dans une zone texte, qui est différent mais qui propose le même résultat.
On va donc afficher un code très bizarre entre les balises
<head> et
</head>.
Le voici :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 | <script>
function bbcode(bbdebut, bbfin)
{
var input = window.document.formulaire.message;
input.focus();
if(typeof document.selection != 'undefined')
{
var range = document.selection.createRange();
var insText = range.text;
range.text = bbdebut + insText + bbfin;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -bbfin.length);
}
else
{
range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
}
range.select();
}
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
var pos;
if (insText.length == 0)
{
pos = start + bbdebut.length;
}
else
{
pos = start + bbdebut.length + insText.length + bbfin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("insertion (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Veuillez taper le texte");
input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
}
}
function smilies(img)
{
window.document.formulaire.message.value += '' + img + '';
}
</script>
|
Si vous ne comprenez strictement rien à ce code, sachez que c'est un simple copié-collé de celui du tuto que je vous ai demandé de regarder. Il utilise des infos sur le navigateur que vous utilisez, tout simplement.
De toute façon, sa compréhension n'est pas utile pour la suite.
Attention toutefois à ces lignes :
var input = window.document.formulaire.message;
window.document.formulaire.message.value += '' + img + '';
Comme expliqué dans le tuto, il faut que vous mettiez le nom du formulaire et du textarea ; donc, si vous les modifiez, pensez à changer ces parties du code.
Mais attends une seconde, la balise
<head> se trouve dans la page
debut.php, je fais comment, moi, pour l'inclure

?
C'est juste : en fait, deux choix s'offrent à vous : la méthode bourrin et la méthode douce.
La première consiste à ne pas inclure le fichier
debut.php dans cette page, et à simplement recopier son contenu, en ajoutant le code ci-dessus entre les balises
<head>. Ce qui est gênant, c'est que si vous modifiez votre fichier debut.php, il faudra aussi passer ici.
La deuxième est de créer une variable
$balises à
true juste avant l'appel du fichier debut.php ; ensuite, dans cette dernière page, on vérifie que
$balises= true, et si c'est le cas, on insère le javascript.
Faites simplement ceci :
Page : debut.php
Code : PHP | <?php
$balises=(isset($balises))?$balises:0;
if($balises)
{
//Inclure le script
}
|
Le début de la page ressemble alors à ça :
Page : poster.php
Code : PHP | <?php
session_start();
$titre="Poster";
$balises = true;
include("includes/identifiants.php");
include("includes/debut.php");
include("includes/menu.php");
?>
|
Bien, on va pouvoir attaquer la suite : il va falloir récupérer quelques données.
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70 | <?php
//Qu'est ce qu'on veut faire ? poster, répondre ou éditer ?
$action = (isset($_GET['action']))?htmlspecialchars($_GET['action']):'';
//Il faut être connecté pour poster !
if ($id==0) erreur(ERR_IS_CO);
//Si on veut poster un nouveau topic, la variable f se trouve dans l'url,
//On récupère certaines valeurs
if (isset($_GET['f']))
{
$forum = (int) $_GET['f'];
$query= $db->prepare('SELECT forum_name, auth_view, auth_post, auth_topic, auth_annonce, auth_modo
FROM forum_forum WHERE forum_id =:forum');
$query->bindValue(':forum',$forum,PDO::PARAM_INT);
$query->execute();
$data=$query->fetch();
echo '<p><i>Vous êtes ici</i> : <a href="./index.php">Index du forum</a> -->
<a href="./voirforum.php?f='.$data['forum_id'].'">'.stripslashes(htmlspecialchars($data['forum_name'])).'</a>
--> Nouveau topic</p>';
}
//Sinon c'est un nouveau message, on a la variable t et
//On récupère f grâce à une requête
elseif (isset($_GET['t']))
{
$topic = (int) $_GET['t'];
$query=$db->prepare('SELECT topic_titre, forum_topic.forum_id,
forum_name, auth_view, auth_post, auth_topic, auth_annonce, auth_modo
FROM forum_topic
LEFT JOIN forum_forum ON forum_forum.forum_id = forum_topic.forum_id
WHERE topic_id =:topic');
$query->bindValue(':topic',$topic,PDO::PARAM_INT);
$query->execute();
$data=$query->fetch();
$forum = $data['forum_id'];
echo '<p><i>Vous êtes ici</i> : <a href="./index.php">Index du forum</a> -->
<a href="./voirforum.php?f='.$data['forum_id'].'">'.stripslashes(htmlspecialchars($data['forum_name'])).'</a>
--> <a href="./voirtopic.php?t='.$topic.'">'.stripslashes(htmlspecialchars($data['topic_titre'])).'</a>
--> Répondre</p>';
}
//Enfin sinon c'est au sujet de la modération(on verra plus tard en détail)
//On ne connait que le post, il faut chercher le reste
elseif (isset ($_GET['p']))
{
$post = (int) $_GET['p'];
$query=$db->prepare('SELECT post_createur, forum_post.topic_id, topic_titre, forum_topic.forum_id,
forum_name, auth_view, auth_post, auth_topic, auth_annonce, auth_modo
FROM forum_post
LEFT JOIN forum_topic ON forum_topic.topic_id = forum_post.topic_id
LEFT JOIN forum_forum ON forum_forum.forum_id = forum_topic.forum_id
WHERE forum_post.post_id =:post');
$query->bindValue(':post',$post,PDO::PARAM_INT);
$query->execute();
$data=$query->fetch();
$topic = $data['topic_id'];
$forum = $data['forum_id'];
echo '<p><i>Vous êtes ici</i> : <a href="./index.php">Index du forum</a> -->
<a href="./voirforum.php?f='.$data['forum_id'].'">'.stripslashes(htmlspecialchars($data['forum_name'])).'</a>
--> <a href="./voirtopic.php?t='.$topic.'">'.stripslashes(htmlspecialchars($data['topic_titre'])).'</a>
--> Modérer un message</p>';
}
$query->CloseCursor();
?>
|
Ce début de code joue sur la forme de l'url ; comme vous avez pu le voir sur les autres pages, il est du style :
poster.php?t=1&action=repondre
ou
poster.php?f=2&action=nouveau
ou encore
poster.php?p=3&action=edit
Dans tous les cas, on a besoin de la valeur de f : si jamais on souhaite créer un nouveau topic, elle est dans l'url, donc il n'y a pas de problème. Sinon, ce n'est pas beaucoup plus grave, il suffit de faire une requête pour la récupérer.
Le switch !
Comme pour la page de profil, notre code va s'articuler autour d'un switch de la variable
$action.
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <?php
switch($action)
{
case "repondre": //Premier cas : on souhaite répondre
//Ici, on affiche le formulaire de réponse
break;
case "nouveautopic": //Deuxième cas : on souhaite créer un nouveau topic
//Ici, on affiche le formulaire de nouveau topic
break;
//D'autres cas viendront s'ajouter là plus tard :p
default: //Si jamais c'est aucun de ceux-là, c'est qu'il y a eu un problème :o
echo'<h2>Cette action est impossible</h2>';
} //Fin du switch
?>
|
Voilà le squelette du code. Si vous avez compris jusqu'ici, je n'ai même pas besoin de continuer normalement (quoi, feignasse ?

).
Donc, ce que l'on va mettre entre les
case et les
break, ce sont des zones de textes. Il en faut une pour le titre (seulement dans le cas d'un nouveau topic), et une pour le message lui-même. Seulement il faut aussi mettre les balises de texte et les smilies : c'est pourquoi le code du formulaire est un peu plus long que d'habitude. Cela dit, si vous avez lu le tuto sur le bbcode, vous n'aurez pas de problème de compréhension

.
Page : poster.php
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73 | <?php
switch($action)
{
case "repondre": //Premier cas on souhaite répondre
?>
<h1>Poster une réponse</h1>
<form method="post" action="postok.php?action=repondre&t=<?php echo $topic ?>" name="formulaire">
<fieldset><legend>Mise en forme</legend>
<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[g]', '[/g]');return(false)" />
<input type="button" id="italic" name="italic" value="Italic" onClick="javascript:bbcode('[i]', '[/i]');return(false)" />
<input type="button" id="souligné" name="souligné" value="Souligné" onClick="javascript:bbcode('[s]', '[/s]');return(false)" />
<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('[url]', '[/url]');return(false)" />
<br /><br />
<img src="./images/smileys/heureux.gif" title="heureux" alt="heureux" onClick="javascript:smilies(' :D ');return(false)" />
<img src="./images/smileys/lol.gif" title="lol" alt="lol" onClick="javascript:smilies(' :lol: ');return(false)" />
<img src="./images/smileys/triste.gif" title="triste" alt="triste" onClick="javascript:smilies(' :triste: ');return(false)" />
<img src="./images/smileys/cool.gif" title="cool" alt="cool" onClick="javascript:smilies(' :frime: ');return(false)" />
<img src="./images/smileys/rire.gif" title="rire" alt="rire" onClick="javascript:smilies(' XD ');return(false)" />
<img src="./images/smileys/confus.gif" title="confus" alt="confus" onClick="javascript:smilies(' :s ');return(false)" />
<img src="./images/smileys/choc.gif" title="choc" alt="choc" onClick="javascript:smilies(' :o ');return(false)" />
<img src="./images/smileys/question.gif" title="?" alt="?" onClick="javascript:smilies(' :interrogation: ');return(false)" />
<img src="./images/smileys/exclamation.gif" title="!" alt="!" onClick="javascript:smilies(' :exclamation: ');return(false)" />
</fieldset>
<fieldset><legend>Message</legend><textarea cols="80" rows="8" id="message" name="message"></textarea></fieldset>
<input type="submit" name="submit" value="Envoyer" />
<input type="reset" name = "Effacer" value = "Effacer"/>
</p></form>
<?php
break;
case "nouveautopic":
?>
<h1>Nouveau topic</h1>
<form method="post" action="postok.php?action=nouveautopic&f=<?php echo $forum ?>" name="formulaire">
<fieldset><legend>Titre</legend>
<input type="text" size="80" id="titre" name="titre" /></fieldset>
<fieldset><legend>Mise en forme</legend>
<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[g]', '[/g]');return(false)" />
<input type="button" id="italic" name="italic" value="Italic" onClick="javascript:bbcode('[i]', '[/i]');return(false)" />
<input type="button" id="souligné" name="souligné" value="Souligné" onClick="javascript:bbcode('[s]', '[/s]');return(false)" />
<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('[url]', '[/url]');return(false)" />
<br /><br />
<img src="./images/smileys/heureux.gif" title="heureux" alt="heureux" onClick="javascript:smilies(':D');return(false)" />
<img src="./images/smileys/lol.gif" title="lol" alt="lol" onClick="javascript:smilies(':lol:');return(false)" />
<img src="./images/smileys/triste.gif" title="triste" alt="triste" onClick="javascript:smilies(':triste:');return(false)" />
<img src="./images/smileys/cool.gif" title="cool" alt="cool" onClick="javascript:smilies(':frime:');return(false)" />
<img src="./images/smileys/rire.gif" title="rire" alt="rire" onClick="javascript:smilies('XD');return(false)" />
<img src="./images/smileys/confus.gif" title="confus" alt="confus" onClick="javascript:smilies(':s');return(false)" />
<img src="./images/smileys/choc.gif" title="choc" alt="choc" onClick="javascript:smilies(':O');return(false)" />
<img src="./images/smileys/question.gif" title="?" alt="?" onClick="javascript:smilies(':interrogation:');return(false)" />
<img src="./images/smileys/exclamation.gif" title="!" alt="!" onClick="javascript:smilies(':exclamation:');return(false)" /></fieldset>
<fieldset><legend>Message</legend>
<textarea cols="80" rows="8" id="message" name="message"></textarea>
<label><input type="radio" name="mess" value="Annonce" />Annonce</label>
<label><input type="radio" name="mess" value="Message" checked="checked" />Topic</label>
</fieldset>
<p>
<input type="submit" name="submit" value="Envoyer" />
<input type="reset" name = "Effacer" value = "Effacer" /></p>
</form>
<?php
break;
//D'autres cas viendront s'ajouter ici par la suite
?>
|
Costaud, hein ?

Remarquez, ça valait le coup puisqu'on a terminé notre page. Je vous l'ai dit, les autres cas, l'édition et la suppression d'un message, seront vus dans une seconde partie du tuto.
Mais revenons plutôt au code. Mises à part les zones de texte, il reste des lignes de ce genre :
Code : HTML | <input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[g]', '[/g]');return(false)" />
|
Ou de ce genre :
Code : HTML | <img src="./images/smileys/triste.gif" title="triste" alt="triste" onClick="javascript:smilies(':triste:');return(false)" />
|
C'est ici que vous allez pouvoir laisser libre cours à votre imagination la plus folle pour créer votre "bbcode" (et même changer son nom

). Ce que je vous ai mis, ce sont les balises utilisées par phpbb :
[g]Texte en gras[/g],
[i]Texte en italique[/i], et les smilies sont également pris sur la plate-forme. Mais après, vous faites comme vous voulez ((i) et (/i) par exemple

), et pour cela, il suffit de modifier les lignes que je vous ai indiquées en changeant le [i] par (i), etc.
Allez, on termine !
Il ne nous reste plus qu'à fermer notre switch, nos balises html et tout le reste.
Code : PHP | <?php
default: //Si jamais c'est aucun de ceux là c'est qu'il y a eu un problème :o
echo'<p>Cette action est impossible</p>';
} //Fin du switch
?>
</div>
</body>
</html>
|
C'est ici que se termine la page poster.php. Comme promis, on va passer au traitement des données : si vous avez bien lu le code, vous avez vu que la page en question a pour petit nom postok.php (oui, je sais, j'ai un goût pourri pour trouver les noms de pages

).
Mais avant de repartir au combat, on va faire une petite pause pour compléter la création de notre bbcode...