Rapport De Stage CNAM
Dans le cadre du module de "développement" je me suis intéressé pour la première fois à cet aspect de l'informatique. Passionné par le coté "jeu de mécano constructif numérique", je proposais à mes professeurs de faire mon stage en entreprise dans une société de développement.
C'est ainsi que la société ****** allait m'accueilir durant tout l'été. Profitant d'installations modernes , le lieu était idéal pour mener à bien la tache qui m'avait été confiée. Je présentais le programme du stage à mes formateurs afin de le faire valider : ce programme était alors qualifié de "très formateur" et validé !
Voici donc le programme du stage :
Objet du stage proposé par la société ********
Trois parties liées :
1ere semaine
1) Installation d'un serveur debian linux
système d'exploitation
serveur web apache
serveur samba
serveur ftp Proftp
configuration php/mysql/phpmyadmin
création d'un compte "GO" en vue de la création du site web
5 à 8 semaines
2) Création site web association de GO de Montpellier
cahier des charges
création arborescence, mini charte graphique
montage base de donnée relationnelle en relation avec les inscriptions et le forum
mise en place du site sur le réseau local de la société*******
si Le temps => mise en relation google analytics pour suivi des visites sans optimisation outre mesure.
2 semaines de finalisation
3) déploiement du site sur le serveur de la société ****
création compte "GO" par interface Directadmin
création accès ftp/mysql.
Déploiement et mise en ligne site web
8 semaines encadrées par chef de projet
Table des matières
Préambule d'installation 3
Installation matérielle 4
Installation Réseau Local 4
Configuration Freebox 4
Installation Switch 4
Installation Logicielle 5
Installation Debian Server 5
Installation SAMBA 6
Découverte WEBMIN, PUTTY 7
Découverte Apache, MySQL 7
Développement Site 8
Le jeu de GO 9
Présentation sommaire du Jeu de Go 9
Présentation de l'Association loi 1901, Club de Go de Montpellier 10
Présentation du projet de site Montpellier Go 34 11
Les objectifs du projet de site 11
Le public Visé 11
Le contenu du site 11
Arborescence 11
Ma découverte du PHP 12
via formateur 12
via tutos 12
via livres 12
PHP clef en mains, W.Steinmetz Ed Pearson 12
PHP & MySQL, 4ed Pearson, Luke Weiling 12
HTML 12
CSS 12
Ma découverte SQL 13
Mise en Place du Site 16
Graphisme, point de départ, découpage en DIVS, zonage 18
Codage de différents modules 19
Modules ou fonctionnalités spécifiques du site: 21
MiniChat 23
Gestion des droits 23
Whoisonline 24
Redaction Article 24
Espace Admin 24
Générateur automatique de menus et menu déroulant 24
Vérification des formulaires côté serveur 24
les expressions régulières 25
Insertion Images 26
test_der_act.php 30
URL REWRITING et référencement : 31
PIWIK : 31
Préambule d'installation
Installation matérielle
Installation Réseau Local
Mon stage se déroule du 22 juin 2010, jusqu'à la fin septembre 2010, au sein de l'entreprise *******. Je dispose du parc informatique suivant pour installer et configurer notre réseau local:
1 PC PORTABLE sous 7
1 TOUR PC sous XP version anglaise
1 TOUR PC pour accueil DEBIAN 5.04
1 PC PORTABLE sous VISTA
Configuration Freebox
Il m'a fallu aller dans l'interface de la Freebox, c'est à dire sur le site Free, pour activer le mode routeur et activer le service DHCP, car évidemment quand on branchait les différents PC sur le réseau des conflits d'IP apparaissaient ! A noter également que l'adresse 192.168.0.254 (adresse routeur free) n'est pas accessible !
Installation Switch
à l'aide d'un SWITCH et d'une Freebox, je construisais le réseau suivant :
FREEBOX ------- PC VISTA
|
|
|
_____________ SWITCH______________
| | | | | |
PC XP DEBIANSERVER PC 7
Installation Logicielle
Installation Debian Server
Pour installer un serveur dédié je décidais d'installer DEBIAN 5.04, dernière distribution stable sous Debian !! Sur la machine destinée à jouer le rôle de serveur subsistait une installation de XP : restaient quelques documents importants : ce qui fait que lors de l'installation de Debian plusieurs petits soucis apparurent : lors du partitionnement j'apprenais que tout l'espace était reservé à XP !
Or nous savons que XP ne peut pas redimensionner, donc j'étais bloqué ! j'envisageais une solution à base d'une solution Live CD, avec KNOPPIX, mais Thomas (mon responsable) me dit qu'il était risqué de faire çà : il préféra récupérer ses données sur disque dur externe . J'ai ainsi pu formater le disque dur et pratiquer une installation propre et dédiée de Debian !
Apres avoir téléchargé la distribution Debian 5.04 sous la forme d'une image ISO, je la gravais et l'installais !
Voici le partitionnement que j'ai choisi :
-Debian Linux 50 Go Partition PRIMAIRE, montée en /, ext3 ; /dev/sda1
-Données 195 Go PArtition Logique, montée en /home, ext3; /dev/sda6
-Swap 5Go dique SWAP, logique, swap; /dev/sda5
L'installation de Debian comprenait également :
- un environnement graphique de bureau ( hic ! car normalement un serveur n'utilise pas l'approche graphique, mais c'était le commencement et je découvrais Debian)
- serveur Web : APACHE
- PHP 5
- serveur de fichiers pour communiquer sur le réseau local :
NFS
SAMBA
- serveur d'impression : "cups"
- serveur DNS : "bind9"
- serveur de courrier : "exim4" "SPAMASSASSIN" "UWIMAP"
- base de données SQL: "POSTGRESQL", sera remplacé par la suite par mySQL
Installation SAMBA
Configurons Samba avec l'interface Swat ! (Samba Web Administration Tool)
On se connecte à swat avec 192.168.0.11:901
Quelques notes sur Samba : Samba est le logiciel qui crée l'illusion que la machine Linux est une machine Windows serveur de fichier (Windows NT). Samba crée une interface pour le partage sécurisé des fichiers et des imprimantes dans le réseau. Il est possible grâce à ce logiciel gratuit d'autoriser l'accès à certains répertoires de façon totalement transparente pour l'utilisateur. Samba sert également de serveur d'authentification des utilisateurs pour centraliser les droits d'accès et les mots de passe sur la machine Linux. La mise en place de Samba se fait automatiquement lors de l'installation de Linux en mode serveur. Il reste toutefois pour l'administrateur à configurer le service : activation du côté serveur, mise en place des répertoires partagés via SWAT et enfin une dernière opération sera de créer des utilisateurs pour Samba.
Tout l'intérêt de travailler en réseau local est de pouvoir partager les fichiers entre chaque poste : et notamment la priorité aura été de pouvoir partager le dossier " /var/www " situé sur le serveur linux : la machine aura été évidemment équipé du serveur Apache auparavant !
Comment ça marche : il faut attribuer les droits suffisants au dossier que l'on veut partager avec samba; se mettre en ligne de commande, se connecter en ROOT : appliquer le code suivant : "chmod 777 /var/www "
Nous voulons que chaque ordinateur puisse accéder à ce dossier : il n'est donc pas nécessaire de demander une identification; pour créer un partage j'ai utilisé l'interface graphique SWAT:
-dans l'onglet GLOBALS : je me suis assuré que le workgroup était bien WORKGROUP, j'ai donné le NETBIOS NAME suivant au serveur linux : DEBIANSERVER;
-dans l'onglet SHARES : j'ai crée un nouveau partage "www" : j'ai défini le PATH comme ceci : PATH = /var/www/ ; pour la sécurité : read only est réglé sur NO ; guest ok est réglé sur YES ( car l'on veut que chaque machine du réseau local puisse se connecter sans avoir à s'identifier).
Découverte WEBMIN, PUTTY
Putty est un logiciel sous Windows très pratique permettant de se connecter en SSH au serveur.
Nous pouvons ainsi entrer en mode root dans le serveur depuis un ordinateur et effectuer toutes les opérations nécessaires à distance. Par exemple changer les droits, consulter des fichiers, ou même éteindre le serveur via la commande Halt .. Ce qui économise un écran ...
Webmin est une interface web, qui permet d'administrer un serveur Linux à distance via n'importe quel navigateur web.
Tout (ou presque) peut être configuré avec Webmin ! : Samba, Apache, Mysql, Serveur mail...
extrêmement puissant , je n'ai qu'effleuré cette interface : https//192.168.0.11/10000 permet de s'y connecter.
Découverte Apache, MySQL
Le php génère du HTML ! Pour que l'ordinateur lise du PHP, il faut qu'il se comporte comme un serveur ! On a donc besoin d'Apache (serveur web: c'est lui qui délivre les pages web aux visiteurs; attention il ne gère que les pages statiques donc besoin d'être complété par d'autres programmes); en l'occurence PHP : c'est un plug in pour Apache qui le rend capable de traiter des pages web dynamiques en php; enfin on a besoin d'un logiciel de gestion de bases de données (sgbd), MYSQL.
Développement Site
Le jeu de GO
Présentation sommaire du Jeu de Go
Originaire de Chine, le jeu de go oppose deux adversaires qui placent à tour de rôle des pierres noires et blanches sur un plateau de jeu, appelé goban, tentant ainsi de contrôler le plan de jeu en y construisant des « territoires » qui se comptent en moku. Chaque « pierre » représente un soldat ; les soldats encerclés deviennent des prisonniers.
Il s'agit du plus ancien jeu de stratégie combinatoire abstrait connu. Malgré son ancienneté, le jeu de go continue à jouir d'une grande popularité en Chine, en Corée et au Japon. Dans le reste du monde, où sa découverte est récente, sa notoriété va également croissant. Son succès tient autant à la simplicité de ses règles qu'à sa grande richesse combinatoire et sa profondeur stratégique.
Le but est de former des territoires, ensembles d'intersections vides contrôlées par le joueur. Noir commence en déposant sur la grille vide une pierre de sa couleur. Puis, à tour de rôle, les joueurs posent une nouvelle pierre sur une intersection vide du goban. Il est permis de passer son tour mais quand les deux joueurs passent consécutivement, la partie est terminée. Les pierres adjacentes de même couleur sont connectées et forment un groupe. Les intersections vides adjacentes à un groupe sont ses libertés. Si un joueur supprime la dernière liberté, il enlève (capture ou tue) la pierre ou le groupe encerclé (voir atari). Recréer une position antérieure identique est interdit (voir règle du ko). À la fin de la partie, on compte le nombre de points de chaque joueur : on compte un point par intersection libre, et un point pour chaque prisonnier (pierre prise ou morte) capturé (pour faciliter le décompte, les prisonniers sont replacés sur les intersections des territoires de l'adversaire). Le vainqueur est celui qui possède le plus de points.
Présentation de l'Association loi 1901, Club de Go de Montpellier
Club de Go de Montpellier est une association de type « loi 1901 » à but non lucratif. Créée au début des années 80, l'association repose sur une structure en « bureau », avec président d'honneur, président, trésorier et secrétaire.
Longtemps, la seule vitrine de cette association n'aura été que le (remarquable) site de Denis Feldmann, ex président et actuel Président d'Honneur. Hélas, la vie du club n'y est que peu représentée, la communication y est impossible ! Les qualités du site de Feldmann sont ailleurs : un incroyable fourre-tout d'anecdotes, de coups incroyables, et de parties historiques ! Je tiens à faire remarquer ici, qu'il existe aussi un blog, abandonné depuis 2 ans !
Il était grand temps que les choses évoluent ! L'occasion était parfaitement trouvée : dans le cadre de l'UE NFA074, j'envisageais de construire le nouveau site de l'association :
Montpellier Go 34 !! www.montpelliergo34.com .
Ce projet peut donc être considéré comme une création à part entière.
Présentation du projet de site Montpellier Go 34
Les objectifs du projet de site
-
-
Vitrine de l'association Montpellier Go 34 et vitrine de l'activité Jeu de Go
-
Inscriptions en ligne pour les différentes manifestations organisées par le club
-
Permettre la communication interne et externe
-
Remplacement d'un blog abandonné
-
Le public Visé
-
-
Les joueurs de go de Montpellier
-
Les joueurs déjà licenciés
-
Les joueurs non licenciés
-
Les curieux de jeu de stratégie
-
Les curieux de la culture asiatique (sous de forme de liens )
-
Le contenu du site
-
-
Présentation du projet
-
Présentation de l'Association Club de Go de Montpellier
-
Présentation de l'activité jeu de go
-
Présentation de la vie du club
-
Ouverture vers l'extérieur grâce à notre page de liens
-
Contacts
-
Arborescence
-
-
Ressources
-
Le Club
-
Section Membres
-
Section Administrateur
-
Ma découverte du PHP
via formateur
Mon formateur me demandait de réaliser une action particulière sur mon site : créer un formulaire afin que les visiteurs puissent se loguer et ainsi par la suite pouvoir décider de leur droits d'accès !! Il me demandait aussi d'afficher la liste "de mes inscrits" (après leur inscription, bien sur). Pour se faire il fallait que je me penche sur les commandes php et sql : Il me fallait aussi envisager la découpe en 2 parties (au moins) de mon site: la partie publique et la partie admin : pour cela il me fallait à nouveau envisager un formulaire de connexion qui autoriserait ou non l'accès à la partie réservée admin !! Utilisation conjointe de PHP / MYSQL : Après avoir compris la façon de construire des formulaires en html, il fallait que j'apprenne à présent comment stocker dans une base de données les infos fournies par les visiteurs remplissant leur formulaire ! c'est le traitement des données.
via tutos
Débutant dans le monde du développement , il me fallait apprendre les bases ! Je décidais de m'attaquer aux 3 tutoriels du Site du Zero : php, html, css !
via livres
PHP clef en mains, W.Steinmetz Ed Pearson
PHP & MySQL, 4ed Pearson, Luke Weiling
HTML
CSS
Ma découverte SQL
mySQL est un SGBD dont le rôle est d'enregistrer des données de manière organisée afin de nous aider à les retrouver plus tard. Les colonnes d'une d'une table sont appelées CHAMPS, les lignes sont appelées ENREGISTREMENTS ! Un champ peut être obligatoire ou optionnel ! Un SGBD est un logiciel qui permet d'organiser, stocker et de manipuler le contenu d'une base de données. Quand on recherche de l'information dans une base de données, on interroge la base: les SGBD offrent des mécanismes de création de chaines de recherche , on les appelle : requêtes !!
avantages d'un SGBD:
- préservation de l'intégrité des données
- protection des données
- interrogation de la base pour retrouver des données spécifiques
- indépendance des données
- entrée et mise a jour des données dans la base de données
SGBDR : sgbd-relationnel : utilisation de tables différentes !
la normalisation d'une base de données: éviter la redondance.
connexion avec une base de données :
----------------------------------
L'user entre l'adresse de la page web qu'il veut afficher. Cette info est transmise au serveur Web, qui la renvoie à son tour au serveur de la base de données sous la forme d'une requête. Le serveur de base de données retourne alors le résultat au serveur web, qui met les infos au format HTML et les affiche dans le navigateur .
Pour se connecter on utilise la fonction mysql_connect()
$connect= mysql_connect(,,);
la variable $connect: ca donne:
$connect= mysql_connect("localhost","root","") or die("a connexion to the server could not be established!");
echo "root user login in mysql server @ localhost successfull ";
?>
création d'une base de données mysql via PHP:
---------------------------------------
on établit une connexion avec MYSQL, puis on crée la base de donnnées "Mytestdb" (pour exemple ici):
$connect= mysql_connect("localhost","root","") or die("echec");
$createdb= mysql_create_db("Mytestdb") or die("impossible de créer la base");
echo "database Mytestdb created avec success !!";?>
sélection d'une base de données:
------------------------------
une fois la base créée on peut y ajouter des tables. pour cela on doit au préalable sélectionner la base de données à manipuler : on peut rencontrer 2 types d'erreurs:
soit la base n'existe pas ; soit la base de données est verrouillée par un autre user .
$connect= mysql_connect("localhost","root","") or die ("echec");
$result=mysql_select_db("Mytestdb") or die("database could notr be selected");
echo "database was selected !!!";
?>
création d'une table
--------------------
$connect= mysql_connect("localhost","root","") or die ("echec");
$result=mysql_select_db("Mytestdb") or die("database could notr be selected");
$sqlquery= "create table if not exists MAildata (Name varchar(50) Not Null, Email varchar (50) Not Null, Secondaryemail varchar(50) Not Null Primary Key)";
$queryresult = mysql_query($sqlquery) or die("query could not be executed");
echo " Table maildata was created with success";
?>
insertion d'enregistrements
---------------------------
on collecte dans un formulaire HTML des infos qu'on envoie avec la méthode POST dans une base de données mySQL. Une fois clické le bouton "submit", on envoi les données au serveur mySQL :
dans le formulaire on doit indiquer la méthode "post", et action="insertion.php"; le fichier insertion.php est le fichier qui permettra d'envoyer les infos au serveur mySQL et dans la base de données !! ce fichier contient : la connexion au serveur mysql; la sélection de la base de données; la requête d'insertion à proprement parler: insert into database values ( '".$nom."','".$prenom."', '".$mail."','".$pseudo."','".$password."')
il contient le résultat : $queryresult = mysql_query($sqlquery) or die(" could not");
ou si c'est bon on affiche avec echo .
extraction d'informations d'une table mysql
-------------------------------------------
on interroge la table !
1 on établit la connexion
2 on sélectionne la base
3 écriture de la requête SELECT qui va extraire les infos voulues dans une table de la base de données. On stocke cette cette requête dans une variable, et on passe cette variable comme argument à la fonction mysql_query() qui se chargera de transmettre la requête au serveur mysql
4 voici un script qui extrait tous les enregistrements stockés dans la table Maildata de la base données Mailinglist:
$connect= mysql_connect ("localhost", "root", "") or die ("echec");
$result=mysql_select_db ("Mailinglist") or die ("could not select database mailinglist");
echo "database Mailinglist was successfully selected", "\n";
echo "
";
$sqlquery = "select * from Maildata";
$queryresult = mysql_query($sqlquery) or die("query failed");
echo "
";
echo "all th records ok", "\n";
?>
modification des données contenues dans une table mySQL
-------------------------------------------------------
$connect= mysql_connect ("localhost", "root", "") or die ("echec");
$selectdb=mysql_select_db ("Mailinglist") or die ("could not select databse mailinglist");
echo "database Mailinglist was successfully selected", "\n";
echo "
";
$sqlquery = "select * from Maildata";
$queryresult = mysql_query($sqlquery) or die("query failed");
echo "
";
echo "
"; echo "id_user\n ";
echo "
nom \n ";
echo "
prenom \n ";
echo "
mail \n ";
echo "
pseudo \n ";
echo "
password \n ";
while ($ligne=mysql_fetch_array($result))
{
echo "
\n";
echo "
" .$ligne["id_user"]."\n";
echo "
" .$ligne["nom"]."\n";
echo "
" .$ligne["prenom"]."\n";
echo "
" .$ligne["mail"]."\n";
echo "
" .$ligne["pseudo"]."\n";
echo "
" .$ligne["password"]."\n";
echo "
\n"; } echo "
\n";?>
Mise en Place du Site
Suite à mes réflexions sur l'aspect éventuellement "vieillot" de mes premières pages web , je recherchais une approche plus moderne. Cette approche doit se conformer au W3C, qui signifie appliquer des normes qui ont été définies au début des années 2000. Parmi celles-ci, une a retenue mon attention : il convient avant tout de séparer la forme du contenu (le contenu représentant textes et images faisant partie du site, la forme étant la mise en page et le graphisme regroupés sous le terme de design), ce qui est à la fois important pour l'accessibilité du site mais aussi pour son référencement. Cela aura été ma ligne de conduite: pour gagner une apparence moderne, je m'appliquais à toujours (dans la mesure du possible) à séparer la forme du contenu !
C'est pour cela que je décidais d'inclure dans le head la déclaration d'une feuille de style :
Pour savoir si mon site respectait cette recommandation, j'utilisais le navigateur Firefox qui permet d'afficher une page Web en désactivant son style (Affichage > Style de la page > Aucun style dans le menu Firefox).. Si la réalisation du site est bien faite, le contenu de la page apparaît sans mise en forme, comme sur celle d'un livre, avec des titres, des sous-titres et des paragraphes :
((((petit test : http://192.168.0.13/www.montpelliergo34.com/index.php?page=accueil, désactiver le style … )))). Si ce n'est pas le cas, le texte sera positionné à différents endroits de la page sans grand changement par rapport à l'affichage normal.
Ces réflexions seront le fil conducteur de la conception de mes pages : je vais essayer tout au long de ce stage de respecter l'approche simple, moderne, et intuitive ! Je veillais à ce que l'affichage en "mode texte" reste cohérent signe de la bonne organisation de mon site .
En parallèle mon formateur me proposait les services d'un infographiste pour améliorer l'approche graphique de mon site. Le lecteur doit bien comprendre en effet que je n'ai nulle formation dans ce domaine là! Pour pallier à l'aspect un peu vieillot dont je parlais quelques lignes plus haut, nous décidions de travailler de pair avec un spécialiste de ce domaine : il me fallait donc à présent remplacer tout ce j'avais mis en place au niveau charte graphique.
Je tiens ici à faire part de mes problèmes d'affichage rencontrés avec IE !
A ma grande surprise tout ce que j'avais développé sur le navigateur Mozilla Firefox n'était pas compatible avec IE. J'avais constitué des menus déroulants qui ne s'affichaient qu'au passage de la souris. Une combinaison judicieuse des balises display:none; et li:hover permettait une telle interface ! Mais à ma grande surprise IE ne supporte par li:hover créant des décalages et autres problèmes d'affichages. A noter que li:hover n'est pas le seul problème avec les feuilles de style. Les remises à zéro des padding et margin est très particulier également.
Dans un premier je pensais munir la page d'accueil de mon site d'un message avertissement indiquant que le site était optimisé pour Firefox, mais mon formateur m'en empêcha catégoriquement , arguant que 60% des utilisateurs d'un navigateur web l'étaient sous IE !
En conséquence, je décidais d'abandonner les menus déroulants pour revenir à un menu plus simple et entièrement développé !
On pourrait ici m'opposer qu'il est tout à fait possibles d'avoir des menus déroulants sous IE ! Certes, mais il me fallait pour cela employer quelques notions de javascript que je ne connais pas à ce jour ! Dans le cadre de mes contraintes, la non connaissance des langages est un point essentiel ! Je devais me débrouiller avec mes connaissances, qui certes ne cessaient de croitre de jour en jour , mais qui étaient un obstacle à une certaine liberté et ingéniosité de construction.
On peut ainsi en effet faire un parallèle avec la construction du module "minichat / message " qui a été effectué en html/php posant des problèmes lors des rafraichissements des pages . J'apprenais par la suite qu'un tel système de chat ne se codait pas en php, justement à cause de ces problèmes de rafraichissement !
Vers la fin de mon stage, je réalisais que mon module "Redaction Article" posait des problèmes de sécurité et d'ergonomie : en conséquence j'optais pour une approche différente. Il me fallait intégrer un éditeur javascript de texte. J'optais pour Tinymce. Son installation aura été aisée grâce à un certain nombre de tutos que je découvrais sur la toile. Le point délicat restera (et reste toujours à ce jour) la configuration initiale de l'éditeur. En effet, décidant de l'appliquer aux Textareas, ma surprise aura été de constater que les réglages de configuration s'appliquaient de la même façon à tous les Textareas de mon site.
Graphisme, point de départ, découpage en DIVS, zonage
J'ai eu la chance de profiter des services d'un nouveau venu au Club de Go, Romain, Graphiste ! Il me proposait une première ébauche, qui sera le point de départ des mes travaux. La plus grosse difficulté aura été pour moi de découper la maquette graphique en zones. Pour se faire je décidais de travailler en DIVs, car il me semble que cette approche est moderne, rigoureuse et précise : on peut placer au pixel près les différents blocks, gérer l'ordre priorité d'affichage des éléments (float et z-index)... Il est à noter que à l'heure où je rédige ces lignes, le travail porte sur un graphisme "primaire", considérant que la résolution de ces images et autres graphismes seraient améliorés ! Ceci étant dit, les zones elles ne seront pas changées : au pixel près , même si les images seront affinées en terme de résolution la disposition "géographique", elle, ne changera pas .
Présentation de l'organisation de mes pages principales: ici l'index; les pages seront toutes construites à partir de ce modèle :
//corps de page
//header
La construction de mes pages est basé sur un principe simple : toutes les pages auront "le même aspect global", donc il a fallu que je trouve un moyen de ne pas avoir à répéter le code des éléments communs à toutes les pages ! Ainsi je me servais de la fonction include !! Cette fonction m'aura évité de reproduire le même code pour chacune des pages. Ainsi par exemple vu que chaque page contiendra le menu "leftmenu" il suffisait que j'insère un fichier nommé leftmenu.php dans chaque page ! Ce qui donne :
//inclus le menu
Codage de différents modules
Une longue réflexion a été nécessaire pour l'élaboration des pages de mon site ! De quoi a t on réellement besoin ?
Ce site, je le rappelle, doit permettre aux utilisateurs de communiquer, de s'informer, d'être acteurs. Il fallait donc créer un site dynamique, collaboratif, associatif !
C'est pour cela que je décidais d'inclure des modules qui ne sont que rarement proposés sur un site web ! Ainsi un utilisateur disposant des droits suffisants peut rédiger des articles, poster des proverbes, communiquer avec les autres personnes connectées par message instantané ou avec les personnes non connectées en laissant des messages, ou en postant des articles. L'acteur doit pouvoir présenter ses photos, ses témoignages, ses récits de ses tournois etc...C'est pour cela que je souhaitais que l'utilisateur puisse POSTER !!
N'oubliant pas que c'est un site sur le jeu de go, il fallait que les modules proposés concernent également (c'est une évidence) le jeu de go : je décidais d'inclure : des articles concernant les règles, l'histoire, des informations, des illustrations, …
Le site se devait également d'être un portail d'ouverture vers l'extérieur : un des points importants aura été la conception d'une vaste bibliothèque de liens !!
Enfin j'incluais un lecteur flash de fichiers SGF permettant l'étude de parties! J'améliorerai ce point en élaborant un tableau permettant la recherche par joueur noir, joueur blanc, etc...A ce stade, seul le nom de fichier en sgf est disponible .
Il est à noter que, dans le cadre d'une telle formation, il était important pour moi de coder un maximum d'éléments pour bien comprendre les différents mécanismes entrant en jeu dans la conception d'un site : ainsi j'aurais très bien pu récupérer des codes existants, (sans doute de meilleure facture que les miens) , les insérer via un copier coller, mais en procédant ainsi je risquais de ne pas comprendre ce que je faisais ! C'est pour cela que je m'attachais à coder le plus par moi-même ce qui ne m'empêchais pas de m'inspirer de codes existant quand la réalisation en était difficile !
Modules ou fonctionnalités spécifiques du site:
-
-
Inscription en ligne via un système de récupération de mail :pour savoir si l'email est valide, j'envoie un mail au mail communiqué par la personne qui veut s'inscrire sur le site; il ouvre sa boite aux lettres et doit clicker sur un lien proposé. L'inscription dans la base de données des utilisateurs n'a donc lieu que si l'user clicke sur ce lien, me permet d'éviter les robots !
-
Test des champs vides; de la syntaxe ;
-
-
-
Envoi d'un mail si l'utilisateur a égaré son password !
-
-
-
Générateur aléatoire de Password pour le point précédent.
-
Vérification de l'unicité de l'inscription d'un utilisateur :interrogation de la base de données sur le e-mail : unique !!
-
Duplicata du mail envoyé pour l'inscription sur le site à l'administrateur du site ! Pour me tenir informer.
-
Upload de photos. Vérification du format : seuls png, gif, jpg autorisés ! Et verification de la syntaxe !!
-
Visionneuse Photos : codée par mes soins …: création des boutons précédents / suivants avec un système de Arrays !
-
Affichage de Thumbnails.
-
Respect des dimensions des photos postées par l'utilisateur ! Basé sur un calcul de rapport largeur/hauteur .
-
Création d'un menu utilisateur "dépendant" de ses droits : ne s'affiche que les modules auxquels il a accès => augmentation de la sécurisation !
-
Minichat incorporé dans le menu.
-
Module Whoisonline !
-
Module infos du jour !
-
Générateur aléatoire de proverbes : avec la fonction rand en SQL un proverbe est aléatoirement proposé.
-
Module édition article et proverbes avec Tynimce !
-
Insertion module lecteur SGF (non codé par mes soins)
-
Module de connexion, de déconnexion, d'inscription.
-
Panneau d'administration !
-
Testeur d'inactivité : au delà d'une certaine durée l'utilisateur est déconnecté ! Ce qui augmente la sécurisation.
-
Mise en forme automatique des articles postés par les utilisateurs !
-
Conception d'une liste des articles postés par les utilisateurs à la "mode blog" ! Classés par ordre de postage , un utilisateur lambda voit la liste, l'administrateur lui voit la même liste avec un bouton "édition d'articles" !
-
Mise en place d'un "lire la suite" sur la liste des articles postés me permettant de n'afficher que les quelques premiers caractères des articles !
-
Mise en place des formulaires d'inscription en ligne pour toutes les manifestations organisées par le club !
-
Insertion d'un module google map fort utile pour les localisations !
-
Echelle de Niveau : exctraction automatique à partir du fichier officiel de la FFG : basé sur un système d'extraction avec un pattern ! Conception automatique d'un tableau !
-
-
-
Sécurisation (au maximum de mes connaissances) de tous les modules :
-
-
-
-
-
-
-
- Idem pour la gestion des articles et proverbes;
- Sécurisation du module Tinymce en cas de désactivation de Javascript !
-
-
-
-
- Module administration : liste des ip connectées; liste des inscriptions pour une manifestation; gestion des users; avec la possibilité de modifier les droits ; supprimer un user indésirable;
-
-
* notamment les formulaires : ne jamais laisser les champs vides;
* vérifier la contenance des champs;
* vérification de la syntaxe;
* nettoyage des caractères avec htmlspecialcaract, preg_replace etc..
* vérification de la taille des images postées, des dimensions égalements !
* Eviter l'injection SQL : dans l'index.php un array contient les pages autorisées à l'ouverture ;
* Mise en place d'une variable 'droits' autorisant ou non l'ouverture et l'accès à certains modules !
-
-
MiniChat
S'inscrivant de le cadre de la communication entre utilisateurs du site, ce module est un des points clefs du site :
Mais sa conception aura été délicate : il fallait que je prenne en compte plusieurs points :
-
-
je voulais coûte que coute le coder entièrement (avec influence du tuto du site du zéro), mais je comprenais vite que le php / html poserait des problèmes de rafraichissement de pages !
-
Il fallait que cela soit extrêmement sécurisé ! Un beau formulaire est ainsi le lieu rêvé pour les intrusions malsaines... Pour cela je décidais de ruser : les robots parcourant la toile du web veulent injecter des messages dans tout formulaire qu'ils rencontrent: et bien soit ! Faisons en sorte que le formulaire (minichat) ne soit pas visible par eux ! C'est pour cela que le minichat n'est pas accessible, ni visible pour un simple utilisateur ! Les droits doivent être suffisants pour l'affichage du chat sont. Un simple utilisateur non connecté ne dispose pas de tels droits ! Ainsi le robot ne voyant pas le formulaire ne postera rien !
-
Je rappelle ici que le site repose sur une hiérarchie de droits donnant accès ou non à un certain nombre de pages : Vous pouvez selon les niveaux de droits que vous possédez exécuter telle ou telle tache sur le site. Il faut savoir que par mesures de sécurité évidentes certaines tâches ne sont accessibles qu'aux personnes administrant le site.
Gestion des droits
Pour résumer, voici ici les différentes activités du site et les droits nécessaires correspondants !
Toujours dans une optique de dynamique : les actions sur le développement du site donnent des droits de plus en plus élevés. Plus vous prendrez part à la vie du site, plus vous monterez dans l'administration du site. J'ai donc instauré un système de pondération pour les différentes activités possibles sur le site.
Avec la variable $droits, je hiérarchisais les différents niveaux de droits :
10 – Super Administrateur : Moi même; accès à tout : modification de la fiche des utilisateurs...
9 – Administrateur : Personnes autorisées à rédiger, et avoir un oeil sur certaines parties du site .
8 – Rédacteur : uniquement la rédaction d'articles
7 – Membre_Posteur: autorisation de poster des photos
4 – Membre_Chatteur: autorisation d'utiliser le chat
2 – Membre_Visiteur: membre loggué
0 – Lambda_ Visiteur : accès uniquement aux pages publiques
Le principe de vérification est assez simple : chaque page dispose d'une "hauteur" nécessaire de droits pour être accessible : on fait donc la vérification de la variable 'droits' de l'utilisateur sur chaque page : ainsi, par exemple, sur la page d'administration des utilisateurs du site , cette page n'est accessible que si la variable $droits = 10 !
donc en fait il s'agit d'une simple vérification:
if ($_SESSION['droits']==10) alors on affiche page, sinon on affiche un message stipulant que les droits sont insuffisants.
Whoisonline
Les sessions !
Redaction Article
Editer un article m'a semblé être la base de toute activité d'un membre actif sur le site ….
Espace Admin
Obligatoire dans la gestion d'un site. Il fallait inclure une partie qui était réservé à l'administration du site. Je décidais de la rendre accessible à seulement une ou deux personnes : en tant que "super-administrateur" du site mes privilèges demeurent supérieurs à un "simple" administrateur du site. Néanmoins l'administrateur pourra effectuer de nombreuses taches de suivi et de gestion.
J'aurais pu me contenter d'utiliser PhpmyAdmin pour administrer le site , mais étant donné ma phase d'apprentissage je concédais que construire mon propre panneau d'administration serais un point positif pour progresser dans l'apprentissage.
Générateur automatique de menus et menu déroulant
J'ai imaginé ici un système permettant aux utilisateurs de voir leur articles automatiquement implémenté avec une entrée menu ! Mais pour des raisons de praticité , il m'est apparu évident de ne pas le publier : en effet si trop d'articles étaient postés il aurait fallu que je trie : pourquoi tel article a t il droit à une entrée menu et pas un autre ? En plus trop d'articles aurait conduit à trop d'entrées menu, ce qui aurait considérablement alourdi la lecture du site et de ses menus !
Le concept est intéressant que je conserve malgré tout présent à l'esprit car cela constitue un début d'approche gestion de contenu !! le fameux CMS :)
C'est pour cela que dans le code subsiste encore la partie "générateur automatique de menus" mais commentés empêchant ainsi son exécution.
Vérification des formulaires côté serveur
Nous vérifions que les champs soient bien remplis : impossible de laisser un champ vide ! Il est à noter que la sécurisation coté serveur est obligatoire : bien que un formulaire html dispose de la sécurité "maxlength", il est obligatoire de faire une vérification coté serveur : donc nous vérifions la longueur de la chaien de caractères du champ du formulaire : avec la commande STRLEN , nous identifions la longueur de la chaine de caractères : dès lors il est simple de poser des conditions …
Jusqu'ici, nous n'avons testé que le fait que les champs soient remplis ou non.
Certains champs nécessitent une vérification plus pointue. L'E-Mail, par exemple, se doit non seulement d'être rempli, mais en plus de respecter les points suivants :
-
Il doit y avoir le signe @ une seule fois seulement quelque part dans l'E-Mail, et ce signe ne doit être ni le premier ni le dernier caractère
-
Il doit également au moins y avoir un point quelque part dans l'E-Mail, et ce point ne peut être ni au début ni à la fin, et il doit y en avoir au moins un après le signe @
-
Il ne peut pas y avoir de caractères spéciaux comme une virgule, une parenthèse, deux points, etc. En fait tous les caractères composants un E-Mail doivent obligatoirement être entre a et z ou entre 0 et 9 ou un trait de soulignement ou un tiret.
-
Le nombre de caractères doit être au minimum égal à 6 : En effet, peut on imaginer un e-mail plus court que a@a.eu ?
-
Les 2 derniers caractères doivent être deux lettres (.fr, .com, .org, .eu ...)
…...
Cette liste de vérifications n'est pas exhaustive, mais il faut mettre des limites. D'autant que même si l'utilisateur entre un e-mail qui à l'air valide, rien ne prouve qu'il le soit réellement !
Je décidais de vérifier l'adresse e-mail, puis de stocker l'inscription sur le site d'un utilisateur dans une base de données. Je créais une une clé d'activation aléatoirement générée. Mais à ce stade l'utilisateur ne peut pas accéder à la section membre, car le compte n'est pas actif !! Alors en envoyant un e-mail à l'adresse fournie (e-mail contenant un code d'activation), si l'internaute a fourni sa véritable adresse, il sera alors en mesure de se rendre sur le site, et d'activer son compte via un formulaire ou un lien. C'est après vérification du code que son compte s'activera.
les expressions régulières
UTILISATION DE preg_match ///
voici la syntaxe correcte
$Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$#';
_Les dièses sont les délimiteurs de la regex : regular expression !
_Le signe ^ indique que la chaine doit commencer par ce qui suit,
_Le signe $ indique qu'elle doit se terminer par ce qui précède.
_ \w est une classe abrégée qui correspond à : A-Za-z0-9_ soit aux 26 lettres de l'alphabet en majuscules ou minuscules, les dix chiffres et un underscore.
Fonction de vérification de la syntaxe:
function VerifierAdresseMail($adresse) { $Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$#'; if(preg_match($Syntaxe,$adresse)) return true; else return false; }
^[\w.-]+@ Commence (^) par au moins un caractère correspondant à la classe abrégée, ou un tiret, puis est suivi par un@.
[\w.-]+ un ou plus de caractères correspondant à la classe abrégée ou un tiret (c'est le nom de domaine)
\.[a-zA-Z]{2,6}$ un point, puis deux à six lettres, qui finissent la chaine (c'est la tld du nom de domaine).- top level domain
Ainsi, après avoir récupéré le champ "adresse" d'un formulaire :
$adresse=htmlentities($_POST['adresse']); if(VerifierAdresseMail($adresse)) echo '
Votre adresse est valide.
'; else echo '
Votre adresse e-mail n\'est pas valide.
';
Insertion Images
Pour notre site, une photo peut être insérée. Cette partie va permettre à un utilisateur de télécharger une image directement sur le serveur, en fait n'importe quel fichier mais nous n'autoriserons que les images par sécurité. Nous allons en plus redimensionner l'image téléchargée et en créer une deuxième de format plus petit. Pour enregistrer une image dans une base de données MySQL, deux solutions sont possibles:
-
soit directement enregistrer l'image dans un champ de la base de donnée
-
soit enregistrer seulement l'adresse et sauvegarder l'image dans un dossier spécifique.
La première solution va très vite alourdir la table et augmenter les temps d'accès à la base de données. Nous utiliserons la deuxième solution. Permettre de télécharger un fichier a des risques, notamment si le fichier téléchargé est un programme php ou un fichier exécutable (virus). Nous devrons obligatoirement vérifier si le fichier est bien une photo. En pratique, ceci ne pose pas de problèmes puisque nous allons également modifier la taille de la photo insérée lors du traitement, et même créer des miniatures.
Voici le code du formulaire
ENCTYPE ne peut être utilisé qu'avec la méthode POST, il spécifie l'encodage utilisé pour la forme que prendra le contenu du formulaire. Les valeurs possibles de la commande ENCTYPE sont:
ENCTYPE="application/x-www-form-urlencoded" valeur par défaut; encode le contenu du formulaire selon une forme URL, difficilement lisible par le destinataire;
ENCTYPE="text/plain" le contenu du formulaire sera retourné en format texte lisible par le destinataire, généralement utilisé avec ACTION=mailto:
ENCTYPE="multipart/form-data" permet d'expédier un fichier attaché au me