Comment créer une barre de recherche sur son site avec PHP et MySQL

par Tychic Obanda

---

Programmation web | 75 commentaires

---

Salut! Mbote la famille! Suite à vos demandes sur comment créer une barre de recherche sur son site, j'ai trouvé bon de vous écrire cet article pour répondre et aider tout celui qui souhaite créer une barre de recherche sur son site internet.

Vous aurez dans les jours qui viennent ce tutoriel en PDF et vidéo. Pour aujourd’hui, lisez-le quand même.

Il est très important d'ajouter une barre de recherche sur son site internet car celle-ci va faciliter les visiteurs de votre site de trouver facilement et rapidement ce qu'ils cherchent depuis votre site.

Si je parle de barre de recherche sur votre site, je parlerai de moteur de recherche pour des grands sites tels que Google, Facebook, Twitter, Amazon. Ces grands sites utilisent des algorithmes un peu plus complexes que ceux dont j'utilise dans ce tutoriel.

Pourquoi une barre de recherche et non pas un moteur de recherche?

Comme je viens de le dire, je préfère utiliser le terme simple barre de recherche que de dire moteur de recherche. On laisse le terme moteur de recherche pour des grands sites et focalisons-nous sur la barre de recherche qui, son rôle est de trier les articles contenant le terme de la requête de l'internaute.

Je dois être très simple dans ce tutoriel pour qu'on comprenne ensemble comment créer une barre de recherche sur son site internet.

Les avantages d'une barre de recherche sur son site web

Je ne peux pas seulement vous montrer comment créer cet outil sur votre site web sans que vous puissiez connaître les avantages qu'elle offre à votre site.

Une barre de recherche sur votre site est très importante car:

• Elle facilite une bonne navigation des internautes sur votre site;
• Elle vous permet d'avoir une idée sur ce que veulent les visiteurs de votre site;
• Elle vivifie votre site;
• Grâce elle, votre site peut être apprécié par les robots d'indexation.

Les connaissances nécessaires pour suivre ce tutoriel

Pour pouvoir être en mesure de créer une barre de recherche sur votre site internet, ou pour suivre ce tutoriel avec toute facilité, vous devez avoir quelques connaissances nécessaire en :

• PHP : il s'agira durant ce tutoriel de traiter les données d'un formulaire et vous le savez mieux que moi, pour traiter les données d'un formulaire, il faut utiliser le langage PHP.
• MySQL : les données qu'on va traiter se trouveront dans une base de données et seront stockées aussi dans cette même base de données. Une connaissance en MySQL(PDO) serait très importante pour suivre ce tutoriel.
• HTML : avec le HTML, on aura à créer le formulaire qui sera la base de cette barre de recherche.

Si vous avez toutes ces connaissances, je suis sûr que vous allez comprendre ce tutoriel sans problème.

Sinon si vous avez quelques-unes de ces connaissances, je vous demande de suivre le tutoriel avec attention et à chaque fois que vous aurez des difficultés, utilisez l'espace commentaire de notre site pour exposer votre problème et il y aura une personne de bonne foi qui vous aidera.

Sinon, vous devez soit fermer ce tutoriel et allez apprendre les langages cités ci-haut, soit continuer à lire ce tutoriel en se forçant de comprendre et à chaque fois que vous rencontrerez des difficultés, l'espace commentaire est là pour vous aider.

Je n'ai pas parlé de CSS parce que la mise en forme de cette barre de recherche dépend du design de votre site. Améliorez-la selon votre site.

Maintenant que vous avez l'idée sur ce qu'il vous faut pour continuer ce tutoriel, je pense qu'on peut déjà se lancer. Bonne chance et bonne compréhension à tous!

Création de la base de données

Nous allons partir de l'idée que cette barre de recherche consistera à trier les articles de votre site ayant des termes tapés par l'internaute depuis votre site. Créons maintenant notre base de données.

Pour créer une base de données, c'est très simple. Il suffit juste de se rendre sur phpMyAdmin depuis WAMP et d'en créer une.

Cette base de données je l'ai nommée bdr. bdr veut juste dire Barre De Recherche. Une fois que vous avez écrit le nom de la base de données, appuyez sur Créer pour créer cette base de données.

Après la création de la base de données, il faut maintenant créer une table dans cette base de données. La table que vous allez créer, nommez-la articles. Elle contiendra trois champs :

• id : pour numéroter les champs. type = int(11);auto_increment;primary
• titre : le titre de l'article. type = varchar(255)
• contenu : le contenu de l'article. type = text

La table articles est créée. Il faut maintenant remplir cette table. Pour faire simple, j'ai choisi 5 articles déjà publiés sur 243tech.com pour remplir la table.

Vous pouvez télécharger directement cette base de données déjà remplies en cliquant sur ce lien TELECHARGER LA BASE DE DONNEES

Comment importer une base de données sur son ordinateur

Après avoir téléchargé la base de données(c'est un fichier nommé bdr.sql), vous devez l'importer sur votre projet.

Pour importer une base de données, allez dans phpMyAdmin, créez une base de données nommée bdr. Une fois la base créée, allez dans l'onglet Importer et cliquez sur Parcourir. Une fenêtre va s'ouvrir pour vous permettre de choisir le fichier bdr.sql que vous venez de télécharger. Choisissez le fichier bdr.sql et appuyez sur le bouton Exécuter en bas de la page. Et à la fin vous verrez un message en vert pour signaler que la base a été importé avec succès.

Pour ceux qui n'ont pas téléchargé la base de données, vous pouvez remplir la table articles avec vos propres exemples.

Création du projet

Maintenant nous allons créer le projet. Donc le dossier qui contiendra les fichiers auxquels nous allons utiliser dans ce tutoriel.

Dans le dossier www du wamp, créez un dossier et renommez-le bdr; et ouvrez maintenant l'éditeur de texte en créant deux nouveaux fichiers php que vous allez nommer index.php et verif-form.php. Si vous avez bien compris, index.php et verif-form.php se trouveront dans le dossier bdr.

La page index.php contiendra le formulaire qui sera notre barre de recherche. Voici les codes que vous devez avoir sur index.php

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "utf-8">
  <title>Barre de recherche</title>
 </head>
 <body>
  <form action = "verif-form.php" method = "get">
   <input type = "search" name = "terme">
   <input type = "submit" name = "s" value = "Rechercher">
  </form>
 </body>
</html>

Quelques explications pour ces codes

S'il faut expliquer ces quelques lignes de codes, je dirai ceci :

• action = "verif-form.php" : cet attribut contient le fichier qui va traiter les données qui seront saisies par l’internaute depuis le site.
• method = "get" : cet attribut permet de définir la manière dont les données seront transitées dans l'URL. Certains d'entre vous diront pourquoi j'ai utilisé le GET au lieu de POST. Je dirai que, quand il s'agit d'une recherche effectuée par l'internaute, c'est mieux d'utiliser GET pour permettre à l'internaute de modifier sa requête directement depuis l'URL. Google, Facebook, Youtube, 243tech, utilisent le GET.
• <input type = "search" name = "terme"> : terme est la variable $_GET['terme']
• <input type = "submit" name = "s" value = "Rechercher"> : s est la variable $_GET["s']

Notre barre de recherche est déjà fait avec du HTML et il faut maintenant traiter ce formulaire avec du PHP.

Traitement du formulaire

Ouvrez maintenant le fichier verif-form.php depuis l'éditeur de texte. Ce fichier jouera deux rôles dans ce tutoriels :

1. Traiter les informations saisies par l'internaute dans la barre de recherche(PHP)
2. Afficher le résultat de recherche du terme saisi par l'internaute(PHP, MySQL et HTML)

Connexion à la base de données

Pour pouvoir travailler avec la base de données en PHP, il faut d'abord s'y connecter.
Nous allons apprendre dans ce chapitre à lire des données dans une BDD (base de données). Or, je vous rappelle que PHP doit faire l'intermédiaire entre vous et MySQL.

En effet, PHP propose plusieurs moyens de se connecter à une base de données MySQL.

• L'extension mysql_ : ce sont des fonctions qui permettent d'accéder à une base de données MySQL et donc de communiquer avec MySQL. Leur nom commence toujours par mysql_. Toutefois, ces fonctions sont vieilles et on recommande de ne plus les utiliser aujourd'hui.
• L'extension mysqli_ : ce sont des fonctions améliorées d'accès à MySQL. Elles proposent plus de fonctionnalités et sont plus à jour.
• L'extension PDO : c'est un outil complet qui permet d'accéder à n'importe quel type de base de données. On peut donc l'utiliser pour se connecter aussi bien à MySQL que PostgreSQL ou Oracle.

Vous l'aurez compris, les fonctions mysql_ ne sont plus à utiliser (on dit qu'elles sont " obsolètes »). Il reste à choisir entre mysqli_ et PDO. Nous allons ici utiliser PDO car c'est cette méthode d'accès aux bases de données qui va devenir la plus utilisée dans les prochaines versions de PHP. D'autre part, le gros avantage de PDO est que vous pouvez l'utiliser de la même manière pour vous connecter à n'importe quel autre type de base de données (PostgreSQL, Oracle…)

Comment activer PDO sur WAMP

Normalement, PDO est activé par défaut. Pour le vérifier, faites un clic gauche sur l'icône de WAMP dans la barre des tâches, puis allez dans le menu PHP / Extensions PHP et vérifiez que php_pdo_mysql est bien coché.

<?php
try
{
 $bdd = new PDO("mysql:host=localhost;dbname=bdr", "root", "");
 $bdd ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(Exception $e)
{
  die("Une érreur a été trouvé : " . $e->getMessage());
}
$bdd->query("SET NAMES UTF8");
?>

Explications

La ligne de code avec $bdd qu'on vient de voir crée ce qu'on appelle un objet $bdd. Ce n'est pas vraiment une variable (même si ça y ressemble fortement) : c'est un objet qui représente la connexion à la base de données. On crée la connexion en indiquant dans l'ordre dans les paramètres :

• le nom d'hôte (localhost) ;
• la base de données (bdr) ;
• le login (root) ;
• le mot de passe (ici il n'y a pas de mot de passe, j'ai donc mis une chaîne vide). Lorsque votre site sera en ligne, vous aurez sûrement un nom d'hôte différent ainsi qu'un login et un mot de passe

Sans trop rentrer dans le détail, il faut savoir que PHP essaie d'exécuter les instructions à l'intérieur du bloc try. S'il y a une erreur, il rentre dans le bloc catch et fait ce qu'on lui demande (ici, on arrête l'exécution de la page en affichant un message décrivant l'erreur).

Si au contraire tout se passe bien, PHP poursuit l'exécution du code et ne lit pas ce qu'il y a dans le bloc catch. Votre page PHP ne devrait donc rien afficher pour le moment.

Si vous avez du mal à comprendre, ce n'est pas grave. Je vais bientôt écrire un article sur ce sujet d'erreur et vous aurez plus de détails.

Traitement du formulaire proprement dit

On traite maintenant notre formulaire. Pour s'assurer que l'utilisateur à appuyer sur le bouton Rechercher, et que ce bouton contient bel et bien le mot Rechercher, il faudra passer par des vérifications des instructions. Ajoutez ces codes dans le fichier verif-form.php

if (isset($_GET["s"]) AND $_GET["s"] == "Rechercher")
{
 $_GET["terme"] = htmlspecialchars($_GET["terme"]); //pour sécuriser le formulaire contre les failles html
 $terme = $_GET["terme'];
 $terme = trim($terme); //pour supprimer les espaces dans la requête de l'internaute
 $terme = strip_tags($terme); //pour supprimer les balises html dans la requête
}

Ces codes permettent de sécuriser les données qui seront saisies par l'internaute car vous ne devez jamais faire confiance aux données saisies par les internautes.

Dans les prochaines lignes de codes, j'ai créé une variable qui va contenir les articles de la table articles qui contiennent la valeur de la variable $terme. Avant ça, il faut utiliser la fonction strtolower pour mettre la valeur de $terme en minuscule. Voici les codes que vous allez ajouter après la ligne $terme = strip_tags($terme); //pour supprimer les balises html dans la requête :

if (isset($terme))
{
 $terme = strtolower($terme);
 $select_terme = $bdd->prepare("SELECT titre, contenu FROM articles WHERE titre LIKE ? OR contenu LIKE ?");
 $select_terme->execute(array("%".$terme."%", "%".$terme."%"));
}
else
{
 $message = "Vous devez entrer votre requete dans la barre de recherche";
}

Explications

• Si $terme est envoyé sur cette page, toutes les instructions à l’intérieur du bloc de if seront exécuter. Sinon, il y a une variable $message qui va contenir le message d'erreur qui sera afficher à l'écran. On verra ça après.
• $select_terme = $bdd->prepare("SELECT titre, contenu FROM articles WHERE titre LIKE ? OR contenu LIKE ?") : cette ligne signifie, on crée une variable $select_terme qui va sélectionner les titres et les contenus des articles qui contiennent des mots qui ressemblent à la requête de l'internaute.
• La requête est alors prête, sans sa partie variable. Maintenant, nous allons exécuter la requête en appelant execute et en lui transmettant la liste des paramètres array("%".$terme."%", "%".$terme."%")

Donc en tout, on aura ces codes sur la page verif-form

<?php
try
{
 $bdd = new PDO("mysql:host=localhost;dbname=bdr", "root", "");
 $bdd ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(Exception $e)
{
  die("Une érreur a été trouvé : " . $e->getMessage());
}
$bdd->query("SET NAMES UTF8");

if (isset($_GET["s"]) AND $_GET["s"] == "Rechercher")
{
 $_GET["terme"] = htmlspecialchars($_GET["terme"]); //pour sécuriser le formulaire contre les intrusions html
 $terme = $_GET["terme'];
 $terme = trim($terme); //pour supprimer les espaces dans la requête de l'internaute
 $terme = strip_tags($terme); //pour supprimer les balises html dans la requête

 if (isset($terme))
 {
  $terme = strtolower($terme);
  $select_terme = $bdd->prepare("SELECT titre, contenu FROM articles WHERE titre LIKE ? OR contenu LIKE ?");
  $select_terme->execute(array("%".$terme."%", "%".$terme."%"));
 }
 else
 {
  $message = "Vous devez entrer votre requete dans la barre de recherche";
 }
}
?>

Tout ces codes seront placés au début du fichier verif-form.php. Maintenant créez une structure de page html qui va permettre d'afficher les résultats de la recherche.

Ajouter ces codes html et php en bas des codes que nous venons d'écrire.

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "utf-8" >
  <title>Les résultats de recherche</title>
 </head>
 <body>
  <?php
  while($terme_trouve = $select_terme->fetch())
  {
   echo "<div><h2>".$terme_trouve['titre']."</h2><p> ".$terme_trouve['contenu']."</p>";
  }
  $select_terme->closeCursor();
   ?>
 </body>
</html>

Explications

C'est la partie php qui va nous intéresser le plus.

• On crée une boucle(while) qui va afficher tous les titres et contenus contenant le terme cherché par l'internaute.

Voici en image un résultat que j'ai obtenu avec comme terme de recherche Programmation

Avec ce tutoriel, je suis sûr que vous êtes maintenant capable de créer une barre de recherche sur votre site web. Dans quelques jours, je vais créer une vidéo pour vous aider à bien comprendre ce sujet.

Pour terminer, je dirai ceci : si vous avez rencontré des difficultés pour comprendre ce tutoriel, utilisez l'espace commentaire pour me faire savoir ce qui vous bloque et je suis là pour vous aider.

---

75 commentaires