Le Blog Topheman par Christophe Rosset

Tutoriel – Ajouter un moteur de recherche Ajax à Dotclear

2 octobre 2007

Il y a quelques mois, j'ai codé un moteur de recherche Ajax basé sur jQuery, histoire de m'entraîner un peu avec cette librairie javascript. Au niveau programmation, cela n'a rien d'extraordinaire et il pourra être amélioré à l'avenir, cependant, certains d'entre vous m'ont demandé un tutoriel, je vous le propose donc aujourd'hui (désolé qu'il arrive si tardivement). Je l'ai fait le plus accessible possible, vous ne devriez donc pas rencontrer trop de problème pour suivre les différentes étapes.

Ce script reste adaptable partout où vous avez besoin d'un moteur de recherche en AJAX (il suffit de personnaliser un peu la requête MySQL).

Si vous l'utilisez, n'oubliez pas de faire un lien vers mon blog et de laisser un petit commentaire (ça fait toujours plaisir).

Tophe

Remarque : Ce tutoriel a été fait pour les versions 1.2.x de Dotclear. Ce script marcherait sur Dotclear 2 mais il nécessiterait quelques modifications (comme je l'ai dit, il est adaptable).

PS : Je répondrai aux questions/commentaires/mails dans la mesure du possible.

PPS : Ce tutoriel évoluera peut-être avec le temps et vos remarques.

1. Installation du plugin related

Ce moteur de recherche necessite le plugin related, " Pages Connexes " qui permet d'intégrer des pages externes à votre blog. Voici l'explication comment installer et utiliser le plugin Related.

2. Installation de jQuery : share/jquery.js

Téléchargez le dernier pack jQuery (celui actuellement sur blog.topheman.com est la version 1.1.2, vu l'objet utilisé, il n'y aura aucun problème de compatibilité).

www.jquery.info

Renommez le pack jQuery en jquery.js et uploadez-le dans le dossier share/

3. Le fichier côté serveur : share/tophe-recherche-ajax-request.php

En Ajax, vous avez du code exécuté côté client (c'est à dire sur votre poste, en javascript) et du code exécuté côté serveur (en php ou tout autre langage serveur, souvent qui accède à une base de données, c'est ici le cas). Voici donc le code du fichier qui est exécuté côté serveur :

 <? //bloquer l'accès exterieur $referers_ok=array("http://blog.topheman.com/index.php?recherche-ajax"); if(!in_array($_SERVER['HTTP_REFERER'],$referers_ok)) 	{ 	die("L'accès à ce fichier ne vous est pas permis."); 	} //fichier config de dotclear include ('../conf/config.php'); //connexion à la base $connexion=@mysql_connect(DB_HOST,DB_USER,DB_PASS) or die (utf8_encode("<p>Un problème de connexion à la base de données est survenu.</p><p>La recherche est temporairement inaccessible, tapez un autre mot ou essayez plus tard.</p>")); $db=mysql_select_db(DB_DBASE, $connexion); //fonctions //fonction getPostUrl() function getPostUrl($post_id,$post_dt,$post_titre_url) 	{ 	$year=substr($post_dt,0,4); 	$month=substr($post_dt,5,2); 	$day = substr($post_dt,8,2); 	$posturl.="index.php?".$year."/".$month."/".$day."/".$post_id."-".$post_titre_url; 	return $posturl; 	} function getPostDate($post_dt) 	{ 	$year=substr($post_dt,0,4); 	$month=substr($post_dt,5,2); 	$day = substr($post_dt,8,2); 	$postdate="$day/$month/$year"; 	return $postdate; 	} $recherche=trim(@$_POST['recherche']); $feedback=""; if(strlen($recherche)<3) 	{ 	die(utf8_encode("<p>Veuillez rentrer plus de 3 caractères.</p>")); 	} else 	{ 	//creation de la requete 	$sql="SELECT post_id,post_dt,post_titre,post_titre_url FROM dc_post WHERE (post_titre LIKE '%$recherche%' OR post_content LIKE '%$recherche%') AND post_pub='1'"; 	if(@$_POST['order']=="chrono-asc") 		{ 		$sql.=" ORDER BY post_id ASC;"; 		} 	elseif(@$_POST['order']=="chrono-desc") 		{ 		$sql.=" ORDER BY post_id DESC;"; 		} 	else 		{ 		$sql.=" ORDER BY post_titre ASC;"; 		} 	//fin de la creation de la requete 	//$feedback.="<p>".$_SERVER['HTTP_REFERER']."</p>"; 	$rsql=mysql_query($sql); 	if(mysql_num_rows($rsql)!=0) 		{ 		$feedback.=utf8_encode("<p>".mysql_num_rows($rsql)." résultat(s)</p>"); 		while($row=mysql_fetch_object($rsql)) 			{ 			$feedback.="<a href=\"".getPostUrl($row->post_id,$row->post_dt,$row->post_titre_url)."\" title=\"$row->post_titre - ".getPostDate($row->post_dt)."\">$row->post_titre</a><br />"; 			} 		} 	else 		{ 		$feedback.=utf8_encode("<p>Aucun résultat correspondant à votre recherche</p>"); 		} 	} mysql_close(); //echo utf8_encode($feedback); echo $feedback; ?>

Vous avez une modification à faire au début de ce fichier, remplacez simplement blog.topheman.com par l'adresse de votre blog. Si l'adresse de votre blog est http://blog.toto.com alors la ligne devient :

$referers_ok=array(" http://blog.toto.com/index.php?recherche-ajax ");

Uploadez ce fichier sur votre serveur dans le dossier share/ en le nommant tophe-recherche-ajax-request.php

4. Le fichier côté client : share/related/tophe-recherche-ajax.php

Voici le code du fichier côté client. Ce fichier sera affiché par l'intermédiaire du plugin related à l'intérieur de votre blog, il contient le champ input ainsi que le script AJAX qui fait appel au fichier php précédent et qui en affiche le résultat en temps réél.

 <script type="text/javascript" src="share/jquery.js"></script> <script language="Javascript"> function searchformSubmit() 	{ 	recherche=$("#recherche").val(); 	$("#searchform [@name=order][@type=radio][@checked]").each(function() { order=this.value; }); 	$.ajax({ 		type: "POST", 		url: "share/tophe-recherche-ajax-request.php", 		data: "recherche="+recherche+"&order="+order, 		success: function(msg){$("#feedback").empty();$("#feedback").prepend(msg);} 		}); 	} $(document).ready(function(){ 	$("#searchform").bind("submit", function() { return false; }) 	$("#recherche").keyup(function(){ 		searchformSubmit(); 		}); 	$("#searchform :radio").click(function(){ 		searchformSubmit(); 		}); }); </script> <? echo utf8_encode("<h2>Un petit moteur de recherche AJAX pour Dotclear ...</h2><p style=\"font-weight:bold;\">Déposez vos commentaires sur le moteur de recherche <a href=\"http://blog.topheman.com/index.php?2007/07/18/248-moteur-de-recherche-ajax-pour-dotclear\">ici</a></p>"); ?> <form id="searchform"> Recherche : <input name="recherche" id="recherche" value="" size="35" /> <br /> Tri : <input name="order" type="radio" value="alpha-asc" class="bouton-radio" id="bouton-radio-alpha-asc" checked> <label for="bouton-radio-alpha-asc">Alphabétique</label> <input name="order" type="radio" value="chrono-asc" id="bouton-radio-chrono-asc"> <label for="bouton-radio-chrono-asc">Chronologique</label> <input name="order" type="radio" value="chrono-desc" id="bouton-radio-chrono-desc"> <label for="bouton-radio-chrono-desc">AntiChronologique</label> </form> <p id="feedback"></p>
5. Inclusion du moteur de recherche dans votre blog : share/related/related.ini

Tout les fichiers sont maintenant en place, il ne reste plus qu'à donner l'accès au moteur de recherche, pour cela, ouvrez le fichier share/related/related.ini et rajoutez la ligne suivante :

recherche-ajax = " tophe-recherche-ajax.php|Moteur de Recherche Ajax pour Dotclear "

Puis uploadez le fichier sur votre serveur.

6. Conclusion

Votre moteur de recherche est maintenant accessible par l'url /index.php?recherche-ajax

A lire aussi ...

8 réponses à “Tutoriel – Ajouter un moteur de recherche Ajax à Dotclear”

  • Whooo, merci ! Moi ce qui me retient c'est pour les gens qui ont désactivé java script

    Bien à vous

  • Tu sais, peu de gens désactivent javascript, ou alors ils le font en connaissance de cause (en sachant qu'ils passent à côté de fonctionnalités avancées proposées par les sites).

    L'internaute moyen n'a aucune idée de ce qu'est javascript …

  • Bonjour,

    Cet article est très intéressant. Parler de JQuery est une action
    d'utilité publique pour le web.
    Vous pouvez consulter plus d'informations sur le site http://www.webjax.eu
    et plus particulièrement la rubrique http://www.webjax.eu/r/14-JQuery...
    qui présente la documentation officielle de Jquery en version française.

    Vive le web2.0 et ajax, longue vie aux codeurs :-)

  • 545454

  • En effet, aujourd'hui désactiver le javascript c'est 90% des sites qui ne s'utilisent pas bien.
    Néanmoins ,il convient de toujours tenter de trouver une solution pure ( sans javascript ).

  • jerome

    bonjour, je suis tout ce qu'il y a de débutant en langage informatique…
    lorsque vous parlez de moteur de recherche intégré au site, cela veut dire qu'il cherche dans les pages du site, ou est-il possible de lui faire effectuer les recherches dans une base de données précise (ex: base de données d'une bibliothèque en MySQL ou Unimarc)?

  • @jerome Ce moteur de recherche effectue ses recherches directement dans la base de donnée MySQL du blog. Les articles sont stockés dans une table dans la bdd, il est donc facile de faire une petite requête toute simple pour faire une recherche …

  • doudou

    un moteur de recherche personnalisé à votre nom
    http://www.lafouinedunet.com/goo...
    pour mettre votre nom cliquez sur "CHANGEZ LE LOGO

Laisser un commentaire