Todolist avec Saltcorn

Tutoriel: Créer une application de liste de tâches avec Saltcorn

 

Je vais vous montrer comment créer une application de liste de tâches simple avec Saltcorn. Cette application sera capable de stocker des éléments de tâches avec une description et un drapeau indiquant s’ils sont terminés ou non. Nous n’aurons la possibilité que d’ajouter de nouveaux éléments et de marquer des éléments comme terminés. La création de cette application simple nous permettra de comprendre comment modéliser les données et utiliser le constructeur glisser-déposer pour créer des vues et des formulaires pour ces données.

Création de la table de données

Tout d’abord, nous allons créer la table de données pour stocker les éléments de tâches. Nous aurons besoin d’une seule table pour stocker les éléments de tâches, qui devra stocker à la fois la description de l’élément et si celui-ci est terminé ou non. Pour créer la table, nous devrons définir les champs pour la description et pour le drapeau terminé. La description sera un champ de type chaîne de caractères et le drapeau terminé sera stocké comme un booléen (valeur vrai/faux ou oui/non). Enfin, nous devrons définir les droits d’accès pour la table pour spécifier qui peut lire et écrire dans la table (dans ce cas, nous spécifierons qu’un utilisateur connecté est nécessaire pour cela).

Création des vues

Une fois la table de données créée, nous allons créer les vues pour notre application. Nous aurons besoin de deux vues: une pour entrer de nouveaux éléments de tâches et une pour lister les éléments de tâches existants. Nous allons commencer par créer la vue pour entrer de nouveaux éléments de tâches, car cela nous permettra de remplir notre base de données avec des éléments de tâches pour pouvoir tester la deuxième vue. Pour créer cette vue, nous allons utiliser le template de vue « edit to-dos » (modifier les tâches) en l’appliquant à la table des éléments de tâches. Nous spécifierons également que seuls les utilisateurs connectés peuvent accéder à cette vue.

Création du formulaire

Ensuite, nous allons utiliser le constructeur glisser-déposer pour créer notre formulaire. Nous allons commencer par supprimer le formulaire généré automatiquement pour pouvoir le construire de zéro. Pour cela,nous allons sélectionner l’élément du dessus dans la liste des couches de la vue et cliquer sur « supprimer le contenu ». Nous aurons alors un formulaire vide sur lequel nous pourrons ajouter des éléments. Pour ajouter des éléments, nous allons les faire glisser depuis la barre d’outils située à gauche vers la zone principale (appelée « canvas »). Nous pourrons alors utiliser les paramètres de chaque élément pour les personnaliser (par exemple, changer le texte ou le style).

Pour construire notre formulaire, nous aimerions avoir une structure en colonnes avec un label à gauche, un champ de saisie de texte au milieu et un bouton « Enregistrer » à droite. Pour cela, nous allons glisser une structure de colonnes dans notre formulaire. Nous pourrons alors utiliser les paramètres pour spécifier que nous voulons trois colonnes, et que l’espace total est divisé en 12 colonnes.

Création de la vue de liste

Une fois le formulaire créé, nous allons créer la vue pour lister les éléments de tâches existants. Pour cela, nous allons utiliser le template de vue « list » (liste) en l’appliant à notre table d’éléments de tâches. Nous spécifierons également que seuls les utilisateurs connectés peuvent accéder à cette vue.

Conclusion

En suivant les étapes décrites dans cette vidéo, vous devriez être en mesure de créer une application de liste de tâches simple avec Saltcorn. Vous aurez appris à modéliser les données, à utiliser le constructeur glisser-déposer pour créer des vues et des formulaires, et à créer une vue pour lister les éléments de tâches existants. Si vous souhaitez utiliser une liste de tâches sans la construire vous-même ou si vous voulez voir à quoi ressemble le produit final, vous pouvez installer le pack de liste de tâches dans une instance Saltcorn vide pour obtenir la même application que celle que nous avons construite ici.

 

 

 

 

Retour en haut