51, rue Barthlmy de Laemas ee BP 29 26901 Valence Cedex 9

Rapport de projet Site web pour une association

Anne 2006-2007 e e Bruno SABOT 1`re anne DUT R&T e e Mathieu ROGER 2`me anne DUT R&T e
A Rapport ralis avec L TEX e e

Table des mati`res e

Introduction 1 Analyse et outils du projet 1.1 Description du projet . . . . . . . . . . . . . . . . . . . . . . . . . 1.1.1 1.1.2 1.2 Objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cahier des charges . . . . . . . . . . . . . . . . . . . . . . 4 6 6 6 6 8 8 9 10 10 10 12 15 15 16 18 19

Techniques et Outils utiliss . . . . . . . . . . . . . . . . . . . . . e 1.2.1 1.2.2 PHP / MySQL . . . . . . . . . . . . . . . . . . . . . . . . FCKEditor . . . . . . . . . . . . . . . . . . . . . . . . . .

2 Conception et Ralisation e 2.1 Le code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.1.1 2.1.2 2.2 La partie visiteur . . . . . . . . . . . . . . . . . . . . . . . La partie administration . . . . . . . . . . . . . . . . . . .

Le design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2.1 2.2.2 Les dolances du clients . . . . . . . . . . . . . . . . . . . e Nos compositions . . . . . . . . . . . . . . . . . . . . . . .

Conclusion Glossaire

Annexe
A index.php de la partie visiteurs B Page dachage des photos C Page dachage des stages

19
20 22 24

` TABLE DES MATIERES D index.php de la partie administration E Page dajout de nouvelle photos F Page dajout dun nouveau stage

3 26 28 30

Table des gures

2.1 2.2 2.3 2.4 2.5
Arborescence du site visible par les visiteurs

. . . . . . . . . . . . .

11 13 15 17 17

Arborescence du site dadministration . . . . . . . . . . . . . . . . . Maquette du site

. . . . . . . . . . . . . . . . . . . . . . . . . . .

Premi`re version du site . . . . . . . . . . . . . . . . . . . . . . . . e Deuxi`me version du site e

. . . . . . . . . . . . . . . . . . . . . . .

Introduction
Le projet site web pour une association ` t choisi apr`s concertation avec aee e les professeurs dinformatique qui jugeaient nos prcdentes ides trop diciles ` e e e a raliser : tout dabord le codage dun portail de site Internet (installable facilement e et totalement administrable par lutilisateur), un projet qui ressemblerait aux syst`mes tels que Xoops ou Phpnuke, et ensuite un moteur de recherche, clairement e de mme type que Google ou Yahoo, avec la cration dun bot1 qui parcourait, e e seul, les pages Internet pour les rfrencer). ee Nous avons donc choisit de garder notre ide de base, qui consistait en un projet e informatique, qui, pour plus de dtails tait de crer une application web et ainsi e e e choisir la proposition de M. Duccini, qui proposait aux tudiants de raliser un site e e Internet pour une association, les curies de la Vore. Il existait dautres projets e e de site web, cependant, ceux-ci taient des sites intranet, qui ne ncessitaient pas e e une mise en page agrable pour les utilisateurs et ils taient destins a un nombre e e e ` de personnes limit. e Nous dcrirons tout dabord notre projet dans les grandes lignes, en dnissant e e clairement les objectifs que nous devions atteindre a lissue de notre projet, en ` continuant avec le cahier des charges, les direntes contraintes qui nous taient e e xes, pour ensuite, expliquer quelles techniques de programmation, cest a dire les e ` dirents langages et quels outils extrieurs nous avons utiliss pour la conception e e e du site, en les dcrivant de mani`re concise, avec leurs applications et leurs moyens e e de fonctionnement. Enn, nous verrons en dtails nos mthodes de conception et de ralisation, la e e e mani`re dont nous avons construit le site du projet, ce que nous avons du faire pour e la mise en page, et comment nous avons procd pour apprendre a lutilisateur e e ` comment administrer son site Internet.

1.
1.1

Analyse et outils du projet

Description du projet

Le projet ralis par Bruno Sabot et Mathieu Roger a pour nom : Site Web e e pour une association , comme le montre son nom, celui-ci a pour objectif de rae liser un site internet pour lassociation Les Ecuries de la Vore. Cette association e est un centre questre situ a Beaumont-Les-Valence appartenant a Virginie et e e ` ` Timothe MAURIN. e

1.1.1

Objectifs

Nous devons raliser un site internet qui pourra tre en grande partie adminise e trable par une personne nayant aucune connaissance technique dans les langages du Web (HTML2 /PHP3 /MySQL4 ). Ce site doit tre donc aisment administrable, e e grce ` une interface simple et intuitive. Celui-ci devra bien entendu tre accesa a e sible de lextrieur, il a donc fallu se pencher aussi sur les direntes entreprises e e dhbergement et de nom de domaine existantes pour en slectionner une avec un e e bon rapport qualit/prix. e De mani`re plus technique, il nous a aussi fallu nous pencher sur le probl`me e e du langage de dveloppement, nous avions au choix le couple PHP/MySQL ou e Python5 /MySQL. Apr`s une courte rexion nous avons opt pour PHP/MySQL. e e e

1.1.2

Cahier des charges

Apr`s avoir dni avec le tuteur et M. Timothe MAURIN les dirents obe e e e jectifs du site, nous avons tabli un rapide cahier des charges. e Une fois le projet termin M. Timothe MAURIN doit tre capable dadmie e e nistrer le site seul. Ce projet ne doit poser aucun probl`me quelconque au professeur tuteur, e

1. Analyse et outils du projet

M. Duccini. Linterface dadministration doit tre intuitive et simple dutilisation. e La scurit doit tre susamment prsente an que des personnes malintene e e e tionnes ne puissent pas modier le site. e Le site doit possder conformment aux demandes de M. Timothe MAURIN e e e un header6 , une partie droite rserve a des publicits pour ses produits e e ` e de dtentes ainsi quune partie gauche rserve aux donnes du site en luie e e e mme. e Celui-ci doit tre dans les tons jaune et bleu roi, nous avons dcid de rendre e e e ces couleurs plus ples pour ne pas agresser loeil et de mani`re a amliorer a e ` e la lisibilit. e

1. Analyse et outils du projet

1.2

Techniques et Outils utiliss e

Dans cette partie nous allons dtailler les dirents outils utiliss pour la ralie e e e sation du projet. Nous avons utilis le couple PHP/MySQL pour le dveloppement e e du site, nous dtaillerons dans les sous-parties les raisons de ce choix. Pour que e le site soit aisment modiable nous avons galement recherch un diteur WYe e e e SIWYG7 Nous avons opt pour lditeur FCKEditor, nous expliquerons galement e e e plus tard le choix de cet diteur. e Lensemble du site a t programm grce ` Vim pour Mathieu et Notepad++ ee e a a pour Bruno, aucun outil daide a la programmation na t utilis, pour plusieurs ` ee e raisons : nous navons pas le droit dinstaller des logiciels ` lIut, la majorit des a e diteurs convenables sont payants, et la plupart dentre-eux ne sont pas compae tibles avec le PHP ou le g`rent mal (Le logiciel ne g`re pas les erreurs, ne donne e e pas les descriptions des fonctions, ...)

1.2.1

PHP / MySQL

Nous avons choisi pour le dveloppement du projet le langage PHP, nous e lavons prfr a Python car celui-ci est plus souvent prsent dans les ores dheee` e e bergement ce qui nous permet davoir une plus grande compatibilit, de plus celuie ci a t cr principalement dans le but de coder des sites internet, contrairement a ` e e ee ` Python qui est principalement utilis pour des applications classiques. Enn nous e ma trisons mieux le PHP que le Python, de ce fait nous avons pu ainsi inclure plus de fonctions au site, et mieux grer la partie administration notamment dun e point de vue scurit grce a lutilisation des sessions. e e a ` En ce qui concerne le syst`me de base de donnes la question ne sest pas e e beaucoup pose car dans la majorit des ores dhbergement, seul MySQL est e e e propos, de ce fait nous sommes, en quelque sorte, contraints dutiliser ce syst`me. e e Cela ne nous a pas beaucoup drang car comme nous avions dj` cr plusieurs e e e a ee sites en PHP/MySQL, nous connaissons donc assez bien ce syst`me de base de e donnes et nous navons eu quasiment aucune dicult ` lutiliser. e ea

1. Analyse et outils du projet

1.2.2

FCKEditor

Pour mener ` bien notre projet, nous avions besoin dun moyen simple de a saisir du texte et de le formater en code HTML sans avoir aucune connaissance spcique, nous dsirions aussi que celui-ci ne ncessite aucune installation chez e e e le client, de mani`re a ce que le client puisse le modier de nimporte quel poste e ` informatique, il fallait aussi que celui-ci ressemble au niveau des fonctions et de lapparence aux diteurs de texte classique tels que WORD, pour viter que le e e client ne soit dpays et que la prise en main de loutil soit rapide. Bien sr, e e u celui-ci doit tre compatible avec la majorit des explorateurs et surtout Intere e net Explorer et Mozilla Firefox. Nous ne lavons pas dvelopp nous-mme, par e e e manque de temps et de connaissances, car la majorit de ces diteurs utilisent des e e biblioth`ques intgres aux dirents explorateurs et syst`mes dexploitation. Il e e e e e fallait aussi, bien entendu, que cet diteur soit gratuit. e Parmi ces exigences, plusieurs diteurs correspondaient : TinyMCE, TET (Text e Editor Tide), Xinha, Koivi et FCKEditor. Apr`s les tests de ces dirents diteurs, e e e notre choix a port sur FCKEditor, car celui-ci a toutes ses fonctions disponibles e sur la majorit des explorateurs et des syst`mes dexploitation. De plus celui-ci e e est celui qui, ` notre got, fait le code HTML le plus propre : les balises sont, dans a u leurs grandes majorits, compatibles XHTML. De plus celui-ci permet duploader8 e et de grer des images et des chiers ash9 , dinsrer des tableaux, et de grer les e e e couleurs darri`re-plan des textes, ainsi que des formulaires. Nous avons dcid de e e e dsactiver cette derni`re fonction car elle ncessite un minimum de connaissance e e e en HTML, et nous avons jug que celle-ci serait inutile pour le client. e

2.

Conception et Ralisation e

Nous allons maintenant nous pencher sur la ralisation du projet en lui-mme, e e ainsi nous dtaillerons la mani`re dont nous avons ordonn les dirents chiers et e e e e fonctions au sein de la partie publique ainsi que pour linterface dadministration. Dans un second temps, nous expliquerons la ralisation de la charte graphique. e

2.1

Le code

Dans cette section, nous allons voir la mani`re dont nous avons ordonn les e e direntes sections du site : tant au niveau fonctions, quau niveau de larborese cence. Nous allons, dans un premier temps, expliquer larchitecture de la partie visible par tout le monde, puis, dans un second temps, nous nous pencherons sur la partie administration du site.

2.1.1

La partie visiteur

Ci-dessous est prsente larborescence de la partie visible par les visiteurs : e La gnration des pages par PHP est faite par un mcanisme dinclusion, e e e cest-`-dire que lorsquon acc`de ` la page daccueil, celle-ci regarde si la variable a e a $ GET[page]10 contient une valeur : si oui, elle appelle la page $ GET[page].php sinon, elle inclut la page acceuil.php . La variable $ GET[page] est une me thode du protocole HTTP11 qui consiste a faire passer la variable en clair dans la ` barre dadresse, ainsi, dans notre cas, si on veut accder ` la page concours e a ladresse sera : http ://projet.octera.info/ ?page=concours si le site est hberg sur e e le serveur http ://projet.octera.info.

2. Conception et Ralisation e

11

Fig. 2.1 Arborescence du site visible par les visiteurs

Nous allons maintenant nous intresser ` larchitecture du site et de ses die a e rentes fonctions. Nous ne traiterons pas dans cette section le dossier admin , celui-ci sera expliqu dans la partie suivante. Le dossier includes contient des e chiers textes formats en HTML ; ceux-ci sont destins ` tre inclus par : e e ae acceuil.php pour le chier acceuil.txt reglement.php pour le chier reglement.txt toutes les pages incluent dans le bandeau de droite le chier pub.php, qui est dstin ` promouvoir les produits de bien-tre vendus par le client e ea e activite.php inclut les autres chiers suivant la variable act passe en pae

2. Conception et Ralisation e

12

ram`tre, ainsi http ://projet.octera.info/ ?page=activite&act=pension inclut e la page activite.php qui a son tour inclut le chier pension.txt. ` Le dossier photo , contient toutes les images du script photo.php, chaque image existe en deux exemplaires, le premier est une miniature de la photo, pour un chargement plus rapide, le second est la photo en elle-mme. Le nom des photo e est modi comme suis : e mini ou photo suivant sil sagit de la miniature ou la photo. le timestamp12 du moment auquel la photo a t envoye sur le serveur. ee e lextension .jpg Le dossier Userles/Images contient les chiers envoys a laide de FCKEditor e ` sur le serveur. Les chiers portent dans leur grande majorit le nom de la fonction quils e excutent, nous allons nanmoins expliquer le but des autres chiers : e e Le chier form.php contient le formulaire prsent dans la page coordonnes e e Le chier mail.php est le chier appel par ce formulaire pour lenvoi du e mail avec le contenu de ce mail Les deux chiers .js sont des chiers JavaScript pour la mise en place et la conguration du menu droulant e Le chier connect.php est un chier qui est inclut par les pages prsentes e dans la section Gazette qui permet de se connecter a la base de donnes. ` e

2.1.2

La partie administration

A linstar de la partie visiteur, la partie administration est aussi gnre par un e ee syst`me dinclusions rcursives, cest-`-dire que lon choisit la page que lon veut e e a modier, et le script nous donne toutes les modications que lon peut eectuer, chaque modication (fonctions) est un chier du dossier de la page. Ainsi si lon veut ajouter une entre dans les concours, nous irons chercher le chier add.php e dans le dossier concours. Voici larborescence du dossier dadministration :

2. Conception et Ralisation e

13

Fig. 2.2 Arborescence du site dadministration

Par souci de confort visuel les chiers index.htm, denied.php et sessions.php ne sont pas marqus dans tous les dossiers mais leur prsence est eective. e e Les chiers index.htm, denied.php et sessions.php sont prsents dans tous les e dossiers, dans lobjectif de prvenir toutes tentatives de hack13 . Le chier ine dex.htm permet que si quelquun rentre dans le dossier sans avoir prcis le nom e e dun chier, celui-ci montrera une page vierge au lieu du contenu du dossier. Le chier sessions.php est inclut au dbut de chaque chier de la partie dadminise tration, il a pour but de vrier si la personne est bien identie et, si ce nest pas e e le cas, il redirige vers le chier denied.php qui nous le fait savoir et nous ram`ne e

2. Conception et Ralisation e

14

au formulaire didentication. Nous allons maintenant voir de plus pr`s le mcanisme de linterface dadminise e tration : Lorsquon arrive sur linterface on se confronte a un formulaire de login14 , ` celui-ci permet que seules les personnes autorises puissent accder ` la partie dade e a ministration. Une fois le login conrm, nous arrivons ` la liste des donnes que e a e lon peut modier, une fois la donne choisie, par exemple Concours la page e index.php inclut la page ./concours/main.php. Ladresse de la page devient donc http ://projet.octera.info/admin/index.php ?page=concours. Ensuite on choisi la fonction Ajouter un concours le script concours.php inclut la page add.php ce qui nous donne ladresse suivante : http ://projet.octera.info/admin/index.php ?page=concours&fct=add. Pour ce qui concerne la modication des activits, du bandeau de droite ainsi e que de la page daccueil, toutes ces fonctions pointent vers le script ./activite/main.php qui prend en param`tre la page a modier. Il envoie ensuite les donnes e ` e au chier modpage.php qui les inscrit dans le chier texte prsent dans le dossier e include. Le chier login.php prsent a la racine du dossier dadministration permet de e ` crer la session, alors que le chier logout.php permet de la dtruire. Le chier e e functions.php contient quelques fonctions ncessaires au fonctionnement de lade ministration : connexion ` la base de donnes, formatage de lheure et la date a e ... Le FCKEditor est prsent dans chaque page ou lon peut ajouter/modier du e contenu, sauf pour les sections photo et tarifs, o` celui-ci est inutile. Lditeur est u e instanci 15 par quelques lignes de code qui font appel ` dautres chiers prsents e a e dans le dossier editor. Les chiers de conguration de lditeur sont prsent ` la e e a racine du dossier dadministration.

2. Conception et Ralisation e

15

2.2

Le design

Point important dun site Internet, la mise en page a connu quelques modications au cours du temps. Le client avait ses envies pour la mise en page de son site, nous avions quelques conseils.

2.2.1

Les dolances du clients e

La premi`re consigne pour la mise en page du site, tait de le raliser avec une e e e mise en page particuli`re. Ainsi, nous devions prparer un site avec une mise en e e page verticale . Le site que nous devions raliser se prsentait sous un format e e vertical, comme dcrit sur le schma ci-dessous (Voir Figure 2.3), avec un espace e e de publicit. e

Fig. 2.3 Maquette du site

Le haut de page (header) devait contenir limage dune prairie verdoyante, dapr`s les souhaits de lintress. Il devait aussi gurer le nom du centre questre, e e e e Les curies de la Vore. e e Le client dsirait un menu droulant (menu). Il fallait donc placer le menu sous e e le haut de page, et utiliser une disposition horizontale. Les dirents lments du e ee

2. Conception et Ralisation e

16

menu se droulent lors du survol. Les couleurs du menu doivent se marier avec le e contenu du texte, sans pour autant ny laisser aucune distinction. Enn, dans la partie principale du texte, une petite section devait prendre place sur la droite de lcran pour permettre ` lutilisateur de mettre une publicit sur e a e le site (pub). Le contenu du texte doit quant ` lui contenir un maximum dinformations sans a quil soit utile dutiliser la scroll-bar16 . Le client dsirait aussi un site en accord e avec les couleurs de son centre questre. Nous devions donc utiliser le bleu roi et e le jaune comme couleurs prdominantes du site. e

2.2.2

Nos compositions

La premi`re proposition de mise en page a t le plus possible proche des e ee souhaits du client. Nous avons tout de mme pris le soin de changer le bleu roi et e le jaune en leurs quivalents pastel, ce qui nous a permis davoir des couleurs plus e agrables pour le regard. e Le deuxi`me choix de notre initiative a t de mettre un fond vert fonc, qui e ee e reprendrait les couleurs de limage du haut de page. La mise en page cre a t la plus proche possible des choix du client, comme ee ee il est montr sur la gure 2.4 e

Cependant, cette mise en page ne nous satisfaisait pas, et au contraire, nous ne laimions pas du tout. Nous avons donc pris la libert de crer une autre mise e e en page, qui serait plus proche de celle que nous pensions la meilleure pour un tel site. Lancienne mise en page tait en eet trop colore, cest principalement ce e e qui nous a dcid a proposer autre chose. e e` Nous avons donc conu la mise en page prsente plus bas (Voir gure 2.5), qui c e sest rvle meilleure, puisque le client nous a con le soin de changer lancienne e ee e mise en page, pour la remplacer par notre nouvelle proposition.

2. Conception et Ralisation e

17

Fig. 2.4 Premi`re version du site e

Fig. 2.5 Deuxi`me version du site e

Conclusion
Le projet Site web pour une association a donc t une ralisation pour quelee e quun qui ne conna pas les langages informatiques dInternet, ne rencontre aut cun soucis, mais il doit pouvoir administrer son site tr`s aisment. Nous avons d e e u pour cela utiliser des langages informatiques particuliers, ainsi que des applications particuli`res qui devaient intervenir dans la facilit ddition du site par le e e e client. Parmi nos tches, nous avons choisi dutiliser une arborescence spcique, a e qui rsume le nombre de choix technologiques que nous avons d eectuer. Cela e u nous permet de modier le code du site avec facilit, et dajouter avec aisance e diverses fonctionnalits. Nous pouvons aussi parler de notre code puisque nous e avons confront quelques langages de programmation, et choisi le plus adapt. e e Enn, nous avons pris la peine de prendre des initiatives vis-`-vis du cahier des a charges, en proposant spontanment des solutions direntes au client. e e Le projet Site web pour une association nous a permit de nous confronter a ` quelques exigences dun client, mais nous a aussi appris a proposer des solutions ` technologiques a quelquun, en nous justiant dans nos choix. Ce projet a aussi ` t bnque dun point de vue conception. Nous avons ainsi pu appliquer les ee e e consignes du cours dinformatique ` propos de lorganisation du temps de traa vail, en rpartissant de mani`re convenable les temps danalyse, de codage et de e e vrication des erreurs. e

GLOSSAIRE

19

Glossaire
1 2 3

Bot : programme informatique pouvant xecuter une tche en autonomie e a HTML : HyperText Markup Language, langage de mise en page pour les pages Web PHP : Vient de lacronyme rcursif PHP : Hypertext Preprocessor, langage permettant un e

dynamisme ct serveur pour les sites internet, celui-ci permet notamment de tirer des informaoe tions de bases de donnes ainsi que nombreuses autres fonctions e
4 5 6 7

MySQL : langage et syst`me de gestion de bases de donnes e e Python : Language de programmation interprt ee Header : Partie suprieure du site rserve au nom du site ainsi qu` une image e e e a WYSIWYG : What You See Is What You Get littralement : Ce que vous voyez est ce que e

vous obtenez.
8 9 10 11

Uploader : Action denvoyer des chiers sur un serveur distant Flash : Format propritaire danimation et de programme xecut chez le client e e e $ GET : Variable PHP qui permet de rcuprer des donnes dans la barre dadresse e e e HTTP : HyperText Transfer Protocol : Protocole utilis par les serveurs web pour envoyer e

au client une page internet.

12

Timestamp : Methode de stockage de lheure sur un ordinateur, cest un nombre qui compte

le nombre de secondes passes depuis le 1 Janvier 1970 ` 1 heure du matin GMT +1 e a

13

Hack : Action eectuer par une tierce personne, visant une machine, un site web, ... en

tentant de nuire ` lintgrit de celui-ci, dans notre cas de modier le contenu du site sans y a e e avoir t autoris. ee e
14 15 16

Formulaire de login : formulaire permettant de sidentier aupr`s du site e Instanci : (Ici) placer dans la page e Scroll-bar : Ascenseur prsent sur la droite de lexplorateur e

A.

index.php de la partie

visiteurs
<?php i n c l u d e ( c o n n e c t . php ) ; connect ( ) ; i f ( i s s e t ($ GET [ page ] ) ) { $page=$ GET [ page ] ; } else { $page = a c c u e i l ; } ?> <html> <head> <meta httpe q u i v=ContentType content= t e x t / html ; c h a r s e t=i s o 88591 /> <l i n k r e l= s t y l e s h e e t type= t e x t / c s s href= . / s t y l e . c s s /> </head> <body> <s c r i p t type= text / j a v a s c r i p t > f u n c t i o n Go ( ) { r e t u r n } </ s c r i p t> <s c r i p t type= text / j a v a s c r i p t src = ./ exmplmenu var . j s ></ s c r i p t> <s c r i p t type= text / j a v a s c r i p t src = ./ menu com . j s ></ s c r i p t> <div c l a s s=wrap c l e a r f i x > <div c l a s s=h e a d e r ><h1>Les c u r i e s de l a V ore</h1></ div> e e <div c l a s s=menu id=nav ></ div> <div c l a s s= c o n t a i n e r c l e a r f i x > <div c l a s s= n e w s r i g h t c l e a r f i x id=news > <div c l a s s=n e w s c n r t o p ><img src=images / c n r t l . g i f a l t= c o r n e r width=8 height=8 c l a s s=c n r s t y l e= d i s p l a y : none /></ div> <?php i n c l u d e ( . / i n c l u d e s /pub . t x t ) ; ?> <div c l a s s=news cnr bottom ><img src=images / c n r b l . g i f

A. index.php de la partie visiteurs

21

a l t= c o r n e r width=8 height=8 c l a s s=c n r s t y l e= d i s p l a y : none /></ div> </ div> <div c l a s s= c o n t e n t > <?php i f ( i s f i l e ( . / . $page . . php ) ) { i n c l u d e ( . / . $page . . php ) ; } else { echo La page demande n e x i s t e pas ; e } ?> </ div> </ div>

</ div> </body> </html>

B.

Page dachage des photos

<?php i f ( i s s e t ($ GET [ num ] ) ) { $num = $ GET [ num ] ; } else { $num = 1 ; } $nombreImagePage = 1 6 ; i f ( $ r e t o u r = mys ql que ry ( SELECT COUNT( ) AS nb images FROM photo ) ) {} e l s e { $ r e t o u r =0;} $donnees = m y s q l f e t c h a r r a y ( $ r e t o u r ) ; $ t o t a l I m a g e = $donnees [ nb images ] ; $nombrePages = c e i l ( $ t o t a l I m a g e / $nombreImagePage ) ; i f ( $nombrePages==0) { echo Pas de photo d i s p o n i b l e ; } else { echo Page : ; f o r ( $ i = 1 ; $ i <= $nombrePages ; $ i ++) { echo <a href=? page=p h o t o s&num= . $ i . > . $ i . </a> ; } } $premierImage = ($num 1 ) $nombreImagePage ; echo <br /><br /> ; $ r e q a f f i m g =SELECT FROM photo ORDER BY i d DESC LIMIT . $premierImage . , . $nombreImagePage ; i f ( $ a f f i m g=m ysql que ry ( $ r e q a f f i m g ) ) { $ i =0; $compt img =0; w h i l e ( $donnee=m y s q l f e t c h a r r a y ( $ a f f i m g ) ) { i f ( $compt img >=4) { $compt img =0; echo <br /><br /> ;

B. Page dachage des photos

23

} i f ( i s f i l e ( . / photo / p ho to \ . $donnee [ tim e exe c ] . \ . jpg ) ) { $ e x t = . jpg ; } e l s e i f ( i s f i l e ( . / photo / p ho to \ . $donnee [ tim e exe c . \ . png ) ) { $ e x t = . png ; } e l s e i f ( i s f i l e ( . / photo / p ho to \ . $donnee [ tim e exe c . \ . g i f ) ) { $ e x t = . g i f ; } e l s e i f ( i s f i l e ( . / photo / p ho to \ . $donnee [ tim e exe c . \ . jpeg ) ) { $ e x t = . jpeg ; } echo <a h r e f =./ photo / photo . $donnee [ time ex ec ] . . $ e x t . t a r g e t = blank ><img s r c =./ photo / mini . $donnee [ ti me exe c ] . . j p g s t y l e = b o r d e r : 2 px s o l i d #FFF ; /></a> $compt img++; } } e l s e { echo E r r e u r de chargement ; } ?>

] ] ]

C.
<?php

Page dachage des stages

i f ($ GET [ h i s t o ] = = 1 ) {

?> <s c r i p t type= t e x t / j a v a s c r i p t > document . t i t l e = Ancien S t a g e s ; </ s c r i p t> <a href=? page=s t a g e >Voir l e s s t a g e s a v e n i r</a> <?php $ d a t e=time ( ) ; $ r e q u e t e=SELECT FROM s t a g e s WHERE d a t e < . $ d a t e . ORDER BY d a t e ASC ; $ r e q u e t e=mys ql que ry ( $ r e q u e t e ) ; w h i l e ( $ r=m y s q l f e t c h a r r a y ( $ r e q u e t e ) ) { ?> <f i e l d s e t> <legend> <b><?php echo $ r [ 1 ] ; ?> &nbsp ;& nbsp ;& nbsp ;& nbsp ;</b> </ legend> <?php echo $ r [ 2 ] ; ?><br /><br /> E x p i r e l e : <?php echo d a t e ( d/m/Y , $ r [ 3 ] ) ; ?> ` a <?php echo d a t e ( H: i , $ r [ 3 ] ) ; ?> </ f i e l d s e t> <?php } } else { ?>

<s c r i p t type= t e x t / j a v a s c r i p t > document . t i t l e = S t a g e s ` v e n i r ; a </ s c r i p t> <a href=? page=s t a g e&h i s t o =1>Voir l e s a n c i e n s s t a g e s</a> <?php $ d a t e=time ( ) ; $ r e q u e t e=SELECT FROM s t a g e s WHERE d a t e > . $ d a t e . ORDER BY d a t e ASC ; $ r e q u e t e=mys ql que ry ( $ r e q u e t e ) ; w h i l e ( $ r=m y s q l f e t c h a r r a y ( $ r e q u e t e ) ) { ?>

C. Page dachage des stages

25

<f i e l d s e t> <legend> <b><?php echo $ r [ 1 ] ; ?> &nbsp ;& nbsp ;& nbsp ;& nbsp ;</b> </ legend> <?php echo $ r [ 2 ] ; ?><br /><br /> E x p i r e l e : <?php echo d a t e ( d/m/Y , $ r [ 3 ] ) ; ?> a ` <?php echo d a t e ( H: i , $ r [ 3 ] ) ; ?> </ f i e l d s e t> <?php } } ?>

D.

index.php de la partie

administration
<?php session start (); $ u s e r=coucou ; $ p a s s=coucou ; i n c l u d e ( . / f u n c t i o n s . php ) ;

m ys q l c o n n e c t ( ) ; i f ( i s s e t ($ GET [ page ] ) ) { $page=$ GET [ page ] ; } else { $page =admin ; } ?> <html> <head> <meta httpe q u i v=ContentType content= t e x t / html ; c h a r s e t=i s o 88591 /> <l i n k r e l= s t y l e s h e e t type= t e x t / c s s href= . . / s t y l e . c s s /> </head> <body topmargin=5 > <center> <table c l a s s=c o n t cellpadding=0 c e l l s p a c i n g=0 > <tr><td c l a s s=h e a d e r colspan=2 ></td></ tr> <tr><td c l a s s=menu colspan=2 s t y l e=t e x t a l i g n : c e n t e r ; > A d m i n i s t r a t i o n du s i t e</td></ tr> <tr> <td c l a s s= t e x t e > <?php i f ( i s s e t ( $ POST [ V a l i d e r ] ) ) { i f ( $ POST [ u s e r ]== $ u s e r && $ POST [ password ]== $ p a s s ) { $ SESSION [ l o g i n ]= True ; } else

D. index.php de la partie administration

27

{ print blabla ; $ l o g i n=F a l s e ; } } i f ( ( ! s e s s i o n i s r e g i s t e r e d ( l o g i n ) ) | | ( $ SESSION [ l o g i n ]== F a l s e ) ) { i n c l u d e ( . / l o g o n . php ) ; } else { i f ( ! ( i s s e t ($ GET [ page ] ) ) ) { i n c l u d e ( . / admin . php ) ; } else { i f ( f i l e e x i s t s ( . / . $ GET [ page ] . . php ) ) { i n c l u d e ( . / . $ GET [ page ] . . php ) ; } else { i n c l u d e ( . / d e n i e d . php ) ; } } } ?> </td> <td c l a s s=pub > <?php i n c l u d e ( . . / i n c l u d e s /pub . t x t ) ; ?> </td> </ tr> </ table> </ center> </body> </html>

E.

Page dajout de nouvelle

photos
<a href=i n d e x . php >Retour ` l i n d e x</a><br /><br /> a <?php $ t i m e e x e c=time ( ) ; $ t i m e e x e c=s t r r e p l a c e ( , , $ t i m e e x e c ) ; i f ( i s s e t ( $ POST [ submit ] ) ) { i f ( $ FILES [ photo ] [ error ] > 0 ) { $ e r r e u r = E r r e u r 3 : E r r e u r de t r a n s f e r t du f i c h i e r ; } else { $ e x t e n s i o n s v a l i d e s = a r r a y ( jpg , jpeg , g i f , png , JPG ) ; $ e x t e n s i o n u p l o a d = s u b s t r ( s t r r c h r ( $ FILES [ photo ] [ name ] , . ) ,1); i f ( in array ( $extension upload , $extensions valides ) ) { $nom = . . / photo / photo . $ t i m e e x e c . ; s w i t c h ( $ FILES [ photo ] [ type ] ) { c a s e image / jpeg : $nom = $nom . . jpg ; break ; c a s e image /xmsbmp : $nom = $nom . . bmp ; break ; c a s e image / g i f : $nom = $nom . . g i f ; break ; c a s e image /png : $nom = $nom . . png ; break ; d e f a u l t : d i e ( E x t e n t i o n de f i c h i e r i n c o r r e c t e ) ; } $ r e s u l t a t = m o v e u p l o a d e d f i l e ( $ FILES [ photo ] [ tmp name ] , $nom ) ; i f ( $resultat ) { echo T r a n s f e r t r u s s i <br> ; e $ r e q a j o u t d b =INSERT INTO photo VALUES ( , . $nom . , . $ t i m e e x e c . ) ; i f ( mys ql que ry ( $ r e q a j o u t d b ) ) { echo photo c o r r e c t e m e n t a j o u t <br> ; } e e l s e { echo E r r e u r ; } i f ( i s f i l e ( . . / photo / p h o to \ . $ t i m e e x e c . \ . jpg ) ) { $ s o u r c e = i m a g e c r e a t e f r o m j p e g ( . . / photo / p h o to \ . $ t i m e e x e c . \ . jpg ) ; } e l s e i f ( i s f i l e ( . . / photo / p h o to \ . $ t i m e e x e c . \ . png ) ) { $ s o u r c e = i m a g e c r e a t e f r o m p n g ( . . / photo / p ho to \ . $ t i m e e x e c . \ . png ) ; } e l s e i f ( i s f i l e ( . . / photo / p h o to \ . $ t i m e e x e c . \ . g i f ) ) { $ s o u r c e = i m a g e c r e a t e f r o m g i f ( . . / photo / p ho to \ . $ t i m e e x e c . \ . g i f ) ; } e l s e i f ( i s f i l e ( . . / photo / p h o to \ . $ t i m e e x e c . \ . jpeg ) ) { $ s o u r c e =

E. Page dajout de nouvelle photos

29

i m a g e c r e a t e f r o m j p e g ( . . / photo / p h o to \ . $ t i m e e x e c . \ . jpeg ) ; } $destination = imagecreatetruecolor (100 , 100); $ l a r g e u r s o u r c e = imagesx ( $ s o u r c e ) ; $ h a u t e u r s o u r c e = imagesy ( $ s o u r c e ) ; $ l a r g e u r d e s t i n a t i o n = imagesx ( $ d e s t i n a t i o n ) ; $ h a u t e u r d e s t i n a t i o n = imagesy ( $ d e s t i n a t i o n ) ; imagecopyresampled ( $ d e s t i n a t i o n , $ s o u r c e , 0 , 0 , 0 , 0 , $largeur destination , $hauteur destination , $largeur source , $hauteur source ) ; i m a g e j p e g ( $ d e s t i n a t i o n , . . / photo / m i n i \ . $ t i m e e x e c . \ . jpg ) ; } e l s e { echo E r r e u r 1 : E r r e u r de t r a n s f e r t du f i c h i e r ; } } else { echo E r r e u r 2 : E r r e u r de v a l i d i t du format de l image ; e } } } e l s e {} ?> <form method= p o s t action=i n d e x . php? page=photo&f c t=add e n c t y p e= m u l t i p a r t / formdata > <input type= f i l e name=photo id=photo value=Photo /><br /> <input type=submit name=submit value=A j o u t e r l a photo /> </form>

F.

Page dajout dun nouveau

stage
<?php i n c l u d e ( . / s e s s i o n s . php ) ; i f ( i s s e t ( $ POST ) ) $ p o st A r r a y = &$ POST ; else $ p o st A r r a y = &$HTTP POST VARS ; $ t i t r e = s t r i p s l a s h e s ( $ POST [ t i t r e ] ) ; $ c o r p s = s t r i p s l a s h e s ( $ POST [ FCKeditor1 ] ) ; $time = s t r 2 t i m e ( $ POST [ date ] , d/m/y H: i ) ; $ r e q u e t e=INSERT INTO s t a g e s ( i d , t i t r e , c o n t , d a t e ) VALUES ( NULL , . $ t i t r e . , . $ c o r p s . , . $time . ) ; ; i f ( mys ql que ry ( $ r e q u e t e ) ) { p r i n t <html> <head> <t i t l e>Merci de p a t i e n t e r . . . </ t i t l e> <meta httpe q u i v= r e f r e s h content= 2 ; u r l =./ i n d e x . php? page=s t a g e s /> <s c r i p t type= t e x t / j a v a s c r i p t > </ s c r i p t> </head> <body margintop=200 > <div> <div> <table c e l l s p a c i n g=1 cellpadding=0 border=0 s t y l e=background : # CCC; align= c e n t e r > <tr> <td>Merci de p a t i e n t e r . . . </td> </ tr> <tr> <td> <div> <b>Le s t a g e a t i n s r e e e e avec s u c c s</b><br />Merci de p a t i e n t e r pendant e que nous vous t r a n s f&e a c u t e ; r o n s . . . </ div> <center><b>&middot ; <a href=i n d e x . php? page=s t a g e s >Ou c l i q u e z i c i s i vous ne s o u h a i t e z pas a t t e n d r e</a> &middot</b><center> </td> </ tr>

F. Page dajout dun nouveau stage

31

<tr> <td c l a s s=c a t e n d colspan=2 ></td> </ tr> </ table> </ div> </ div> </body> </html> ; } else { p r i n t ERREUR DANS LA REQUETE MERCI DE REESAYER PLUS TARD. ; } ?>