# Gestion des clients

Source : https://docs.berkios.online/galerie/gestion-des-clients/ · Section : Galerie · Documentation officielle BERKIOS (https://docs.berkios.online)


Une liste de clients et une fiche avec champs obligatoires et validation d'e-mail, sans écrire une ligne de code.

Télécharger l'exemple : https://github.com/berkiosbuinu-server/examples/releases/latest/download/06-gestion-des-clients.zip

**Type :** BERKIOS Studio · **Niveau :** débutant · **Fichier :** `gestion-clients.berkios.json`

## Ce que vous allez apprendre

- Importer un projet dans le Studio.
- Reconnaître les composants d'une application : texte, champ, tableau, bouton.
- Tester un formulaire avec validation dans l'aperçu.

## Avant de commencer

[Téléchargez et installez le Studio](https://docs.berkios.online/commencer/telecharger/).

## Étape 1 : importer l'exemple

1. Téléchargez l'exemple et décompressez-le.
2. Lancez le Studio.
3. **Fichier → Importer**, puis choisissez `gestion-clients.berkios.json`.

## Étape 2 : explorer l'écran

L'application contient une seule interface, `Accueil`, avec dix composants :

| Composant | Type | Rôle |
|---|---|---|
| `title` | Étiquette | Le titre « Gestion des clients » |
| `search` | Champ | Recherche d'un client |
| `clients` | Tableau | Quatre clients de démonstration : référence, nom, e-mail, statut |
| `detail-title` | Étiquette | Le titre « Fiche client » |
| `name` | Champ | Nom complet, **obligatoire** |
| `email` | Champ | Adresse e-mail, **obligatoire** et au bon format |
| `phone` | Champ | Téléphone (facultatif) |
| `save` | Bouton | « Valider le formulaire » : lance la validation |
| `reset` | Bouton | « Effacer » : vide le formulaire |
| `note` | Étiquette | Rappel : validation locale uniquement |

Sélectionnez un composant pour voir et modifier ses propriétés dans le panneau des propriétés.

## Étape 3 : tester dans l'aperçu

Passez en mode **Aperçu** et essayez :

1. Cliquez sur **Valider le formulaire** sans rien saisir : le nom et l'e-mail sont signalés comme obligatoires.
2. Saisissez un nom et l'e-mail `amina@exemple` : le message **« Adresse e-mail invalide. »** s'affiche.
3. Corrigez l'e-mail en `amina@exemple.com` : le formulaire est valide.
4. Cliquez sur **Effacer** : tous les champs sont vidés.

## Comment la validation fonctionne

Résumé des règles du champ e-mail :

```text nocheck
obligatoire : oui
format : ^[^@\s]+@[^@\s]+\.[^@\s]+$
message : Adresse e-mail invalide.
```

Le **format** est une expression régulière : du texte, puis `@`, puis du texte, puis un point, puis du texte, sans espace. Les deux boutons utilisent des actions toutes faites : « envoyer le formulaire » (`submit-form`) et « vider le formulaire » (`reset-form`).

## Limites

Cet exemple est **autonome** : la validation se fait dans l'aperçu, sans sauvegarde sur un serveur. Pour enregistrer les données, voir [Actions SQLite](https://docs.berkios.online/studio/sqlite-actions/).

## À vous de jouer

Dans le Studio, ajoutez une règle d'obligation sur le champ **Téléphone**, puis testez dans l'aperçu.

## Pour aller plus loin

- Exemple suivant : [Messages et dialogues](https://docs.berkios.online/galerie/messages-et-dialogues/)
- Leçon : [Démarrer avec le Studio](https://docs.berkios.online/studio/demarrer/)