Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Bubble
  3. La base de données
Extrait - Bubble Programmez vos premières applications en no-code
Extraits du livre
Bubble Programmez vos premières applications en no-code
1 avis
Revenir à la page d'achat du livre

La base de données

Introduction

Dans ce chapitre, nous allons revenir en détail sur ce que nous avons réalisé dans le chapitre précédent, c’est-à-dire interagir avec une base de données.

L’importance de la base de données

Dans le domaine de la création d’application, la base de données est un élément primordial car c’est ce qui permet les interactions avec l’utilisateur. Que ce soit pour gérer vos propres données (dans le cas d’un compte client) ou interagir avec des éléments de l’application comme réserver un voyage, acheter un objet, tout se passe à partir d’une base de données.

Dans le cadre de Bubble, vous avez un accès direct à cette base de données, ce qui vous permettra d’appréhender au mieux sa logique.

La table de données

Bubble utilise une base de données relationnelle. En informatique, une base de données relationnelle est une base de données où l’information est organisée dans des tableaux à deux dimensions appelés tables. Selon ce modèle relationnel, une base de données est constituée de tables et de relations entre les tables.

images/04SOB01.png

Chaque table comporte des attributs. Ces attributs correspondent à des propriétés de la donnée, par exemple un utilisateur à :

  • un prénom ;

  • un nom ;

  • un âge ;

  • un e-mail.

Dans notre exemple, la table Livre pourrait avoir les attributs suivants :

  • titre ;

  • année ;

  • prix.

images/04SOB02.png

Une table se visualise sous la forme d’un tableau, où les colonnes correspondent à des attributs (une colonne peut stocker des numéros de téléphone, des noms...) et les lignes à des enregistrements, également appelés entrées. Le champ correspond au nom que l’on donne à l’attribut.

images/04SOB03.png

Créer une table de données

Dans l’exercice précédent, nous avons préféré passer par la partie workflow pour créer la table et les attributs au fur à mesure. C’est un moyen rapide et facile d’ajouter de la donnée. Cependant, au fur à mesure de votre progression...

Le C.R.U.D

L’acronyme informatique anglais C.R.U.D désigne les quatre opérations de base pour afficher et manipuler la donnée.

C.R.U.D pour :

  • Create : créer (enregistrer) de la donnée ;

  • Read : lire la donnée, par exemple les données affichées dynamiquement sur une page ;

  • Update : mettre à jour une donnée ;

  • Delete : supprimer une donnée.

Create : enregistrer la donnée

Comme nous l’avons vu dans le chapitre précédent, les éléments Inputs Forms permettent d’enregistrer de la donnée.

Chaque entrée a un type spécifique qui doit correspondre à la donnée attendue à l’enregistrement. Par exemple, un élément Picture uploader fournit une donnée de type Image.

images/04SOB09.png

Voici les principaux éléments Input Forms :

  • Input (la plupart des valeurs textuelles) : permet à l’utilisateur d’entrer du texte simple, comme des noms, des adresses e-mail, ou d’autres valeurs textuelles.

  • Multiline Input : utilisé pour entrer plusieurs lignes de texte, comme un commentaire ou une description.

  • Checkbox : permet une sélection binaire (vrai ou faux), souvent utilisée pour des choix simples.

  • Dropdown : offre une liste déroulante d’options prédéfinies, permettant à l’utilisateur de sélectionner une seule option parmi plusieurs.

  • Searchbox : permet à l’utilisateur de rechercher parmi une liste de valeurs, comme un annuaire ou une liste de produits.

  • Radio buttons : offre plusieurs options, mais permet une seule sélection. Similaire à un dropdown, mais présente toutes les options simultanément.

  • Slider Input : permet à l’utilisateur de sélectionner une valeur dans une plage définie en glissant un curseur, comme le volume ou la luminosité.

  • Date/Time picker : autorise la sélection d’une date et d’une heure spécifiques, utilisé pour planifier des rendez-vous ou des événements.

  • Picture Uploader : permet à l’utilisateur de télécharger une image depuis son appareil, utilisé pour les profils, les produits ou d’autres visuels.

  • File Uploader : permet...

Les relations entre les tables

Reprenons le concept de base de données. Les différentes tables possèdent des attributs pour caractériser la donnée. Cependant certains attributs peuvent tout à fait faire appel à une autre table. Une relation est le résultat d’un attribut qui lie une table à une autre.

images/04SOB35.png

La relation a plusieurs avantages :

  • Ne pas avoir à réécrire une donnée existante dans une autre table.

  • Donner un accès direct à une autre table ainsi qu’à tous les attributs et les données qu’elle contient.

À l’instar d’autres outils no-code, la création d’une relation sur Bubble est unidirectionnelle : la relation créée de la table A vers la table B n’est pas réciproque.
images/04SOB36.png

Créer une relation Livre - Bibliothèque

Une relation se crée de la même manière qu’un attribut, dans la table qui utilisera la donnée. Dans ce cas, nous allons ajouter un attribut relationnel Bibliothèque à la table Livre. Cela nous permettra d’afficher la bibliothèque dans laquelle est stocké le livre.

Il faut obligatoirement que la table que vous souhaitez appeler existe préalablement dans Bubble.

Créons tout d’abord la table Bibliothèque avec son attribut Nom.

 Rendez-vous dans l’interface Data.

 Créez une nouvelle table de données que vous nommerez Bibliothèque.

 Ajoutez un attribut Nom, de type text.

images/04SOB37.png

Maintenant, nous pouvons créer la relation avec la table Livre.

 Revenez dans la table Livre, ajoutez un attribut Dispo-bibliothèque.

 Dans le champ Field type, sélectionnez Bibliothèque.

images/04SOB38.png

Vous venez...

Tri et filtre

La fonction Do a search for permet d’appeler toutes les données d’une table, mais il est tout à fait possible d’en filtrer et/ou trier les résultats.

Filtrer les résultats

L’ajout de contraintes (constraint) permet de filtrer des résultats.

Dans cet exemple, nous affichons uniquement les livres dont le thème est Romance.

images/04SOB47.png
Images/04SOB57.png

Les contraintes sont toujours composées du nom de la table concernée ainsi que des opérations permettant de définir le critère.

Une opération est composée :

  • d’un attribut de la table ;

  • d’un opérateur, tel que :

  • l’opérateur = : est égal à ;

  • l’opérateur < > : n’est pas égal à ;

  • l’opérateur is in : est présent dans la liste ;

  • l’opérateur isn’t in : n’est pas présent dans la liste ;

  • l’opérateur contains : contient ;

  • l’opérateur Doesn’t contain : ne contient pas.

  • et d’une valeur comparée de même type que l’attribut.

Les opérateurs affichés dépendront du type de l’attribut (text, number, etc.) ainsi que de sa nature (simple ou liste).

La valeur comparée peut être statique (une valeur écrite directement dans la contrainte), une autre donnée ou encore un des éléments présents sur la page comme un élément Input forms. Dans ce dernier cas, c’est la valeur rentrée directement sur la page qui servira de valeur comparée.

Par exemple, voici comment procéder pour filtrer le résultat du container Repeating Group à partir d’un élément Dropdown.

 Copiez l’élément Dropdown Thème et collez-le au-dessus du container Repeating group. Profitez-en pour le renommer Thème selection.

 Sélectionnez ensuite le container...

Autres appels de données

La fonction Do a search for est l’appel le plus courant en base de données. Cependant il existe d’autres appels, que nous visualisons sous l’appellation Data sources depuis le menu déroulant d’expression.

images/04SOB54.png

Voici le détail des principaux appels de données :

  • Current User : pour accéder aux données de l’utilisateur actuellement présent sur l’application.

  • Get an option : pour accéder à des données statiques dans une autre base de données : les "options sets" servent à utiliser des données fixes comme des catégories, genre, tags. Nous reviendrons sur cette notion dans le chapitre Fonctions avancées.

  • Get data from an external API : pour accéder à des données d’un service extérieur (via les plug-ins).

Nous mettrons en application ces autres appels lors des cas pratiques du chapitre Fonctions applicatives.