Moteur de recherche PHP avec Ajax et scroll infini…

Article rédigé par Mathieu Chartier

Publié par dans Programmation le 14 avril 2014

Aucun Commentaire

Mes lecteurs assidus savent à quel point je porte dans mon coeur les aspects techniques du web. Certes, les livres que j'ai publiés traitent tous du webmarketing jusqu'à présent mais je reste attaché au code et à son intérêt pour les sites que nous créons à longueur de temps.

Mi-2013, j'avais créé un moteur de recherche PHP en programmation orientée objet (POO pour les intimes) que je fais évoluer régulièrement pour lui apporter sans cesse plus de possibilités. Désormais, ce moteur déjà puissant à l'origine s'est dotée de propriétés intéressantes telles que l'ajout d'une pagination personnalisable, une fonction d'autocomplétion (avec création automatique d'un index de mots ou non), la possibilité de faire des recherches d'expressions exactes comme sur Google (ex : "une super expression") ou encore le surlignage des mots recherchés en gras...

Tous les explications de base propres au moteur sont accessibles à cette adresse : moteur de recherche PHP Objet (POO) complet (pagination, surlignage, fulltext…).

Moteur de recherche PHP Ajax avec nouvelle pagination...

Je vais vous présenter deux scripts jQuery-Ajax que j'ai codés afin d'apporter des alternatives à la pagination de mon moteur de recherche PHP. Je précise que ces deux scripts peuvent être utilisés dans un autre contexte que mon moteur de recherche mais je l'ai fait essentiellement pour lui apporter un plus. Voici les deux alternatives adaptables au moteur :

  • Scroll infini (souvent appelé "infinite scroll") pour développer les résultats au fur et à mesure que l'on descend dans la fenêtre ;
  • Développement par cran ("trigger") en cliquant sur un lien du type "Afficher plus..." à la manière de Facebook.

Ces deux possibilités permettent d'obtenir de bons résultats visuels mais surtout d'éviter de cliquer sur les classiques liens "suivants" et "précédents". L'autre avantage de ces scripts est de générer des appels Ajax pour le moteur de recherche PHP.

Sans plus attendre, vous pouvez les télécharger individuellement ou récupérer le pack contenant plusieurs versions d'exemple du moteur avec tous les fichiers utiles (scripts JS, CSS, images de chargement, class du moteur de recherche PHP...).

N.B. : le pack comprend désormais les versions compatibles PHP 5.5 du moteur de recherche et de chaque démo en langage PHP 5.5 !

Etapes de fonctionnement du moteur de recherche PHP-Ajax

Voici la liste des étapes à respecter pour que les scripts jQuery fonctionnent parfaitement :

  1. Installation des scripts dans le <head>...</head> en HTML (dans la page qui réceptionne les résultats tout du moins).
  2. Ajout d'un formulaire de recherche.
  3. Chargement d'une première page de résultats en PHP classique. Cette page reçoit la première "vague" de résultats avant que le script ne se mette en route pour dérouler le reste des résultats...
  4. Lancement du script Ajax vers un fichier PHP externe (connecté à la BDD indépendamment) qui ajoute les résultats suivants dans la liste.

N.B. : ces scripts étant codés en jQuery, il faut bien entendu charger la bibliothèque avant de les charger !

Exemple de première page du moteur de recherche PHP

Les codes suivants sont à placer dans le <body>...</body> de la page qui réceptionne les résultats. Seul le formulaire peut être placé ailleurs avec une "action" différenciée, mais pour l'exemple, tout se passe dans la même page...

Formulaire du moteur de recherche :

Usage de la class PHP 5 du moteur de recherche PHP objet :

Il faut impérativement ajouter une class HTML à chaque ligne de résultats (ici, c'est la class "results") ainsi qu'un compteur de résultats qui ajoutent dynamiquement des ID (ici, c'est $nb, mais vous n'êtes pas obligés d'ajouter le nombre comme dans l'exemple en revanche, c'est juste utile dans id="<?php echo $nb; ?>").

Exemple de fichier de réception du script Ajax

Ce fichier reprend un peu le même principe que le code PHP situé juste au-dessus car il doit être en cohérence avec les résultats affichés précédemment. Seules quelques différences sont à noter :

  • suppression de la ligne d'affichage du nombre de résultats ;
  • suppression du lien "Afficher plus..." car il n'a pas besoin d'être rechargé ;
  • modification du "$nb = 0;" en "$nb=$_GET['nb'];" ;
  • modification du "$limit = 10;" (ou autre valeur) en "$limit = htmlspecialchars($_GET['limit']);".

Exemple de script - Ajax trigger avec jQuery

Voici comment faire fonctionner le trigger Ajax avec "Afficher plus de résultats" (à placer dans le head ou en fin de body dans le code HTML) :

  • ajout du CSS pour gérer l'affichage du "loader" (bouton "Afficher plus...") dans une feuille à part ou directement dans votre propre CSS ;
  • chargement de la bibliothèque jQuery (évitez les versions 2, optez plutôt pour des versions 1.7 ou 1.8 par exemple) ;
  • chargement du script ajaxTrigger.js ;
  • mise en place des paramètres utiles faire fonctionner le plugin jQuery.

N.B. : pour le moteur de recherche PHP, il convient absolument de mettre "nbResult: $('.numR').text()" pour que le nombre de résultats total soit récupéré dynamiquement. L'autre alternative en PHP 5 serait de charger les scripts en bas de page (fin de body) et d'utiliser à la place "<?php echo $moteur::$nbResultsChiffre; ?>"...

Trigger Ajax pour moteur de recherche PHP (poo)

Exemple de script - Scroll infini Ajax avec jQuery

Le scroll infini fonctionne globalement sur le même principe que le trigger Ajax, il convient donc de respecter la procédure expliquée précédemment avec le script suivant :

Evolutions éventuelles pour les scrips du moteur de recherche PHP-Ajax

Comme tous les scripts, ces deux fichiers codés en jQuery sont imparfaits et peuvent demander quelques ajustements, c'est pourquoi je vous conseille de repasser de temps en temps sur cette page pour vérifier la version en cours d'usage. En général, dès que quelqu'un me signale un gros problème ou que j'en détecte un de mon côté, je fais une petite mise à jour de correction, c'est la règle du jeu... :D

Actuellement, je n'ai décelé aucun problème particulier avec ajaxTrigger.js mais le scroll infini peut parfois être taquin quand nous allons trop vite avec le scroll et la souris (il charge deux fois les mêmes résultats puis se relance normalement). J'ai ajouté un système de "timer" pour limiter ce phénomène en ralentissant l'animation, ce qui ne m'a plus causé aucun problème après ça, mais je reste méfiant toutefois que les scroll infinis ne sont jamais parfaits...

En réalité, vous pouvez "feinter" pour simuler une sorte de scroll infini mais en utilisant ajaxTrigger.js, voici comment procéder :

  • mettre un événement "hover" plutôt que "click" dans le script de lancement du trigger Ajax ;
  • modifier le "echo '<div id="loadMore">Afficher plus de résultats...</div>';" en "echo '<div id="loadMore">&nbsp;</div>';".

Ainsi, quand vous arrivez en base de page et que vous "survolez" la div transparente, le script se lance et fait l'effet d'un scroll infini. C'est moins pratique mais c'est une solution alternative... :D

Blog web d'Internet-Formation et Mathieu Chartier
Les 3 précédentes publications

L’historique selon Google : critère décrypté et détaillé.

Publié par Mathieu Chartier dans Référencement le 31 mars 2014 - 6 Commentaires

Nombre d’entre nous savent que l’historique des pages web peut influencer quelque peu leur classement dans les résultats des moteurs de recherche. [...]

Vers un bouton “Supprimer” dans les SERP de Google ?

Publié par Mathieu Chartier dans Référencement le 25 mars 2014 - 13 Commentaires

Les SERP de Google ne cessent d’évoluer depuis nombre d’années, tant graphiquement que techniquement, c’est pourquoi chaque signe peut permettre d’envisager des mises à jour à venir.

Récemment, je vous ai parlé du premier brevet dans lequel Google mentionne (enfin) le mot “AuthorRank” tant apprécié par les spécialistes de la SEO. [...]

Test de positionnement web : HTML 5 VS xHTML

Publié par Mathieu Chartier dans Référencement le 14 mars 2014 - 15 Commentaires

L’HTML 5 n’est pas encore totalement validé par le W3C (normalement fin 2014) mais nous pouvons dès à présent nous intéresser au positionnement des sites web construits sur cette nouvelle architecture interne. S’il est difficile de déterminer le rôle de l’HTML 5 dans le positionnement des pages web, seuls quelques tests pourront nous donner des idées de la réalité.

Pour se faire, j’ai réalisé 2 tests distincts basés sur le même principe afin d’avoir une première approche des résultats. [...]