Rapport de projet Site web pour une associationperso.octera.info/fic/dut_projet_rapport.pdf ·...

51, rue Barthelemy de Laffemas

BP 29

26901 Valence Cedex 9

Rapport de projetSite web pour une association

Annee 2006-2007

Bruno SABOT 1ere annee DUT R&T

Mathieu ROGER 2eme annee DUT R&T

Rapport realise avec LATEX

Table des matieres

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 utilises . . . . . . . . . . . . . . . . . . . . . 8

1.2.1 PHP / MySQL . . . . . . . . . . . . . . . . . . . . . . . . 8

1.2.2 FCKEditor . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Conception et Realisation 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 doleances 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 MATIERES 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 Premiere version du site . . . . . . . . . . . . . . . . . . . . . . . . 17

2.5 Deuxieme version du site . . . . . . . . . . . . . . . . . . . . . . . 17

Introduction

Le projet site web pour une association a ete choisi apres concertation avec

les professeurs d’informatique qui jugeaient nos precedentes idees trop difficiles a

realiser : tout d’abord le codage d’un portail de site Internet (installable facilement

et totalement administrable par l’utilisateur), un projet qui ressemblerait aux

systemes tels que Xoops ou Phpnuke, et ensuite un moteur de recherche, clairement

de meme type que Google ou Yahoo, avec la creation d’un bot1 qui parcourait,

seul, les pages Internet pour les referencer).

Nous avons donc choisit de garder notre idee de base, qui consistait en un projet

informatique, qui, pour plus de details etait de creer une application web et ainsi

choisir la proposition de M. Duccini, qui proposait aux etudiants de realiser un site

Internet pour une association, les ecuries de la Veore. Il existait d’autres projets

de site web, cependant, ceux-ci etaient des sites intranet, qui ne necessitaient pas

une mise en page agreable pour les utilisateurs et ils etaient destines a un nombre

de personnes limite.

Nous decrirons tout d’abord notre projet dans les grandes lignes, en definissant

clairement les objectifs que nous devions atteindre a l’issue de notre projet, en

continuant avec le cahier des charges, les differentes contraintes qui nous etaient

fixees, pour ensuite, expliquer quelles techniques de programmation, c’est a dire les

differents langages et quels outils exterieurs nous avons utilises pour la conception

du site, en les decrivant de maniere concise, avec leurs applications et leurs moyens

de fonctionnement.

Enfin, nous verrons en details nos methodes de conception et de realisation, la

maniere dont nous avons construit le site du projet, ce que nous avons du faire pour

la mise en page, et comment nous avons procede pour apprendre a l’utilisateur

comment administrer son site Internet.

1. Analyse et outils du projet

1.1 Description du projet

Le projet realise 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 rea-

liser un site internet pour l’association Les Ecuries de la Veore. Cette association

est un centre equestre situe a Beaumont-Les-Valence appartenant a Virginie et

Timothee MAURIN.

1.1.1 Objectifs

Nous devons realiser un site internet qui pourra etre en grande partie adminis-

trable par une personne n’ayant aucune connaissance technique dans les langages

du Web (HTML2/PHP3/MySQL4). Ce site doit etre donc aisement administrable,

grace a une interface simple et intuitive. Celui-ci devra bien entendu etre acces-

sible de l’exterieur, il a donc fallu se pencher aussi sur les differentes entreprises

d’hebergement et de nom de domaine existantes pour en selectionner une avec un

bon rapport qualite/prix.

De maniere plus technique, il nous a aussi fallu nous pencher sur le probleme

du langage de developpement, nous avions au choix le couple PHP/MySQL ou

Python5/MySQL. Apres une courte reflexion nous avons opte pour PHP/MySQL.

1.1.2 Cahier des charges

Apres avoir defini avec le tuteur et M. Timothee MAURIN les differents ob-

jectifs du site, nous avons etabli un rapide cahier des charges.

– Une fois le projet termine M. Timothee MAURIN doit etre capable d’admi-

nistrer le site seul.

– Ce projet ne doit poser aucun probleme quelconque au professeur tuteur,

1. Analyse et outils du projet 7

M. Duccini.

– L’interface d’administration doit etre intuitive et simple d’utilisation.

– La securite doit etre suffisamment presente afin que des personnes malinten-

tionnees ne puissent pas modifier le site.

– Le site doit posseder conformement aux demandes de M. Timothee MAURIN

un header6, une partie droite reservee a des « publicites »pour ses produits

de detentes ainsi qu’une partie gauche reservee aux donnees du site en lui-

meme.

– Celui-ci doit etre dans les tons jaune et bleu roi, nous avons decide de rendre

ces couleurs plus pales pour ne pas agresser l’oeil et de maniere a ameliorer

la lisibilite.


1.2 Techniques et Outils utilises

Dans cette partie nous allons detailler les differents outils utilises pour la reali-

sation du projet. Nous avons utilise le couple PHP/MySQL pour le developpement

du site, nous detaillerons dans les sous-parties les raisons de ce choix. Pour que

le site soit aisement modifiable nous avons egalement recherche un editeur WY-

SIWYG7 Nous avons opte pour l’editeur FCKEditor, nous expliquerons egalement

plus tard le choix de cet editeur.

L’ensemble du site a ete programme grace a Vim pour Mathieu et Notepad++

pour Bruno, aucun outil d’aide a la programmation n’a ete utilise, pour plusieurs

raisons : nous n’avons pas le droit d’installer des logiciels a l’Iut, la majorite des

editeurs convenables sont payants, et la plupart d’entre-eux ne sont pas compa-

tibles avec le PHP ou le gerent mal (Le logiciel ne gere pas les erreurs, ne donne

pas les descriptions des fonctions, ...)

1.2.1 PHP / MySQL

Nous avons choisi pour le developpement du projet le langage PHP, nous

l’avons prefere a Python car celui-ci est plus souvent present dans les offres d’he-

bergement ce qui nous permet d’avoir une plus grande compatibilite, de plus celui-

ci a ete cree principalement dans le but de coder des sites internet, contrairement a

Python qui est principalement utilise 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 gerer la partie administration notamment d’un

point de vue securite grace a l’utilisation des sessions.

En ce qui concerne le systeme de base de donnees la question ne s’est pas

beaucoup posee car dans la majorite des offres d’hebergement, seul MySQL est

propose, de ce fait nous sommes, en quelque sorte, contraints d’utiliser ce systeme.

Cela ne nous a pas beaucoup derange car comme nous avions deja cree plusieurs

sites en PHP/MySQL, nous connaissons donc assez bien ce systeme de base de

donnees et nous n’avons eu quasiment aucune difficulte a l’utiliser.


1.2.2 FCKEditor

Pour mener a 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

specifique, nous desirions aussi que celui-ci ne necessite aucune installation chez

le client, de maniere a 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 editeurs de texte classique tels que WORD, pour eviter que le

client ne soit depayse et que la prise en main de l’outil soit rapide. Bien sur,

celui-ci doit etre compatible avec la majorite des explorateurs et surtout Inter-

net Explorer et Mozilla Firefox. Nous ne l’avons pas developpe nous-meme, par

manque de temps et de connaissances, car la majorite de ces editeurs utilisent des

bibliotheques integrees aux differents explorateurs et systemes d’exploitation. Il

fallait aussi, bien entendu, que cet editeur soit gratuit.

Parmi ces exigences, plusieurs editeurs correspondaient : TinyMCE, TET (Text

Editor Tide), Xinha, Koivi et FCKEditor. Apres les tests de ces differents editeurs,

notre choix a porte sur FCKEditor, car celui-ci a toutes ses fonctions disponibles

sur la majorite des explorateurs et des systemes d’exploitation. De plus celui-ci

est celui qui, a notre gout, fait le code HTML le plus propre : les balises sont, dans

leurs grandes majorites, compatibles XHTML. De plus celui-ci permet d’uploader8

et de gerer des images et des fichiers flash9, d’inserer des tableaux, et de gerer les

couleurs d’arriere-plan des textes, ainsi que des formulaires. Nous avons decide de

desactiver cette derniere fonction car elle necessite un minimum de connaissance

en HTML, et nous avons juge que celle-ci serait inutile pour le client.

2. Conception et Realisation

Nous allons maintenant nous pencher sur la realisation du projet en lui-meme,

ainsi nous detaillerons la maniere dont nous avons ordonne les differents fichiers et

fonctions au sein de la partie publique ainsi que pour l’interface d’administration.

Dans un second temps, nous expliquerons la realisation de la charte graphique.

2.1 Le code

Dans cette section, nous allons voir la maniere dont nous avons ordonne les

differentes sections du site : tant au niveau fonctions, qu’au niveau de l’arbores-

cence. 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 presente l’arborescence de la partie visible par les visiteurs :

La generation des pages par PHP est faite par un mecanisme d’inclusion,

c’est-a-dire que lorsqu’on accede a 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 me-

thode du protocole HTTP11 qui consiste a faire passer la variable en clair dans la

barre d’adresse, ainsi, dans notre cas, si on veut acceder a la page « concours »

l’adresse sera : http ://projet.octera.info/ ?page=concours si le site est heberge sur

le serveur http ://projet.octera.info.

2. Conception et Realisation 11

Fig. 2.1 – Arborescence du site visible par les visiteurs

Nous allons maintenant nous interesser a l’architecture du site et de ses diffe-

rentes fonctions. Nous ne traiterons pas dans cette section le dossier « admin »,

celui-ci sera explique dans la partie suivante. Le dossier « includes » contient des

fichiers textes formates en HTML ; ceux-ci sont destines a etre 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 destine a promouvoir les produits de bien-etre vendus par le client

– activite.php inclut les autres fichiers suivant la variable act passee en pa-


rametre, ainsi http ://projet.octera.info/ ?page=activite&act=pension inclut

la page activite.php qui a 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-meme. Le nom des photo

est modifie comme suis :

– mini ou photo suivant s’il s’agit de la miniature ou la photo.

– le timestamp12 du moment auquel la photo a ete envoyee sur le serveur.

– l’extension .jpg

Le dossier « Userfiles/Images » contient les fichiers envoyes a l’aide de FCKEditor

sur le serveur.

Les fichiers portent dans leur grande majorite le nom de la fonction qu’ils

executent, nous allons neanmoins expliquer le but des autres fichiers :

– Le fichier form.php contient le formulaire present dans la page coordonnees

– Le fichier mail.php est le fichier appele 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 deroulant

– Le fichier connect.php est un fichier qui est inclut par les pages presentes

dans la section « Gazette » qui permet de se connecter a la base de donnees.

2.1.2 La partie administration

A l’instar de la partie visiteur, la partie administration est aussi generee par un

systeme d’inclusions recursives, c’est-a-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 entree dans les concours, nous irons chercher le fichier add.php

dans le dossier concours. Voici l’arborescence du dossier d’administration :


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 marques dans tous les dossiers mais leur presence est effective.

Les fichiers index.htm, denied.php et sessions.php sont presents dans tous les

dossiers, dans l’objectif de prevenir toutes tentatives de hack13. Le fichier in-

dex.htm permet que si quelqu’un rentre dans le dossier sans avoir precise le nom

d’un fichier, celui-ci montrera une page vierge au lieu du contenu du dossier. Le

fichier sessions.php est inclut au debut de chaque fichier de la partie d’adminis-

tration, il a pour but de verifier si la personne est bien identifiee et, si ce n’est pas

le cas, il redirige vers le fichier denied.php qui nous le fait savoir et nous ramene


au formulaire d’identification.

Nous allons maintenant voir de plus pres le mecanisme de l’interface d’adminis-

tration : Lorsqu’on arrive sur l’interface on se confronte a un formulaire de login14,

celui-ci permet que seules les personnes autorisees puissent acceder a la partie d’ad-

ministration. Une fois le login confirme, nous arrivons a la liste des donnees que

l’on peut modifier, une fois la donnee 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 activites, du bandeau de droite ainsi

que de la page d’accueil, toutes ces fonctions pointent vers le script ./activite/-

main.php qui prend en parametre la page a modifier. Il envoie ensuite les donnees

au fichier modpage.php qui les inscrit dans le fichier texte present dans le dossier

include.

Le fichier login.php present a la racine du dossier d’administration permet de

creer la session, alors que le fichier logout.php permet de la detruire. Le fichier

functions.php contient quelques fonctions necessaires au fonctionnement de l’ad-

ministration : connexion a la base de donnees, formatage de l’heure et la date

...

Le FCKEditor est present dans chaque page ou l’on peut ajouter/modifier du

contenu, sauf pour les sections photo et tarifs, ou celui-ci est inutile. L’editeur est

instancie 15 par quelques lignes de code qui font appel a d’autres fichiers presents

dans le dossier editor. Les fichiers de configuration de l’editeur sont present a la

racine du dossier d’administration.


2.2 Le design

Point important d’un site Internet, la mise en page a connu quelques modifi-

cations 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 doleances du clients

La premiere consigne pour la mise en page du site, etait de le realiser avec une

mise en page particuliere. Ainsi, nous devions preparer un site avec une mise en

page « verticale ». Le site que nous devions realiser se presentait sous un format

vertical, comme decrit sur le schema ci-dessous (Voir Figure 2.3), avec un espace

de publicite.

Fig. 2.3 – Maquette du site

Le haut de page (header) devait contenir l’image d’une prairie verdoyante,

d’apres les souhaits de l’interesse. Il devait aussi figurer le nom du centre equestre,

Les ecuries de la Veore.

Le client desirait un menu deroulant (menu). Il fallait donc placer le menu sous

le haut de page, et utiliser une disposition horizontale. Les differents elements du


menu se deroulent 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’ecran pour permettre a l’utilisateur de mettre une publicite sur

le site (pub).

Le contenu du texte doit quant a lui contenir un maximum d’informations sans

qu’il soit utile d’utiliser la scroll-bar16. Le client desirait aussi un site en accord

avec les couleurs de son centre equestre. Nous devions donc utiliser le bleu roi et

le jaune comme couleurs predominantes du site.

2.2.2 Nos compositions

La premiere proposition de mise en page a ete le plus possible proche des

souhaits du client. Nous avons tout de meme pris le soin de changer le bleu roi et

le jaune en leurs equivalents pastel, ce qui nous a permis d’avoir des couleurs plus

agreables pour le regard.

Le deuxieme choix de notre initiative a ete de mettre un fond vert fonce, qui

reprendrait les couleurs de l’image du haut de page.

La mise en page creee a ete la plus proche possible des choix du client, comme

il est montre 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 liberte de creer 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 etait en effet trop coloree, c’est principalement ce

qui nous a decide a proposer autre chose.

Nous avons donc concu la mise en page presente plus bas (Voir figure 2.5), qui

s’est revelee meilleure, puisque le client nous a confie le soin de changer l’ancienne

mise en page, pour la remplacer par notre nouvelle proposition.


Fig. 2.4 – Premiere version du site

Fig. 2.5 – Deuxieme version du site

Conclusion

Le projet Site web pour une association a donc ete une realisation pour quel-

qu’un qui ne connaıt pas les langages informatiques d’Internet, ne rencontre au-

cun soucis, mais il doit pouvoir administrer son site tres aisement. Nous avons du

pour cela utiliser des langages informatiques particuliers, ainsi que des applica-

tions particulieres qui devaient intervenir dans la facilite d’edition du site par le

client. Parmi nos taches, nous avons choisi d’utiliser une arborescence specifique,

qui resume le nombre de choix technologiques que nous avons du effectuer. Cela

nous permet de modifier le code du site avec facilite, et d’ajouter avec aisance

diverses fonctionnalites. Nous pouvons aussi parler de notre code puisque nous

avons confronte quelques langages de programmation, et choisi le plus adapte.

Enfin, nous avons pris la peine de prendre des initiatives vis-a-vis du cahier des

charges, en proposant spontanement des solutions differentes au client.

Le projet Site web pour une association nous a permit de nous confronter a

quelques exigences d’un client, mais nous a aussi appris a proposer des solutions

technologiques a quelqu’un, en nous justifiant dans nos choix. Ce projet a aussi

ete benefique d’un point de vue conception. Nous avons ainsi pu appliquer les

consignes du cours d’informatique a propos de l’organisation du temps de tra-

vail, en repartissant de maniere convenable les temps d’analyse, de codage et de

verification des erreurs.

GLOSSAIRE 19

Glossaire

1 Bot : programme informatique pouvant executer une tache en autonomie2 HTML : HyperText Markup Language, langage de mise en page pour les pages Web3 PHP : Vient de l’acronyme recursif PHP : Hypertext Preprocessor, langage permettant un

dynamisme cote serveur pour les sites internet, celui-ci permet notamment de tirer des informa-

tions de bases de donnees ainsi que nombreuses autres fonctions4 MySQL : langage et systeme de gestion de bases de donnees5 Python : Language de programmation interprete6Header : Partie superieure du site reservee au nom du site ainsi qu’a une image7 WYSIWYG : What You See Is What You Get litteralement : Ce que vous voyez est ce que

vous obtenez.8Uploader : Action d’envoyer des fichiers sur un serveur distant9Flash : Format proprietaire d’animation et de programme execute chez le client

10$ GET : Variable PHP qui permet de recuperer des donnees dans la barre d’adresse11HTTP : HyperText Transfer Protocol : Protocole utilise par les serveurs web pour envoyer

au client une page internet.12Timestamp : Methode de stockage de l’heure sur un ordinateur, c’est un nombre qui compte

le nombre de secondes passees depuis le 1 Janvier 1970 a 1 heure du matin GMT +113Hack : Action effectuer par une tierce personne, visant une machine, un site web, ... en

tentant de nuire a l’integrite de celui-ci, dans notre cas de modifier le contenu du site sans y

avoir ete autorise.14Formulaire de login : formulaire permettant de s’identifier aupres du site15Instancie : (Ici) placer dans la page16Scroll-bar : Ascenseur present sur la droite de l’explorateur

A. index.php de la partie

visiteurs

<?phpinc lude ( ’ 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=”text /html ;cha r s e t=i so −8859−1” />

<l ink rel=” s t y l e s h e e t ” type=”text / 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 unc t i on Go(){ re turn }</ script><script type=’text/ j a v a s c r i p t ’ src = ’./ exmplmenu var . j s ’></ script><script type=’text/ j a v a s c r i p t ’ src = ’./menu com . j s ’></ script>

<div class=”wrap c l e a r f i x ”>

<div class=”header ”><h1>Les e c u r i e s de l a Veore</h1></div><div class=”menu” id=”nav ”></div>

<div class=”conta ine r c l e a r f i x ”><div class=”news r ight 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>

<?phpinc lude ( ” . / 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 ”>

<?phpi f ( i s f i l e ( ’ . / ’ . $page . ’ . php ’ ) )

{i n c lude ( ’ . / ’ . $page . ’ . php ’ ) ;}

e l s e{echo ”La page demandee n ’ e x i s t e pas ” ;}

?></div></div>

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

B. Page d’affichage des photos

<?phpi f ( i s s e t ($ GET [ ’num ’ ] ) ){

$num = $ GET [ ’num ’ ] ;}e l s e{

$num = 1 ;}$nombreImagePage = 16 ;i f ( $ r e tour = mysql query ( ’SELECT COUNT(∗ ) AS nb images FROM photo ’ ) )

{}e l s e { $re tour =0;}$donnees = mysq l f e t ch a r ray ( $re tour ) ;$tota l Image = $donnees [ ’ nb images ’ ] ;$nombrePages = c e i l ( $tota l Image / $nombreImagePage ) ;i f ( $nombrePages==0)

{echo ’ Pas de photo d i spon ib l e ’ ;}

e l s e{echo ”Page : ” ;for ( $ i = 1 ; $ i <= $nombrePages ; $ i++){

echo ’ <a href=”? page=photos&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 img=mysql query ( $ r e q a f f i m g ) )

{$ i =0;$compt img=0;whi l e ( $donnee=mysq l f e t ch a r ray ( $a f f img ) )

{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 [ ’ t imeexec ’ ]

. ’ \ ’ . jpg ’ ) ) { $ext = ’. jpg ’ ; }e l s e i f ( i s f i l e ( ’ . / photo/ photo \ ’ ’ . $donnee [ ’ t imeexec ’ ]

. ’ \ ’ . png ’ ) ) { $ext = ’.png ’ ; }e l s e i f ( i s f i l e ( ’ . / photo/ photo \ ’ ’ . $donnee [ ’ t imeexec ’ ]

. ’ \ ’ . g i f ’ ) ) { $ext = ’. g i f ’ ; }e l s e i f ( i s f i l e ( ’ . / photo/ photo \ ’ ’ . $donnee [ ’ t imeexec ’ ]

. ’ \ ’ . jpeg ’ ) ) { $ext = ’. jpeg ’ ; }echo ” <a h r e f =./ photo/photo ’ ” . $donnee [ ’ t imeexec ’ ]

. ” ’ ” . $ext . ” t a r g e t =’ blank ’><img s r c =./ photo/ mini ’ ”

. $donnee [ ’ t imeexec ’ ] . ” ’ . 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

<?phpi f ($ GET [ ’ h i s to ’ ]== ’1 ’) {

?><script type=”text / j a v a s c r i p t ”>

document . t i t l e =’Ancien Stages ’ ;</ script><a href=”? page=stage ”>Voir l e s s t a g e s a ven i r</a>

<?php$date=time ( ) ;$ requete=”SELECT ∗ FROM s t a g e s WHERE date < ”. $date . ” ORDER BY date ASC” ;$requete=mysql query ( $requete ) ;

whi l e ( $r=mysq l f e t ch a r ray ( $requete ) ) {?>

<f i e ldset><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 ] ) ; ?> a<?php echo date ( ’H: i ’ , $r [ 3 ] ) ; ?>

</ f i e ldset><?php}

} e l s e {?>

<script type=”text / j a v a s c r i p t ”>document . t i t l e =’ Stages a venir ’ ;</ script><a href=”? page=stage&h i s t o=1”>Voir l e s anc i ens 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 ) ;

whi l e ( $r=mysq l f e t ch a r ray ( $requete ) ) {?>

C. Page d’affichage des stages 25

<f i e ldset><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 ] ) ; ?>a <?php echo date ( ’H: i ’ , $r [ 3 ] ) ; ?>

</ f i e ldset><?php}}

?>

D. index.php de la partie

administration

<?phps e s s i o n s t a r t ( ) ;$user=”coucou ” ;$pass=”coucou ” ;

i n c lude ( ’ . / 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=”text /html ;cha r s e t=i so −8859−1” />

<l ink rel=” s t y l e s h e e t ” type=”text / 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 en te r ; ”>

Administrat ion du s i t e</td></ tr><tr>

<td class=”tex t e ”><?php

i f ( i s s e t ($ POST [ ”Va 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

{pr in t ”b lab la ” ;$ 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 lude ( ” . / logon . php ” ) ;}

e l s e{i f ( ! ( i s s e t ($ GET [ ’ page ’ ] ) ) )

{i n c lude ( ” . / admin . php ” ) ;}

e l s e{i f ( f i l e e x i s t s ( ” . / ” . $ GET [ ”page ” ] . ” . php ”) )

{i n c lude ( ” . / ” . $ GET [ ”page ” ] . ” . php ” ) ;}

e l s e{i n c lude ( ” . / denied . php ” ) ;}

}}

?></td><td class=”pub ”><?phpinc lude ( ” . . / 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 a l ’ index</a><br /><br /><?php$timeexec=time ( ) ;$t imeexec=s t r r e p l a c e ( ’ ’ , ’ ’ , $t imeexec ) ;i f ( i s s e t ($ POST [ ’ submit ’ ] ) ){i f ( $ FILES [ ’ photo ’ ] [ ’ error ’ ] > 0){ $e r r eu 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’ ) ;$extens ion up load = subs t r ( s t r r c h r ( $ FILES [ ’ photo ’ ] [ ’ name ’ ] , ’ . ’ )

, 1 ) ;i f ( i n a r r a y ( $extens ion upload , $ e x t e n s i o n s v a l i d e s ) ){$nom = ” . . / photo/photo ’ ” . $t imeexec . ” ’ ” ;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 = move up loaded f i l e ( $ FILES [ ’ photo ’ ] [ ’ tmp name ’ ] , $nom ) ;i f ( $ r e s u l t a t ){echo ”Trans f e r t r e u s s i <br>” ;$ req a jout db =’INSERT INTO photo VALUES( ”” , ” ’ . $nom . ’ ” , ” ’ . $t imeexec . ’ ” ) ’ ;i f ( mysql query ( $req a jout db ) ){ echo ”photo correctement ajout e<br>” ; }e l s e { echo ”Erreur ” ; }i f ( i s f i l e ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . jpg ’ ) ) { $source =imagecreate f romjpeg ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . jpg ’ ) ; }e l s e i f ( i s f i l e ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . png ’ ) ) { $source =imagecreatefrompng ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . png ’ ) ; }e l s e i f ( i s f i l e ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . g i f ’ ) ) { $source =imagec r ea t e f romg i f ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . g i f ’ ) ; }e l s e i f ( i s f i l e ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . jpeg ’ ) ) { $source =

E. Page d’ajout de nouvelle photos 29

imagecreate f romjpeg ( ’ . . / photo/ photo \ ’ ’ . $t imeexec . ’ \ ’ . 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 ) ;$haut eu r de s t i na t i on = imagesy ( $ d e s t i n a t i o n ) ;imagecopyresampled ( $de s t ina t i on , $source , 0 , 0 , 0 , 0 ,$ l a r g e u r d e s t i n a t i o n , $hauteur de s t ina t i on ,$ l a rg eu r sou r c e , $hauteur source ) ;imagejpeg ( $de s t ina t i on , ’ . . / photo/ mini \ ’ ’ . $t imeexec . ’ \ ’ . 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 e du format de l ’ image ” ;}

}}e l s e {}?><form method=”post ” action=”index . php? page=photo&f c t=add ”enctype=”mult ipart /form−data ”><input type=” f i l e ” name=”photo ” id=”photo ” value=”Photo ”/><br /><input type=”submit ” name=”submit ” value=”Ajouter l a photo ” /></form>

F. Page d’ajout d’un nouveau

stage

<?phpinc lude ( ’ . / 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 = st r2 t ime ($ 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 ) ) {

pr in 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=”text / 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=”cente r ”>

<tr><td>Merci de p a t i e n t e r . . .</td>

</ tr><tr>

<td><div>

<b>Le s tage a e t e i n s e r eavec succ e s</b><br />Merci de p a t i e n t e r pendantque 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 is i vous ne souha i t e z pas at tendre</a>

&middot</b><center></td>

</ tr>

F. Page d’ajout d’un nouveau stage 31

<tr><td class=”catend ” colspan=”2 ”></td>

</ tr>

</ table></div></div>

</body></html> ’ ;} e l s e {

pr in t ”ERREUR DANS LA REQUETE MERCI DE REESAYER PLUS TARD. ” ;}?>

Rapport de projet Site web pour une associationperso.octera.info/fic/dut_projet_rapport.pdf ·...

Documents

Transcript of Rapport de projet Site web pour une associationperso.octera.info/fic/dut_projet_rapport.pdf ·...