Vous êtes sur la page Blog

Comment réaliser un moteur de recherche de fichiers avec autocomplétion sur du XML

Rédigé par fab1 aucun commentaire

Dans ce tutoriel, vous allez apprendre à créer un petit moteur de recherche de fichier, avec dans un premier temps la création au préalable d'un fichier index qui sera au format XML. Ensuit, nous verrons comment explorer cette index et surtout exploiter l’auto complétion qui est toujours une fonctionnalité agréable pour guider la recherche et l'affiner au fur et à mesure. C'est ce que l'on retrouve sur le moteur de recherche Google par exemple, qui propose des mots au fur et à mesure que l'on écrit notre requête. D'ailleurs un tutoriel concernant l'autocomplétion est déjà disponible sur le site, mais il exploite une base de données MySQL, ici notre auto-complétion se fera via l'exploitation d'un fichier XML, ce qui implique quelques changements par rapport à l'autre tutoriel.

On passe donc maintenant aux choses sérieux et l'on va commencer par la génération de notre fichier XML qui va nous servir d'index car il n'est pas possible de rechercher directement sur les fichiers et donc profiter de cette fameuse auto-complétion. Le but n'est pas de générer proprement notre fichier XML car ce n'est pas l'objet de ce tutoriel, pour la création de ce fichier XML, on va donc le faire via notre petit script suivant :

<?php
header('Content-type: text/plain');

$id = 0;
$xml = '<?xml version="1.0" encoding="UTF-8"?>'."\n";
$xml .= '<index>'."\n"; 
$dir = __DIR__;
$iterator = new RecursiveDirectoryIterator($dir, FilesystemIterator::SKIP_DOTS);

foreach(new RecursiveIteratorIterator($iterator) as $file) {
	$id = $id + 1;
	$xml .= '	<item>'."\n";
	$xml .= '		<fileid>'. $id .'</fileid>'."\n";
	$xml .= '		<filename>' . $file->getfilename() . '</filename>'."\n";
	$xml .= '		<filepath>' . $file . '</filepath>'."\n";
	$xml .= '	</item>'."\n";	
	
}
$xml .= '</index>'."\n"; 
echo $xml;

// suppression ancien index
// unlink("index.xml");

// creation nouvel index
$fp = fopen ("index.xml", "a+");   
fseek ($fp, 0);     
fputs ($fp, $xml);     
fclose ($fp);

?>

En ajoutant quelques fichiers dans le même dossier que le petit script qui construit le fichier XML, chez moi le résultat est alors le suivant sur ce fichier d'index des fichiers :

<?xml version="1.0" encoding="UTF-8"?>
<index>
	<item>
		<fileid>1</fileid>
		<filename>annuairev42.sql</filename>
		<filepath>C:\wamp\www\opty\annuairev42.sql</filepath>
	</item>
	<item>
		<fileid>2</fileid>
		<filename>stripes.html</filename>
		<filepath>C:\wamp\www\opty\css\stripes.html</filepath>
	</item>
	<item>
		<fileid>3</fileid>
		<filename>csv2sql.php</filename>
		<filepath>C:\wamp\www\opty\csv2sql.php</filepath>
	</item>
	<item>
		<fileid>4</fileid>
		<filename>csv2sqlv2.php</filename>
		<filepath>C:\wamp\www\opty\csv2sqlv2.php</filepath>
	</item>
	<item>
		<fileid>5</fileid>
		<filename>fete.php</filename>
		<filepath>C:\wamp\www\opty\fete.php</filepath>
	</item>
	<item>
		<fileid>6</fileid>
		<filename>form-chercherFichier.php</filename>
		<filepath>C:\wamp\www\opty\form-chercherFichier.php</filepath>
	</item>
	<item>
		<fileid>7</fileid>
		<filename>form.html</filename>
		<filepath>C:\wamp\www\opty\form.html</filepath>
	</item>
	<item>
		<fileid>8</fileid>
		<filename>form2.html</filename>
		<filepath>C:\wamp\www\opty\form2.html</filepath>
	</item>
	<item>
		<fileid>9</fileid>
		<filename>getStoresOnPO.xml</filename>
		<filepath>C:\wamp\www\opty\getStoresOnPO.xml</filepath>
	</item>
	<item>
		<fileid>10</fileid>
		<filename>index.xml</filename>
		<filepath>C:\wamp\www\opty\index.xml</filepath>
	</item>
	<item>
		<fileid>11</fileid>
		<filename>indexsearchfile.txt</filename>
		<filepath>C:\wamp\www\opty\indexsearchfile.txt</filepath>
	</item>
	<item>
		<fileid>12</fileid>
		<filename>jquery.autocomplete.min.js</filename>
		<filepath>C:\wamp\www\opty\jquery.autocomplete.min.js</filepath>
	</item>
	<item>
		<fileid>13</fileid>
		<filename>jquery.min.js</filename>
		<filepath>C:\wamp\www\opty\jquery.min.js</filepath>
	</item>
	<item>
		<fileid>14</fileid>
		<filename>maj-index-chercherFichier.php</filename>
		<filepath>C:\wamp\www\opty\maj-index-chercherFichier.php</filepath>
	</item>
	<item>
		<fileid>15</fileid>
		<filename>jquery.min.js</filename>
		<filepath>C:\wamp\www\opty\matrix\jquery.min.js</filepath>
	</item>
	<item>
		<fileid>16</fileid>
		<filename>matrix.html</filename>
		<filepath>C:\wamp\www\opty\matrix\matrix.html</filepath>
	</item>
	<item>
		<fileid>17</fileid>
		<filename>index.zip</filename>
		<filepath>C:\wamp\www\opty\menu\index.zip</filepath>
	</item>
	<item>
		<fileid>18</fileid>
		<filename>index2.zip</filename>
		<filepath>C:\wamp\www\opty\menu\index2.zip</filepath>
	</item>
	<item>
		<fileid>19</fileid>
		<filename>index3.zip</filename>
		<filepath>C:\wamp\www\opty\menu\index3.zip</filepath>
	</item>
	<item>
		<fileid>20</fileid>
		<filename>index.php</filename>
		<filepath>C:\wamp\www\opty\paserXML\index.php</filepath>
	</item>
	<item>
		<fileid>21</fileid>
		<filename>rss.xml</filename>
		<filepath>C:\wamp\www\opty\paserXML\rss.xml</filepath>
	</item>
	<item>
		<fileid>22</fileid>
		<filename>Regex_echellon.php</filename>
		<filepath>C:\wamp\www\opty\Regex_echellon.php</filepath>
	</item>
	<item>
		<fileid>23</fileid>
		<filename>remplirv4.php</filename>
		<filepath>C:\wamp\www\opty\remplirv4.php</filepath>
	</item>
	<item>
		<fileid>24</fileid>
		<filename>remplirv42.sql</filename>
		<filepath>C:\wamp\www\opty\remplirv42.sql</filepath>
	</item>
	<item>
		<fileid>25</fileid>
		<filename>index.php</filename>
		<filepath>C:\wamp\www\opty\search\index.php</filepath>
	</item>
	<item>
		<fileid>26</fileid>
		<filename>search.php</filename>
		<filepath>C:\wamp\www\opty\search\search.php</filepath>
	</item>
	<item>
		<fileid>27</fileid>
		<filename>tuto.html</filename>
		<filepath>C:\wamp\www\opty\tuto.html</filepath>
	</item>
	<item>
		<fileid>28</fileid>
		<filename>image1.png</filename>
		<filepath>C:\wamp\www\opty\tutodiv\image1.png</filepath>
	</item>
	<item>
		<fileid>29</fileid>
		<filename>image2.png</filename>
		<filepath>C:\wamp\www\opty\tutodiv\image2.png</filepath>
	</item>
	<item>
		<fileid>30</fileid>
		<filename>image3.png</filename>
		<filepath>C:\wamp\www\opty\tutodiv\image3.png</filepath>
	</item>
	<item>
		<fileid>31</fileid>
		<filename>tutodiv.html</filename>
		<filepath>C:\wamp\www\opty\tutodiv\tutodiv.html</filepath>
	</item>
	<item>
		<fileid>32</fileid>
		<filename>uptime.php</filename>
		<filepath>C:\wamp\www\opty\uptime.php</filepath>
	</item>
	<item>
		<fileid>33</fileid>
		<filename>vidertable.php</filename>
		<filepath>C:\wamp\www\opty\vidertable.php</filepath>
	</item>
</index>

Enfin, nous arrivons à cette fameuse page qui va s'occuper d'afficher notre petit système d'autocomplétion qui utilise JQuery comme sur l'autre tutoriel avec MySQL, cette fichier JavaScript est décidément capable de beaucoup de choses ! Le code pour exploiter l’auto-complétion de JQuery sur notre fichier XML est alors le suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Moteur de recherche de fichier via du XML</title>	
	<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script>
	var keyword = {}
  $.ajax({
        type: "POST",
        async: true,
        timeout: null,
        url: "index.xml",
        dataType: "xml",
        data: { xmlDoc: keyword },
        success: function (xmlResponse) {
            var data = $("item", xmlResponse).map(function () {
                return {
                    value: $("filename", this).text(),
                    id: $("fileid", this).text(),
					path: $("filepath", this).text()
                };
            }).get();
            $("#formulaire").autocomplete({
                source: data
            });
        }
    });  
	</script>
</head>
<body>
<input id="formulaire">
</body>
</html>

Le résultat est plutôt sympathique et donne alors quelque chose qui ressemble à ça si je tape .php, l'interrogation de mon fichier XML donne alors par exemple :

Classé dans : Tutoriel Javascript

Écrire un commentaire