Le Blog Topheman par Christophe Rosset

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 ...

• Moteur de recherche AJAX pour dotclear
• Votre propre moteur de recherche dans la barre de navigation …
• Google Dance – Saviez-vous que les moteurs de recherche savaient danser ?
• Migration Dotclear 1.2.5 vers WordPress 2.8.6 – Le grand saut
• boxboxevents : moteur physique JavaScript simplifié pour vos jeux vidéos

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