Bonjour à tous
voila je me suis lancé dans un petit exercice, faire un petit forum en php.
J'espère que je suis dans le bon forum ma question étant un peu sur 2 tableaux.
Ma question se pose sur le html du fil:
vaut il mieux semantiquement parlant que je l'organise en tableau, du style :
ce qui j'avoue me pose quelques soucis, d'abord pour glisser tout à coup mon formulaire de réponse pour un message particulier sous ce dernier (donc au milieu du tableau
), mais également pour pouvoir indenter les réponses à chaque fil de discussion pour bien séparer visuellement la reponse du message original.
2ieme solution, celle que j''utilise pour le moment, utiliser des divs :
ce qui me pose également des problèmes mais là propre à css.
Pour avoir une boite posteur et une boite message de la meme hauteur et que les messages se listent correctement verticalement par exemple.
Mais également du point de vue sémantique vu que les liens entre posteur et message n'est pas établit.
bref je rame un peu.
mon code actuel si jamais ca vous intéresse :
index.php
styles.css
Bases Mysql
Modifié par eilijah (26 Sep 2008 - 18:27)
voila je me suis lancé dans un petit exercice, faire un petit forum en php.
J'espère que je suis dans le bon forum ma question étant un peu sur 2 tableaux.
Ma question se pose sur le html du fil:
vaut il mieux semantiquement parlant que je l'organise en tableau, du style :
<table>
<tr>
<td>
posteur1
<br />
<span class="date">date</span>
</td>
<td>message1</td>
</tr>
<tr>
<td>posteur2</td>
<td>message2</td>
</tr>
</table>
ce qui j'avoue me pose quelques soucis, d'abord pour glisser tout à coup mon formulaire de réponse pour un message particulier sous ce dernier (donc au milieu du tableau
), mais également pour pouvoir indenter les réponses à chaque fil de discussion pour bien séparer visuellement la reponse du message original.2ieme solution, celle que j''utilise pour le moment, utiliser des divs :
<div class="userTopic">
posteur 1
<br />
<span class="date">date 1</span>
</div>
<div class="contentTopic">
message 2
</div>
<div class="userTopic">
posteur 2
<br />
<span class="date">date 2</span>
</div>
<div class="contentTopic">
message 2
</div>
ce qui me pose également des problèmes mais là propre à css.
Pour avoir une boite posteur et une boite message de la meme hauteur et que les messages se listent correctement verticalement par exemple.
Mais également du point de vue sémantique vu que les liens entre posteur et message n'est pas établit.
bref je rame un peu.
mon code actuel si jamais ca vous intéresse :
index.php
<?php
//Constantes
$table="posts2";
$nomPage=$_SERVER['PHP_SELF'];
//connection
mysql_connect("localhost","root","");
mysql_select_db("forum");
// Insertion du message posté
if (!empty($_POST['nickname']) && $_POST['nickname']!= "nickname" &&
!empty($_POST['email']) && $_POST['email']!= "email" &&
!empty($_POST['content']) && $_POST['content']!= "Tapez votre message ici.")
{
$nickname = mysql_real_escape_string(htmlspecialchars($_POST['nickname']));
$email = mysql_real_escape_string(htmlspecialchars($_POST['email']));
$content = mysql_real_escape_string(htmlspecialchars($_POST['content']));
// comparaison avec le dernier message envoyé pour eviter le spam
$requete = mysql_query("SELECT * FROM $table WHERE user_nickname='$nickname' ORDER BY post_id DESC LIMIT 0,1")or die(mysql_error());
$noSpam = 0;
while ($dernier_messages = mysql_fetch_array($requete))
{
if ($content == $dernier_messages['post_content'])
{
echo "Vous avez deja envoyé ce message, le spam est <strong>interdit!</strong>";
$noSpam = 1;
}//if
}//while
// si pas spam, on insere les infos du mess dans la table
if ($noSpam==0)
{
if (isset($_POST['parent']))
{
$parent = mysql_real_escape_string(htmlspecialchars($_POST['parent']));
mysql_query("INSERT INTO $table VALUES('',
'$nickname',
'$email',
'$content',
NOW(),
'$parent')")
or die('Echec de l\'insertion du message dans la base :'.mysql_error());
}
}
}//fin : if source
elseif (isset($_POST['nickname']))
{
echo "<em>Attention, vous devez remplir tous les champs!</em>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="admin" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Partager la connaissance" />
<meta name="robots" content="all" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="Apprendre, gratuit" />
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Bienvenue sur le forum</h1>
<br />
<form action="#" method="post" name="newDiscussion" class="formulaire" >
<fieldset>
<legend>Créer une nouvelle liste de discussion</legend>
<p>
<label for="nicknameNewDiscussion">Votre login :</label>
<input type="text" name="nickname" value="nickname" id="nicknameNewDiscussion" />
</p>
<p>
<label for="emailNewDiscussion">Votre email :</label>
<input type="text" name="email" value="email" id="emailNewDiscussion" />
</p>
<p>
<label for="contentNewDiscussion" class="textarea">Votre message :</label>
<textarea name="content" rows="10" id="contentNewDiscussion" >Tapez votre message ici.</textarea>
</p>
<input type="hidden" name="parent" value="0">
<input type="submit" value="Créer un nouveau message" />
</fieldset>
</form>
<br />
<br />
<?php
/* Listage des messages du forum
*******************************/
// config de la date en fr
function convert_datetime($str)
{
list($date, $time) = explode(' ', $str);
list($year, $month, $day) = explode('-', $date);
list($hour, $minute, $second) = explode(':', $time);
$timestamp = mktime($hour, $minute, $second, $month, $day, $year);
return $timestamp;
}// fin : convert_datetime()
setlocale(LC_TIME, "fr_FR", "fr_FR@euro", "fr", "FR", "fra_fra", "fra");
//Listages des fils de discussion
//Boucle pour récupérer les Ids des premiers posts de chaque fil
$request_post_ids = mysql_query("SELECT post_id FROM $table WHERE post_parent_id='0'
ORDER BY post_id DESC");
while($tab_post_ids = mysql_fetch_array($request_post_ids))
{
$request_posts = mysql_query("SELECT * FROM $table
WHERE post_id='".$tab_post_ids['post_id']."'
OR post_parent_id='".$tab_post_ids['post_id']."'
ORDER BY post_id");
// Boucle pour l'affichage de chaque fil de discussion
while($tab_posts = mysql_fetch_array($request_posts))
{
$date = convert_datetime($tab_posts['post_date']);
echo'<p>';
if($tab_posts['post_id']==$tab_post_ids['post_id'])
{
echo '
<div class="userTopic">
'.$tab_posts['user_nickname'].',<br />
<span class="date">'.strftime("%A %d %B %Y à %Hh%M", $date).'</span>
</div>
<div class="contentTopic">
'.$tab_posts['post_content'].'
</div>
<div class="answerTopic">
<a href="'.$nomPage.'?parent='.$tab_posts['post_id'].'">Répondre</a>
</div>
';// fin echo
}//fin if
elseif($tab_posts['post_parent_id']==$tab_post_ids['post_id'])
{
echo '
<div class="userAnswer">
'.$tab_posts['user_nickname'].',<br />
<span class="date">'.strftime("%A %d %B %Y à %Hh%M", $date).'</span>
</div>
<div class="contentAnswer">
'.$tab_posts['post_content'].'
</div>
';// fin echo
}// fin elseif
echo '<span class="separation"> </span></p><br />';
// si on a demandé d'écrire une réponse on affiche le formulaire
if (isset($_GET['parent']) && $_GET['parent']==$tab_posts['post_id'])
{
echo '
<form action="#" method="post" name="newAnswer" class="formulaire" >
<fieldset>
<legend>Répondre au fil de discussion</legend>
<p>
<label for="nicknameNewAnswer">Votre login :</label>
<input type="text" name="nickname" value="nickname" id="nicknameNewAnswer" />
</p>
<p>
<label for="emailNewAnswer">Votre email :</label>
<input type="text" name="email" value="email" id="emailNewAnswer" />
</p>
<p>
<label for="contentNewAnswer" class="textarea">Votre message :</label>
<textarea name="content" rows="10" id="contentNewAnswer" >Tapez votre message ici.</textarea>
</p>
<input type="hidden" name="parent" value="'.$_GET['parent'].'">
<input type="submit" value="Répondre au message" />
</fieldset>
</form>
<br />
';
}//fin : if (isset($_GET['parent']) && is_int($_GET['parent']))
}// fin while affichage des fils
}//fin while recupération des ids des premiers message de chaque fil
mysql_close();
?>
</body>
</html>
styles.css
/***********************
**** FORMULAIRE ****
***********************/
.formulaire p{
margin: 2px 0;
}
/* fieldset , legend */
.formulaire fieldset
{
margin-top: 3em;
margin-bottom: 10px;
border: #CCC 1px solid;
}
.formulaire fieldset:hover
{
background-color: #FFF;
}
.formulaire fieldset legend
{
padding: 0 10px;
border-left: #CCC 1px solid;
border-right: #CCC 1px solid;
font-size: 1.2em;
color: #999;
}
/* Label
**********/
.formulaire label{
display: block;
float: left;
width: 39%;
background-color: #FFCC66;
padding-right: 1%;
text-align: right;
letter-spacing: 1px;
}
.formulaire label #textarea{
height:10em;
}
.formulaire label:hover{
font-weight: bold;
}
.formulaire .form_label_nostyle{
background: none;
}
/* Input
**********/
.formulaire input, .formulaire select{
margin-left: 1%;
width: 58%;
border: #CCC 1px solid;
}
.formulaire input:hover, .formulaire select:hover,
.formulaire input:focus, .formulaire select:focus,
.formulaire textarea:hover,.formulaire textarea:focus{
border: #999 1px solid;
background-color: #DDEEFF;
}
.formulaire input[type="hidden"]{
visibility:hidden;
}
.formulaire textarea{
margin-left: 1%;
width: 58%;
border: #CCC 1px solid;
}
/* button submit
****************/
.formulaire input[type="submit"]{
border: #DDEEFF 1px solid;
width: 98%;
}
.formulaire input[type="submit"]:hover{
background-color: #FFCC66;
cursor: pointer;
}
/***********************
******* FORUM *******
***********************/
.date{
font-size:x-small;
}
.separation{
height: 1px;
width: 100%;
}
/* Topics
****************/
.userTopic{
display: block;
float: left;
width: 15%;
background-color:#6495ed;
}
.contentTopic{
display: block;
float: left;
margin-left: 1%;
width: 72%;
border-top: thin solid #6495ed;
}
.answerTopic{
display: block;
float: left;
width: 10%;
margin-left: 1%;
text-align: center;
padding: .3em 0;
border: thin dotted #6495ed;
}
/* Reponses
****************/
.userAnswer{
display: block;
float: left;
margin-left:10%;
padding-left:1%;
width: 15%;
border-left: medium solid #6495ed;
}
.contentAnswer{
display: block;
float: left;
margin-left: 1%;
width: 72%;
}Bases Mysql
CREATE TABLE `posts2` (
`post_id` int(11) NOT NULL auto_increment,
`user_nickname` varchar(30) NOT NULL,
`user_email` varchar(50) NOT NULL,
`post_content` text NOT NULL,
`post_date` datetime NOT NULL,
`post_parent_id` int(11) NOT NULL,
PRIMARY KEY (`post_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
Modifié par eilijah (26 Sep 2008 - 18:27)