Moteur de recherche Ajax

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Moteur de recherche Php Ajax

Au cours des précédentes formations Php, nous avons créé et développé un moteur de recherche tout à fait efficace pour un site internet. Il permet de recouper tous les mots clés tapés par l'internaute. Si des correspondances strictes sont trouvées en base de données MySql, les résultats sont restitués. Le cas échéant, une recherche approchante est déclenchée pour proposer des rubriques connexes pertinentes.



Dans une dernière étape, afin d'optimiser les ressources serveur, nous avons développé un code Php capable de restituer les résultats depuis une base de connaissance, placée sur le disque dur distant. Ainsi, en cas de requête récente ou récurrente, nous ne sollicitons pas le serveur pour attaquer la base de données MySql.

Un petit détail reste à peaufiner néanmoins. Un PostBack est généré à soumission des mots clés par l'internaute. De fait, la page est rechargée et les réglages tels que les termes de recherche sont perdus. Nous souhaitons intégrer la technologie Ajax pour réaliser les traitements serveur par un code externalisé.

Sources et présentation de l'objectif
Pour poursuivre et terminer ces travaux, nous devons commencer par récupérer le développement là où nous l'avions laissé.

• Télécharger le fichier moteur-recherche-ajax.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression conduit notamment au fichier de la page Web principale, celle du moteur de recherche. Il est nommé index.php. Il est accompagné de ses ressources externes dans les sous dossiers. Et à ce titre, les données de la base de données MySql sont offertes dans le sous dossier bdd. Si vous n'avez pas suivi les formations précédentes, vous ne disposez pas de la base de données supports. Vous devez donc la créer depuis l'interface d'administration PhpMyAdmin. Puis, vous devez y importer le fichier proposé : formations.sql. Il en résultera la table formations avec tous ses enregistrements. Ce sont eux qui sont restitués sur la page Web, par le moteur de recherche Php, selon les termes saisis.

Ensuite, vous devez créer le compte utilisateur associé. Le fichier connexion.php situé dans le sous dossier commun initialise la chaîne de connexion à la base de données, selon ces informations de compte à reproduire :

...
$info = strtoupper(substr($info, 0, 1)).substr($info,1);

$liaison = mysqli_connect('127.0.0.1', 'moteur', 'm127T888');
mysqli_select_db($liaison, 'supports');
?>
...

Ensuite et comme vous le savez, le projet doit être référencé dans l'interface d'EasyPhp. Un nom doit lui être attribué. Son adresse issue de l'explorateur Windows doit être renseignée. Les deux serveurs, Http et Database, doivent être démarrés. Dès lors, notre application peut être émulée.

• Cliquer sur le lien du projet dans l'interface d'EasyPhp,

Nous retrouvons la page Web de notre moteur de recherche.

• Dans la zone de saisie, taper les termes suivants par exemple : Mise en page Word,
• Puis, cliquer sur le bouton ou valider par la touche Entrée,

Des résultats correspondant strictement aux mots clés de recherche sont restitués. Ils sont le fruit d'une requête Sql ayant extrait les enregistrements concordants depuis la table formations de la base de données supports.

• Taper de nouveau exactement les mêmes mots clés : Mise en page Word,
• Puis, valider avec la touche Entrée pour soumettre le formulaire,

Fort logiquement, les mêmes enregistrements sont proposés. Néanmoins, en dessous de ces derniers, vous notez la présence d'une mention supplémentaire : Restitution de la base de connaissance. En effet, la demande est récente. Le code Php tel que nous l'avons développé a choisi de ne pas solliciter de nouveau le serveur en attaquant la base de données MySql.

Il a préféré restituer une information consolidée précédemment dans le sous dossier recherches. Si vous l'ouvrez, vous constatez la présence d'un fichier nommé : mise-en-page-word.txt. Son contenu est strictement celui de la première restitution Sql, avec les balises Html de mise en forme. Le code s'est contenté d'y accéder pour récupérer les informations et les restituer en l'état sur la page Web. Il s'agit ni plus ni moins d'un fichier de cache, pour optimiser les performances.

En revanche, vous constatez que les termes de recherche ont disparu de la zone de saisie. Le PostBack imposé par la soumission du formulaire a d'abord réinitialisé la page Web. C'est seulement ensuite, au retour serveur, que les enregistrements ont été affichés.

Nous devons donc externaliser le code Php du moteur de recherche. Et fort logiquement, nous devons adapter l'attribut action du formulaire Html. Il ne doit plus appeler la page du moteur de recherche mais ce code que nous allons inscrire dans un autre fichier Php.

Il s'agit d'une technique que nous avions mise en oeuvre dans la formation Php sur les listes déroulantes Ajax. Pour ce faire, un fichier JQuery doit être ajouté en référence dans la page Web. Ce fichier JQuery est situé dans le sous dossier fonction et il se nomme prototype.js.

Externaliser le code Php du moteur de recherche
Il s'agit dans un premier temps de prélever le code que nous avons développé dans les formations précédentes.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

La section de code Php s'étend entre les lignes 1 et 153. Le code est assez volumineux. Il est le résultat des trois précédentes formations. C'est la raison pour laquelle ce moteur de recherche est à la fois performant et efficace. Les deux premières instructions include en ligne 2 et 3 doivent être conservées en lieu et place. Elles permettent l'imbrication des sections communes à l'ensemble des pages du potentiel site Web. On y note notamment la référence au fichier connexion.php pour l'initialisation de la chaîne de connexion à la base de données.

• Sélectionner tout le code situé entre les lignes 5 et 152,
• Le couper avec le raccourci clavier CTRL + X par exemple,
• A la racine du dossier de décompression, créer le fichier reponse.php,
• L'ouvrir dans un éditeur comme le Notepad ++,
• Créer les balises de la section Php :

<?php
...
?>

• Puis entre ces dernières, coller le code Php précédemment coupé,

Le résultat du moteur de recherche, qu'il s'agisse de la requête stricte, de la requête approximative ou de la base de connaissance est restitué dans une variable nommée $chaine_fiche. Le contenu de cette dernière doit être transmis à la page appelante, celle du moteur de recherche. Et comme nous l'avions appris, c'est l'instruction Php print qui permet de le faire.

• Avant la dernière accolade fermante dans ce code externalisé, ajouter l'instruction print, comme suit :

...
$chaine_fiche = fread($cache, filesize($fichier_nouveau));
fclose($cache);
$chaine_fiche .= '<div style='float:left; width:100%; padding-top:10px; color:#999999;'><i>Restitution de la base de connaissance</i></div>';
}
print($chaine_fiche);
}
?>
...

Le renvoi est ainsi codé dans les bornes de la première instruction conditionnelle. Et c'est dans ses bornes que la variable $chaine_fiche est déclarée. En dehors, elle n'est pas connue. Cette variable $chaine_fiche est celle qui est restituée à l'origine dans la page du moteur de recherche, précisément dans les bornes du calque d'identifiant colonne_gauche. Mais il est important de comprendre que dans ce fichier externe, elle est considérée comme une nouvelle variable.

Nous ne devons pas oublier une notion importante. Le fichier connexion.php est imbriqué dans la construction de la page du moteur de recherche. Il n'en est rien en revanche pour le fichier reponse.php. La variable $liaison que nous exploitons pour exécuter nos requêtes Sql sur la base de données n'est donc pas connue. Nous devons de nouveau établir la liaison à la base de données. Mais nous devons aussi ne pas oublier de refermer la connexion à l'issue du traitement.

• Au début de l'instruction conditionnelle, ajouter l'appel au fichier de connexion :

<?php
include('fonction/traitement_chaine.php');

if(isset($_POST['mc']) && $_POST['mc']!='')
{
include('commun/connexion.php');
$chaque_mot=''; $url_fiche=''; $titre_fiche=''; $chaine_fiche=''; $compteur=0;
...

• Puis, à la fin de l'instruction conditionnelle, fermer la connexion :

...
fclose($cache);
$chaine_fiche .= '<div style='float:left; width:100%; padding-top:10px; color:#999999;'><i>Restitution de la base de connaissance</i></div>';
}
print($chaine_fiche);
mysqli_close($liaison);
}
?>
...

Enfin, dans l'instruction conditionnelle de la seconde requête ($requete_ou), il convient d'encoder le message d'entête en utf8 pour être en conformité avec la page appelante :

...
if($compteur==0)
{
$chaine_fiche = utf8_encode('Aucun résultat strictement équivalent trouvé. Rubriques connexes les plus pertinentes :<br/><br />');
$retours = mysqli_query($liaison, $requete_ou);

while($retour = mysqli_fetch_array($retours))
{
...

Liaison Ajax avec le code externe
Nous devons désormais établir le lien entre la page appelante et la page de traitement externalisé.

• Enregistrer les modifications (CTRL + S) du fichier reponse.php,
• Puis, revenir dans le code de la page index.php,

Une référence au fichier JQuery est nécessaire.

• Juste après la balise fermante de la section Php, ajouter la déclarative suivante :

<?php include('commun/connexion.php');
include('commun/entete.php');
?>
<script language='javascript' src='formation/prototype.js'></script>
<div style='width:100%; display:block; text-align:center;'>
</div>
...
Désormais le fichier JQuery est ajouté au projet. C'est grâce à lui que nous allons pouvoir piloter les technologies Ajax.

Nous devons commencer par paramétrer l'attribut action du formulaire Html. A soumission, il doit désormais indiquer que le code serveur à exécuter se situe dans le fichier reponse.php.

• Plus bas dans le code Html, adapter l'attribut action du formulaire comme suit :

...
<div class='centre'>
<div class='titre_centre'>
<form id='formulaire' name='formulaire' method='post' action='reponse.php'>
<div class='liste_div'>
<input type='text' id='mc' name='mc' class='liste' value='Vos mots clés de recherche' onClick='this.value='';' />
</div>
<div class='liste_div' style='float:right;'>
<input type='submit' id='valider' name='valider' class='liste' style='width:100px;' value='Valider' />
</div>
</form>
</div>
</div>
...

Bien sûr, nous devons aussi remplacer la nature du bouton de validation. Un contrôle Html de type submit, soumet automatiquement les informations. En conséquence, la suite de l'exécution et de l'affichage est redirigée vers la page reponse.php. Or, une fonction Javascript faisant appel à des ressources JQuery doit être enclenchée. C'est elle qui doit déclencher l'exécution du code serveur externalisé pour en réceptionner les données du traitement.

• En bas du formulaire, changer la nature du bouton submit en button et lui ajouter le gestionnaire d'événementon Click, comme suit :

...
<form id='formulaire' name='formulaire' method='post' action='reponse.php'>
<div class='liste_div'>
<input type='text' id='mc' name='mc' class='liste' value='Vos mots clés de recherche' onClick='this.value='';' />
</div>
<div class='liste_div' style='float:right;'>
<input type='button' id='valider' name='valider' class='liste' style='width:100px;' value='Valider' onClick='recolter();'/>
</div>
</form>
...

Ainsi, nous spécifions que la soumission n'est pas instantanée. A validation, la main est passée à la fonction Javascript recolter. Cette dernière n'existe pas encore. C'est elle qui doit faire la passerelle avec le code externalisé du fichier reponse.php.

• En haut du code Html, sous la référence au fichier JQuery externe, ajouter la section Javascript suivante :

...
?>
<script language='javascript' src='fonction/prototype.js'></script>
<script language='javascript' type='text/javascript'>

function recolter()
{
document.getElementById('formulaire').request({
onComplete:function(transport){
document.getElementById('colonne_gauche').innerHTML = transport.responseText;
}
});
}

</script>
<div style='width:100%; display:block; text-align:center;'>
</div>
...

Nous créons donc la fonction Javascript recolter. Grâce à la méthode getElementById de l'objet document, nous pointons sur le formulaire par son identifiant. Grâce à la référence à la librairie JQuery, nous pouvons exploiter la méthode request. Cette dernière émet une demande traitée par la fonction créée et passée en argument. Bien sûr, cette requête permet d'enclencher le code du fichier externe reponse.php. Rappelez-vous, c'est lui qui est défini dans l'attribut action du formulaire. Cette fonction est déclenchée sur événement, une fois le traitement serveur terminé. Elle restitue dans le calque d'identifiant colonne_gauche, les informations retournées par le code externe par le biais de la fonction print. Il est temps de tester ces améliorations.

• Enregistrer les modifications (CTRL + S),
• Basculer sur le navigateur Web,
• Recharger la page en validant sa barre d'adresse,

En effet, nous avons modifié la structure Html de la page et avons ajouté des instructions Javascript.

• Taper par exemple les mots clés de recherche suivants : Mise en page Word,
• Puis, valider en cliquant sur le bouton,

Les résultats stricts sont parfaitement restitués. Mais cette fois, le PostBack n'est pas généré. Les mots clés conservés dans la zone de saisie du moteur de recherche en attestent. C'est bien le code externalisé qui a traité la demande, empêchant le rechargement de la page Web.

• Cliquer de nouveau sur le bouton Valider,

Comme la requête est récente, les résultats sont parfaitement restitués depuis le fichier de cache précédemment créé. Donc, nous conservons toute la puissance du moteur de recherche bâti jusqu'alors, tout en lui additionnant la technologie Ajax pour plus d'ergonomie.

• Taper les mots clés suivants : Calculs conditionnels,
• Mais valider cette fois avec la touche Entrée du clavier,

Des résultats stricts sont de nouveau extraits. Mais ces enregistrements sont restitués dans la page reponse.php. L'Url dans la barre d'adresse en atteste. En effet, la touche Entrée du clavier soumet le formulaire Html et les données qu'il contient. Comme l'attribut action de ce dernier est réglé sur la page reponse.php, la main et l'affichage sont transmis à cette dernière.

Nous proposons d'ajouter un contrôle Html invisible pour leurrer le navigateur. C'est lui qui sera actif par défaut lorsque la touche Entrée du clavier sera enfoncée. De cette manière, seule la validation par le bouton prévu par défaut pourra se faire.

• Revenir dans le code Html de la page index.php,
• Dans les bornes du formulaire, ajouter un nouveau contrôle avant le bouton :

...
<form id='formulaire' name='formulaire' method='post' action='reponse.php'>
<div class='liste_div'>
<input type='text' id='mc' name='mc' class='liste' value='Vos mots clés de recherche' onClick='this.value='';' />
</div>
<div class='liste_div' style='float:right;'>
<input type='text' name='fauxbouton' value='' style='display:none;'>
<input type='button' id='valider' name='valider' class='liste' style='width:100px;' value='Valider' onClick='recolter();' />
</div>
</form>
...

Comme vous le constatez, en guise de bouton, nous créons une zone de texte invisible. C'est elle qui recevra le focus à validation par la touche Entrée.

• Enregistrer les modifications et revenir sur le navigateur Web,
• Recharger la page index.php, depuis EasyPhp s'il le faut,
• Taper les mots clés de recherche suivants : Références absolues Excel Access,
• Puis, enfoncer la touche Entrée du clavier pour tenter de soumettre le formulaire,

Le navigateur est effectivement trompé par ce bouton de leurre. De fait, rien ne se produit et nous ne sommes plus redirigés vers la page satellite reponse.php.

• Cliquer sur le bouton Valider pour soumettre ces mots clés,

Cette fois les résultats tombent. Il s'agit d'enregistrements proches, à défaut de trouver des réponses strictes. Nous avons donc conservé tous les atouts du moteur de recherche. Mais désormais, avec la technologie Ajax, il ne génère plus de PostBack. Les résultats sont restitués sans recharger la page et les termes saisis sont conservés à l'affichage.