SlideShare une entreprise Scribd logo
Payes ton code
Vous allez voir, c’est en fait très simple à mettre en place. Voici tout d’abord le formulaire :
<form id="formulaire" action="index.php" method="post">
<fieldset>
<p>
<label for="foo">Saisissez les chaines à rechercher dans le
champ de formulaire ci-desous :</label>
<input type="text" name="foo" id="foo" value=""
onkeyup="loadData();" />
</p>
<ul id="zoneResultats" style="visibility: hidden;"></ul>
<p>
Texte à placer pour tester que les réponses s'affichent par
dessus... Lorem ipsum ...
</p>
</fieldset>
</form>
Voici le code javascript dont vous aurez besoin :
<script type="text/javascript">
// Déclaration de la fonction de Callback
// +
--------------------------------------------------------------------------------
--
// + afficherResultats
// + Affiche ou non le conteneur en fonction du résultat de la recherche
// +
--------------------------------------------------------------------------------
--
function afficherResultats(obj) {
// Construction des noeuds
var tabResult = obj.responseXML.getElementsByTagName('resultat');
document.getElementById('zoneResultats').innerHTML = '';
if (tabResult.length > 0) {
// On définit la hauteur de la liste en fonction du nombre de
rsultats et de la hauteur de ligne
var hauteur = tabResult.length * 22;
with(document.getElementById('zoneResultats').style) {
visibility = 'visible';
height = hauteur + 'px';
};
for (var i = 0; i < tabResult.length; i++) {
resultat = tabResult.item(i);
var egt = document.createElement('li');
var lnk = document.createElement('a');
var texte =
document.createTextNode(resultat.getAttribute('titre'));
lnk.appendChild(texte);
lnk.setAttribute('href', resultat.getAttribute('url'));
lnk.setAttribute('title',
resultat.getAttribute('titre'));
egt.appendChild(lnk);
document.getElementById('zoneResultats').appendChild(egt);
}
}
else {
document.getElementById('zoneResultats').style.visibility =
'hidden';
}
}
// Déclaration de la fonction qui lance la recherche
function loadData() {
// Création de l'objet
var XHR = new XHRConnection();
XHR.appendData("foo", document.getElementById('foo').value);
// On soumet la requête
// Signification des paramètres:
// + On indique à l'objet qu'il faut appeler le fichier search.php
// + On utilise la méthode POST, adaptée l'envoi d'information
// + On indique quelle fonction appeler lorsque l'opération a été
effectuée
XHR.sendAndLoad("search.php", "POST", afficherResultats);
}
</script>
Coté serveur, nous avons ce petit script PHP :
[php]
header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: application/xml");
if(!empty($_REQUEST["foo"])) {
$rqListBillet = "
SELECT *
FROM `blog_blabla`
WHERE `titre` like '" . $_REQUEST["foo"] . "%'
ORDER BY `date_parution` DESC";
$rsListBillet = mysql_query($rqListBillet);
$xml = "";
if (mysql_num_rows($rsListBillet) > 0) {
while ($billet = mysql_fetch_object($rsListBillet)) {
$xml .= "ntitre) . "" url="/blog/" . $billet->url_page . ".html" />";
}
}
}
else {
$xml = "";
}
$xml .= "n";
echo utf8_encode($xml);
[/php]

Contenu connexe

Tendances

Initiation au php
Initiation au phpInitiation au php
Initiation au php
StrasWeb
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
Cédric Leclinche
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?
Ruau Mickael
 
PHP &amp; MySQL
PHP &amp; MySQLPHP &amp; MySQL
PHP &amp; MySQL
Saïd Radhouani
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
kadzaki
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
halleck45
 
C libro escenarioii
C libro escenarioiiC libro escenarioii
C libro escenarioii
JhOn Zea Loaiza
 
Sécurité et Quaité de code PHP
Sécurité et Quaité de code PHPSécurité et Quaité de code PHP
Sécurité et Quaité de code PHP
Jean-Marie Renouard
 
Algo poo ts
Algo poo tsAlgo poo ts
Algo poo ts
mohamed El babili
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancées
Rémi Prévost
 
Synchroniser ses applis simplement avec akeneo/batch
Synchroniser ses applis simplement avec akeneo/batchSynchroniser ses applis simplement avec akeneo/batch
Synchroniser ses applis simplement avec akeneo/batch
gplanchat
 
Langage Perl
Langage PerlLangage Perl
Langage Perl
Rached Krim
 

Tendances (14)

Initiation au php
Initiation au phpInitiation au php
Initiation au php
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Hello mongo
Hello mongoHello mongo
Hello mongo
 
Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?
 
PHP &amp; MySQL
PHP &amp; MySQLPHP &amp; MySQL
PHP &amp; MySQL
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
 
C libro escenarioii
C libro escenarioiiC libro escenarioii
C libro escenarioii
 
Sécurité et Quaité de code PHP
Sécurité et Quaité de code PHPSécurité et Quaité de code PHP
Sécurité et Quaité de code PHP
 
Algo poo ts
Algo poo tsAlgo poo ts
Algo poo ts
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancées
 
Synchroniser ses applis simplement avec akeneo/batch
Synchroniser ses applis simplement avec akeneo/batchSynchroniser ses applis simplement avec akeneo/batch
Synchroniser ses applis simplement avec akeneo/batch
 
Langage Perl
Langage PerlLangage Perl
Langage Perl
 

En vedette

Google Adwords, arnaque ou opportunité de prospection ciblée ?
Google Adwords, arnaque ou opportunité de prospection ciblée ?Google Adwords, arnaque ou opportunité de prospection ciblée ?
Google Adwords, arnaque ou opportunité de prospection ciblée ?
Justyna Bozenska
 
Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...
Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...
Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...
HiMedia Group
 
Infographie programmatique adexchange-hi_media
Infographie programmatique adexchange-hi_mediaInfographie programmatique adexchange-hi_media
Infographie programmatique adexchange-hi_media
HiMedia Group
 
What is Real Time Bidding (in 30 seconds)
What is Real Time Bidding (in 30 seconds)What is Real Time Bidding (in 30 seconds)
What is Real Time Bidding (in 30 seconds)
Dapper
 
What is Real-Time Bidding (RTB)?
What is Real-Time Bidding (RTB)?What is Real-Time Bidding (RTB)?
What is Real-Time Bidding (RTB)?
Search Laboratory
 
Integral Ad Science Digital Ad Fraud Presentation
Integral Ad Science Digital Ad Fraud PresentationIntegral Ad Science Digital Ad Fraud Presentation
Integral Ad Science Digital Ad Fraud Presentation
Integral Ad Science
 
Tackle Ad Viewability in 2016
Tackle Ad Viewability in 2016Tackle Ad Viewability in 2016
Tackle Ad Viewability in 2016
Optimizely
 
Digital Advertising Trends—Programmatic, Big Data, Native, Viewability
Digital Advertising Trends—Programmatic, Big Data, Native, ViewabilityDigital Advertising Trends—Programmatic, Big Data, Native, Viewability
Digital Advertising Trends—Programmatic, Big Data, Native, Viewability
eMarketer
 

En vedette (8)

Google Adwords, arnaque ou opportunité de prospection ciblée ?
Google Adwords, arnaque ou opportunité de prospection ciblée ?Google Adwords, arnaque ou opportunité de prospection ciblée ?
Google Adwords, arnaque ou opportunité de prospection ciblée ?
 
Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...
Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...
Le programmatique-la-clé-du-succes-du-marketing-en-temps-reel etude-hi_media_...
 
Infographie programmatique adexchange-hi_media
Infographie programmatique adexchange-hi_mediaInfographie programmatique adexchange-hi_media
Infographie programmatique adexchange-hi_media
 
What is Real Time Bidding (in 30 seconds)
What is Real Time Bidding (in 30 seconds)What is Real Time Bidding (in 30 seconds)
What is Real Time Bidding (in 30 seconds)
 
What is Real-Time Bidding (RTB)?
What is Real-Time Bidding (RTB)?What is Real-Time Bidding (RTB)?
What is Real-Time Bidding (RTB)?
 
Integral Ad Science Digital Ad Fraud Presentation
Integral Ad Science Digital Ad Fraud PresentationIntegral Ad Science Digital Ad Fraud Presentation
Integral Ad Science Digital Ad Fraud Presentation
 
Tackle Ad Viewability in 2016
Tackle Ad Viewability in 2016Tackle Ad Viewability in 2016
Tackle Ad Viewability in 2016
 
Digital Advertising Trends—Programmatic, Big Data, Native, Viewability
Digital Advertising Trends—Programmatic, Big Data, Native, ViewabilityDigital Advertising Trends—Programmatic, Big Data, Native, Viewability
Digital Advertising Trends—Programmatic, Big Data, Native, Viewability
 

Similaire à Comment créer un moteur de recherche

Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
DNG Consulting
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
neuros
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
IZZA Samir
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
ECAM Brussels Engineering School
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
Vlad Posea
 
Spring 3.0
Spring 3.0Spring 3.0
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
eric German
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
Julio Djomo
 
Softshake apiness l'envers du décor
Softshake apiness l'envers du décorSoftshake apiness l'envers du décor
Softshake apiness l'envers du décor
ApinessSA
 
Softshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décorSoftshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décor
michaelmiguel2013
 
nodejs vs vertx
nodejs vs vertxnodejs vs vertx
nodejs vs vertx
Quentin Apruzzese
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4
🏁 Pierre-Henry Soria 💡
 
JQuery
JQueryJQuery
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Ruby STAR
Ruby STARRuby STAR
Ruby STAR
Sebastien Tanguy
 

Similaire à Comment créer un moteur de recherche (20)

Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Spring 3.0
Spring 3.0Spring 3.0
Spring 3.0
 
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
Softshake apiness l'envers du décor
Softshake apiness l'envers du décorSoftshake apiness l'envers du décor
Softshake apiness l'envers du décor
 
Softshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décorSoftshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décor
 
nodejs vs vertx
nodejs vs vertxnodejs vs vertx
nodejs vs vertx
 
HTML5
HTML5HTML5
HTML5
 
Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4
 
JQuery
JQueryJQuery
JQuery
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Ruby STAR
Ruby STARRuby STAR
Ruby STAR
 

Plus de ekofficiel

2 analyse 2
2  analyse 22  analyse 2
2 analyse 2
ekofficiel
 
A12 kubert 2
A12 kubert 2A12 kubert 2
A12 kubert 2
ekofficiel
 
Web service with url redirect discussion forums
Web service with url redirect   discussion forumsWeb service with url redirect   discussion forums
Web service with url redirect discussion forums
ekofficiel
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
ekofficiel
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
ekofficiel
 
Transpcrypto
TranspcryptoTranspcrypto
Transpcrypto
ekofficiel
 
Codebook solution
Codebook solutionCodebook solution
Codebook solution
ekofficiel
 
Musee
MuseeMusee
Musee
ekofficiel
 
Iss03
Iss03Iss03
Iss03
ekofficiel
 
Kryptologie
KryptologieKryptologie
Kryptologie
ekofficiel
 
Goo tracking final
Goo tracking finalGoo tracking final
Goo tracking final
ekofficiel
 
Letrre de prétention andré
Letrre de prétention andréLetrre de prétention andré
Letrre de prétention andré
ekofficiel
 

Plus de ekofficiel (12)

2 analyse 2
2  analyse 22  analyse 2
2 analyse 2
 
A12 kubert 2
A12 kubert 2A12 kubert 2
A12 kubert 2
 
Web service with url redirect discussion forums
Web service with url redirect   discussion forumsWeb service with url redirect   discussion forums
Web service with url redirect discussion forums
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
 
Transpcrypto
TranspcryptoTranspcrypto
Transpcrypto
 
Codebook solution
Codebook solutionCodebook solution
Codebook solution
 
Musee
MuseeMusee
Musee
 
Iss03
Iss03Iss03
Iss03
 
Kryptologie
KryptologieKryptologie
Kryptologie
 
Goo tracking final
Goo tracking finalGoo tracking final
Goo tracking final
 
Letrre de prétention andré
Letrre de prétention andréLetrre de prétention andré
Letrre de prétention andré
 

Comment créer un moteur de recherche

  • 1. Payes ton code Vous allez voir, c’est en fait très simple à mettre en place. Voici tout d’abord le formulaire : <form id="formulaire" action="index.php" method="post"> <fieldset> <p> <label for="foo">Saisissez les chaines à rechercher dans le champ de formulaire ci-desous :</label> <input type="text" name="foo" id="foo" value="" onkeyup="loadData();" /> </p> <ul id="zoneResultats" style="visibility: hidden;"></ul> <p> Texte à placer pour tester que les réponses s'affichent par dessus... Lorem ipsum ... </p> </fieldset> </form> Voici le code javascript dont vous aurez besoin : <script type="text/javascript"> // Déclaration de la fonction de Callback // + -------------------------------------------------------------------------------- -- // + afficherResultats // + Affiche ou non le conteneur en fonction du résultat de la recherche // + -------------------------------------------------------------------------------- -- function afficherResultats(obj) { // Construction des noeuds var tabResult = obj.responseXML.getElementsByTagName('resultat'); document.getElementById('zoneResultats').innerHTML = ''; if (tabResult.length > 0) { // On définit la hauteur de la liste en fonction du nombre de rsultats et de la hauteur de ligne var hauteur = tabResult.length * 22; with(document.getElementById('zoneResultats').style) { visibility = 'visible'; height = hauteur + 'px'; }; for (var i = 0; i < tabResult.length; i++) { resultat = tabResult.item(i); var egt = document.createElement('li'); var lnk = document.createElement('a'); var texte = document.createTextNode(resultat.getAttribute('titre')); lnk.appendChild(texte); lnk.setAttribute('href', resultat.getAttribute('url')); lnk.setAttribute('title', resultat.getAttribute('titre')); egt.appendChild(lnk); document.getElementById('zoneResultats').appendChild(egt); } } else { document.getElementById('zoneResultats').style.visibility =
  • 2. 'hidden'; } } // Déclaration de la fonction qui lance la recherche function loadData() { // Création de l'objet var XHR = new XHRConnection(); XHR.appendData("foo", document.getElementById('foo').value); // On soumet la requête // Signification des paramètres: // + On indique à l'objet qu'il faut appeler le fichier search.php // + On utilise la méthode POST, adaptée l'envoi d'information // + On indique quelle fonction appeler lorsque l'opération a été effectuée XHR.sendAndLoad("search.php", "POST", afficherResultats); } </script> Coté serveur, nous avons ce petit script PHP : [php] header("Pragma: no-cache"); header("Expires: 0"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-cache, must-revalidate"); header("Content-type: application/xml"); if(!empty($_REQUEST["foo"])) { $rqListBillet = " SELECT * FROM `blog_blabla` WHERE `titre` like '" . $_REQUEST["foo"] . "%' ORDER BY `date_parution` DESC"; $rsListBillet = mysql_query($rqListBillet); $xml = ""; if (mysql_num_rows($rsListBillet) > 0) { while ($billet = mysql_fetch_object($rsListBillet)) { $xml .= "ntitre) . "" url="/blog/" . $billet->url_page . ".html" />"; } } } else { $xml = ""; } $xml .= "n"; echo utf8_encode($xml); [/php]