Rapport de projet Site web pour une association

51, rue Barthélémy de Laffemas BP 29 26901 Valence Cedex 9 Rapport de projet Site web pour une association Année 2006-2007 Bruno SABOT 1ère année DUT R&T Mathieu ROGER 2ème année DUT R&T Rapport réalisé avec LATEX

Table des matières Introduction 4 1 Analyse et outils du projet 6 1.1 Description du projet......................... 6 1.1.1 Objectifs............................ 6 1.1.2 Cahier des charges...................... 6 1.2 Techniques et Outils utilisés..................... 8 1.2.1 PHP / MySQL........................ 8 1.2.2 FCKEditor.......................... 9 2 Conception et Réalisation 10 2.1 Le code................................ 10 2.1.1 La partie visiteur....................... 10 2.1.2 La partie administration................... 12 2.2 Le design............................... 15 2.2.1 Les doléances du clients................... 15 2.2.2 Nos compositions....................... 16 Conclusion 18 Glossaire 19 Annexe 19 A index.php de la partie visiteurs 20 B Page d affichage des photos 22 C Page d affichage des stages 24

TABLE DES MATIÈRES 3 D index.php de la partie administration 26 E Page d ajout de nouvelle photos 28 F Page d ajout d un nouveau stage 30

Table des figures 2.1 Arborescence du site visible par les visiteurs............. 11 2.2 Arborescence du site d administration................. 13 2.3 Maquette du site........................... 15 2.4 Première version du site........................ 17 2.5 Deuxième version du site....................... 17

Introduction Le projet site web pour une association à été choisi après concertation avec les professeurs d informatique qui jugeaient nos précédentes idées trop difficiles à réaliser : tout d abord le codage d un portail de site Internet (installable facilement et totalement administrable par l utilisateur), un projet qui ressemblerait aux systèmes tels que Xoops ou Phpnuke, et ensuite un moteur de recherche, clairement de même type que Google ou Yahoo, avec la création d un bot 1 qui parcourait, seul, les pages Internet pour les référencer). Nous avons donc choisit de garder notre idée de base, qui consistait en un projet informatique, qui, pour plus de détails était de créer une application web et ainsi choisir la proposition de M. Duccini, qui proposait aux étudiants de réaliser un site Internet pour une association, les écuries de la Véore. Il existait d autres projets de site web, cependant, ceux-ci étaient des sites intranet, qui ne nécessitaient pas une mise en page agréable pour les utilisateurs et ils étaient destinés à un nombre de personnes limité. Nous décrirons tout d abord notre projet dans les grandes lignes, en définissant clairement les objectifs que nous devions atteindre à l issue de notre projet, en continuant avec le cahier des charges, les différentes contraintes qui nous étaient fixées, pour ensuite, expliquer quelles techniques de programmation, c est à dire les différents langages et quels outils extérieurs nous avons utilisés pour la conception du site, en les décrivant de manière concise, avec leurs applications et leurs moyens de fonctionnement. Enfin, nous verrons en détails nos méthodes de conception et de réalisation, la manière dont nous avons construit le site du projet, ce que nous avons du faire pour la mise en page, et comment nous avons procédé pour apprendre à l utilisateur comment administrer son site Internet.

1. Analyse et outils du projet 1.1 Description du projet Le projet réalisé par Bruno Sabot et Mathieu Roger a pour nom : «Site Web pour une association», comme le montre son nom, celui-ci a pour objectif de réaliser un site internet pour l association Les Ecuries de la Véore. Cette association est un centre équestre situé à Beaumont-Les-Valence appartenant à Virginie et Timothée MAURIN. 1.1.1 Objectifs Nous devons réaliser un site internet qui pourra être en grande partie administrable par une personne n ayant aucune connaissance technique dans les langages du Web (HTML 2 /PHP 3 /MySQL 4 ). Ce site doit être donc aisément administrable, grâce à une interface simple et intuitive. Celui-ci devra bien entendu être accessible de l extérieur, il a donc fallu se pencher aussi sur les différentes entreprises d hébergement et de nom de domaine existantes pour en sélectionner une avec un bon rapport qualité/prix. De manière plus technique, il nous a aussi fallu nous pencher sur le problème du langage de développement, nous avions au choix le couple PHP/MySQL ou Python 5 /MySQL. Après une courte réflexion nous avons opté pour PHP/MySQL. 1.1.2 Cahier des charges Après avoir défini avec le tuteur et M. Timothée MAURIN les différents objectifs du site, nous avons établi un rapide cahier des charges. Une fois le projet terminé M. Timothée MAURIN doit être capable d administrer le site seul. Ce projet ne doit poser aucun problème quelconque au professeur tuteur,

1. Analyse et outils du projet 7 M. Duccini. L interface d administration doit être intuitive et simple d utilisation. La sécurité doit être suffisamment présente afin que des personnes malintentionnées ne puissent pas modifier le site. Le site doit posséder conformément aux demandes de M. Timothée MAURIN un header 6, une partie droite réservée à des «publicités»pour ses produits de détentes ainsi qu une partie gauche réservée aux données du site en luimême. Celui-ci doit être dans les tons jaune et bleu roi, nous avons décidé de rendre ces couleurs plus pâles pour ne pas agresser l oeil et de manière à améliorer la lisibilité.

1. Analyse et outils du projet 8 1.2 Techniques et Outils utilisés Dans cette partie nous allons détailler les différents outils utilisés pour la réalisation du projet. Nous avons utilisé le couple PHP/MySQL pour le développement du site, nous détaillerons dans les sous-parties les raisons de ce choix. Pour que le site soit aisément modifiable nous avons également recherché un éditeur WY- SIWYG 7 Nous avons opté pour l éditeur FCKEditor, nous expliquerons également plus tard le choix de cet éditeur. L ensemble du site a été programmé grâce à Vim pour Mathieu et Notepad++ pour Bruno, aucun outil d aide à la programmation n a été utilisé, pour plusieurs raisons : nous n avons pas le droit d installer des logiciels à l Iut, la majorité des éditeurs convenables sont payants, et la plupart d entre-eux ne sont pas compatibles avec le PHP ou le gèrent mal (Le logiciel ne gère pas les erreurs, ne donne pas les descriptions des fonctions,...) 1.2.1 PHP / MySQL Nous avons choisi pour le développement du projet le langage PHP, nous l avons préféré à Python car celui-ci est plus souvent présent dans les offres d hébergement ce qui nous permet d avoir une plus grande compatibilité, de plus celuici à été créé principalement dans le but de coder des sites internet, contrairement à Python qui est principalement utilisé pour des applications classiques. Enfin nous maîtrisons mieux le PHP que le Python, de ce fait nous avons pu ainsi inclure plus de fonctions au site, et mieux gérer la partie administration notamment d un point de vue sécurité grâce à l utilisation des sessions. En ce qui concerne le système de base de données la question ne s est pas beaucoup posée car dans la majorité des offres d hébergement, seul MySQL est proposé, de ce fait nous sommes, en quelque sorte, contraints d utiliser ce système. Cela ne nous a pas beaucoup dérangé car comme nous avions déjà créé plusieurs sites en PHP/MySQL, nous connaissons donc assez bien ce système de base de données et nous n avons eu quasiment aucune difficulté à l utiliser.

1. Analyse et outils du projet 9 1.2.2 FCKEditor Pour mener à bien notre projet, nous avions besoin d un moyen simple de saisir du texte et de le formater en code HTML sans avoir aucune connaissance spécifique, nous désirions aussi que celui-ci ne nécessite aucune installation chez le client, de manière à ce que le client puisse le modifier de n importe quel poste informatique, il fallait aussi que celui-ci ressemble au niveau des fonctions et de l apparence aux éditeurs de texte classique tels que WORD, pour éviter que le client ne soit dépaysé et que la prise en main de l outil soit rapide. Bien sûr, celui-ci doit être compatible avec la majorité des explorateurs et surtout Internet Explorer et Mozilla Firefox. Nous ne l avons pas développé nous-même, par manque de temps et de connaissances, car la majorité de ces éditeurs utilisent des bibliothèques intégrées aux différents explorateurs et systèmes d exploitation. Il fallait aussi, bien entendu, que cet éditeur soit gratuit. Parmi ces exigences, plusieurs éditeurs correspondaient : TinyMCE, TET (Text Editor Tide), Xinha, Koivi et FCKEditor. Après les tests de ces différents éditeurs, notre choix a porté sur FCKEditor, car celui-ci a toutes ses fonctions disponibles sur la majorité des explorateurs et des systèmes d exploitation. De plus celui-ci est celui qui, à notre goût, fait le code HTML le plus propre : les balises sont, dans leurs grandes majorités, compatibles XHTML. De plus celui-ci permet d uploader 8 et de gérer des images et des fichiers flash 9, d insérer des tableaux, et de gérer les couleurs d arrière-plan des textes, ainsi que des formulaires. Nous avons décidé de désactiver cette dernière fonction car elle nécessite un minimum de connaissance en HTML, et nous avons jugé que celle-ci serait inutile pour le client.

2. Conception et Réalisation Nous allons maintenant nous pencher sur la réalisation du projet en lui-même, ainsi nous détaillerons la manière dont nous avons ordonné les différents fichiers et fonctions au sein de la partie publique ainsi que pour l interface d administration. Dans un second temps, nous expliquerons la réalisation de la charte graphique. 2.1 Le code Dans cette section, nous allons voir la manière dont nous avons ordonné les différentes sections du site : tant au niveau fonctions, qu au niveau de l arborescence. Nous allons, dans un premier temps, expliquer l architecture 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 présente l arborescence de la partie visible par les visiteurs : La génération des pages par PHP est faite par un mécanisme d inclusion, c est-à-dire que lorsqu on accède à la page d accueil, celle-ci regarde si la variable $ 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 méthode du protocole HTTP 11 qui consiste à faire passer la variable en clair dans la barre d adresse, ainsi, dans notre cas, si on veut accéder à la page «concours» l adresse sera : http ://projet.octera.info/?page=concours si le site est hébergé sur le serveur http ://projet.octera.info.

2. Conception et Réalisation 11 Fig. 2.1 Arborescence du site visible par les visiteurs Nous allons maintenant nous intéresser à l architecture du site et de ses diffé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 fichiers textes formatés en HTML ; ceux-ci sont destinés à être inclus par : acceuil.php pour le fichier acceuil.txt reglement.php pour le fichier reglement.txt toutes les pages incluent dans le bandeau de droite le fichier pub.php, qui est déstiné à promouvoir les produits de bien-être vendus par le client activite.php inclut les autres fichiers suivant la variable act passée en pa-

2. Conception et Réalisation 12 ramètre, ainsi http ://projet.octera.info/?page=activite&act=pension inclut la page activite.php qui à son tour inclut le fichier 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-même. Le nom des photo est modifié comme suis : mini ou photo suivant s il s agit de la miniature ou la photo. le timestamp 12 du moment auquel la photo a été envoyée sur le serveur. l extension.jpg Le dossier «Userfiles/Images» contient les fichiers envoyés à l aide de FCKEditor sur le serveur. Les fichiers portent dans leur grande majorité le nom de la fonction qu ils exécutent, nous allons néanmoins expliquer le but des autres fichiers : Le fichier form.php contient le formulaire présent dans la page coordonnées Le fichier mail.php est le fichier appelé par ce formulaire pour l envoi du mail avec le contenu de ce mail Les deux fichiers.js sont des fichiers JavaScript pour la mise en place et la configuration du menu déroulant Le fichier connect.php est un fichier qui est inclut par les pages présentes dans la section «Gazette» qui permet de se connecter à la base de données. 2.1.2 La partie administration A l instar de la partie visiteur, la partie administration est aussi générée par un système d inclusions récursives, c est-à-dire que l on choisit la page que l on veut modifier, et le script nous donne toutes les modifications que l on peut effectuer, chaque modification (fonctions) est un fichier du dossier de la page. Ainsi si l on veut ajouter une entrée dans les concours, nous irons chercher le fichier add.php dans le dossier concours. Voici l arborescence du dossier d administration :

2. Conception et Réalisation 13 Fig. 2.2 Arborescence du site d administration Par souci de confort visuel les fichiers index.htm, denied.php et sessions.php ne sont pas marqués dans tous les dossiers mais leur présence est effective. Les fichiers index.htm, denied.php et sessions.php sont présents dans tous les dossiers, dans l objectif de prévenir toutes tentatives de hack 13. Le fichier index.htm permet que si quelqu un rentre dans le dossier sans avoir précisé le nom d un fichier, celui-ci montrera une page vierge au lieu du contenu du dossier. Le fichier sessions.php est inclut au début de chaque fichier de la partie d administration, il a pour but de vérifier si la personne est bien identifiée et, si ce n est pas le cas, il redirige vers le fichier denied.php qui nous le fait savoir et nous ramène

2. Conception et Réalisation 14 au formulaire d identification. Nous allons maintenant voir de plus près le mécanisme de l interface d administration : Lorsqu on arrive sur l interface on se confronte à un formulaire de login 14, celui-ci permet que seules les personnes autorisées puissent accéder à la partie d administration. Une fois le login confirmé, nous arrivons à la liste des données que l on peut modifier, une fois la donnée choisie, par exemple «Concours» la page index.php inclut la page./concours/main.php. L adresse 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 l adresse suivante : http ://projet.octera.info/admin/index.php?page=concours&fct=add. Pour ce qui concerne la modification des activités, du bandeau de droite ainsi que de la page d accueil, toutes ces fonctions pointent vers le script./activite/- main.php qui prend en paramètre la page à modifier. Il envoie ensuite les données au fichier modpage.php qui les inscrit dans le fichier texte présent dans le dossier include. Le fichier login.php présent à la racine du dossier d administration permet de créer la session, alors que le fichier logout.php permet de la détruire. Le fichier functions.php contient quelques fonctions nécessaires au fonctionnement de l administration : connexion à la base de données, formatage de l heure et la date... Le FCKEditor est présent dans chaque page ou l on peut ajouter/modifier du contenu, sauf pour les sections photo et tarifs, où celui-ci est inutile. L éditeur est instancié 15 par quelques lignes de code qui font appel à d autres fichiers présents dans le dossier editor. Les fichiers de configuration de l éditeur sont présent à la racine du dossier d administration.

2. Conception et Réalisation 15 2.2 Le design Point important d un site Internet, la mise en page a connu quelques modifications 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 doléances du clients La première consigne pour la mise en page du site, était de le réaliser avec une mise en page particulière. Ainsi, nous devions préparer un site avec une mise en page «verticale». Le site que nous devions réaliser se présentait sous un format vertical, comme décrit sur le schéma ci-dessous (Voir Figure 2.3), avec un espace de publicité. Fig. 2.3 Maquette du site Le haut de page (header) devait contenir l image d une prairie verdoyante, d après les souhaits de l intéressé. Il devait aussi figurer le nom du centre équestre, Les écuries de la Véore. Le client désirait un menu déroulant (menu). Il fallait donc placer le menu sous le haut de page, et utiliser une disposition horizontale. Les différents éléments du

2. Conception et Réalisation 16 menu se déroulent lors du survol. Les couleurs du menu doivent se marier avec le contenu du texte, sans pour autant n y laisser aucune distinction. Enfin, dans la partie principale du texte, une petite section devait prendre place sur la droite de l écran pour permettre à l utilisateur de mettre une publicité sur le site (pub). Le contenu du texte doit quant à lui contenir un maximum d informations sans qu il soit utile d utiliser la scroll-bar 16. Le client désirait aussi un site en accord avec les couleurs de son centre équestre. Nous devions donc utiliser le bleu roi et le jaune comme couleurs prédominantes du site. 2.2.2 Nos compositions La première proposition de mise en page a été le plus possible proche des souhaits du client. Nous avons tout de même pris le soin de changer le bleu roi et le jaune en leurs équivalents pastel, ce qui nous a permis d avoir des couleurs plus agréables pour le regard. Le deuxième choix de notre initiative a été de mettre un fond vert foncé, qui reprendrait les couleurs de l image du haut de page. La mise en page créée a été la plus proche possible des choix du client, comme il est montré sur la figure 2.4 Cependant, cette mise en page ne nous satisfaisait pas, et au contraire, nous ne l aimions pas du tout. Nous avons donc pris la liberté de créer une autre mise en page, qui serait plus proche de celle que nous pensions la meilleure pour un tel site. L ancienne mise en page était en effet trop colorée, c est principalement ce qui nous a décidé à proposer autre chose. Nous avons donc conçu la mise en page présente plus bas (Voir figure 2.5), qui s est révélée meilleure, puisque le client nous a confié le soin de changer l ancienne mise en page, pour la remplacer par notre nouvelle proposition.

2. Conception et Réalisation 17 Fig. 2.4 Première version du site Fig. 2.5 Deuxième version du site

Conclusion Le projet Site web pour une association a donc été une réalisation pour quelqu un qui ne connaît pas les langages informatiques d Internet, ne rencontre aucun soucis, mais il doit pouvoir administrer son site très aisément. Nous avons dû pour cela utiliser des langages informatiques particuliers, ainsi que des applications particulières qui devaient intervenir dans la facilité d édition du site par le client. Parmi nos tâches, nous avons choisi d utiliser une arborescence spécifique, qui résume le nombre de choix technologiques que nous avons dû effectuer. Cela nous permet de modifier le code du site avec facilité, et d ajouter avec aisance diverses fonctionnalités. Nous pouvons aussi parler de notre code puisque nous avons confronté quelques langages de programmation, et choisi le plus adapté. Enfin, nous avons pris la peine de prendre des initiatives vis-à-vis du cahier des charges, en proposant spontanément des solutions différentes au client. Le projet Site web pour une association nous a permit de nous confronter à quelques exigences d un client, mais nous a aussi appris à proposer des solutions technologiques à quelqu un, en nous justifiant dans nos choix. Ce projet a aussi été bénéfique d un point de vue conception. Nous avons ainsi pu appliquer les consignes du cours d informatique à propos de l organisation du temps de travail, en répartissant de manière convenable les temps d analyse, de codage et de vérification des erreurs.

GLOSSAIRE 19 Glossaire 1 Bot : programme informatique pouvant éxecuter une tâche en autonomie 2 HTML : HyperText Markup Language, langage de mise en page pour les pages Web 3 PHP : Vient de l acronyme récursif PHP : Hypertext Preprocessor, langage permettant un dynamisme côté serveur pour les sites internet, celui-ci permet notamment de tirer des informations de bases de données ainsi que nombreuses autres fonctions 4 MySQL : langage et système de gestion de bases de données 5 Python : Language de programmation interprété 6 Header : Partie supérieure du site réservée au nom du site ainsi qu à une image 7 WYSIWYG : What You See Is What You Get littéralement : Ce que vous voyez est ce que vous obtenez. 8 Uploader : Action d envoyer des fichiers sur un serveur distant 9 Flash : Format propriétaire d animation et de programme éxecuté chez le client 10 $ GET : Variable PHP qui permet de récupérer des données dans la barre d adresse 11 HTTP : HyperText Transfer Protocol : Protocole utilisé par les serveurs web pour envoyer au client une page internet. 12 Timestamp : Methode de stockage de l heure sur un ordinateur, c est un nombre qui compte le nombre de secondes passées depuis le 1 Janvier 1970 à 1 heure du matin GMT +1 13 Hack : Action effectuer par une tierce personne, visant une machine, un site web,... en tentant de nuire à l intégrité de celui-ci, dans notre cas de modifier le contenu du site sans y avoir été autorisé. 14 Formulaire de login : formulaire permettant de s identifier auprès du site 15 Instancié : (Ici) placer dans la page 16 Scroll-bar : Ascenseur présent sur la droite de l explorateur

A. index.php de la partie visiteurs <?php i n c l u d e ( connect. php ) ; connect ( ) ; i f ( i s s e t ($ GET [ page ] ) ) $page=$ GET [ page ] ; e l s e $page= a c c u e i l ;?> <html> <head> <meta http equiv= Content Type content= t e x t /html ; c h a r s e t=i s o 8859 1 /> <link rel= 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> <script type= text/ j a v a s c r i p t > f u n c t i o n Go( ) return </ script> <script type= text/ j a v a s c r i p t src =./ exmplmenu var. js ></ script> <script type= text/ j a v a s c r i p t src =./menu com. js ></ script> <div class= wrap c l e a r f i x > <div class= header ><h1>les é c u r i e s de l a Véore</h1></div> <div class= menu id= nav ></div> <div class= c o n t a i n e r c l e a r f i x > <div class= news right c l e a r f i x id= news > <div class= news cnr top ><img src= images / c n r t l. g i f alt= corner width= 8 height= 8 class= cnr style= 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. txt ) ;?> <div class= news cnr bottom ><img src= images / c n r b l. g i f

A. index.php de la partie visiteurs 21 alt= corner width= 8 height= 8 class= cnr style= d i s p l a y : none /></div> </ div> <div class= content > <?php i f ( i s f i l e (. /. $page.. php ) ) i n c l u d e (. /. $page.. php ) ; e l s e echo La page demandée n e x i s t e pas ;?> </ div> </ div> </ div> </body> </html>

B. Page d affichage des photos <?php i f ( i s s e t ($ GET [ num ] ) ) $num = $ GET [ num ] ; e l s e $num = 1 ; $nombreimagepage = 1 6 ; i f ( $ r e t o u r = mysql query ( 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 ) ; $totalimage = $donnees [ nb images ] ; $nombrepages = c e i l ( $totalimage / $nombreimagepage ) ; i f ( $nombrepages==0) echo Pas de photo d i s p o n i b l e ; e l s e echo Page : ; for ( $ 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 id DESC LIMIT. $premierimage.,. $nombreimagepage ; i f ( $ a f f i m g=mysql query ( $ r e q a f f i m g ) ) $ i =0; $compt img =0; while ( $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 d affichage des photos 23 i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. jpg ) ) $ext =. jpg ; e l s e i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. png ) ) $ext =. png ; e l s e i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. g i f ) ) $ext =. g i f ; e l s e i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. jpeg ) ) $ext =. jpeg ; echo <a h r e f =./ photo / photo. $donnee [ timeexec ].. $ext. t a r g e t = blank ><img s r c =./ photo / mini. $donnee [ timeexec ].. jpg s t y l e = border : 2 px s o l i d #FFF; /></a> ; $compt img++; e l s e echo Erreur de chargement ;?>

C. Page d affichage des stages <?php?> <?php i f ($ GET [ h i s t o ]== 1 ) <script type= t e x t / j a v a s c r i p t > document. t i t l e = Ancien Stages ; </ script> <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> $date=time ( ) ; $requete= SELECT FROM s t a g e s WHERE date <. $date. ORDER BY date ASC ; $requete=mysql query ( $requete ) ; while ( $r=m y s q l f e t c h a r r a y ( $requete ) )?> <f i e l d s e t> <legend> <b><?php echo $r [ 1 ] ;?> &nbsp ;</b> </ legend> <?php echo $r [ 2 ] ;?><br /><br /> Expire l e : <?php echo date ( d/m/y, $r [ 3 ] ) ;?> à <?php echo date ( H: i, $r [ 3 ] ) ;?> </ f i e l d s e t> <?php?> e l s e <script type= t e x t / j a v a s c r i p t > document. t i t l e = Stages à venir ; </ script> <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 $date=time ( ) ; $requete= SELECT FROM s t a g e s WHERE date >. $date. ORDER BY date ASC ; $requete=mysql query ( $requete ) ; while ( $r=m y s q l f e t c h a r r a y ( $requete ) )?>

C. Page d affichage des stages 25?> <f i e l d s e t> <legend> <b><?php echo $r [ 1 ] ;?> &nbsp ;</b> </ legend> <?php echo $r [ 2 ] ;?><br /><br /> Expire l e : <?php echo date ( d/m/y, $r [ 3 ] ) ;?> à <?php echo date ( H: i, $r [ 3 ] ) ;?> </ f i e l d s e t> <?php

D. index.php de la partie administration <?php s e s s i o n s t a r t ( ) ; $user= coucou ; $pass= coucou ; i n c l u d e (. / f u n c t i o n s. php ) ; mysqlconnect ( ) ; i f ( i s s e t ($ GET [ page ] ) ) $page=$ GET [ page ] ; e l s e $page= admin ;?> <html> <head> <meta http equiv= Content Type content= t e x t /html ; c h a r s e t=i s o 8859 1 /> <link rel= 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 class= cont cellpadding= 0 cellspacing= 0 > <tr><td class= header colspan= 2 ></td></ tr> <tr><td class= menu colspan= 2 style= text a l i g n : c e n t e r ; > Administration du s i t e</td></ tr> <tr> <td class= texte > <?php i f ( i s s e t ($ POST [ V a l ider ] ) ) i f ($ POST [ user ]==$user && $ POST [ password ]==$pass ) $ SESSION [ l o g i n ]=True ; e l s e

D. index.php de la partie administration 27 p r i n t blabla ; $ l o g i n=false ; 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 ]==False ) ) i n c l u d e (. / logon. php ) ; e l s e i f (! ( i s s e t ($ GET [ page ] ) ) ) i n c l u d e (. / admin. php ) ; e l s e 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 ) ; e l s e i n c l u d e (. / denied. php ) ;?> </td> <td class= pub > <?php i n c l u d e (.. / i n c l u d e s /pub. txt ) ;?> </td> </ tr> </ table> </ center> </body> </html>

E. Page d ajout de nouvelle photos <a href= index. php >Retour à l index</a><br /><br /> <?php $timeexec=time ( ) ; $timeexec=s t r r e p l a c e (,, $timeexec ) ; i f ( i s s e t ($ POST [ submit ] ) ) i f ( $ FILES [ photo ] [ error ] > 0) $ e r r e u r = Erreur 3 : Erreur de t r a n s f e r t du f i c h i e r ; e l s e $ e x t e n s i o n s v a l i d e s = array ( 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 ( i n a r r a y ( $extension upload, $ e x t e n s i o n s v a l i d e s ) ) $nom =.. / photo / photo. $timeexec. ; switch ( $ FILES [ photo ] [ type ] ) case image/ jpeg : $nom = $nom.. jpg ; break ; case image/x ms bmp : $nom = $nom.. bmp ; break ; case image/ g i f : $nom = $nom.. g i f ; break ; case image/png : $nom = $nom.. png ; break ; d e f a u l t : d i e ( Extention 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 ( $ r e s u l t a t ) echo T r a n s f e r t r é u s s i <br> ; $ r e q a j o u t d b = INSERT INTO photo VALUES (,. $nom.,. $timeexec. ) ; i f ( mysql query ( $ r e q a j o u t d b ) ) echo photo correctement ajouté <br> ; e l s e echo Erreur ; i f ( i s f i l e (.. / photo / photo \. $timeexec. \. jpg ) ) $source = imagecreatefromjpeg (.. / photo / photo \. $timeexec. \. jpg ) ; e l s e i f ( i s f i l e (.. / photo / photo \. $timeexec. \. png ) ) $source = imagecreatefrompng (.. / photo / photo \. $timeexec. \. png ) ; e l s e i f ( i s f i l e (.. / photo / photo \. $timeexec. \. g i f ) ) $source = i m a g e c r e a t e f r o m g i f (.. / photo / photo \. $timeexec. \. g i f ) ; e l s e i f ( i s f i l e (.. / photo / photo \. $timeexec. \. jpeg ) ) $source =

E. Page d ajout de nouvelle photos 29 imagecreatefromjpeg (.. / photo / photo \. $timeexec. \. jpeg ) ; $ d e s t i n a t i o n = i m a g e c r e a t e t r u e c o l o r (100, 1 0 0 ) ; $ l a r g e u r s o u r c e = imagesx ( $source ) ; $hauteur source = imagesy ( $source ) ; $ 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, $source, 0, 0, 0, 0, $ l a r g e u r 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, $ l a r g e u r s o u r c e, $hauteur source ) ; imagejpeg ( $ d e s t i n a t i o n,.. / photo / mini \. $timeexec. \. jpg ) ; e l s e echo Erreur 1 : Erreur de t r a n s f e r t du f i c h i e r ; e l s e echo Erreur 2 : Erreur de v a l i d i t é du format de l image ; e l s e?> <form method= post action= index. php? page=photo&f c t=add enctype= multipart /form data > <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 d ajout d un 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 ) ) $postarray = &$ POST ; e l s e $postarray = &$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 ] ) ; $corps = 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 ) ; $requete= INSERT INTO s t a g e s ( id, t i t r e, cont, date ) VALUES ( NULL,. $ t i t r e.,. $corps.,. $time. ) ; ; i f ( mysql query ( $requete ) ) 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 http equiv= r e f r e s h content= 2 ; u r l =./ index. php? page=s t a g e s /> <script type= t e x t / j a v a s c r i p t > </ script> </head> <body margin top= 200 > <div> <div> <table cellspacing= 1 cellpadding= 0 border= 0 style= background : #CCC; align= center > <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 é avec s u c c é s</b><br />Merci de p a t i e n t e r pendant que nous vous t r a n s f&eacute ; rons...</div> <center><b>&middot ; <a href= index. 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 ttendre</a> &middot</b><center> </td> </ tr>

F. Page d ajout d un nouveau stage 31 <tr> </ tr> <td class= catend colspan= 2 ></td> </ table> </ div> </ div> </body> </html> ; e l s e p r i n t ERREUR DANS LA REQUETE MERCI DE REESAYER PLUS TARD. ;?>