Skip to content

Accueil > Solution documentaire PMB > PMB : intégrer des champs de recherche

PMB : intégrer des champs de recherche

Mis à jour le 25 avril 2017

mercredi 20 mars 2013, par Florian Reynaud

La possibilité d’intégrer des champs de recherche vers des moteurs de recherche externes ou des sites fonctionnant avec des bases de données, n’est pas propre au catalogue PMB, elle peut être utilisée pour n’importe quel site web. J’explique ici la démarche utilisée pour afficher ces champs de recherche comme sur l’OPAC de mon catalogue, ici.

Mise à jour du 25/04/2017 :
modification pour la recherche Larousse
Mise à jour du 21/04/2013 :
ajout des champs Vikidia et Google Images (réutilisation autorisée)

Les champs de recherche choisis sont ceux de Littérature audio.com, de Google, de Yahoo, de Vikidia, de Wikipédia, de Larousse. Pour présenter et embellir ces champs de recherche, quelques images sont utiles, disponibles dans l’archive suivante, à copier, pour pmb, dans le dossier pmb/images/ :

Images (archive moteurs.7z)

Sur PMB, j’ai utilisé un champ existant pour intégrer les différents champs, ainsi dans Administration > Outils > Paramètres > Opac > biblio_preamble_p2

Il s’agit du paragraphe de présentation de la bibliothèque ou du CDI, qui apparaît sur la gauche du navigateur, avec d’abord un lien permanent vers l’accueil du catalogue du CDI, puis des liens (infopages et liens externes), enfin les fameux champs de recherche :

<div class="recherches_moteurs">

<!--  Champ de recherche Litt-audio -->
<form method=get action="http://www.litteratureaudio.com/index.php" target="_blank"><center><a href="http://www.litteratureaudio.com" target="_blank"><img src="../images/litt-audio.gif" border="0"alt="Litterature audio.com" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name=s style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0px -2px 0px -2px; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=sbutt value=Ok>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;"><:bouton_valider:></span></button></center> <br /></form>
<!-- Litt-audio -->

<!--  Champ de recherche Google -->
<form method=get action="http://www.google.fr/search" target="_blank"><center><a href="http://www.google.fr" target="_blank"><img src="../images/google.gif" border="0" alt="Google" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name=q style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0px -2px 0px -2px; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=hl value=fr>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;"><:bouton_valider:></span></button><!--<input type=text name=q size=25 maxlength=255 value=""><input type=hidden name=hl value=fr>&nbsp; <input type="image" src="squelettes-dist/rechercher.gif" class="submit" value="" />--></center> <br /></form>
<!-- Google -->

<!--  Champ de recherche Yahoo -->
<form method="get" action="http://fr.search.yahoo.com/search" target="_blank"><center><a href="http://fr.search.yahoo.com/" target="_blank"><img src="../images/yahoolrg.gif" border="0" alt="Yahoo" /></a>        <br />        <img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type="text" name="p" class="saisie-texte" id="recherche" value="" onFocus="value=' '" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0px -2px 0px -2px; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" />        <input type="hidden" name="fr" value="yscpb" />        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;"><:bouton_valider:></span></button>                <!--<input type="text" name="p" class="saisie-texte" size=25 maxlength=255  value="<:requete:>" onFocus="value=' '">        <input type="hidden" name="fr" value="yscpb">&nbsp; <input type="image" src="squelettes-dist/rechercher.gif" class="submit" value="" />--></center> <br /></form>
<!-- Yahoo -->

<!--  Champ de recherche Vikidia-->
<form method=get action="http://fr.vikidia.org/w/index.php" target="_blank"><center><a href="http://fr.vikidia.org" target="_blank"><img src="../images/vikidia.png" border="0" alt="Vikidia" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name="search" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0px -2px 0px -2px; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=hl value=fr>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;"><:bouton_valider:></span></button></center> <br /></form>
<!-- Vikidia-->

<!--  Champ de recherche Wikipedia -->
<form method=get action="http://fr.wikipedia.org/wiki/search-redirect.php" target="_blank"><center><a href="http://fr.wikipedia.org" target="_blank"><img src="../images/wikipedia.gif" border="0" alt="Wikipédia" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name="search" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0px -2px 0px -2px; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=hl value=fr>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;"><:bouton_valider:></span></button></center> <br /></form>
<!-- Wikipédia -->

<!--  Champ de recherche Larousse -->
<form method=get action="http://www.larousse.fr/encyclopedie/rechercher" target="_blank"><center><a href="http://www.larousse.fr/encyclopedie/" target="_blank"><img src="../images/larousse.gif" border="0"alt="Larousse" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name="q" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0px -2px 0px -2px; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=hl value=fr>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;"><:bouton_valider:></span></button></center> <br /></form>
<!-- Larousse -->
</div>

Dans la feuille de style de l’Opac, on ajoute le code qui permet de personnaliser le bloc <div> sous class "recherches_moteurs" :

.recherches_moteurs {
        background:#fff;
        padding-top:10px;
        padding-bottom:10px;
        margin:17px;
        border-radius: 10px 10px 10px 10px;
        border: 5px solid #fff;
}

On peut éventuellement ajouter des champs de recherche pour des moteurs de recherche d’images libres de droit, avec les filtres intégrés dans la recherche, ainsi pour Flickr, Google Images et Fotopedia :

<p class="titrage">Images libres de droit :</p>

<!--  Champ de recherche Flickr CC -->
<form method=get action="http://www.flickr.com/search/" target="_blank"><div class="bloc"><center><a href="http://www.flickr.com" target="_blank"><img src="../images/flickr.gif" border="0"alt="Flickr CC" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name="q" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=l value=cc>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;">Valider</span></button></center> <br /></div></form>
<!-- fin Flickr CC -->

<!--  Champ de recherche Google Images reuse -->
<form method=get action="https://www.google.fr/search" target="_blank"><div class="bloc"><center><a href="http://images.google.fr/" target="_blank"><img src="../images/google_images.png" border="0"alt="Google Images" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name="as_q" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=as_st value=y><input type=hidden name=tbm value=isch><input type=hidden name=safe value=images><input type=hidden name=tbs value=sur:f>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;">Valider</span></button></center> <br /></div></form>
<!-- fin Google Images reuse -->

<!--  Champ de recherche Fotopedia reuse -->
<form method=get action="http://www.fotopedia.com/search" target="_blank"><div class="bloc"><center><a href="http://www.fotopedia.com" target="_blank"><img src="../images/fotopedia.gif" border="0"alt="Fotopedia" align="absmiddle" /></a><br /><img src="../images/champdeb.gif" alt="" style="padding:0px 0px 0px 0px;width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=text name="q" style="color: #7c7c7c; height: 12px; padding: 3px; margin: 0; width: 120px; border: 0; font-size: 10px; background-color: white; background-image: url(../images/champfon.gif); background-repeat: repeat-x; background-position: left top; vertical-align:bottom;" /><img src="../images/champfin.gif" alt="" style="width:18px;height:18px;border:0;vertical-align:bottom;" /><input type=hidden name=human_license value=reuse>        <button class="submit" value="" style="height:17px; width:17px; border:0; background: transparent url(../images/champbou.gif) no-repeat; display:inline;"><span style="display:none;">Valider</span></button></center> <br /></div></form>
<!-- fin Fotopedia reuse -->

La récupération de ces codes nécessitera certainement des modifications relatives à la hauteur (height) ou à la largeur (weight) des champs, en jouant aussi parfois sur les marges (margin et padding).

Le contenu de cet article est sous licence CC BY-NC-SA, à l’exception des images utilisées par tolérance des marques citées.

Répondre à cet article