Atelier PHP/MySQL
Site de petites annonces.


Prérequis : atelier "authentification d'utilisateur", savoir écrire des requêtes SQL.

Information sur... Les sites de petites annonces.

Les fonctionnalités proposées par les sites de petites annonces traditionnels, après authentification, sont :

  • dans la page de gestion du compte :
    • ajouter une nouvelle annonce ;
    • voir la liste des annonces que l'adhérent a lui-même déposé, les supprimer ou les prolonger ;
    • voir la liste des "annonces favorites" de l'adhérent ;
    • modifier les coordonnées de l'adhérent (password, e-mail, adresse postale).
  • dans la page de consultation des annonces :
    • affichage des annonces qui répondent à un critère donné (date, département, catégorie, achat/vente, mots-clés) ;
    • ajouter une annonces aux "annonces favorites", lorsqu'elle intéresse particulièrement celui qui la consulte, il peut ainsi y accéder directement à partir de son compte ;
    • changer la méthode de tri des annonces affichées : par date, par prix.

Voici des exemples de sites de petites annonces dont vous pouvez vous inspirer pour créer le votre :

  • www.ordikaz.com : excellent site de petites annonces dédiées à l'informatique, riche en annonces, simple et efficace coté fonctionnalités. Une référence dans le genre.
  • cours.sebastien-pastore.com : la gestion des annonces réduite à son strict minimum... Vous devez forcément faire mieux !
  • www.bonjour.fr : le site des journaux gratuits. Enorme au niveau des fonctionnalités et du nombre d'annonces, mais le dépôt d'annonces est payant.

Cet atelier a pour objectif de vous faire faire un site semblable, et vous aurez à l'issue de celui-ci une bonne maîtrise du PHP qui vous permettra de vous lancer dans le développement de n'importe quel site dynamique.


1
Création de la base MySQL
des utilisateurs et des annonces.

Voici une proposition pour les tables et les champs utilisés par le site :

Et voici des exemples de :

Information sur... Le type enum dans MySQL.

Le type ENUM est une chaîne, dont la valeur est choisie dans une liste de valeurs prédéfinies. Par exemple, si le champ achatvente est de type ENUM("Achat", "Vente", "Location") alors il peut prendre les valeurs "", NULL, "Achat", "Vente" ou "Location".

Ensuite on peut utiliser ce champ, par exemple, des différentes façons suivantes :

  • Select ... Where achatvente = "Achat" ;
  • Select ... Where achatvente = 1 ;
  • insert into annonce values (..., "Vente");
  • insert into annonces values (..., 2);

Au niveau de l'interface graphique, ces champs sont en général représentés par une zone de liste, par exemple ainsi :


2
Création de la page d'accueil
et mise en place de l'inscription-authentification.

Créez une page d'accueil au format HTML. Cette page, assez rudimentaire, doit contenir (outre le logo du site, les informations de copyright, les abonnements à la newsletter, et tous les autres éléments que l'on retrouve traditionnellement sur les pages d'accueil de sites) :

D'autre part, l'accès à cette page d'accueil doit être précédé d'une procédure d'inscription-authentification comme on l'a mise en place dans l'atelier précédent. Vous pouvez reprendre telles quelles les pages de l'atelier précédent pour commencer celui-ci. Faites-le.

3
Création du formulaire
pour ajouter une annonce.

Créez la page de gestion du compte de l'utilisateur mon_compte.php. A terme, cette page devrait permettre de changer les coordonnées, le mot de passe, l'adresse électronique, consulter les annonces favorites, supprimer ou prolonger les annonces personnelles, et ajouter de nouvelles annonces.

Dans cette page, commencez par créer le formulaire de saisi d'une nouvelle annonce, basé sur ce modèle :

<form method=post action=ajoute_annonce.php>
  Titre : <input type=text name=formtitre><br>
  Texte :<textarea cols=40 rows=6 name=formtexte>Texte de l'annonce ici</textarea><br>
  Catégorie : <input type=text name=formcategorie><br>
  Prix : <input type=text name=formprix> €<br>
  Achat ou vente : <select name=formachatvente>...</select><br>
  <input type=submit name=ajoute_annonce value=Ajouter>
</form>

Ce formulaire va être traité dans l'étape suivante.

Information sur... Les contrôles "zone de liste".

La zone de liste suivante a pour code HTML :

<select name="formachatvente">
  <option value="1" selected>Achat</option>
  <option value="2">Vente</option>
  <option value="3">Echange</option>
  <option value="4">Location</option>
  <option value="5">Contact</option>
</select>


4
Code PHP
pour ajouter une annonce.


Conformément à ce qu'on a écrit dans le formulaire précédent, l'ajout d'une annonce va se faire dans la page nommée ajoute_annonce.php.

Remarque sur... La vérification des formulaires.

De la façon dont on procède ici, le contenu du formulaire est envoyé au serveur Internet avant que son contenu soit vérifié. Si celui-ci n'est pas valide, un réponse est envoyée du serveur Internet vers le navigateur. Tout ceci prend du temps, notamment si cela passe par une connexion Internet lente.

Pour accélérer le processus, on peut effectuer la validation grâce au Javascript, directement sur le navigateur. Ainsi, le contenu du formulaire peut être vérifié avant même d'être transmis au serveur Internet. Consultez l'atelier Javascript pour la réalisation pratique.


5
Code PHP pour consulter les annonces :
utilisation de mysql_fetch_array.

On va ici créer la page consultation.php, qui affiche toutes les annonces, triées par ordre chronologique décroissant. Vous allez découvrir une nouvelle fonction de PHP : mysql_fetch_array, qui permet de parcourir l'ensemble des enregistrements résultants d'une requête.

6
Code PHP pour supprimer une annonce
à partir de la page de gestion du compte.
7
Ajouter une demande de confirmation de suppression, en JavaScript,
pour éviter l'effacement involontaire d'annonce.
8
Méthode pour afficher les annonces 10 par 10,
avec les boutons suivantes et précédentes.

On va ici modifier la page consultation.php, avec l'intégration d'une nouvelle variable base_annonce, qui représente le numéro d'ordre de la première annonce à afficher. La première fois qu'on arrive sur consultation.php, sa valeur doit être mise à 0 :

if (!isset($base_annonce)) $base_annonce=0 ;

Pour afficher uniquement 10 annonces :

Lorsqu'on a affiché 10 annonces, on traite les liens Précédentes et Suivantes :


Sébastien PASTORE.