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
• le concept Page web à la colonne Lien Navigart qui contient les adresses vers les pages d'un site qui présente les œuvres

Pour sauvegrader l'association des concepts aux colonnes, appuyez sur le bouton appliquer et validez le brouillon de votre jeu de données.

Les concepts libellé et page web seront 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 Applications dans la barre de navigation, puis sur configurer une application. Choisissez la visualisation listes et fiches et ajoutez un titre à votre visualisation.

Vous êtes redirigé sur la page d'édition de votre visualisation.
Sur cette page vous pouvez définir les metadonnées de votre visualisation (titre, identifiant de publication, etc.) ainsi qu'éditer la configuration de votre application à l'aide du bouton Éditer la configuration.

Dans la section Données, choisissez le jeu de données de l'inventaire des collections que vous avez chargé sur votre compte.
Les vignettes par défaut utilisent les concepts libellé et page web.

Nous allons configurer le rendu de la fiche avec un réglage manuel.

1. Choissisez le rendu Réglage manuel
2. Choissisez la colonne à afficher en tant que titre
3. Ajoutez les section de votre fiche
4. Ajouter le bouton d'action pour naviger vers le concept page web renseigné dans le schéma des données

Sections

L'ajout des sections permet de choisir la disposition des elements ajoutés ainsi que les champs ajoutés.
Dans notre exemple, nous allons réaliser un fiche avec un affichage sur une colonne et tous les elements à la suite des autres.

1. Vous pouvez augmenter le padding pour espacer les elements des bords de la fiche
2. Choix de presentation des elements. Nous avons choisi un affichage sur une colonne dans notre exemple.
3. Ajout d'elements
4. Édition d'un element

Elements

Lors de l'ajout d'un element, choissisez la colonne à afficher (1). Plusieurs options d'affichage de l'élement sont disponibles.
Cliquez sur OK (2) pour valider l'ajout de l'element .

Ajoutez les differents elements que vous souaitez afficher.
Dans notre exemple, nous avons ajouter les colonnes Auteur, Date de création, Domaine, Technique et Dimensions.
Ces élements seront affichés sur notre fiche.

Fiche détaillé

Nous allons activer les fichez détaillées ainsi que l'impression des fiches.

Nous avons configuré 3 actions sur nos fiches :

1. Lorsque l'on clique sur la fiche => navigation vers la fiche détaillée
2. Navigation vers le lien du concept page web
3. Impression PDF de la fiche detaillé

Entête

Dans la section de l'Entête nous allons ajouter un filtre dynamique pour filtrer par Domaine

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.