documentation


1) Technologie Ajah

a) Avantage

b) Inconvénients

c) Framework : mootools

d) Compatibilité


2) Interface Utilisateur

a) Menu

b) Catégorie et photos

c) Administration

d) Sessions et Connexions

e) Statistiques


3) Fonctionnement

a) Structure

b) Validation des données

c) Organisation des fichiers

d) Procédure d'installation

e) Sécurité


  1. Technologie Ajah

a) Avantages

Le principal avantage de cette méthode est la vitesse à laquelle une application AJAH répond aux actions de l'utilisateur, dont les actions sont traitées (en partie au moins) localement par le navigateur. Le deuxième avantage mais qui est aussi un inconvénient est de ne recharger seulement une partie de la page lorsque c'est nécéssaire.


b) Inconvénients

L'utilisateur d'applications AJAH doit autoriser l'exécution de code Javascript par son navigateur, ce qui peut laisser craindre des problèmes de sécurité. Avec les versions d'Internet Explorer 5 ou 6 pour Windows, il doit aussi autoriser les ActiveX car le composant XMLHTTP n'y est pas natif comme dans ses concurrents (Firefox, Safari, Opera, etc.) ou la version 7. Utilisant des techniques apparentées au HTML dynamique, les applications AJAH doivent être testées sur chaque navigateur, en raison du non respect des normes officielles.

Un autre inconvénient que l'on peut avancer est la question du référencement puisque les robots d'indexation ne sont pas en mesure d'indexer les contenus engendrés dynamiquement.

Enfin, en modifiant le contexte de navigation sans que l'utilisateur n'en soit nécessairement averti (en fonction de son mode d'accès au Web), AJAH pose de nombreuses questions d'accessibilité. C'est le cas notamment pour les utilisateurs de lecteurs d'écran ou de dispositifs d'agrandissement (loupes virtuelles).



c) Framework : Mootools

Un framework est un ensemble de bibliothèques permettant le développement rapide d'applications. Il fournit suffisamment de briques logicielles pour pouvoir produire une application abouti. Ces composants sont organisés pour être utilisés en interaction les uns avec les autres.

Mootools est la suite logique de l’excellent pack d’effets moofx qui pèse à peine 3ko et qui se plug sur prototype. Le créateur de moofx, ne s’est pas arrêté là et s’est mis à développer une librairie complète: mootools. Elle est modulaire, très légère et presque aussi puissante que prototype. Le vrai truc exceptionnel c’est qu’elle ne pèse que 80 ko (24ko pour la version compactée) tout compris - là où le couple scriptaculous / prototype atteint les 200 ko (150ko pour la version compactée). En conclusion, après avoir testé Prototype et mootools, mon choix se porte définitivement sur mootools, pour sa modularité, sa légèreté et son implémentation de l’événement domReady.



d) Compatibilité

L'application à été testé sur Mozillla Firefox 2.07, Internet Explorer 6 / 7 et Konqueror. Elle ne fonctionnera qu'avec un navigateur acceptant le javascript et l'objet XMLHTTPRequest. J'aurai aimé développé le coté non intrusif du code, mais les bugs récurrent d'Internet Explorer ne m'en ont pas laissé le temps.



  1. Interface utilisateur

a) Menu

Lorsque que l'utilisateur n'est pas connecté, le menu ne possède que 3 sous menu :




Lorsque que l'utilisateur est connecté, le menu possédera de nouvelles entrées permettant d'effectuer des tâches d'administration :



NB : Le menu fonctionne à l'aide de l'effet accordeon du framework.


b) Catégorie et photo

L'affichage des catégories est réalisé par le fichier categorie.php et le script galerie.js. Les images appartenant à la même catégorie sont accessibles via le slideshow disponible en cliquant sur le bouton photo. La gestion des miniatures se fait via le script inc_miniature.php qui permet de réduire les photos en conservant leur ratio.





Si l'utilisateur est connecté et reconnu comme administrateur, un bouton supplémentaire permettant l'affichage d'un panneau d'administration sera affiché :





L'affichage des photos est réalisé par un script (slimbox) que j'ai modifié afin d'y intégrer des boutons d'administration lorsque l'utilisateur est connecté :




Si l'utilisateur n'est pas connecté ces boutons ne sont pas visibles :



NB : les images sont affichées sans redimensionnement.


c) Administration

Le panneau d'administration permet de gérer :

Chaque page de gestion (tableau récapitulatif des éléments) utilise du javascript pour afficher en surbrillance l'élément pointé et ainsi permettre une lecture plus aisée.


Les catégories :




NB : lors de la suppresion d'une galerie, toutes les photos associées seront supprimées


Les photos :




Les utilisateurs : ils existent quatre types d'utilisateurs qui en fonction de leur level (niveau) pourront ou ne pourront pas effectuer certaines choses :




  1. Membre : vert

  2. Administrateur : bleu

  3. Super administrateur : rouge




La base de donnée :



d) Sessions et connexions

Connexion :


Les utilisateurs sont authentifié via le script login.php et se déconnecte via le script logout.php :




Les sessions sont géré à l'aide de la table session, qui comporte 4 champs :



Une fois connecté l'utilisateur est reconnue par un coockie (galerie-bdweb) qui contient la valeur du sid stocké dans la base. Il suffit alors pour afficher une page « sécurisée » de vérifié que la valeur du champ sid et du champ ip dans la base correspondent bien à ceux de l'utilisateur. Le script inc_verif.php se charge de cette vérification, et permet de s'assurer que l'utilisateur est bien celui qu'il prétend être. La fonction isconnect() retourne le level de l'utilisateur.


La table session permet aussi avec son champs « date » de savoir quand les utilisateurs se sont connectés. Cela m'a permis d'afficher les utilisateurs connecté à l'application (connecté depuis moins de deux heures).


Récupération d'un identifiant perdu :


Si un utilisateur perd son mot de passe, il peut en récupérer un nouveau (requiert un serveur smtp acceptant les connexion provenant de localhost) :




Un nouveau mot de passe sera automatiquement envoyé à l'email fournit lors de la création du compte.



Afin de protéger de robots cherchant à voler des identifiants ou des informations j'ai mis en place un CAPTCHA: acronyme pour Completely Automated Public Turing test to Tell Computers and Humans Apart , soit en francais, test public de Turing complètement automatique ayant pour but de différencier les humains des ordinateurs. Cette image est généré par le fichier inc_captcha.php qui prend la chaine de caractère qui sera utilisé en paramêtre GET. Cette chaine est construite de manière aléatoire à chaque chargement de la page par la fonction md5().



e) Statistiques

La table statistique est rempli à chaque visiteur à l'aide du script inc_statistiques.php; on peut ensuite visualiser les statistiques de visites par jour, par mois ou encore par année :





NB : seul les administrateurs et les super administrateur sont autorisés à consulter les statistiques.



  1. Fonctionnement

    a) Structure

        La page index.php est chargé une seule fois. L'affichage se fait via l'élément « affichage » (div) dans lequel des fichiers PHP sont chargé via le composant XMLHTTP.

        La page est décomposé en 4 éléments :

          1. Le conteneur : contient tous les éléments

          2. Le menu : div de 200px flottant à gauche

          3. L'affichage : div flottant à droite

          4. Le footer : div flottant en bas


Le système d'onglet (gérer par la fonction jvs onglet(), par du code PHP et du CSS) m'a permis d'augmenter considérablement ma surface d'affichage en conservant une interface intuitive.


    b) Validation des données

Chaque donnée validée par un formulaire est vérifié au minimum deux fois :


c) Organisation des fichiers

L'application est organisé dans les sous répertoires suivant :



d) Procédure d'installation

La procédure d'installation est automatiquement lancé si la fonction verifie_install() (qui vérifie l'installation la BD) retourne FALSE. Ainsi lors d'une nouvelle installation ou lorsque l'application à été désinstaller, l'index devient la procédure d'installation. Elle comporte différentes étapes :


  1. Vérifications des droits sur le répertoire admin/ (777) afin d'y écrire le fichier de configuration

  2. Configuration de la connexion à la BD -> fichier admin/inc_config.php généré

  3. MAJ des droits sur le répertoire admin/ (755) pour des raisons de sécurité

  4. Installation de la base de donnée : création des tables

  5. Vérification des droits sur le répertoire images/ (1777) : permet l'upload via le serveur web

  6. Création du compte super administrateur

  7. Démarrage de l'application


e) Sécurité

La sécurité de mon application à volontairement été laissé de coté. Pour obtenir une version sécurisée, distribuable, il faudrait se pencher sur les problèmes suivants :