Le magasin YBET

Rue Albert 1er, 7

6810 Pin - Chiny

Route Arlon - Florenville

(/fax: 061/32.00.15

Les formations YBET sur Internet

YBET informatique

Comment créer son site

20. Affichage des annonces sur le site internet.

1. Affichage en liste simple - 2. Affichage complet - 3. Affichage bannière - 4. Les annonces par catégories

Dans le chapitre précédant, nous avons inséré les annonces. Même si les procédures ne sont pas complètes, elles nous permettent maintenant de travailler directement sur des annonces insérées dans la base de donnée.

Par facilité, nous allons créer 3 affichages différents de nos annonces:

un affichage en liste reprenant le titre et l'image miniature, dans les catégories ou en recherche.
un affichage complet sur une page reprenant toutes les informations de l'annonce.
un affichage simple, uniquement l'image miniature, le titre et la description. Cette méthode est utilisée dans de nombreux sites d'annonces. Dans notre cas, elle sera surtout utilisée plus tard comme bannières sur le site (genre dernières annonces postées) en renvoyant vers l'annonce effective par exemple

1. L'affichage en liste simple

Cette première partie va nous permettre d'afficher toutes les annonces reprises sur le site. Elle ne sera normalement pas utilisée pour les visiteurs standards mais nous utiliserons cette programmation dans le cas d'une recherche.

Comme d'habitude, nous allons travailler étape par étape.

la requête MySQL de sélection n'est pas très complexe, nous avons juste ajouté order by 'dateinsertion' DESC. qui récupère les résultat par ordre décroissant sur la date d'insertion. Pour un ordre ascendant, DESC est remplacé par ASC.
Nous récupérons finalement les données sous forme standard, avec la variable $tableau. Quelques nouvelles commandes sont néanmoins utilisées. L'affichage de l'image se fait à l'aide d'une commande HTML récupérant le nom de l'image: <p><img border="0" src="images\<?php print($tableau["photo"]);?>"></p>.
La deuxième modification vient de l'affichage de la description
$description= $tableau['description'];
print("<br>".nl2br($description)."<br>");
On récupère d'abord la valeur sous forme d'une simple variable, plus nous l'affichons en utilisant la fonction nl2br(). Même si nous avons rencontré cette fonction, nous ne l'avons pas encore utilisée. Elle permet d'imprimer les sauts de lignes inclut dans la valeur de la table MySQL. Sans cette commande, PHP affiche tout le texte sur une même ligne.
En dernier, nous n'affichons le numéro de téléphone que si la case tel est effectivement oui.
La mise en page sommaire se contente d'insérer une ligne entre chaque annonces.

<?php
require('includes/start.php');
$requete="select * from annonce order by 'dateinsertion' DESC";
$valeur=mysql_query($requete);
$tableau=array();
while ($tableau=mysql_fetch_array($valeur)){
echo$tableau['code']."-".$tableau['titre']."-<br>";
print($tableau['uid-cat']);
?>
<p><img border="0" src="images/<?php print($tableau["photo"]);?>"></p>
<?php

$description= STRIPSLASHES($tableau['description']);

print("<br>".nl2br($description)."<br>");
print("- ".$tableau['dateinsertion']."<br>");
Print($description= $tableau['ville']." (".$tableau['pays']." )");
Print("Prix :".$tableau['Prix']);
if ($description= $tableau['tel']=="O"){
Print("<br>Téléphone: ".$tableau['telephone']);
}
print("<hr>");
}
require('includes/stop.php');
?>

Rien de bien sérieux ici mais quelques erreurs ou omissions sont incluses.

Un affichage correct utilise des tableaux ou une feuille de style
Nous affichons le numéro de la catégorie, son titre serait plus explicite.
L'image affichée est l'image normale, l'image miniature serait préférable.
Nous ne l'avons pas affiché mais un lien vers l'utilisateur serait préférable. Nous aborderons cette partie en vérifiant les paramètres id de l'utilisateur dans un prochain chapitre.

MySQL est relationnel, mais à ce stade du tutorial, nous allons juste récupérer les variables par de simple recherche.

Commençons par récupérer le titre de la catégorie, nous connaissons déjà son numéro par $tableau['uid-cat']. Il nous suffit juste de créer une requête sur la table categorie pour récupérer la description. Par contre si, dans le cas d'une sous-catégorie, nous souhaitons récupérer toute la description, nous devons également récupérer la description des catégories supérieures. Ce développement a déjà été fait, il faut juste l'adapter. Nous utilisons une fonction appelée catégorie qui renvoie simplement la description. Remarquez que nous avons laissé les valeurs du tableau catégorie. Ceci nous permettra de récupérer d'autres valeurs éventuellement.

La partie suivante est de récupérer l'image sous forme de miniature. Dans notre base de donnée, l'adresse de l'image est codée sous la forme code_annonce-nom_image. Par contre la miniature est codée sous le nom: code_annonce-mini-nom_image. J'avoue que ça aurait été plus facile si la miniature était codée sous la forme mini-code_annoncenom_image, il suffisait de supprimer "mini-". Nous allons utiliser les fonctions de recherche dans une chaîne vues au chapitre 6.

Nous devons d'abord rechercher les caractères "mini-" et les remplacer par rien. Cette partie utilise simplement la fonction STR_replace("caractère à remplacer","caractère de remplacement'",$variable).

La partie affichage de l'image <p><img border="0" src="images\<?php print($tableau["photo"]);?>"></p> devient: <p><img border="0" src="images\/<?php print(STR_replace("-","-mini-",$tableau["photo"]));?>"></p>.

Notre fichier à ce stade devient simplement:

<?php
require('includes/start.php');
require('includes/fonctions.php');
$requete="select * from annonce order by 'dateinsertion' DESC";
$valeur=mysql_query($requete);
$tableau=array();
while ($tableau=mysql_fetch_array($valeur)){
echo$tableau['code']."-".$tableau['titre']."-<br>";
print($tableau['uid_cat']);
$categorie= categorie($tableau['uid_cat']);
print("Catégorie: ".$categorie);
?>
<p><img border="0" src="images\/<?php print(STR_replace("-","-mini-",$tableau["photo"]));?>"></p>
<?php
$description= $tableau['description'];
print(nl2br($description)."<br>");
print("- ".$tableau['dateinsertion']."<br>");
Print($description= $tableau['ville']." (".$description= $tableau['pays']." )");
Print("Prix :".$description= $tableau['Prix']);
if ($description= $tableau['tel']=="O"){
Print("<br>Téléphone: ".$description= $tableau['telephone']."<br>");
}
print("<hr>");
}
?>

Remarque: cette partie nécessite 2 logos dans le dossier images, un logo standard et une version réduite: logo-mini.gif

L'affichage sous forme de tableau va prendre ce lay-out:

Titre de l'annonce	description de la catégorie	code annonce
image miniature	Description de l'annonce
image miniature	Ville (Pays)
Prix		Téléphone
Date insertion		utilisateur

Il va falloir simplement adapter l'affichage des données à partir d'ici:

<?php
require('includes/start.php');
require('includes/fonctions.php');
$requete="select * from annonce order by 'dateinsertion' DESC";
$valeur=mysql_query($requete);
$tableau=array();
while ($tableau=mysql_fetch_array($valeur)){
?>
<div align="center">
<center>
<table border="1" width="90%">
<tr>
<td width="33%"><b><font size="4"><?php Print($tableau['titre']);?></font></b></td>
<td width="33%"><b>
<?php
$categorie= categorie($tableau['uid_cat']);
print("Catégorie: ".$categorie);
?>
</b></td>
<td width="34%" align="right"><font color="#0000FF"><b><?php echo$tableau['code'];?></b></font></td>
</tr>
<tr>
<td width="33%" rowspan="2"><img border="0" src="images\<?php print(STR_replace("-","-mini-",$tableau["photo"]));?>">
</td>
<td width="67%" colspan="2">
<?php
$description= $tableau['description'];
print(nl2br($description)."<br>");
?>
</td>
</tr>
<tr>
<td width="67%" colspan="2" align="right"><?php Print($description= $tableau['ville']." (".$description= $tableau['pays']." )"); ?>
</td>
</tr>
<tr>
<td width="33%"><b><?php Print("Prix :".$description= $tableau['prix']); ?></b></td>
<td width="33%"> </td>
<td width="34%" align="center"><b>
<?php
if ($description= $tableau['tel']=="O"){
Print("Téléphone: ".$description= $tableau['telephone']);
}
?>
</b></td>
</tr>
<tr>
<td width="33%" align="center"><b>
<?php
list($year, $month, $day) = explode("-", $tableau['dateinsertion']);
echo $day."/".$month."/".$year;
?>
</b></td>
<td width="33%"> </td>
<td width="34%" align="right"><b>
<?php
print($tableau['uid_util']);
?>
</b></td>
</tr>
</table>
</center>
</div>
<hr color="#0000FF">
<?php
}
?>

Les lignes

list($year, $month, $day) = explode("-", $tableau['dateinsertion']);
echo $day."/".$month."/".$year;

permettent d'afficher la date au format européens.

Nous pouvons également modifier le tri en sélectionnant un tri multiple dans l'option ORDER BY de la requête MySQL SELECT, par exemple trié par catégorie, ensuite par date d'insertion.

$requete="select * from annonce order by 'uid_cat' DESC, 'dateinsertion' DESC";

2. Affichage complet

La deuxième partie va nous permettre d'afficher une page par annonce. Nous pourrions utiliser une construction similaire à celle ci-dessus mais au niveau référencement, ce serait irréaliste. La solution passe par une page récupérant le numéro de l'annonce, de type affichage-fiche?numéro où le numéro est en fait code de l'annonce. La méthode de transfert sera GET, le paramètre sera donc envoyé directement dans l'en-tête du fichier.

Modifions notre affichage-liste en remplaçant:

Print($tableau['titre']);

Par:

$code=$tableau['code'];
$titre=$tableau['titre'];
print("<a href=\"affichage-fiche.php?id=$code\">$titre</a>");

Print($tableau['code']);

Par:

print("<a href=\"affichage-fiche.php?id=$code\">$code</a>");

(la variable $code est déjà définie ci-dessus).

Pour comprendre cette partie, commençons par étudier le code html d'un lien:

<a href="adresse du lien">texte du lien</a>

Nous remplaçons finalement l'adresse du lien par: "<a href=\"affichage-fiche.php?id=$code\" où affichage-fiche.php est le nom du fichier qui reçoit le lien avec ?id=paramètre à transférer, dans notre cas, $code. Attention au caractères \ devant les guillemets. Le texte du lien est remplacé par le titre de l'annonce ($titre) ou le code de l'annonce ($code).

L'affichage de la page de l'annonce donne:

<?php
require('includes/start.php');
// cette partie ouvre la base de donnée
include('includes/header.php');
require('includes/fonctions.php');
?>
<div align="center">
<table border="1" width="90%">
<tr>
   <td width="20%" align="center">
    <?php
    include('includes/colon-left.php');
    ?>
   </td>
<td width="60%" align="center">
<?php
     // La fiche de la petite annonce.
    if (!isset($_GET['id'])){
      Print("Cette annonce n'existe pas");
   }else{
      $code = ($_GET['id']);
      $requete="select * from annonce where code='$code'";
      $valeur=mysql_query($requete);
      $tableau=array();
      while ($tableau=mysql_fetch_array($valeur)){
        ?>
       <font size="4"><?php Print($tableau['titre']."<br>");?></font>
       <?php
       $categorie= categorie($tableau['uid_cat']);
       print("<hr>Catégorie: <b>".$categorie."</b> Numéro: ");
        ?>
</b><font color="#0000FF"><b><?php echo$tableau['code']."<br>";
?></b></font>
<img border="0" src="images\<?php print($tableau["photo"]);?>">
<?php
$description= $tableau['description'];
print("<br>".nl2br($description)."<br>");
Print("<br>".$tableau['ville']." (".$tableau['pays']." )");
if ($tableau['prix']==0){
print("<br>Prix: Non communiqué");
}else{
Print("<br><b>Prix :".$tableau['prix']."</b>");
}
if ($tableau['tel']=="O"){
Print("<br>Téléphone: ".$tableau['telephone']);
}
list($year, $month, $day) = explode("-", $tableau['dateinsertion']);
echo "<br>".$day."/".$month."/".$year;
print("<br>".$tableau['uid_util']."</b>");
}
}
?>
</td>
<td width="20%" align="center">
<?php
include('includes/colon-right.php');
?>
</td>
</tr>
</table>
</div>
<?php
include('includes/footer.php');
?>

3. Affichage bannière.

La méthode suivant va finalement reprendre l'affichage global de la page mais sous forme restreinte: titre, début de description, prix. Ce format sera dédié aux annonces à droite de nos pages, reprenant les dernières annonces en ligne par exemple.

<?php
require('includes/start.php');
// cette partie ouvre la base de donnée
require('includes/fonctions.php');
// La fiche de la petite annonce.
if (!isset($_GET['id'])){
Print("Cette annonce n'existe pas");
}else{
$code = ($_GET['id']);
$requete="select * from annonce where code='$code'";
$valeur=mysql_query($requete);
$tableau=array();
while ($tableau=mysql_fetch_array($valeur)){
$code=$tableau['code'];
$titre=$tableau['titre'];
print("<a href=\"affichage-fiche.php?id=$code\">$titre</a>");
?>
<p><img border="0" src="images\/<?php print(STR_replace("-","-mini-",$tableau["photo"]));?>">
</p>
<?php
$description=substr($tableau['description'],0,30);
print("<br>".nl2br($description)."...<br>");

if ($tableau['prix']<>0){
Print("<br><b>Prix :".$tableau['prix']."</b>");
}
}
}
?>

Dans un chapitre suivant, nous verrons comment insérer les annonces dans notre colonne de droite de manière aléatoire.

5. Affichage des annonces d'une catégorie uniquement.

Cette dernière partie va permettre d'afficher toutes les annonces mais seulement d'une catégorie. Pour celà, nous allons utiliser la même méthode que pour l'affichage des annonces: une fonction GET qui envoie le numéro de la catégorie vers un fichier affichage-catégorie.php. Seule réelle différence, le numéro de la catégorie est sélectionné à l'aide du menu déroulant développée au chapitre 16.

Cette liste de choix sera insérée à gauche de nos page par exemple (donc dans le fichier includes\column-left.php).

Nous avons utilisé la formule suivante pour envoyer un lien de l'affichage-liste vers la fiche de chaque publicité suivant le code.

print("<a href=\"affichage-fiche.php?id=$code\">$code</a>");

Dans notre précédant développement, nous utilisions les lignes de codes suivantes insérées dans un formulaire auto-invoquant (en plus de la partie récupération des différentes catégories dans un tableau).

<table>
<form method=\"POST\">
<p><select size=\"1\" name='uid'>";
while ($i<$ligne){
$uid= $categorie_tab[$i]['uid'];
$complet= $categorie_tab[$i]['complet'];
$liste=$liste."<option value=".$uid.">".$complet."</option>";
$i=$i+1;
}
$liste=$liste."</select><p><input type=\"submit\" value=\"Envoyer\" name=\"go\"><input type=\"reset\" value=\"Rétablir\" name=\"B2\"></p>
</form>
</table>
<HR>

Toute l'astuce va être d'utiliser cette fois la méthode GET et de transférer le résultat vers le fichier affichant les différentes annonces de la catégorie souhaitée.

Vous le voyez, peu de modifications finalement pour notre formulaire. La partie affichage ne pose pas de problèmes particulier. Le formulaire envoie directement au fichier PHP affichage catégories ci-dessous. Attention que l'affichage ne fonctionne que si vous passez une variable. Je laisse à chacun le soin d'adapter son affichage.

<?php
require('includes/start.php');
// cette partie ouvre la base de donnée
include('includes/header.php');
require('includes/fonctions.php');
?>
<div align="center">
<table border="1" width="90%">
<tr>
<td width="20%" align="center">
<?php
include('includes/colon-left.php');
?>
</td>
<td width="60%" align="center">
<?php
// La fiche de la petite annonce.
if (!isset($_GET['uid'])){
Print("Cette annonce n'existe pas");
}else{
$code = ($_GET['uid']);
$requete="select * from annonce where uid_cat='$code' order by 'dateinsertion' DESC";
$valeur=mysql_query($requete);
$tableau=array();
while ($tableau=mysql_fetch_array($valeur)){
?>

<div align="center">
<center>
<table border="1" width="100%">
<tr>
<td bgcolor="#FFFFCC">
<img border="0" src="images\<?php print(STR_replace("-","-mini-",$tableau["photo"]));?>" align="right">
<font size="4">
<?php
$code=$tableau['code'];
$titre=$tableau['titre'];
print("<a href=\"affichage-fiche.php?id=$code\">$titre</a>");
?>
</font>
</td>
</tr>
</table>
</center>
</div>
<?php
$categorie= categorie($tableau['uid_cat']);
print("Catégorie: <b>".$categorie."</b> ");
if ($tableau['prix']==0){
print("Prix: Non communiqué");
}else{
Print("<b>Prix :".$tableau['prix']."</b>");
}
$description= $tableau['description'];
print("<br>".nl2br($description)."<br>");
Print("<br>".$tableau['ville']." (".$tableau['pays']." )");

if ($tableau['tel']=="O"){
Print("<br>Téléphone: ".$tableau['telephone']);
}
list($year, $month, $day) = explode("-", $tableau['dateinsertion']);
echo "<br>".$day."/".$month."/".$year;
print(" - Posteur: ".$tableau['uid_util']."</b>");
}
}
?>
</td>
<td width="20%" align="center">
<?php
include('includes/colon-right.php');
?>
</td>
</tr>
</table>
</div>
<?php
include('includes/footer.php');
?>

Un chapitre suivant de cette formation va nous permettre d'utiliser cette partie pour la recherche d'annonces. Nous utiliserons 2 niveaux de recherche, simple et avancées. Mais d'abord, nous allons ajouter quelques "précautions" dans l'insertion des annonces, notamment la mise à l'écart d'annonces reprenant des mots interdits, liens hypertextes, adresses mails, ...

> 22. Mots interdits dans les annonces

<20. Formulaire d'insertion d'annonce

Mise en ligne: 05/06/2006