Vous possédez des données (personnes, événements ou inventaires d'objets, par exemple) et souhaitez les rendre facilement consultables dans votre site web grâce à un moteur de recherche ?

Ce tutoriel est consacré à la création d’un moteur de recherche multi-critères à partir de données tabulaires (Excel, CSV…) et à son intégration à votre site web, grâce à notre application listes et fiches.

Pour ce tutoriel, nous allons utiliser l'inventaire des collections du musée d’Arts de Nantes pour obtenir cette visualisation :

Vous pouvez ainsi faire une recherche parmi les œuvres du musée d'Arts de Nantes. Les informations sur chaque œuvre sont disponibles sur des fiches. Un clic sur les fiches vous permet d'accéder à plus d'informations sur l'œuvre et de les sauvegarder au format PDF.

Pour visualiser une œuvre, cliquez sur le lien de la page associée sur la fiche qui vous intéresse.

Dans la section schéma des données, associez le concept libellé à la colonne titre qui contient les noms des œuvres. Ensuite associez le concept page web à la colonne Lien Navigart qui contient les adresses vers les pages d'un site qui présente les œuvres. Enfin appuyez sur le bouton appliquer pour sauvegarder vos changements.

Les concepts libellé et page web seront automatiquement utilisés par notre futur moteur de recherche en tant que titre et lien pour chacune des fiches.

Données

Pour créer votre moteur de recherche, il faut utiliser la visualisation listes et fiches.

Cliquez sur mes visualisations dans la barre de navigation, puis sur créer une visualisation. Choisissez la visualisation listes et fiches, ajoutez un titre à votre visualisation et cliquez sur créer la visualisation.

Vous êtes redirigé sur la page de configuration de votre visualisation.

Dans la section sources des données, choisissez le jeu de données de l'inventaire des collections que vous avez chargé sur votre compte.

Une fois que vous avez sélectionné un champ à afficher dans vos fiches, un premier rendu de la visualisation vous est proposé, avec les titres et les liens dans les fiches (si vous avez bien renseigné les concepts libellé et page web sur vos données).

Vignette

Nous améliorons ensuite nos fiches en ajoutant des champs (colonnes de nos données).

Pour notre exemple, nous ajoutons quatre champs : auteur, date de création, domaine et dimension.

Vous pouvez personnaliser vos fiches en ajoutant différents champs.

La configuration de votre vignette devrait ressembler à celle-ci :

Fiche détaillée

Dans ce menu, vous pouvez activer les fiches détaillées et les impressions des fiches, qui correspondent à une sauvegarde au format PDF d'une ou plusieurs fiches.

Filtres

Dans ce menu, vous pouvez sélectionner les options de tri, ainsi que les filtres dynamiques. Vous pouvez ajouter les filtres dynamiques par domaine et par auteur. Les utilisateurs de votre moteur de recherche pourront naviguer plus rapidement dans les données à l'aide de ces filtres.

Vous pouvez enfin valider les modifications pour sauvegarder votre visualisation.

Vous pouvez intégrer votre moteur de recherche sur un autre site en copiant le code de votre visualisation à l'aide du bouton d'action à droite : intégrer dans un site. Votre code HTML devrait ressembler à celui-ci :

<iframe src="https://opendata.koumoul.com/data-fair/app/inventaire-des-collections-du-musee-d'arts-de-nantes?embed=true" width="100%" height="1000px" style="background-color: transparent; border: none;"></iframe>

Pour que votre visualisation soit accessible à tous les visiteurs de votre site, activez l'accès au public dans la page d'édition de vos données et la page de configuration de votre visualisation.

Vous avez maintenant toutes les informations nécessaires pour créer un moteur de recherche de vos données sur la plateforme Koumoul, sans avoir besoin de savoir programmer.

Si vous souhaitez une intégration au pixel près dans votre site, il faudra adapter la taille de l'iframe par rapport à la taille des vignettes, en changeant la valeur dans height. Cela peut aussi être réalisé automatiquement et dynamiquement, grâce à cette librairie JavaScript.

N'hésitez pas à nous contacter pour toute information complémentaire. Si vous souhaitez aller plus loin, nous pouvons aussi réaliser des visualisations personnalisées.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous contacter pour nous en faire part.