Staf 14 ex8 dispositif on-line (rapport)

Staf14 ex8 dispositif on-line (rapport)

Le dispositif en quelques mots...

Ce dispositif, conçu en Php/Mysql, facilite l'échange d'informations (textes ou autres messages) pour une communauté de personnes rassemblées autour d'un thème précis. Il s'adapte au profil des membres qui l'utilisent et offre toute une série d'outils de communication et d'échange, comme une possibilité d'envoyer ses propres textes, une messagerie interne, un chat, un forum, etc.

Objectifs

Ce projet répond en premier lieu à des objectifs personnels, que je vise avec le CyberExpress depuis bientôt 4 ans. Cela nécessite plus de 2 heures de travail quotidien. Mais la construction de ce nouveau site répond également au objectifs suivants:

découvrir plus en détail le langage Php et construire un site complet utilisant ses fonctionnalités, et non pas une simple page décontextualisée
proposer un dispostif utile, répondant aux besoins d'un groupe de personnes précis
déposer toutes les informations dans des tables Mysql (base de données) pour permettre la construction de pages dynamiques
gérer les niveaux d'accès à chaque page (visiteur, membre, administrateur, etc.)
mettre en pratique mes connaissances relatives à l'ergonomie des interfaces web
travailler avec un programmeur, pour d'une part mettre en pratique le travail collaboratif auquel je crois beaucoup et d'autre part voir une fois comment s'écrivent des codes qui tiennent la route. Car un des défauts de notre formation est de ne pas pouvoir nous offrir des bases solides en programmation. Nous apprenons les bases mais en fait, nous ne savons pas programmer. Il était donc important pour moi de me confronter à ce monde (un peu fou) de programmateurs pour tenter de comprendre les raisonnements qu'ils déployent pour résoudre un problème.

Réflexions préalables

Je vais essayer de décrire la démarche employée en essayant d'être bref pour que la lecture de ce rapport soit agréable. Il est impossible de retranscrire ici, le fruit d'une réflexion menée depuis bientôt 4 ans, et d'un travail d'implémentation commencé en septembre 2000. Je suis disponible pour répondre à toute question sur ce dispositif, afin de compléter ces explications. L'idée est plus de donner une idée générale de l'environnement en question, plutôt que d'expliquer dans les détails chaque pièce du dispositif.

J'aimerais aussi mentionner le fait que le langage Php allié à Mysql a passablement changé ma manière de concevoir la construction de sites internet. Après plusieurs années de programmation en html, je me sentais un peu frustré par le manque de souplesse de ce langage qui ne permet pas de créer des pages dynamiques. Or, la tendance actuelle est de coller au plus près au profil d'un utilisateur pour lui livrer de l'information personnalisée. Et dans ce cas précis, le mariage de Php avec Mysql se révèle être d'une efficacité redoutable.

J'aimerais encore préciser que j'ai construit ce dispositif avec Emmanuel GABBUD, élève brillant à l'EPFL. Nous avons travaillé un nombre incalculable d'heures ensembles, et chacun de notre côté depuis février 2001. Je lui ai fait découvrir le langage Php et lui, la logique de la programmation.

Description de la structure et de quelques outils

Je vous conseille de lire cette partie en consultant en même temps le site (email = guest@hotmail.com, mot de passe = 1234).

un site, trois pages!!!: le site contient les pages index.php, agence.php et members.php, qui correspondent aux grandes sections du site. Index.php regroupe toutes les informations générales relatives au site, comme la page d'introduction, les footers, etc. Agence.php regroupe toutes les pages de la section "agence de presse" et members.php de la section "membres". Ces pages contiennent un tableau dans lequel vont s'inclure d'autres fichiers de type "monfichier.inc.php". Le "inc" est juste une extension que j'ai adoptée et le ".php" final sert à camoufler le fichier et à en empêcher sa lecture (protection du code). Ces fichiers sont soient inclus directement (include("monfichier.inc.php");), soit leur inclusion est préparée dans le code et se déroule dès que l'utilisateur le demande (en cliquant sur un lien par exemple). Je m'explique... Le code contient les indications suivantes:
```
		if ($url_centre!=""){
		  include($url_centre);
		} else {
		  include("un_fichier_par_defaut.inc.php");
		  }	
		
```
Ainsi, je peux construire des liens qui rechargent la page en cours (par exemple index.php) en leur ajoutant la variable url_centre. Cela donne href="index.php?url_centre=monfichier.inc.php". Ce fichier va donc s'afficher, conformément au code.
Cette structure est très souple et permet de construire un squelette (index.php) qui contient tous les codes nécessaires à l'affichage des différentes pages du site. Ensuite, il faut tout simplement bien construire les liens et le tour est joué. Cette manière de faire permet en outre de simuler les frames.
Le logo: permet de revenir à la page principale (home)
la page d'index (home): elle présente un module de login, un module d'inscription, les derniers textes reçus par le système ainsi que les dernières personnes inscrites.
le module de login : permet de s'identifier en tant que membre. L'email est testé (le provider doit être identifiable et connu), puis on vérifie si l'email est connu dans la table des membres et s'il correspond au mot de passe (crypté). Si une quelconque erreur survenait, on représente le module de login avec un message d'erreur approprié. Si tout est bon, une session est créée et contient toutes les informations relatives au membre qui vont être utiles pour offrir un site personnalisé.
le module d'inscription : classique, présente un formulaire qui indique en rouge les champs qui sont mal remplis ou pas remplis. Ce formulaire est conçu en 4 étapes: 1) il est vide, on peut s'inscrire, 2) il teste si les données sont bien entrées et fait un INSERT dans la table membre, 3) il est pré-rempli pour modifier son profil et 4) il vérifie les données modifiées et fait un UPDATE dans la table. Ainsi, nous n'avons qu'un seul code... mais gérer 4 étapes est loin d'être évident.
la barre de statut: elle se situe toujours en haut à droite et permet aux utilisateurs de savoir s'ils sont connectés en tant que visiteur ou en tant que membre. Elle indique le nombre de personnes connectées et un lien permet de retrouver la liste des membres connectés. En mode membre, il est possible d'envoyer un petit message à un ou plusieurs membres connectés. Ces messages vont se déposer dans une table et chaque page contient un code qui va chercher dans cette table si elle contient un message. Si oui, il va s'afficher sur l'ecran du membre en question dans une fenêtre "alert". Vous pouvez essayer de vous connecter et de vous envoyer un message à vous même! Cette fonctionnalité rappelle le "who" du Moo. Il est très important de savoir qui est connecté en même temps que soi et surtout de pouvoir communiquer.
En tant que membre, on peut cliquer sur "mon profil" et arriver dans "sa" zone. On peut y retrouver les textes et les réactions que nous avons déjà envoyés ainsi que les messages reçus ou envoyés, avec dans le "outbox", des codes couleurs indiquant si le destinataire a bien reçu notre message.
Il est important de signaler que lorsque l'on modifie notre profil, nos données sont mises à jour automatiquement dans les tables Mysql mais également dans la session en cours. On peut également se déconnecter (logout), ce qui a pour effet d'effacer les données de la session en cours.
la zone "agence de presse" : présente sur sa gauche deux modules. Le premier affiche les rubriques disponibles. En mode membre, seules les rubriques choisies lors de l'inscription ou de la modificatin du profil sont colorées, les autres étant "grisées". Nous concevons ainsi la personnalisation: mettre en évidence les choix des utilisateurs sans retirer visuellement de l'information, car cela est en général mal apprécié (sentiment de perdre de l'information). Un clic sur une rubrique n'affiche que les textes de cette rubrique... Le second module permet d'envoyer un texte (formulaire) en mode membre, qui ne va pas s'afficher directement sur le site, mais se mettre en mode "wait", dans la zone d'administration dont nous parlerons plus bas.
Au milieu s'affiche les textes 5 par 5, et seules les premiers caractères sont présentés. Un clic sur le texte permet de l'afficher entièrement avec une possibilité de voter et d'envoyer une réaction (en mode membre).
A droite, un module propose des liens pour approfondir une rubrique donnée.
la zone membre : présente la liste des 10 derniers membres inscrits. Un clic sur un membre nous amène dans sa zone. On y retrouve ses textes et réactions et sa fiche (qui n'est pas encore vraiment bien faite). A droite, si nous sommes connectés en tant que membre, il y a la possibilité d'envoyer des messages qui vont soient être affichés directement sur l'écran si le membre est connecté, soit dès qu'il se connectera. Cette fonction permet de construire et d'entretenir une communauté de membres.
chat et forum : ces deux outils n'ont pas été programmés par nous, car il est stupide de se lancer dans une telle programmation, alors que de très bon outils existent déjà.
nouveautés : permettra aux membres de savoir ce qu'il y a eu de nouveaux sur le site (texte, membres, forum, etc. ) depuis leur dernière connexion.
footer : informations secondaires qui s'affichent dans l'index.
zone traduction : en tant qu'administrateur, je peux permettre à certains membres de traduire. Au dessous du logo, s'affiche alors "traduire un texte" qui ouvre une nouvelle fenêtre. On peut choisir de quelle langue vers quelle langue on veut traduire et le système recherche les textes qui n'ont pas encore été traduits. Ils s'affichent par ordre de vote! pour que les traducteurs prennent en premier les textes qui ont le plus été appréciés. C'ets outil de traduction permettra d'aborder d'autres communautés linguistiques.
une zone "admin" : c'est le bijou du site, une sorte de parodie de PhpMyAdmin optimisé pour ce site. On peut savoir combien de membre, de textes ou de réactions ont été envoyés depuis la dernière fois qu'on s'est logué, consulter chaque table, les modifier, classer les textes en mode "wait" ou "yes" (à ce moment-là, ils apparaissent sur le site), etc. Cela a pris beaucoup de temps, mais permettra de gérer l'ensemble du site de manière très simple.

Voici les principales fonctions de cet outil. Notons qu'un moteur de recherche permet de retrouver un membre ou un texte. Il est construit avec une simple expression régulière qui permet de taper "vet" pour trouver "touvet". Ce site va encore s'améliorer grandement (dès que les examens seront passés), pour devenir plus complet et sortira en septembre, je pense.

Précisons encore que le site s'adapte à la langue du navigateur ou à celle du profil membre. Actuellement seul le français est implémenté, mais grâce à une astuce, ce site pourra sortir en plusieurs langues de manière très simple: tous les textes (qui apparaissent à divers endroits du site) ne se trouvent pas dans les fichiers, mais dans un seul fichier, nommé "lib_variables_site_fr.inc.php". Ensuite, chaque fichier appelle ces variables (par exemple: echo($texte_intro);). Il suffit donc de traduire ce fichier en anglais, et tout le site apparaît d'un coup en anglais...

Aspects techniques et implémentation

j'ai utilisé l'éditeur Text Pad avec mon ami et Xemacs à la maison. Malheureusement, nous n'avons pas encore trouvé d'éditeur prévus pour Php, ce qui permettrait de gagner du temps, avec des possibilités d'automatiser certaines procédures.
le langage est donc Php, les pages le mélangeant avec du html et les bases de données sont en Mysql.
actuellement, ce site est sur un serveur maison (linux) à lausanne. Je n'ai pas désiré le mettre à TECFA pour protéger le code...

Ressources et références

J'aimerais remercier toutes les personnes qui m'ont soutenu et conseillées, dans l'ordre, Olivier, Vivian, M. Schneider, Roberto, Nicolas, et bien-sûr mon ami Emmanuel et son colocataire Christophe.
J'ai utilisé toutes les ressources Php/Mysql de TECFA (polycopiés) et les différents sites internets sur le Php. Il y a une bonne communauté de "Phpous" qui répondent volontiers aux questions fréquentes.