M'offrir un café
M'offrir un café

Affilés

© Poumon.io 2024

forumactif

Bédédé 1.2.1-alpha

Poumon

Prenez note que ce plugin est en alpha pré-release. Le lien partagé pour l'installation, directement depuis mon dropbox personnel, sera supprimé lors de sa sortie officielle. N'UTILISEZ PAS cette version sur vos forums officiels ! Vous pouvez quand même l'essayer et bidouiller sur un forum test en attendant, et bien sûr me partager vos retours.

Ce plugin est un script pour ForumActif permettant de créer des bases de données grâce aux pages HTML du panneau d'administration. Ces bases de données pourront ensuite être exploitées en JavaScript et être utilisées n'importe où sur le reste de votre forum.

  • Ce plugin est un outil. Il n'est pas vraiment exploitable en l'état et demande de bonnes notions en JavaScript pour être utilisé à son plein potentiel.

Avant l'installation

Comprendre les limites

  1. Les base de données sont construites dans les pages HTML du panneau d'administration et celles-ci sont malheureusement limitées à 127999 caractères maximum.
  2. Les pages HTML ne peuvent être modifiées que par un administrateur y ayant accès.
  3. Comme vous le savez sans doute, ForumActif n'est jamais totalement fiable, et cette devise vaut aussi pour les manipulations du panneau d'administration. Pensez à sauvegarder une copie de vos bases de données de temps à autres dans un bloc note – on ne sait jamais. Si vous avez déjà perdu des templates pour aucune raison apparente, vous savez de quoi je parle.

Autoriser les formulaires ajax

  1. Il faut autoriser les formulaires non officiels à poster sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et rendez vous dans la section Général › Forum › Sécurité.
  2. Assurez-vous que l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" est bien réglée sur "Non" et sauvegardez vos changements.

Conserver le lien du panneau d'administration

  1. Le lien du panneau d'administration en bas de page est nécessaire pour récupérer le temporary id de l'administrateur actuellement connecté. C'est grâce à celui-ci que Bédédé peut naviguer jusqu'à la page HTML et modifier une base de données.
  2. Bien entendu, comme ce lien n'apparaît qu'aux administrateurs connectés et que les requêtes sont envoyées depuis leur compte, l'utiliser est tout à fait sécuritaire.

Installer le plugin

Le plugin est compilé en un seul fichier et doit être installé en script externe. Ouvrez votre template overall_footer_end (fin du bas de page) et juste avant la fermeture de la balise </body>, insérez le code suivant :

<!-- Importation de Bédédé.js / lien temporaire -->
<script src="https://dl.dropboxusercontent.com/scl/fi/sh2l7637uaznajpthysg0/bedede.js?rlkey=mlj9hvowz1csx1gqrrdeaxhj1&dl=0"></script>

<!-- Initialisation de Bédédé -->
<script>
const BDD = new Bédédé();
</script>

Bédédé est maintenant installé, mais n'est pas tout à fait fonctionnel encore. Il faut maintenant le configurer.

Créer une base de données

  1. Pour se faire, il faut d'abord créer une nouvelle page HTML. Son titre n'a pas d'importance. Assurez-vous que l'option "Voulez-vous utiliser le haut et le bas de page de votre forum ?" est bien réglée sur "Oui".
  2. Il faut ensuite coller le tableau ci-dessous.
<table id="bdd">
    <thead>
        <tr>
            <!-- les propriétés sont à ajouter ici -->
        </tr>
    </thead>
    <tbody>
        <!-- les données seront ajoutées ici -->
    </tbody>
</table>

Configurer une base de données

Une base de données sera générée grâce à ce tableau séparé en deux parties. Pour définir les propriétés de votre base de données, il suffit d'y ajouter des <th>. Pour l'instant, il en existe trois type :

  • <th>nom_propriété</th> Le champ du formulaire sera un input de type "text".
  • <th type="text">nom_propriété</th> Le champ du formulaire sera un "textarea" et permettra d'écrire sur plusieurs lignes.
  • <th type="select" options="">nom_propriété</th> Le champ du formulaire sera de type "select". Les options doivent être séparées par une virgule et seront les choix à sélectionner ainsi que la valeur de chacun d'eux.

Voici un exemple de propriétés pour une base de données de compétences (ou de sorts) :

<thead>
    <tr>
        <th>name</th>
        <th type="text">description</th>
        <th type="select" options="body,mind,soul">type</th>
        <th>cost</th>
  </tr>
</thead>

Avant de sauvegarder votre page, vous pouvez retirez les commentaires pour sauver quelques précieux caractères.

Configuration du plugin

Maintenant que la BDD et que le tableau sont créés, il est faut maintenant connecter le client correctement. Ceci permettra également de rendre visible le formulaire qui permet d'ajouter des données depuis votre page HTML.

Avant toute chose, le tout premier bout de script installé dans votre template permettait d'initialiser Bédédé sur votre forum – mais pas seulement. L'instance de la fonction new Bédédé() est également le client qui permet de se connecter à une base de données.

La fonction accepte un seul argument (pour l'instant) :

  1. Permet de déclarer à quelle page HTML vous souhaitez vous connecter. Le titre de la page n'importe peu : c'est l'ID qu'il faut retenir et remplacer selon la page à laquelle nous souhaitons nous connecter. Dans l'exemple ci-dessous, notre base de données se trouve à la page HTML "/h1-tralala".
const SkillsClient = new Bédédé(1); /* ID de la page HTML */

Je vous conseille fortement de renommer la variable du client selon ce que contient la base de données. C'est elle que nous utiliserons pour récupérer nos données, alors mieux vaut qu'elle soit explicite.

Écrire des données

Vous pouvez désormais accéder à votre page HTML en tant qu'administrateur et commencer à y écrire vos données. Tous les champs du formulaire sont obligatoires. Une fois ceux-ci remplis, vous n'avez qu'à poster pour voir la page se rafraichir et vos données apparaître dans le tableau comme par magie !

Lire la base de données

Maintenant que tout est place et que le client (la fonction new Bédédé()) est bien connectée à la page HTML, il est possible de passer des requêtes et de récupérer des données.

Méthodes

Toutes les requêtes retournent une Promise, il est donc très important de les utiliser dans une fonction asynchrone en complément avec l'opérateur await.

Vous pouvez commencer à utiliser ces différentes méthodes pour lire les données. Les fonctions disponibles sont les suivantes :

(async function() {
    /* getAll() permet de récupérer toutes les lignes de 
       la base de données et retourne un array d'objets
       de toutes les valeurs présentes.
    */
    const all = await SkillsClient.getAll();

    /* getSingle() permet de récupérer la première ligne
       correspondant à la combinaison de clef et de valeur
       et retourne un objet de toutes les valeurs présentes.
    */
    const single = await SkillsClient.getSingle('key', 'comp', 'value');
    const { property1, property2 } = await SkillsClient.getSingle('key', 'comp', 'value');

    /* getCollection() permet de récupérer toutes les lignes
       correspondant à la combinaison de clef et de valeur
       et retourne un array d'objets de toutes les valeurs présentes.
    */
    const collection = await SkillsClient.getCollection('key', 'comp', 'value');
})();

Tous les arguments des fonctions sont obligatoires et permettent de sélectionner les données :

  • key | Le nom d'une des propriétés que vous avez défini dans les <th> de notre page HTML.
  • comp | N'importe quel opérateur JavaScript <, <=, >, >=, ==, !=, pour les propriétés pouvant être transformée avec Number(). L'opérateur contains ne s'applique que pour les propriétés de type text ou string et permet de trouver une ligne dont la key contient la value.
  • value | La valeur que nous souhaitons comparer.

Ce qu'il me reste à faire

  • Un système de cache pour alléger le chargement des données (et options en minutes pour déterminer la durée).
  • Par extension, une méthode pour clear le cache en développement.
  • D'autres options pour les requêtes.
  • Utiliser une approche plus "orientée objet" pour les données.
  • Supprimer des données en tant qu'administrateur depuis la page HTML.
  • Éditer des données en tant qu'administrateur depuis la page HTML.
  • Visuel de base généré par Éléments