Connecter votre base de données

Dans ce tutoriel, vous connectez une base de données Postgres, par exemple sur Neon ou Supabase, vous écrivez une requête SQL avec un paramètre, et vous alimentez ce paramètre depuis un champ de recherche pour que la liste se filtre pendant que le visiteur tape. Il vous faut une base Postgres accessible depuis Internet et un utilisateur avec un accès en lecture.

Préparer une table

1. Créer des données d’exemple

   Si vous n’avez pas encore de table à afficher, ouvrez l’éditeur SQL de votre fournisseur de base de données et exécutez :

   sql

   create table products (id serial primary key, name text not null, price numeric(8, 2) not null);
   insert into products (name, price) values
     ('Canvas tote', 24.00), ('Ceramic mug', 14.50), ('Linen apron', 32.00),
     ('Notebook', 9.90), ('Oak coaster set', 18.00), ('Wool blanket', 89.00);
   

2. Trouver les informations de connexion

   Dans le tableau de bord de votre fournisseur, ouvrez les informations de connexion de la base (dans Neon et Supabase, cliquez sur Connect dans le projet). Copiez l’hôte, le port, le nom de la base, l’utilisateur et le mot de passe. Ce sont les éléments d’une chaîne de connexion comme postgresql://user:password@host:5432/database.

Connecter la base de données

1. Ajouter une intégration PostgreSQL

   Ouvrez l’espace de travail Data depuis le bas de la barre latérale gauche. À côté de Integrations, cliquez sur + et choisissez PostgreSQL. Nommez-la Shop database.

2. Remplir la connexion

   Dans la carte Connection, saisissez le Host (par exemple ep-cool-name.us-east-2.aws.neon.tech), le Port (généralement 5432), la Database et le User. Laissez Ssl sur require, ou choisissez verify-full pour vérifier aussi le certificat du serveur.

3. Ajouter le mot de passe

   Dans la carte Secrets, saisissez le Password de l’utilisateur de la base. Il est chiffré sur le serveur et n’est jamais réaffiché.

4. Créer et tester

   Cliquez sur Create integration, puis sur Run test dans la carte Test connection. Connected signifie que Malla a joint la base et exécuté une requête simple. Une erreur affiche le message et un code, par exemple pour un mauvais mot de passe ou un hôte qui ne répond pas.

Interroger la table

1. Regarder les tables

   À côté de Queries, cliquez sur + et renommez la requête en products. Dans Source, réglez Integration sur Shop database et Operation sur List tables, puis cliquez sur Run dans la carte Result. Vous voyez toutes les tables que l’utilisateur peut lire, avec leurs colonnes.

2. Écrire le SQL

   Réglez Operation sur Query. Dans Sql, écrivez :

   sql

   select id, name, price from products
   where name ilike '%' || $1 || '%'
   order by name
   

   $1 est un espace réservé. Sa valeur vient de Params, jamais du texte SQL : un visiteur ne peut donc pas injecter de SQL par ce biais.

3. Donner une valeur au paramètre

   Sous Params, cliquez sur Add item et tapez "mug", avec les guillemets : chaque élément prend une valeur JSON, donc le texte a besoin de guillemets et les nombres non. Max rows renvoie 200 lignes si vous le laissez vide, et 1000 au maximum.

4. Renvoyer les lignes

   La requête renvoie un objet avec rows, rowCount, columns et truncated. Dans When it runs, réglez Response path sur rows pour que la requête ne renvoie que la liste. Cliquez sur Run : le résultat est un seul produit, la tasse en céramique.

Ajouter une recherche en direct

1. Créer une variable de recherche

   À côté de Page variables, cliquez sur + et choisissez String. Renommez-la search et laissez la valeur par défaut vide.

2. Alimenter le paramètre avec la variable

   Sélectionnez la requête products. À côté de l’élément "mug" sous Params, cliquez sur Use an expression (le bouton ƒ) et remplacez la valeur par vars.search.

   Dans When it runs, choisissez Client. La requête s’exécute maintenant dans le navigateur au chargement, puis de nouveau chaque fois que vars.search change. Debounce (ms) attend que le visiteur arrête de taper ; la valeur par défaut est 250 ms. Le navigateur demande à Malla d’exécuter la requête : le mot de passe ne quitte donc jamais le serveur.

3. Ajouter le champ de recherche

   De retour sur le canevas, cliquez sur + dans l’onglet Layers et choisissez Input. Dans la section Field, réglez Placeholder sur Search products et Value sur search. Taper dans le champ écrit maintenant dans la variable.

4. Lister les produits

   Insérez une Collection list sous le champ de recherche. Dans Collection list, réglez Source sur Expression et Items sur queries.products.data. Ajoutez deux textes dans Item et liez-les à item.name et item.price dans Typography. Réglez Empty text sur No products match your search.

1. Essayer la recherche

   Appuyez sur ⌘↵ pour prévisualiser la page et tapez oa dans le champ de recherche. Après une courte pause, la liste n’affiche plus que le set de sous-verres. Tapez xyz pour voir le texte vide. Appuyez de nouveau sur ⌘↵ pour revenir à l’édition.

2. Publier

   Cliquez sur Publish et ouvrez la page de préproduction. La recherche fonctionne de la même façon pour vos visiteurs.

Ce que vous avez appris

• Une intégration PostgreSQL enregistre l’hôte, la base et l’utilisateur, et garde le mot de passe chiffré sur le serveur.
• Les espaces réservés $1, $2 prennent leurs valeurs dans Params, et un paramètre peut lire une variable.
• Une requête client se relance quand les variables qu’elle lit changent, ce qui transforme un champ de saisie en recherche en direct.

Lisez les guides sur lesquels ce tutoriel s’appuie :