Dans cette vidéo tutorielle, le créateur explique pas à pas comment implémenter une barre de recherche locale qui interroge une base de données MySQL. Il commence par présenter le formulaire HTML utilisant la méthode GET, le style CSS associé et les zones réservées à l’affichage des résultats et du nombre de résultats. Ensuite, il décrit le traitement PHP : récupération des variables superglobales, nettoyage de l’entrée avec trim, vérification de la soumission du formulaire et gestion du cas où le champ est vide. Il montre d’abord une implémentation simple qui ne gère qu’un seul mot‑clé, puis il enrichit le code pour accepter plusieurs mots en séparant la chaîne d’entrée avec explode, en construisant dynamiquement un tableau de clauses LIKE et en les combinant avec l’opérateur logique OR (ou AND selon le besoin). Le script exécute la requête, récupère les résultats sous forme de tableau associatif, compte le nombre d’occurrences et affiche un message au singulier ou au pluriel grâce à un opérateur ternaire. Enfin, il indique les bonnes pratiques de sécurité, rappelant que l’injection SQL doit être évitée en utilisant des requêtes paramétrées, même si l’exemple simplifié les intègre directement dans la chaîne SQL. Le tutoriel se conclut par des tests montrant le comportement du moteur de recherche avec différents mots‑clés.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce de développement web. Aujourd'hui, nous allons voir comment créer une barre de recherche ou moteur de recherche local qui permet de lister les entrées qui correspondent aux mots-clés saisis par l'utilisateur. Figurez-vous que la barre de recherche est différente d'un système de saisie automatique. Si vous voulez savoir comment peut-on mettre en place ce dernier, je vous invite à découvrir le tuto où j'ai expliqué comment créer un système de autocomplete à l'aide d'Ajax. Dans cette vidéo, nous aurons besoin du HTML et du CSS pour l'intégration et la mise en page, du PHP pour le traitement et du SQL pour interroger la base de données qui renferme les données à afficher selon les mots-clés spécifiés par l'utilisateur. On commence par intégrer le formulaire. Vous avez constaté que j'ai utilisé la méthode GET afin de pouvoir visualiser les mots-clés qui ont été saisis dans la barre de l'URL. Là, c'est la zone de texte qui permet de saisir les mots-clés. Et là c'est le bouton de type submit qui permet de soumettre le formulaire au serveur. Le rendu va ressembler à ceci. Bien sûr j'ai appliqué au préalable le style CSS que j'ai intégré dans la page style.css. En bas du formulaire je vais prévoir une zone où je vais afficher les résultats. Identifié par résultat. Je vais aussi intégrer une autre div qui contiendra le nombre de résultats qui ont été identifiés, dont le ID vaut nbr dans ce cas. Je vais juste mettre un message de test, par exemple 2 résultats trouvés. Ensuite on va dynamiser ce message. Et pour les résultats eux-mêmes, je vais les organiser dans une liste ordonnée. Et là encore je mettrai un message de test, Résultat 1 par exemple. Alors exécutons. Bon, ça va ressembler à ceci. Il est temps de passer au traitement PHP. Comme d'habitude, les traitements les plus importants, je les place tout en haut du document. Je vais commencer par récupérer les variables superglobales et du script PHP. Là c'est pour la zone de texte. Et là c'est le bouton de type Submit. Et pour prévenir toute notification, je vais placer un@ provisoirement, comme on a vu dans une série de vidéos précédentes. Et là je procède au traitement. Alors si je clique sur le bouton Valider, C'est-à-dire si le formulaire est soumis au serveur, c'est à ce moment-là que je vais procéder à la recherche. Mais je vais aussi vérifier si la zone de texte n'a pas été laissée vide. Il est préférable de démunir cette expression de recherche des espaces de début et de fin. Alors je vais appliquer la fonction Trim. On va commencer par un exemple simple. Va supposer que l'utilisateur va saisir un seul mot en guise d'expression de recherche. Ensuite, on va améliorer notre code de telle sorte à prendre en considération une séquence de mots. Alors je vais inclure la chaîne de connexion. C'est le même document PHP que j'ai utilisé dans les autres vidéos. Là, je vais préparer la requête de recherche. Je vais sélectionner le champ qui s'appelle DeskG. Il s'agit de ce champ. C'est ce qui contient les résultats à afficher. La table s'appelle Glossaire. La clause va être la suivante, donc DeskG Like l'expression de recherche. Je pourrais mettre un marqueur interrogatif afin de séparer les données des traitements, mais particulièrement dans cet exemple, je vais mettre les données et le traitement dans la même requête SQL. Bien sûr, c'est déconseillé pour des raisons de sécurité que j'ai expliquées avant, mais pour simplifier le code, je préfère procéder ainsi. Et comme vous aurez compris le principe, vous pourrez préparer votre requête SQL et passer les paramètres au moment de l'exécution. Là, je mettrai la chaîne de caractères keywords. Bien entendu, le résultat qui sera stocké dans la base de données n'est pas équivalent à keywords exactement, mais il contient celui-ci. Alors on va mettre ici les symboles de pourcentage pour dire que le mot-clé keywords figure dans la chaîne de caractères à retourner. Et là c'est pour récupérer le jeu de données en guise de tableau associatif. Ici j'exécute la requête. Bien entendu j'ai pas besoin de passer les arguments parce que j'ai déjà fait au sein de la requête elle-même. Ici je récupère le jeu de données, c'est-à-dire le résultat que j'ai récupéré de la base de données. Exécutons déjà pour voir s'il n'y a pas d'erreurs de syntaxe. Je crois que c'est bon. Une fois le résultat retourné, je vais ordonner à la page d'afficher ce dernier. Alors je mettrai la variable afficher égale à oui par exemple. Donc tout le bloc qui est là est conditionné par cette variable. Je mettrai la condition PHP. Alors si affiché est égal à oui, c'est à ce moment-là que je vais afficher le résultat de recherche. Et là encore cette variable, il est possible qu'elle ne soit pas initialisée au début, donc pour éviter toute notification éventuelle, je mettrai un@ au début. Exécutons déjà. Alors à la première exécution j'ai aucun message et quand je clique et que je laisse la zone de recherche vide je n'aurai aucun message non plus. C'est uniquement quand je mettrai quelque chose dans cette zone de texte que le résultat sera affiché. Bien sûr le résultat que j'ai là ne correspond pas à la recherche parce que ça reste statique. Là, je ferais mieux de rappeler le terme de recherche. Je mettrais value. Donc ça donne ceci. Maintenant, personnalisons les résultats. On commence par ça, le nombre de résultats retournés. Alors là, c'est censé retourner le nombre de résultats rencontrés. Donc 0 résultat dans ce cas. Normalement, ça devrait donner plus que ça. Je vais vérifier la requête. Voilà, c'est ça. C'est bon, donc j'ai 5 résultats dans ce cas. Et je voudrais aussi afficher le message résultat retourné soit au singulier ou bien au pluriel. Ça dépend du nombre qui a été retrouvé effectivement. Je vais concaténer avec, ici je vais exécuter un opérateur ternaire. Alors si countTab est supérieur à 1, c'est-à-dire que le nombre de résultats est supérieur à 1, Dans ce cas, je vais afficher le message en pluriel. Je fais un truc du genre et j'affiche résultats trouvés avec un s. Sinon, si on sait singulier, comme ça, exécutons. Donc cinq résultats trouvés s'affiche bien en pluriel. Il a un seul résultat trouvé, donc ça l'affiche en singulier. Maintenant, je vais lister les résultats proprement dits. Alors ce traitement sera bouclé. Alors j'affiche la ligne courante et le champ desc_g. Exécutons. Donc là j'ai un seul résultat. Avec HTML, j'ai 5 résultats. Jusqu'ici je crois que c'est bon. Le seul souci, c'est que mon code prend en considération un seul mot. Alors si je mets 2 mots, par exemple HTML DNS, dans ce cas il est censé trouver une phrase qui contient exactement cette occurrence comme ça, HTML espace DNS, ce qui n'est pas le cas. Alors l'idée, c'est de lister toutes les entrées qui contiennent soit le mot HTML, le mot DNS, ou les 2 en même temps. Alors je vais améliorer mon code. En réalité, keywords ça peut être une séquence et bien entendu cette séquence est un ensemble de mots qui sont espacés par un espace blanc. Alors là je vais éclater ma chaîne au niveau de l'espace. Je mettrai words, par exemple c'est le tableau qui sera résultant, explode et là je mets l'espace blanc et là c'est la chaîne de caractères keywords que j'ai démunie des espaces de début et de fin. Dans ce cas, je suis censé récupérer un tableau qui s'appelle words et qui contient l'ensemble des mots séparément. Alors imaginez que l'expression de recherche est la suivante: HTML espace DNS. Donc la requête SQL devrait ressembler à ceci: SELECT descg FROM glossaire WHERE descg LIKE HTML OR descg LIKE DNS, bien sûr qui seront préfixés et suffixés par le pourcentage. Alors je vais exprimer cette expression-là de manière dynamique. Je vais mettre une boucle. Bon là c'est le tableau words et là je vais définir les différentes expressions dont j'ai besoin, c'est-à-dire est-ce que j'ai like 1, est-ce que j'ai like 2, etc. Bien sûr 1, 2 ça fait référence aux différents mots qui constituent la chaîne de caractères. Alors là encore je vais créer un autre tableau que j'appellerai kw pour dire keyword, $i est égal à la chaîne suivante. Bon, ce qui va se répéter c'est ça, dès que j'ai like. Et comme terme de recherche il faut mettre une chaîne de caractères comme ça et je mettrai le mot courant, c'est-à-dire kwi. Alors il faut concaténer. Comme ça, sans oublier le pourcentage avant et après. Alors maintenant, je viens d'avoir un tableau qui contient les expressions suivantes: deskj like HTML, deskj like DNS, etc. Il suffit maintenant de regrouper ces expressions en les espaçant par l'opérateur logique OR. Donc je le fais ici. Donc je vais faire appel à la fonction implode de PHP qui permet de convertir un tableau en une chaîne de caractères et en guise de séparateur je mettrai|. Le deuxième argument n'est rien d'autre que le tableau kw. Alors exécutons. Là j'ai une petite erreur au niveau de la ligne 7. Ah oui, là il faut mettre words. Ouais, c'est ça. Donc ça me donne 6 résultats. Je crois que c'est bon. Je mettrai juste HTML tout seul. Ça me donne 5 résultats. DNS tout seul, ça me donne un seul résultat. HTML et DNS, bon, ça me donne 6 résultats. C'est-à-dire 5 résultats pour le HTML et un seul résultat pour DNS. Sachant qu'il n'y a aucune phrase qui regroupe les 2 termes simultanément. Alors je pense que c'est bon. Et si vous voulez que les 2 termes figurent simultanément dans les phrases qui seront retournées, dans ce cas il suffit de remplacer OR par AND. Voilà, comme ça. Alors exécutons. Ici je n'ai aucune occurrence qui contient les 2 simultanément. Par contre si je mets HTML CSS, là c'est bon j'ai 3 résultats. Et si je mets aussi le terme W3C, J'ai 2 résultats, etc. Alors je crois que c'est bon. Merci pour votre attention et à la vidéo prochaine.
