Formations et ressources pour les TICE - ESPE Aix-Marseille          
Documentation de kit_ERIP

NB :
 étant donné les multiples problèmes liés à sa mise en place, merci de ne PAS utiliser de données venant de base-élèves dans kit_ERIP !
 kit_ERIP étant principalement un outil de publication de formulaires, il est vivement conseillé de (re)lire le tutoriel sur les formulaires avant toute chose...
 cette documentation explique la mise en place et la gestion de l’application kit_ERIP, pour ce qui est de son fonctionnement une fois en place, vous pouvez tester cette version de démonstration (seules les écoles de la circonscription AIX IUFM sont actives, mot de passe = toto).
 tous les tests de kit_ERIP ont étés faits sous Firefox : pas de support prévu pour Internet Explorer...
 les tests d’intégration de fichiers CSV ont tous étés réalisés avec des fichiers générés sous OpenOfficeCalc (séparateur ; , données encadrées par " ") : pas de support prévu pour Excel...

Présentation

kit_ERIP permet de mettre en ligne des enquêtes pour les écoles et les circonscriptions, de visualiser et modifier les saisies, de récupérer ou ajouter des résultats au format CSV.
Chaque enquête est générée à partir du dépot d’un formulaire HTML, la table correspondante étant automatiquement générée dans la base de données.

Les 3 niveaux d’utilisateurs

• niveau école : peuvent saisir des données pour les enquêtes de type école, modifier les données qu’ils ont déja saisies et (pour chaque enquête) récupérer les résultats de leur école sous forme d’un fichier CSV. Aucun accès aux enquêtes de niveau circonscription ou aux outils d’administration.
• niveau circonscription : peuvent saisir des données pour les enquêtes de type circo, modifier les données qu’ils ont déja saisies et (pour chaque enquête) récupérer les résultats de leur circonscription sous forme d’un fichier CSV. Aucun accès aux outils d’administration.
• niveau admins (ERIP) : peuvent accéder à tous types d’enquêtes en mode saisie/modifications. Peuvent récupérer la totalité des données d’une enquête (toutes les écoles ou toutes les circos). Peuvent ajouter des enquêtes et modifier les listes d’utilisateurs école/circo via les outils d’administration.

Les 4 types de pages

• ecole.php : accessible par les comptes de niveau ecole et admin. Permet la saisie et la modification des données pour les enquêtes de type ecole.
• circo.php : accessible par les comptes de niveau circo et admin. Permet la saisie et la modification des données pour les enquêtes de type circo.
• admin.php : accessible par les comptes de type admin uniquement. Permet la consultation, la modification et le téléchargement CSV de l’ensemble des résultats (toutes écoles/circos) de toutes les enquêtes. Permet également l’intégration de données dans une enquête à partir d’un fichier CSV.
• super_admin.php : accessible uniquement par les comptes admins, cette page permet l’installation du système (création des tables de logins (ecoles, circos, admins) et comprend les outils nécessaires pour :
  • intégrer une nouvelle enquête (formulaire)
  • changer de mot de passe le compte admin en cours
  • intégrer des comptes école / circo /admin à partir de fichiers CSV.

kit_ERIP version 2.0

Installation

• récupérer le zip attaché à cet article, le décompacter
• indispensable : ouvrez le fichier config.php avec votre éditeur de code préféré et renseignez :
  • $base : nom de la base à utiliser
  • $hote, $utilisateur et $passe : les paramètres de connexion à la base de données.
    Notez que ces 3 paramètres sont en double : la première série sera utilisée pour travailler en local (easyPHP ou MAMP), la deuxième corrrespond à votre hébergement sur un serveur internet (i.e. rectorat).
    Si l’URL de connexion à votre site sur le serveur du rectorat n’est pas du style http://pedagogie.ac-aix-marseille.fr, modifiez la ligne 36
    1. if ($_SERVER['SERVER_NAME'] == 'pedagogie.ac-aix-marseille.fr') {

en remplaçant le "pedagogie..." par votre adresse de serveur (ne pas mettre le chemin complet mais uniquement le nom du serveur !).

• • $titre : le title de toutes les pages.

Facultativement vous pouvez également modifier :

• • $style : si vous souhaitez utiliser une feuille de style qui ne s’appelle pas projet.css (cf. partie "Rendre l’application jolie").
  • $pagination_tableau : configure le nombre de lignes visibles dans les tableaux de résultats.

A priori il est fortement déconseillé de modifier les autres paramètres ! (si vous voulez trifouiller, c’est à vos risques et périls !)

• copier le dossier obtenu sur le serveur web de votre choix, éventuellement le renommer. Pour la suite des explications on suppose que le dossier s’appelle /kit_erip.
• important : si vous êtes sur un serveur web sous linux (MAC ?)(rectorat par ex), mettre les sous-dossiers /tmp, /formulaires_ecole et /formulaires_circo en écriture pour tous (avec FileZilla : clic droit sur le dossier > Attribut du fichier... > 777 > Valider). Si vous ne faites pas cette opération, le dépot d’un nouveau formulaire ne sera pas possible.
• création des tables de logins : connectez un navigateur web sur l’adresse http://mon_serveur.tld/kit_erip/super_admin.php et remplissez les champs permettant de créer le premier compte admin puis validez.
  Cette opération permet de créer automatiquement les tables qui stockeront les comptes utilisateurs (ecoles, circos, admins). En principe la page suivante vous redirigera sur la page de login où vous vous connecterez avec le compte que vous venez de créer.
• intégration des comptes utilisateurs : retournez sur la page super_admin où vous utiliserez l’outil d’intégration des comptes utilisateurs ("Insérer/modifier des comptes à partir d’un fichier CSV") pour intégrer les différents types de comptes à partir de fichiers CSV contenant les écoles, circos et admins.
  Vous pouvez ainsi créer des comptes pour une, quelques ou toutes les circos et écoles que vous souhaitez faire participer à l’enquête.
  Contraintes pour la création des comptes :
  • il est nécessaire de créer les circonscriptions correspondant aux écoles que vous intégrerez (i.e. : il n’est pas possible de ne créer que les écoles...).
  • les fichiers CSV doivent contenir les noms des champs dans la première ligne et ceux-ci doivent êtres conformes aux noms des colonnes correspondantes dans les tables ecoles/circos/admins. Des modèles de fichiers (avec la première ligne uniquement) sont en téléchargement pour chaque table dans l’interface de super_admin.
  • les mots de passe seront en clair dans votre fichier CSV, le système se chargera de faire le cryptage.
    Cela signifie qu’une fois créés, vous ne pourrez pas récupérer les mots de passe via une extraction avec phpMyadmin ! Conservez donc une copie des fichiers CSV que vous intégrez pour avoir les mots de passe en clair...
  • vous n’êtes pas obligé de créer des comptes admins supplémentaires : à minima celui que vous avez créé lors de l’installation suffit.
• test des comptes créés : il est prudent de vérifier que vous arrivez à vous connecter avec un des comptes que vous venez de générer...

Intégration d’un formulaire d’enquête

Principe :

L’outil d’intégration de formulaire présent dans la page super_admin permet d’ajouter un formulaire d’enquête de votre cru : en fonction des paramètres configurés il sera placé dans le sous-répertoire correspondant (/formulaires_ecole ou /formulaires_circo) et (après diverses vérifications) le système créera une table avec les colonnes correspondant à tous les champs de saisie présents plus les champs id (clé primaire, auto-incrément),date_saisie, rne_circo et (si type = école) rne_ecole, indexés.
A partir de là, votre formulaire sera opérationnel (simple non ?).

Caractéristiques des fichiers de formulaires :

• format : le formulaire doit être en HTML : pour des raisons de sécurité, le mécanisme d’intégration du formulaire est fait de telle sorte que si vous mettez du PHP dedans, il ne sera pas éxécuté.
• contenu : ce fichier ne doit contenir que le code HTML du contenu du formulaire. Cela signifie donc : pas de balises
  <html>, <head> ou <body> ni de balise <form>

.
Etant donné que, dans la majorité des cas, vous le réaliserez avec un éditeur WYSIWYG (Dreamweaver par ex.) et que celui-ci ne vous demandera pas votre avis sur les balises qu’il met "par défaut" dans les pages qu’il génère, le traitement du formulaire, avant son enregistrement, éliminera toutes les balises "superflues".

• titre : le titre du formulaire sera récupéré automatiquement si il est dans une balise H2 :
  
  <h2>Le titre du formulaire</h2>

• champs de saisie : tous les types de champs de saisie sont possibles : <input> (types: "text", "radio", "checkbox", "password"), <select> et <textarea> mais dans tous les cas vous devez leurs donner un attribut name="xxx" (caractères possibles : chiffres, lettres non-acentuées, underscore). En effet, c’est la valeur de cet attribut (xxx) qui sera utilisé comme titre du champ dans la table de la base de données. Par exemple le formulaire form_toto.html avec le code suivant :
  1. <h2>L'enquête à Toto</h2>
  2. <input type="text" name="champ_truc" />
  3. <select name="champ_bidule">
  4.     <option value="bidule_1">bidule n° 1</option>
  5.     <option value="bidule_2">bidule n° 2</option>
  6.     <option value="bidule_3">bidule n° 3</option>
  7.     <option value="bidule_4">bidule n° 4</option>
  8. </select>
  9. <input type="text" name="champ_chose" />

  Télécharger

génèrera la table form_toto ayant les champs : champ_truc, champ_bidule, champ_chose.

• saisies multiples : les champs de saisie multiples sont autorisés (checkbox ou select multiples) : pour mémoire leur attribut "name"doit être de la forme : name="toto[]" : le [] en fin du name indiquant que l’on récupère un tableau de valeurs.
  Exemples de champs de saisie multiple :
  1. <input type="checkbox" name="toto[]" />
  2. <select name="toto[]" multiple="multiple">

  Télécharger

• labels : afin que la modification/correction des données puisse se faire directement dans le tableau des résultats (et parce que vous avez à coeur de faire du HTML conforme et accessible...), il est impératif que tous les champs de saisie soient accompagnés d’une balise
  <label>

.
Le formulaire de l’exemple précédent devient donc :

(pour ceux qui n’auraient pas pris la peine de relire le tutoriel sur les formulaires notez la correspondance entre l’attribut "for" de la balise

et l’attribut "id" du champ de saisie auquel se rapporte ce label).

• Contrôles de validité des saisies utilisateurs : kit_ERIP intègre un système de contrôle des saisies utilisateurs au moment de l’envoi des données. Le principe de fonctionnement repose sur l’ajout d’attribut class="xxx" aux champs qui nécessitent un contrôle : par exemple pour rendre obligatoire la saisie d’un champ texte :
  1. <input type="text" name="toto" class="obligatoire" />

On peut imposer plusieurs critères en mettant plusieurs valeurs (séparées par un espace) dans l’attribut class :

permet d’imposer la saisie, sous forme de chiffres avec une valeur maximum de 30.
Il est possible de modifier le message d’erreur qui sera retourné (ceux par défaut sont assez génériques donc peu précis) en utilisant l’attribut "title" de la balise :

Les class de contrôles disponibles par défaut lors de l’installation de l’application sont les suivantes :

• • class="obligatoire" => éléments obligatoires
  • class="chiffres" => que des chiffres
  • class="mini2" => minimum 2 cases à cocher ou 2 caractères ou 2 options dans select multiple
  • class="mini5" => minimum 5 cases à cocher ou 5 caractères ou 5 options dans select multiple
  • class="maxi3" => maximum 3 cases à cocher ou 3 caractères ou 3 options dans select multiple
  • class="identiq_mdp" => contenu identique à celui de l’input ayant id="mdp"
  • class="max_30" => valeur maximum = 30
  • class="min_5" => valeur minimum = 5
  • class="intervale_10_20" => valeur comprise entre 10 et 20
  • class="lettres" => que lettres (y compris accentuées), apostrophe ou tirets
  • class="alphanumerique" => que lettres, chiffres, espaces, tirets ou underscores
  • class="nom_fichier" => minuscules, chiffres, underscore
  • class="date" => date au format jj/mm/aaaa ou j/m/aa
  • class="mail" => adresse mail

Ces contrôles sont définis dans le fichier /kit_erip/kit_validation.js que vous enrichirez de vos propres contrôles en faisant d’habiles copier/coller/modifier à partir de ceux existants.
Attention : ce fichier est en javascript : utilisez l’extension Firebug pour vérifier qu’il n’y a pas d’erreurs au chargement des pages de saisie (ecole.php ou circo.php) lorsque vous avez fait des modifications.

• Un exemple complet de formulaire est disponible au téléchargement dans la page super_admin.

Rendre l’application "jolie"

• kit_ERIP utilise par défaut la feuille de style /kit_erip/projet.css (modifiable via $style dans config.php) : ce fichier contient tous les sélecteurs CSS (class, id, balises) qui sont utilisés dans les pages ecole.php, circo.php et admin.php.
  Avec un minimum de définitions de styles CSS vous ne devriez pas avoir de problème pour que leur charte graphique soit conforme à vos goûts...
• Pour aller plus loin : vous pouvez éventuellement trifouiller dans /kit_erip/modules/kit.css si vous aviez vraiment besoin de modifier d’autres éléments de style mais vous risquez nettement plus de "tout faire exploser" au niveau mise en page...

Mettre votre grain de sel dans kit_erip ?
bienvenue aux codeurs !

• Documentation : kit_ERIP utilise intensivement jQuery et en particulier les plugins Validation et Form plugin.
  Afin d’être plus largement portable toutes les focntions PHP utilisées sont en PHP 4 (mais l’application est nettement plus rapide sur un serveur avec PHP 5...).
• Organisation : l’arborescence de l’application est relativement simple :
  • les fichiers "publics" (ecole.php, circo.php et admin.php) ne sont que des "coquilles" qui font l’inclusion du fichier principal : kit.php : tout le code de l’interface est donc dans ce fichier.
  • tous les fichiers inclus par kit.php sont situés dans le sous-répertoire /modules. Parmi ceux-ci, le plus important est integrer_formulaire.php qui réalise l’intégration du formulaire en cours d’utilisation.
  • l’ensemble des opérations est réalisé en mode asynchrone (ajax/ahah) : les données des formulaires sont traitées par les fichiers nommés ahah_xxx.php.
• Sécurité : ne bidouillez pas les fichiers utilisés pour le mécanisme d’authentification/login (login.php, fonctions_auth.php et login.js) à moins de savoir exactement ce que vous faites ! Vous risquez de compromettre gravement la sécurité de l’appli...
• Outil de débogage intégré : si vous êtes loggué avec un compte admin vous pourrez remarquer une petite icône dans le coin inférieur droit des pages : cliquez dessus pour accéder au mode traçage/débogage.