Montpellier Komoku
account_circle

0 commentaire pour cet article.

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

Le public Visé

 

Le contenu du site

Arborescence

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

//div contenante

 

 

//partie gauche pour menu

 

 

 

 

 

//partie contenu pour le corps de texte

 

 

 

 

 

 

 

 

 

 

 

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:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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 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 :

 

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:

 

 

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


arrow_back

A Venir

20 avril 2024Festival Du Jeu De Montpellier
26 juillet 2024Congrès Européen De Go 2024

Quelques Sites Amis

image image image image

Chaines Internet de Go

image image image image image

Fine_Art vs Ke Jie

Illustration au Hasard

Tournois Montpellier 2k23