Vous disposez de données (telles que des personnes, des événements ou des inventaires d'objets) et vous souhaitez les rendre facilement consultables sur votre site web à l'aide d'un moteur de recherche ?

Ce tutoriel vous guide dans la création d'un moteur de recherche multi-critères à partir de données tabulaires (Excel, CSV, etc.) et son intégration à votre site web, grâce à notre application Listes et Fiches.

Pour ce tutoriel, nous utiliserons l'inventaire des collections du musée d'Arts de Nantes afin d'obtenir cette visualisation :

Vous pouvez ainsi effectuer des recherches parmi les œuvres du musée d'Arts de Nantes. Les informations sur chaque œuvre sont disponibles sur des fiches détaillées. En cliquant sur ces fiches, vous accédez à plus d'informations sur l'œuvre et avez la possibilité 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, 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 présentant les œuvres.

Pour sauvegarder l'association des concepts aux colonnes, cliquez 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, utilisez 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é vers la page d'édition de votre visualisation. Sur cette page, vous pouvez définir les métadonnées de votre visualisation (titre, identifiant de publication, etc.) ainsi qu'éditer la configuration de votre application à l'aide du bouton Éditer la configuration.

Sur la page de 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. Choisissez le rendu Réglage manuel.
2. Sélectionnez la colonne à afficher en tant que titre.
3. Ajoutez les sections de votre fiche.
4. Ajoutez le bouton d'action pour naviguer vers le concept Page web renseigné dans le schéma des données.

Sections

L'ajout des sections permet de choisir la disposition des éléments ajoutés ainsi que les champs inclus.
Dans notre exemple, nous allons créer une fiche avec un affichage sur une colonne, où tous les éléments se suivent.

1. Vous pouvez augmenter le padding pour espacer les éléments des bords de la fiche
2. Choix de présentation des éléments : nous avons opté pour un affichage sur une colonne dans notre exemple
3. Ajout d'éléments
4. Édition d'un élément.

Éléments

Lors de l'ajout d'un élément, choisissez la colonne à afficher [1].
Plusieurs options d'affichage de l'élément sont disponibles.
Cliquez sur OK [2] pour valider l'ajout de l'élément.

Ajoutez les différents éléments que vous souhaitez afficher.
Dans notre exemple, nous avons ajouté les colonnes Auteur, Date de création, Domaine, Technique et Dimensions. Ces éléments seront affichés sur notre fiche.

Fiche détaillée

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

Nous avons configuré trois actions sur nos fiches :

1. Cliquer sur la fiche pour naviguer vers la fiche détaillée ,
2. Naviguer vers le lien du concept Page web ,
3. Imprimer la fiche détaillée au format PDF.

Entête

Dans la section 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 :

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

<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 rendre votre visualisation accessible à tous les visiteurs de votre site, activez l'accès public dans la page d'édition de vos données ainsi que dans la page de configuration de votre visualisation.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.