Comment créer un site web avec une base de données à l’aide de TeleportHQ
Créer un site web avec une base de données implique quatre tâches principales : organiser vos informations, choisir où les stocker, les connecter à vos pages et tester le fonctionnement du site publié. Dans TeleportHQ, vous pouvez utiliser une base de données hébergée intégrée ou connecter une base de données compatible que vous gérez déjà.
Ce guide présente les deux options, explique comment les bases de données alimentent les blogs, les centres d’aide et les sites de commerce électronique, et vous accompagne dans la création d’un catalogue de cours consultable. Vous pouvez appliquer la même méthode aux annuaires, aux bibliothèques de ressources et à d’autres sites web reposant sur du contenu structuré.
Qu’est-ce qu’une base de données de site web et comment fonctionne-t-elle ?
Une base de données de site web stocke les informations que votre site doit afficher ou gérer. Pour un blog, il s’agit des articles et de leur contenu associé. Pour une boutique en ligne, elle contient les produits et les commandes. Un site de formation peut stocker les cours, les formateurs et les prochaines sessions.
La base de données et le site web ont des rôles différents. La base de données contient les informations ; le site les présente sur des pages et permet aux visiteurs d’effectuer les actions que vous avez configurées.
Prenons l’exemple d’un catalogue de cours. Un enregistrement de la base de données contient les détails d’un cours de photographie. Une page de liste affiche son titre, son image et son prix aux côtés d’autres cours. Lorsqu’une personne ouvre la page du cours, une page de détails présente sa description complète à partir des mêmes informations stockées.
Vous pouvez mettre à jour l’enregistrement du cours sans avoir à rechercher et à réécrire manuellement chaque endroit où ses informations apparaissent. Les pages connectées récupèrent les données selon leur configuration et leur comportement de mise en cache.
Les termes à connaître
Vous n’avez pas besoin de devenir administrateur de base de données pour créer ce type de site web. Quelques termes vous aideront à mieux comprendre la configuration :
| Terme | Signification | Exemple de catalogue de cours |
|---|---|---|
| Base de données | L’ensemble organisé des informations utilisées par le site | La base de données du site de formation |
| Table | Un ensemble d’enregistrements doté d’une structure définie | Une table de cours |
| Enregistrement ou ligne | Un élément d’un tableau | Un cours de photographie pour débutants |
| Champ ou colonne | Une information enregistrée pour chaque enregistrement | Titre, durée ou prix |
| Clé primaire | Une valeur qui identifie de manière unique un enregistrement | Un identifiant de cours |
| Relation | Un lien entre des enregistrements de différentes tables | Un cours lié à son formateur |
| Liaison de données | Lier un élément de page à une valeur de données | Afficher le titre du cours dans un en-tête |
Un site web piloté par une base de données associe ces enregistrements stockés à des mises en page et au comportement de l’application. Le site ainsi créé peut contenir des centaines de pages distinctes sans qu’il soit nécessaire de concevoir chacune d’elles séparément.
Le terme « base de données web » désigne également les bases de données consultées ou gérées au moyen d’un navigateur. Dans ce guide, nous nous intéressons à la base de données qui fournit les informations de votre site web.
Quand un site web a-t-il besoin d’une base de données ?
Une base de données est utile lorsque vous devez gérer du contenu récurrent, organiser une collection d’éléments qui s’agrandit ou stocker des activités telles que des achats.
Voici quelques raisons courantes :
- Publier des articles à l’aide d’une mise en page commune.
- Afficher un catalogue que les visiteurs peuvent rechercher ou filtrer.
- Attribuer sa propre page à chaque produit, cours ou annonce d’annuaire.
- Gérer des informations affichées à plusieurs endroits.
- Stocker les enregistrements créés à partir d’actions configurées sur le site.
Un site Web de petite entreprise comportant quelques pages de services peut ne pas avoir besoin d’une base de données. Si les informations changent rarement et ne suivent pas de structure récurrente, modifier directement ces pages peut suffire.
Par ailleurs, stocker du contenu dans une base de données ne détermine pas automatiquement le mode de rendu d’un site. Certains sites génèrent des pages statiques à partir du contenu stocké ; d’autres récupèrent les données à la demande, lorsque les pages sont consultées. La méthode de création doit correspondre à la fréquence d’actualisation nécessaire des informations et aux actions que les visiteurs doivent pouvoir effectuer.
Exemples de sites Web avec base de données que vous pouvez créer avec TeleportHQ
Avant de créer vos propres tables, vérifiez si une fonctionnalité intégrée répond déjà aux besoins de votre site. TeleportHQ propose des fonctionnalités adossées à une base de données pour publier et vendre, ainsi que des outils permettant de créer des pages personnalisées à partir de données.
Blogs : gérer les articles indépendamment de leur mise en page
Un blog stocke le contenu de chaque article séparément de la mise en page qui l’affiche. Un modèle d’article commun peut présenter le titre, l’auteur et le corps de l’article, tandis que la page du blog affiche l’ensemble des articles pour permettre aux visiteurs de les parcourir.
Avec le créateur de blog de TeleportHQ, la configuration du blog relie le système de gestion de contenu aux pages de liste et aux pages d’articles. Vous pouvez personnaliser leur apparence et gérer les articles à l’aide des outils de blog disponibles ou de l’interface d’administration.
Pour une entreprise qui publie des tutoriels, cela signifie que l’équipe éditoriale peut ajouter un nouvel article sans dupliquer une page existante ni reconstruire ses blocs de contenu. Les catégories aident les lecteurs à trouver des contenus connexes, tandis qu’une présentation cohérente des articles rend l’expérience de lecture familière.
La base de données structure le contenu. Les éditeurs doivent toujours décider des éléments à inclure dans chaque article, du fonctionnement des catégories et du moment où un article est prêt à être publié.
Centres d’aide : organiser les réponses dans une ressource consultable
Un centre d’aide repose sur des principes similaires, mais s’adresse à un autre type de lecteur. Une personne qui consulte un article d’assistance a généralement une tâche ou un problème précis. La recherche et la navigation par catégorie sont donc aussi importantes que la mise en page de l’article.
Le centre d’aide intégré de TeleportHQ crée un espace d’aide consultable, avec des pages dédiées aux articles et aux catégories. Ses fonctionnalités plus étendues de base de connaissances permettent également de créer des systèmes reposant sur une documentation structurée et du contenu d’assistance.
Par exemple, une entreprise de logiciels peut organiser ses guides en catégories : configuration du compte, facturation et utilisation du produit. Pour modifier une instruction, il suffit de mettre à jour l’enregistrement de contenu correspondant, tandis que la mise en page commune continue d’afficher l’article de manière cohérente.
Définissez les catégories en fonction des questions posées par les clients. Une catégorie nommée « Importer vos données » est plus utile à un nouveau client qu’une catégorie portant le nom de l’équipe interne responsable des importations. La base de données prend en charge l’organisation que vous choisissez, mais elle ne peut pas déterminer si celle-ci est pertinente pour les lecteurs.
Commerce en ligne : relier la boutique aux données des produits et des commandes
Un site e-commerce utilise une base de données pour les informations publiques et les données opérationnelles. Les données produit alimentent le catalogue et les pages produits. Les achats génèrent des informations sur les commandes dont l’entreprise a besoin pour les traiter.
Le créateur de sites e-commerce de TeleportHQ propose des outils pour configurer les pages de la boutique, le paiement et les données associées. Vous pouvez personnaliser l’expérience d’achat et configurer les services et les règles commerciales nécessaires pour accepter et traiter les commandes.
Une simple connexion à une base de données ne suffit pas à créer une boutique fonctionnelle. Le site a également besoin d’une logique de paiement, d’une configuration des moyens de paiement et d’un traitement des commandes. La fonctionnalité e-commerce offre une structure de départ adaptée à ces besoins, au lieu de considérer une liste de produits comme une boutique complète.
Pour un commerçant, un bon test consiste à parcourir l’ensemble du parcours d’achat : un client consulte un produit, choisit ce qu’il souhaite acheter, passe commande et reçoit la confirmation attendue. La page produit ne représente qu’une partie de ce processus.
Catalogues et annuaires personnalisés
Pour créer une collection personnalisée, vous pouvez définir vous-même les enregistrements et les associer à des modèles de pages réutilisables. Vous pouvez, par exemple, créer un annuaire de fournisseurs, un catalogue de biens immobiliers ou une bibliothèque de ressources à télécharger.
Le guide ci-dessous prend l’exemple d’un catalogue de cours, dont la structure est facile à comprendre. Les visiteurs pourront parcourir les cours, filtrer la liste par sujet et ouvrir une page contenant davantage d’informations. La première version présentera les cours sans ajouter de comptes étudiants, d’inscriptions payantes ni de système de gestion de l’apprentissage.
En définissant clairement ce périmètre, vous pourrez terminer le site de base avant d’ajouter des fonctionnalités d’application plus exigeantes.
Choisir comment créer la base de données de votre site web
Dans TeleportHQ, deux possibilités principales s’offrent à vous pour gérer votre base de données : configurer la base de données intégrée ou connecter une base de données existante compatible. Vous pouvez également utiliser d’autres types de sources de données si vos informations se trouvent dans un tableur, une API ou un CMS headless.
Les outils de base de données de TeleportHQ intègrent ces options au processus de création de sites web. Le choix dépend de l’emplacement actuel de vos données, des personnes qui les gèrent et de l’endroit où vous prévoyez d’héberger le projet final.
| Option | À choisir lorsque | Éléments à prendre en compte |
|---|---|---|
| Base de données intégrée à TeleportHQ | Vous partez de nouvelles données et publiez sur TeleportHQ | TeleportHQ héberge la base de données ; des restrictions liées à l’offre et à l’hébergement s’appliquent |
| Base de données externe compatible | Vos données alimentent déjà une autre application ou sont gérées par un fournisseur établi | Vous gérez le service externe et ses autorisations de connexion |
| Source de données de type tableur | Votre équipe souhaite continuer à gérer une collection simple dans un tableur | Une connexion à un tableur ne permet pas d’effectuer toutes les opérations d’une base de données |
| API REST | Un autre service fournit les informations par l’intermédiaire d’une API | L’authentification, la structure des réponses et les limites du service sont importantes |
| CMS headless | Les éditeurs gèrent déjà du contenu structuré sur une plateforme de contenu | Le CMS reste responsable de son modèle de contenu et de son flux de travail éditorial |
Utilisez l’option intégrée pour un nouveau projet
TeleportHQ fournit une base de données PostgreSQL hébergée que vous pouvez configurer depuis l’éditeur. Chaque projet dispose de sa propre base de données, dans laquelle vous pouvez créer des tables et gérer des enregistrements.
Pour le catalogue de cours, c’est un point de départ simple si vous ne disposez pas déjà d’un service de données. Vous pouvez organiser les cours dans le même projet que celui où vous concevez leurs pages.
Conservez une base de données existante si elle constitue déjà la source de référence
Si votre organisation gère les informations sur les cours ailleurs, envisagez de connecter cette base de données plutôt que de créer une seconde copie à maintenir manuellement.
TeleportHQ prend en charge plusieurs connecteurs, notamment PostgreSQL, MySQL, MongoDB et Supabase. Les exigences de configuration et les possibilités de modification varient selon les connecteurs. Vérifiez que la connexion choisie prend en charge les opérations nécessaires au projet.
La connexion d’une base de données ne la transfère pas vers TeleportHQ. Elle reste hébergée par son fournisseur, et votre équipe demeure responsable de la configuration de ce service.
Étape 1 : définir le contenu et le parcours des visiteurs
Commencez par définir ce qu’un visiteur doit pouvoir accomplir. Dans cet exemple, le parcours consiste à parcourir les cours disponibles, trouver un sujet pertinent, ouvrir une page de cours et suivre un lien de demande de renseignements.
Ce parcours suggère deux principaux types de pages :
- Une page catalogue avec des fiches de cours, une recherche et un filtre par catégorie.
- Une page de détails du cours avec la description complète et une action permettant de demander des renseignements.
Vous avez également besoin d’un moyen pour que votre équipe puisse ajouter des cours et mettre à jour leurs informations. Pour la première version, vous pouvez gérer ces enregistrements à partir des outils de base de données de l’éditeur.
Les champs doivent correspondre à la fois aux pages de liste et aux pages de détail. Un bref résumé aide les utilisateurs à comparer les cours ; une description plus longue explique ce qu’ils apprendront après avoir ouvert une fiche.
Ébaucher une structure de données simple
Une première table de cours pourrait comporter les champs suivants :
| Champ | Type suggéré | Utilité |
|---|---|---|
id | Clé primaire entière | Identifie le cours dans le système |
title | Texte | Nomme le cours |
slug | Texte unique | Indique l’adresse de la page publique |
summary | Texte | Fournit une brève description pour les cartes |
description | Texte plus long | Fournit les principales informations sur le cours |
category | Texte | Regroupe les cours par sujet |
duration_hours | Nombre | Enregistre la durée prévue |
price | Nombre décimal | Enregistre un prix, le cas échéant |
image_url | Texte | Pointe vers l’image du cours |
enquiry_url | Texte | Définit la destination du lien de demande de renseignements |
Il s’agit d’un exemple de structure, et non d’une exigence de la plateforme. Un catalogue de formations internes peut ne pas avoir besoin de champs relatifs au prix ou aux demandes de renseignements. En revanche, une liste d’ateliers ouverts au public peut nécessiter des dates et des lieux.
Utilisez des types de données appropriés. Enregistrer la durée sous forme de nombre permet de trier les cours par ordre numérique. Enregistrer « environ dix heures » sous forme de texte libre peut être plus lisible, mais cette valeur ne se comporte pas comme un nombre lorsque vous filtrez ou triez les données.
Déterminez quels champs sont obligatoires. Un cours doit avoir un titre et un identifiant de page unique. Si l’image est facultative, prévoyez ce que la page doit afficher lorsqu’elle est absente.
Ajoutez des relations lorsque des informations doivent être partagées
Si plusieurs cours sont associés au même formateur, une table des formateurs peut stocker une seule fois les informations de cette personne. Chaque cours peut ensuite faire référence à l’enregistrement correspondant du formateur.
Cela évite de copier la même biographie dans plusieurs cours et de devoir mettre à jour chaque copie lorsqu’elle change. Les outils de structure des tables de TeleportHQ prennent en charge les clés étrangères dans les bases de données compatibles, y compris sa base de données intégrée.
Gardez un premier modèle suffisamment simple pour être compris. N’ajoutez des relations que lorsqu’il y a une raison claire de le faire ; répartir chaque champ dans une table différente rend un projet pour débutant plus difficile à gérer.
Étape 2 : Créer ou connecter la base de données
Une fois que vous savez quelles données vous devez stocker, ajoutez la base de données à votre projet.
Créer une base de données intégrée à TeleportHQ
- Ouvrez Sources de données dans la barre latérale gauche de l’éditeur.
- Cliquez sur le bouton plus pour ajouter une source de données.
- Choisissez Base de données TeleportHQ et donnez-lui un nom facile à reconnaître.
- Consultez l’avis d’hébergement et les limites de votre forfait.
- Sélectionnez « Configurer la base de données TeleportHQ ».
Une fois la configuration terminée, la base de données apparaît parmi les sources de données de votre projet. Ouvrez-la pour commencer à ajouter des tables. Le guide de configuration de la base de données intégrée explique l’interface et les problèmes courants liés au provisionnement.
Si votre projet dispose déjà d’une base de données intégrée, utilisez cette connexion existante. L’activation d’une autre fonctionnalité a peut-être permis de la créer auparavant.
Connecter plutôt une base de données externe
Pour une source existante, choisissez son connecteur dans « Sources de données » et fournissez les informations de connexion demandées. Il peut s’agir d’un hôte, d’un nom de base de données et d’identifiants, ou d’une chaîne de connexion fournie par votre prestataire.
La connexion doit être accessible depuis les serveurs de TeleportHQ. Configurez avec votre prestataire l’accès authentifié requis ainsi que les paramètres de connexion sécurisée.
La récupération du schéma permet à TeleportHQ de détecter la structure disponible. Vérifiez les tables ou collections importées avant de les connecter aux pages. Le guide de connexion à une base de données externe présente les connecteurs pris en charge et les exigences propres à chacun.
Une connexion réussie confirme que la base est accessible ; elle ne garantit pas que tous les enregistrements peuvent être affichés publiquement. Gardez les données opérationnelles sensibles séparées des informations destinées aux visiteurs.
Étape 3 : créer les tables et les remplir
Une fois la base de données disponible, créez la structure prévue à la première étape. Dans le panneau de la base de données, la carte Ajouter une nouvelle table propose plusieurs options : créer des tables manuellement, les générer avec l’IA ou importer des fichiers pris en charge.
Pour le catalogue de cours, créez la table des cours, ajoutez ses colonnes et définissez les types de champs requis. Attribuez une clé primaire et rendez le champ slug unique afin que chaque enregistrement ait un identifiant public distinct.
Si vous préférez une configuration assistée par l’IA, décrivez la table, ses champs et les éventuelles relations. Précisez les valeurs obligatoires et les champs qui doivent être uniques. Vérifiez le résultat généré avant d’ajouter du contenu destiné à la production : la génération par l’IA utilise des jetons et nécessite toujours votre jugement.
Le centre d’aide présente les deux méthodes dans son guide sur la création de tables de base de données.
Ajoutez des exemples d’enregistrements avant de tout importer
Ouvrez la table avec Afficher les données et ajoutez quelques cours. Variez suffisamment les exemples pour tester la conception :
- Un titre de cours court et un autre beaucoup plus long.
- Des cours dans différentes catégories.
- Un cours sans image facultative.
- Un cours gratuit, si un prix nul est valide pour votre projet.
- Descriptions de différentes longueurs.
Cela permet de repérer les problèmes de mise en page et d’affichage tant qu’ils sont faciles à corriger. Si tous les exemples d’enregistrements contiennent la même quantité de texte, le design peut sembler terminé jusqu’à l’ajout du contenu réel.
Examinez les enregistrements comme le ferait un visiteur. « Les bases de la photographie » ne donne que peu d’informations à lui seul. Un résumé utile peut préciser à qui s’adresse le cours et ce que l’on y apprendra.
Importer des données depuis un tableur
Si les informations figurent déjà dans un fichier, vous pouvez les importer au lieu de saisir chaque enregistrement manuellement. TeleportHQ permet d’importer des bases de données depuis plusieurs formats, notamment CSV et Excel ; les outils d’importation documentent également d’autres options.
Nettoyez d’abord le fichier source. Choisissez des noms de colonnes clairs, vérifiez que les nombres sont enregistrés de manière cohérente et supprimez les slugs en double. Uniformisez les valeurs des catégories pour éviter que « Photographie » et « cours de photographie » deviennent par erreur des filtres distincts.
Il existe des procédures distinctes pour créer des tables à partir d’un fichier et pour importer un fichier CSV dans une table existante de la base de données intégrée. Cette dernière procédure permet de faire correspondre les enregistrements existants à l’aide d’une clé, de mettre à jour les lignes correspondantes et d’en ajouter de nouvelles. Consultez les instructions d’importation de la base de données pour connaître les formats et les limites pris en charge.
Après l’importation, comparez quelques lignes du fichier source avec les enregistrements obtenus. Portez une attention particulière aux dates, aux valeurs décimales et aux champs vides. Une importation terminée est une raison d’examiner le résultat, et non une garantie qu’il n’a pas besoin d’être vérifié.
Étape 4 : concevoir la page de liste et la relier aux données
Votre page de catalogue doit aider les visiteurs à choisir le cours qu’ils souhaitent consulter. Commencez par créer la mise en page générale : un titre de page, une brève présentation du catalogue et une zone réservée aux cartes de cours.
Reliez ensuite les cartes à la base de données. La liaison de données indique à un élément la source de la valeur qu’il affiche. Un titre peut récupérer le nom d’un cours, et une image l’URL enregistrée dans la même fiche.
Pour créer une mise en page répétée de cartes, TeleportHQ propose un Array Mapper. Ajoutez-le depuis le groupe List dans Elements, reliez sa source à la table des cours, puis concevez une carte à l’intérieur. L’élément répète cette mise en page pour chaque entrée renvoyée par la source.
Relier chaque carte au cours correspondant
Dans la mise en page répétée, reliez le titre, le résumé et l’image aux champs de l’élément courant. Ce contexte permet à chaque carte de représenter le cours correspondant.
Si chaque carte affiche le même titre, vérifiez que vous n’avez pas sélectionné par erreur une ligne précise de la base de données au lieu de l’élément répété courant. Il s’agit d’un problème de liaison, et non généralement d’un problème lié à la table elle-même.
Le guide pour afficher le contenu d’une base de données sur des pages explique comment choisir des valeurs dynamiques et les relier aux éléments.
Faciliter la comparaison grâce aux cartes
Affichez les informations dont les visiteurs ont besoin avant d’ouvrir la page de détails. Pour ce catalogue, vous pouvez indiquer le sujet, la durée et le prix, en plus du résumé.
Réservez la description détaillée à la page individuelle du cours. Une liste devient difficile à parcourir lorsque chaque carte contient plusieurs paragraphes et plusieurs actions qui se font concurrence.
Vérifiez la mise en page avec votre titre le plus long et sur le plus petit écran. Évitez les hauteurs fixes qui coupent du texte essentiel et veillez à ce que le lien du cours soit facile à sélectionner sur un téléphone. Si les cartes comportent des images, utilisez un format d’affichage cohérent pour que la liste reste lisible à mesure que vous ajoutez des images différentes.
Les données manquantes nécessitent également une réponse réfléchie. TeleportHQ prend en charge les valeurs de remplacement pour les liaisons concernées, mais le comportement du site publié peut aussi traiter zéro et false comme des cas de remplacement. Soyez prudent avec un prix égal à zéro : un cours gratuit ne doit pas être étiqueté à tort « Prix indisponible ». Testez le comportement exact du champ avant de vous fier à une valeur de remplacement.
Étape 5 : ajouter la recherche, les filtres et la navigation
Un catalogue contenant peu de cours peut être parcouru manuellement. À mesure qu’il s’étoffe, les visiteurs ont besoin de commandes pour affiner la liste.
Utilisez la recherche pour les personnes qui savent ce qu’elles veulent et les catégories pour celles qui explorent un sujet. Les commandes doivent correspondre aux données dont vous disposez, et non à toutes les possibilités de filtrage que vous pourriez ajouter plus tard.
Activer la recherche textuelle
Pour un Array Mapper ou un Table lié aux données et pris en charge, activez « Enable search ». TeleportHQ ajoute un champ de recherche pour la liste, que vous pouvez styliser pour l’harmoniser avec la page.
La recherche documentée dans les listes trouve les champs textuels sans tenir compte des majuscules et des minuscules. Ce n’est pas un moteur de recherche général qui couvre tous les types de données : les champs numériques, de date et booléens sont traités différemment.
Essayez la recherche dans l’aperçu et sur le site publié. Recherchez un titre complet, une partie de titre et une expression qui apparaît dans une description. Testez également une expression qui ne renvoie aucun résultat afin d’évaluer l’état vide.
Filtrer par catégorie
Un filtre détermine quels enregistrements peuvent être affichés. Par exemple, un filtre de catégorie peut comparer le champ de catégorie à « Photographie ».
Pour permettre aux visiteurs de modifier cette valeur, associez-la à un état contrôlé par une liste déroulante ou des boutons. Un filtre fixe dans l’éditeur crée une sélection fixe ; il ne permet pas automatiquement aux visiteurs de la modifier.
Définissez ce qui se passe lorsque le filtre est effacé. Les visiteurs doivent pouvoir revenir facilement à l’ensemble des cours, en particulier après avoir combiné une catégorie et une expression de recherche. Les outils de filtrage de TeleportHQ prennent en charge les valeurs dynamiques et, pour les listes de bases de données, les combinaisons de conditions. Le guide de filtrage des listes explique ces réglages et les différences selon la source.
Ajouter une pagination et définir un ordre par défaut adapté
La pagination répartit une collection volumineuse en groupes faciles à parcourir. Pour les listes TeleportHQ prises en charge, vous pouvez définir le nombre d’éléments par page et choisir un mode de navigation, comme des commandes de pagination ou le chargement d’éléments supplémentaires.
Choisissez le nombre de cartes visibles en fonction de la lisibilité et des performances. Une page présentant douze cartes pertinentes est souvent plus facile à parcourir qu’une page qui tente d’afficher tout un catalogue d’un seul coup.
Choisissez un ordre adapté au contenu. Le tri alphabétique convient à un catalogue de référence, tandis que les dates à venir peuvent être plus importantes pour des ateliers programmés. Vérifiez le comportement de l’ensemble : la recherche doit s’appliquer à la collection filtrée prévue, et la pagination ne doit pas laisser les visiteurs sur une page de résultats vide après la modification d’un filtre.
Étape 6 : créer une page dynamique pour chaque cours
La page de détails du cours utilise une seule mise en page pour afficher un enregistrement différent à chaque adresse. Vous n’avez pas besoin de créer une mise en page distincte pour chaque cours.
Dans Pages, Components & Tree View, créez une page pour la mise en page des cours. Ouvrez son menu, activez Is Details Page et sélectionnez la liste des cours comme source. Utilisez un champ unique et renseigné pour chaque enregistrement, tel que le slug, afin d’identifier chaque URL.
Associez le contenu de la page au cours actuel. Reliez ensuite les liens des cartes de votre catalogue à la page de détails, en transmettant la valeur d’URL de chaque cours. Le guide de configuration des pages de détails présente cette configuration.
Une adresse d’exemple pourrait être /courses/beginner-photography. Un autre cours utilise la même mise en page, avec sa propre adresse et son propre contenu.
Concevez la page en fonction de la décision à prendre
Une page de détails doit répondre aux questions laissées en suspens par la fiche du catalogue. Pour un cours, il peut s’agir des questions suivantes :
- À qui s’adresse ce cours ?
- Qu’apprendront les participants ?
- Combien de temps dure-t-il ?
- Quel est son coût, le cas échéant ?
- Que faut-il faire pour obtenir des renseignements ou s’inscrire ?
Ces questions orientent aussi bien le modèle de contenu que la mise en page. Si chaque cours doit préciser les prérequis, prévoyez un champ dédié et cohérent pour les enregistrer, plutôt que de les placer au hasard dans les descriptions.
Testez plusieurs fiches sur la page. Ouvrez directement leurs URL, actualisez le navigateur et suivez les liens depuis le catalogue. Chaque itinéraire doit afficher le bon cours, et le bouton de demande de renseignements doit mener à la destination prévue.
Si vous ajoutez ultérieurement une inscription payante, traitez-la comme un workflow supplémentaire avec ses propres exigences. Afficher un prix et créer un lien vers une page de cours ne permet pas de gérer les paiements ni les inscriptions.
Étape 7 : préparer les pages alimentées par la base de données pour le référencement naturel
Les moteurs de recherche ont besoin de pages accessibles et de contenu utile. La base de données vous aide à gérer ce contenu de manière cohérente, mais générer davantage d’URL ne rend pas, à lui seul, le site plus utile aux internautes.
Donnez à chaque cours un titre clair et une description qui explique ce qu’il propose précisément. Évitez de remplir toutes les pages avec le même paragraphe générique en ne changeant que le nom du cours. Les lecteurs doivent pouvoir comprendre en quoi les cours diffèrent les uns des autres.
Définir des titres et des descriptions propres à chaque page
Dans les paramètres SEO de la page de détails de TeleportHQ, vous pouvez associer la balise meta title et la description à l’enregistrement affiché. Des champs SEO dédiés sont utiles lorsque le titre ou le résumé présenté sur la page ne correspond pas au texte que vous souhaitez utiliser dans les métadonnées de recherche.
Vérifiez les valeurs obtenues pour plusieurs enregistrements au lieu de contrôler uniquement le modèle. Si le contenu source est manquant, certaines pages risquent d’être incomplètes.
Rendre le contenu accessible à la découverte
Ajoutez un lien vers chaque cours depuis le catalogue ou une page de catégorie pertinente. Utilisez des textes de lien explicites et des URL lisibles, et ajoutez un texte alternatif adapté aux images porteuses de sens.
Après le lancement, examinez des URL publiques représentatives dans Google Search Console. Vérifiez que le contenu que vous souhaitez faire indexer est accessible et que les pages importantes ne sont pas exclues par inadvertance.
Veillez à ce que la structure du site soit utile aux visiteurs. Créez des pages de catégories pour les aider à parcourir un sujet et ajoutez-y suffisamment de contenu pertinent pour expliquer leur fonction. Les outils de recherche peuvent compléter cette navigation, mais ne doivent pas être le seul moyen de découvrir des fiches importantes.
Étape 8 : tester, publier et vérifier les mises à jour
Prévisualisez le design, publiez le site et testez le parcours complet sur la version en ligne. Vérifiez les connexions, la recherche et l’actualisation des données là où les visiteurs les utiliseront.
Une vérification ciblée avant le lancement peut inclure les points suivants :
| Test | Éléments à vérifier |
|---|---|
| Page de liste | Les cartes présentent des fiches différentes avec les bonnes valeurs |
| Recherche | Les expressions recherchées permettent de trouver les bons cours, et les recherches sans résultat sont compréhensibles |
| Filtres | Les catégories affinent les résultats et peuvent être effacées |
| Pagination | Les visiteurs peuvent parcourir les résultats disponibles sans perdre le fil |
| Pages de détails | Les URL directes et les liens du catalogue ouvrent la formation correspondante |
| Mise en page mobile | Le texte reste lisible et les commandes sont faciles à utiliser |
| Liens de demande de renseignements | Chaque action mène à la destination prévue |
| Mises à jour des enregistrements | L’ajout ou la modification d’un cours produit le résultat attendu sur le site en ligne |
Testez également les valeurs facultatives manquantes. Un état de chargement, une collection vide et une erreur correspondent à des situations différentes. Prévoyez des messages adaptés aux états pris en charge par les éléments utilisés, afin que les visiteurs comprennent ce qui s’est passé et ce qu’ils peuvent faire ensuite.
Comprendre quand la publication est nécessaire
Les modifications de mise en page et de configuration nécessitent une publication. Le site publié et l’éditeur récupèrent les données séparément : actualiser l’éditeur ne revient pas à publier une page modifiée.
Pour les pages connectées à des données, les enregistrements peuvent être récupérés sans recréer manuellement chaque page. La mise en cache et le comportement de la source déterminent quand les valeurs mises à jour apparaissent. Si l’éditeur et le site en ligne affichent des données différentes, vérifiez l’enregistrement d’origine, actualisez la source concernée et contrôlez les paramètres du cache avant de conclure que la liaison est rompue.
Pour les blogs et les centres d’aide intégrés, les pages doivent avoir été publiées au moins une fois, et les articles doivent avoir le statut de publication approprié pour apparaître. Considérez la publication du contenu et celle de la conception des pages comme deux étapes distinctes, mais liées, du processus.
Hébergement de base de données : où résident les données de votre site web
L’hébergement web exécute le site consulté par les visiteurs. L’hébergement de base de données exécute le service qui stocke et récupère les informations du site. Une plateforme peut fournir les deux services, ou ceux-ci peuvent être gérés séparément.
Avec la base de données intégrée de TeleportHQ, vous n’avez pas besoin de configurer un serveur de base de données distinct. La base de données est hébergée pour le projet et fonctionne avec les sites hébergés sur TeleportHQ.
Cette relation d’hébergement est importante si vous prévoyez d’exporter le projet. La connexion à la base de données intégrée ne fonctionne pas avec du code téléchargé et hébergé ailleurs. Pour un déploiement externe, prévoyez la connexion à la base de données et tous les autres besoins du backend avant de vous engager dans une configuration.
Lorsque vous connectez une base de données externe, celle-ci reste chez son fournisseur. Vous conservez ainsi la continuité avec votre infrastructure de données existante, mais devez également gérer le compte du fournisseur, la capacité et les paramètres de connexion.
Vérifiez les limites avant le lancement
Les limites documentées de la base de données intégrée diffèrent selon qu’elle est utilisée pendant l’essai ou avec une offre payante :
| Limite | Base de données créée pendant l’essai | Pro et Premium |
|---|---|---|
| Enregistrements par table | 5,000 | 200,000 |
| Nombre total d’enregistrements dans la base de données | 15,000 | 3,000,000 |
| Stockage | 50 Mo | 2 Go |
| Période d’activité | Sept jours après la création, sauf si l’espace de travail souscrit à un abonnement | Tant que l’abonnement reste actif |
Des limites s’appliquent également aux tables, aux colonnes et aux index. Consultez les limites actuelles des forfaits de base de données TeleportHQ avant d’importer un grand ensemble de données ou de publier un site qui dépend de la base de données.
Estimez à la fois le nombre d’enregistrements et l’espace de stockage nécessaire. Un répertoire contenant des enregistrements textuels courts et une base de connaissances composée de longs articles peuvent avoir un nombre d’enregistrements similaire, mais des besoins de stockage différents. Les bases de données externes sont soumises aux limites de capacité définies par leurs fournisseurs.
Gérer l’accès aux données et la maintenance continue
La première version d’un catalogue peut ne présenter que des informations publiques. Si vous ajoutez ensuite des dossiers clients, du contenu privé ou des outils de modification, vérifiez les exigences en matière d’accès avant d’utiliser ces informations.
Déterminez qui peut lire, créer, modifier et supprimer chaque type d’enregistrement. Un administrateur qui met à jour des cours a besoin de permissions différentes de celles d’un visiteur qui les consulte. Si les utilisateurs gèrent leur propre contenu, l’application doit contrôler les enregistrements auxquels chacun peut accéder.
TeleportHQ stocke les identifiants de base de données et les clés API dans les secrets du projet. Utilisez les commandes prévues pour gérer les identifiants et ne placez pas les informations de connexion sensibles dans le texte des pages ni dans du code public.
Masquer un bouton ou une section ne protège pas les données à lui seul. Vérifiez les contrôles d’accès au niveau de l’application et des données, notamment ce qu’un visiteur non connecté peut récupérer. C’est particulièrement important lorsqu’un projet associe des listes publiques à des informations opérationnelles privées.
Mettre en place un processus de mise à jour facile à gérer
Désignez une personne ou une équipe responsable du contenu. Définissez la manière dont les nouvelles fiches sont vérifiées et dont les informations obsolètes sont corrigées ou supprimées.
Pour un catalogue de formations, un processus simple pourrait être le suivant :
- Préparez les informations sur les formations dans les champs convenus.
- Vérifiez la description, le prix et la destination des demandes de renseignements.
- Ajoutez la fiche et vérifiez qu’elle apparaît dans la liste et sur sa page de détails.
- Consultez régulièrement le catalogue pour repérer les formations qui ne sont plus proposées.
Si le projet utilise des fonctionnalités de publication intégrées, utilisez les commandes de statut du contenu dans le cadre de ce processus. Pour une table personnalisée, définissez et mettez en œuvre tout processus de vérification nécessaire ; l’ajout d’une colonne de statut ne restreint pas automatiquement l’accès public.
Vérifiez les champs utilisés par les liaisons des pages avant de modifier la structure du tableau. Renommer ou supprimer une colonne peut avoir un impact sur toutes les pages qui en dépendent. Avant une mise à jour groupée, vérifiez comment les enregistrements seront associés et comment restaurer les données si l’import produit un résultat indésirable.
Erreurs courantes lors de la création d’un site web avec une base de données
La plupart des premiers problèmes viennent d’un décalage entre la structure des données et l’interface. Les vérifications suivantes peuvent vous faire gagner du temps lors de la configuration :
| Problème | Cause probable ou vérification à effectuer |
|---|---|
| Toutes les cartes affichent le même élément | Les éléments sont peut-être liés à une ligne fixe au lieu du contexte de l’élément répété |
| Deux enregistrements ouvrent la même page de détails | Le champ URL contient peut-être des valeurs en double |
| Un nouvel enregistrement ne s’affiche pas | Vérifiez le filtrage, l’actualisation de la source, les exigences de publication et la mise en cache |
| Les catégories proposent des options presque identiques | Uniformisez les valeurs des catégories ou gérez-les à l’aide d’une structure partagée |
| Un cours gratuit affiche une valeur de remplacement incorrecte | Testez la manière dont la liaison gère les valeurs nulles |
| Le catalogue fonctionne, mais pas les achats | Afficher des produits ou des prix ne suffit pas à créer des processus de paiement et de commande |
| La base de données intégrée cesse de fonctionner pendant la période d’essai | Vérifiez la période d’activité de la base de données et l’état de l’abonnement |
Évitez de développer le projet tant que ces éléments de base ne fonctionnent pas. Ajouter des enregistrements à une liaison défectueuse amplifie le problème visible sans en résoudre la cause.
Pour une première version, le résultat le plus utile est un parcours complet et testé, avec un contenu exact. Les fonctionnalités supplémentaires doivent répondre à un besoin clair, comme permettre les réservations payantes ou donner aux formateurs accès à leurs propres dossiers.
Foire aux questions
Puis-je créer un site web avec une base de données sans écrire de code ?
Oui. TeleportHQ propose des outils visuels pour configurer une base de données, gérer les enregistrements et relier les données aux éléments d’une page. Vous devez tout de même planifier la structure et configurer le comportement du site. Les processus avancés ou les intégrations inhabituelles peuvent nécessiter des développements supplémentaires.
Puis-je utiliser ma base de données existante ?
Vous pouvez connecter une base de données externe compatible et utiliser ses informations dans le projet. Vérifiez le connecteur, l’accès réseau et les identifiants, ainsi que les opérations dont vous avez besoin. La prise en charge de la lecture d’une source ne signifie pas que toutes les sources proposent les mêmes outils de modification ou de gestion de la structure.
Créer une base de données en ligne, est-ce la même chose que créer un site web avec une base de données ?
Non. Une base de données en ligne stocke et organise des informations. Un site web avec une base de données ajoute une interface destinée aux visiteurs et les fonctionnalités nécessaires pour utiliser ces informations. La création du site consiste à concevoir les pages, à relier les enregistrements et à tester les actions que les utilisateurs effectueront.
L’ajout d’une base de données nécessite-t-il un emplacement Web App ?
La simple connexion d’une source de données ne nécessite pas d’emplacement Web App dans TeleportHQ. Des fonctionnalités telles que l’authentification, les processus, le commerce en ligne et le blog ou le centre d’aide intégrés offrent des capacités d’application web. Certains comportements facultatifs, notamment la mise en cache des listes, nécessitent également ces capacités.
Puis-je exporter un site web qui utilise le contenu d’une base de données ?
La documentation de TeleportHQ limite l’export de code des projets connectés à des données à Next.js. Le téléchargement du code est disponible avec les offres Pro et Premium, mais pas pendant la période d’essai. La connexion à la base de données intégrée dépend toujours de l’hébergement de TeleportHQ : exporter le code ne revient donc pas à transférer un backend hébergé opérationnel.
Dois-je créer des tables personnalisées pour un blog ou une boutique en ligne ?
Commencez par la fonctionnalité intégrée si elle répond à vos besoins. Elle fournit les pages attendues et la structure correspondante pour ce type de site. Les tables personnalisées sont utiles pour un autre modèle de contenu ou une application différente, comme le catalogue de cours présenté dans ce guide. Vérifiez les exigences de la fonctionnalité avant de modifier les tables utilisées par un système intégré.
Créez votre premier site web connecté à une base de données
Commencez par déterminer les informations dont vos visiteurs ont besoin et réunissez quelques exemples représentatifs. Créez ou connectez la base de données, concevez les pages de liste et de détail, puis vérifiez le parcours complet sur le site publié.
Si votre projet est un blog, un centre d’aide ou une boutique, prenez la fonctionnalité intégrée correspondante comme point de départ. Pour un catalogue ou un annuaire personnalisé, concevez les tables en fonction de votre contenu et reliez-les à des mises en page réutilisables. Une fois que les premières entrées s’affichent correctement et que le processus de mise à jour fonctionne, vous pouvez enrichir la collection sans devoir repenser chaque page.
Commentaires
Aucun commentaire pour le moment. Soyez le premier à partager votre avis.