CMS et groupes de musique

Travail présenté en vue de l’obtention du titre de bachelier en techniques graphiques,

finalité techniques infographiques • Haute École de La Province de Liège Rennequin Sualem
Delnatte Pierre-Antoine • 2006-2007
 « Enfin, vous vouliez faire quoi ?
– Un pont à partir d’une gamme de mi pentatonique qui utilise la septième
majeure comme note de passage », répondit le doyen.
L’archichancelier examina la page ouverte.
« Mais je lis ici Première leçon : Au clair de la lune, dit-il.
– Hum, hum, hum, j’étais un peu impatient, confessa le doyen.
– Vous avez jamais été doué en musique, doyen. C’est un de vos bons côtés. »
Accros du roc, Terry Pratchett

CMS et groupes de musique

Travail présenté en vue de l’obtention du titre de bachelier en techniques graphiques,

finalité techniques infographiques • Haute École de La Province de Liège Rennequin Sualem
Delnatte Pierre-Antoine • 2006-2007
Introduction 1

1. Les sites de groupe 3

MySpace et cie 4
Un site web vraiment personnel, c’est mieux... 4

2. fish in a pan : l’idée et les objectifs 6

Enquête préliminaire 6
Les personnes sondées 7
Les personnes sondées et les sites de groupe. 8
Les attentes des personnes sondées envers un site de groupe. 8
Un projet sans nom 9
Un nom, des objectifs 9

3. Concevons un poisson : le développement de fish in a pan 10

3.1 Les ingrédients 10
Le public visé 10
Les technologies requises par le système 10
Les outils 11
Les objectifs à atteindre 12
3.2 La recette 12
3.3 Mi-temps 12
3.4 Le retour du poisson surgelé 13

4. Anatomie d’un poisson 15

4.1 Les modèles 15
Petit rappel rapide sur les objets 15
 4.1.1 L’objet Element 16
L’objet User 16
4.1.2 L’objet Config 17
4.1.3 L’objet Multiple 17
4.1.4 L’objet Uploaded 18
L’objet Image 18
4.1.5 Les autres objets 19
4.2 Les contrôleurs 19
4.3 Les vues 19
4.4 Structure globale 20

5. La tête dans le poisson 21

5.1 Le script d’installation 21
5.2 La zone d’administration 22
5.2.1 Répartition des modules dans la zone d’administration 22
5.2.2 Le module de connexion 22
5.2.3 Le tableau de bord 23
5.2.3.1 Chat privé et notifications 23
5.2.4 Le groupe 24
5.2.4.1 Les membres 24
5.2.4.2 Les intervenants 25
5.2.4.3 La biographie 26
5.2.4.4 La discographie 26
5.2.4.5 Les textes des morceaux 27
5.2.5 Média 27
5.2.5.1 Les galeries de photos 28
5.2.5.2 Les médias audios 29
5.2.5.3 Les médias vidéos 29
5.2.6 Le site 30
5.2.6.1 Les news 30
5.2.6.2 L’agenda 31
 5.2.6.3 Le blog 31
5.2.6.4 Le livre d’or 32
5.2.6.5 Le formulaire de contact 33
5.2.6.6 Les liens 33
5.2.7 Configuration 33
5.2.7.1 Les préférences utilisateurs 33
5.2.7.2 Paramètres des modules 34
5.2.7.3 Les paramètres du système 34
5.2.7.4 Système antispam 34
5.2.7.5 Utilitaire de base de données 35
5.3 La zone publique 36
5.3.1 Les thèmes 36
5.3.2 Les flux RSS 36
5.4 Les modules abandonnés 36
5.5 Captures d’écrans 37

6. Un poisson dans la mer 38

6.1 Le site de fish in a pan 38
6.2 La sortie publique 38
6.3 Le prix de fish in a pan 38
6.4 L’équipe fish in a pan 39
6.5 La communauté 39

Conclusion 40

Bibliographie & références

Annexes

Abstract
 nternet est une invention formida-
ble.
Et quand Internet est entré dans ma vie,
à l’époque où il fallait presque penser à
pédaler pour que les pages s’affichent
plus vite, il ne payait pas de mine.
Et pourtant, Internet a révolutionné
bien des choses, à commencer par le
fait que j’ai pu trouver une orientation
de vie qui me tentait : créer des sites
web. Ma passion pour l’infographie est
venue par la suite.
Après quelques années d’expériences,
seul, puis en cours à l’INPRES, nous en
arrivons à ce PFE, qui réunit mes deux
passions : la musique et le web.
Mon PFE parle donc de musique et de
sites web, et plus particulièrement du
développement de mon projet : conce-
voir un moteur de sites internet sim-
ple, mais complet, pour permettre à
des groupes de musique de créer sans
peine leur site.
Après un petit état des lieux des sites
de groupe sur le net, je vous explique-
rai pourquoi avoir choisi ce sujet en
particulier.
Je développerai ensuite l’idée en tant
que telle et les techniques employées
pour arriver à mes fins.
Je vous emmènerai enfin, plonger la
tête la première dans une visite guidée
du système.
J’essaierai autant que possible de ne
pas faire l’impasse sur l’essentiel, sans
pour autant vous perdre dans des ex-
plications à rallonge.
Avant de nous lancer dans le vif du
sujet, j’aimerais profiter des dernières
lignes de cette introduction pour quel-
ques remerciements :

<mode=”ecole des fans”>

Je voudrais tout d’abord remercier mon papa et ma maman (qui sont au fond
de la salle avec le caméscope), pour leur incommensurable patience (et il en
faut).
Ensuite, un grand merci à mes professeurs, et en particulier à Pierre Worontzoff
qui m’a appris à être clair et propre dans mes codes et à Dominique Vilain pour
aller chercher la p’tite bête là où je croyais à chaque fois bien l’avoir cachée...
Je m’en voudrais (et lui aussi) d’oublier Xavier Spirlet, qui, avant d’être mon
maître de stage, m’a toujours soutenu (à moi l’oscar !) tout au long de ses trois
années de cours.
Je ne peux, non plus, oublier l’équipe entière de VAlain S.A. de Wiltz au
Luxembourg, qui ont bien voulu me recueillir pour un bout de stage de trois
semaines, extrêmement enrichissant pour moi, autant pour l’aspect humain que
technique.
Un grand merci à Oli, k et Ben, avec qui j’ai fondé Meguiddo, ce par quoi tout a
commencé... (ou au moins fish in a pan) Merci les gars.
Un super merci à mon p’tit frère, pour tout ce qu’il fait, pour les critiques et les
longues conversations animées lors des balades du soir, débattant des heures
sur un bout de code ou une icône que chacun voulait voir ailleurs que là où
l’autre l’avait mis.
Et enfin, last but not least (et si je l’oublie elle me frappe), un immense merci
à ma “mademoiselle à moi”, qui a passé ces deux derniers mois à me voir plus
souvent derrière mon écran que devant elle, ce qui est bien dommage puisqu’elle
est bien plus jolie que ma machine (qui, pourtant, est un mac !)...
Et coucou à tout ceux que j’oublie.
</mode>

Bon. Et si on commençait ?
 nternet, comme je le disais dans
l’introduction, est un outil formidable.
Je ne suis bien sûr pas le seul à avoir re-
marqué que dès qu’une invention peut
rapporter de l’argent, elle est bien vite
utilisée à des fins commerciales, même
si son but premier ne l’était pas.
Et donc, Internet a été le synonyme
d’un bond en avant pour bien des sec-
teurs, dont le cinéma, le piratage...et
la musique.
Progressivement, tous les groupes
“connus” de la planète ont compris (ou
plutôt leurs agents de communication)
qu’il leur fallait être présents sur Inter-
net.
Le web progressant à grand pas, de
newsgroup en forums et de chat en
youtube et consors, les petits groupes
s’y sont mis eux aussi.
Sur Internet, on peut se faire beaucoup
de pub, et surtout pour pas cher.
Bien des groupes en ont profité, racon-
tant à qui veut l’entendre qu’ils ont dé-
buté grâce à la diffusion sur un quel-
conque réseau peer-to-peer de leur
maquette ; de grands groupes orches-
trant même discrètement ce genre de
“fuite” pour faire un coup de pub sur
leur prochain album.
Il est un fait que le web est un outil de
communication (et donc de pub) sans
frontière, où des stars se font et se dé-
font chaque jour.
Mais si les grands groupes peuvent
facilement se payer des sites internet
conçus par de grandes boites renom-
mées avec des animations flash hautes
en couleurs et des campagnes marke-
ting Internet impressionantes, pour
les petits groupes, la réalité est toute
autre.
Intéressons-nous donc aux possibili-
tés offertes aux petits groupes, qui,
conscients des potentiels d’Internet, se
décident à essayer de s’y montrer en
se créant un site.
Science du buzz web
Le groupe Nine Inch
Nails (www.nin.com), a
volontairement “perdu” une
clé USB contenant une copie
du clip de leur futur single
lors d’un concert en mars
2007.
Ce sont eux aussi qui
permettent à leurs fans de
télécharger les sources de
leurs morceaux au format
GarageBand afin qu’ils créent
leurs propres remixes.
 MySpace et cie
le tout-fait pseudo-communautaire
Depuis quelques mois, dans le monde
musical, c’est le mot à la mode.
MySpace est un site communautaire,
où chaque membre peut se créer une
sorte de blog, avec comme particularité
la possibilité de mettre en ligne un
jukebox avec ses morceaux (ou ceux
des autres, ce qui n’est pas sans faire
réagir les Majors du disque).
Les avantages de MySpace sont nom-
breux : robuste, relativement fiable,
extrêmement fréquenté (plus de 90
millions d’utilisateurs inscrits à la date
de juillet 2006 selon l’article Wikipé-
dia). La plupart des groupes, grands
comme petits, s’y sont mis.
Mais MySpace n’est pas exempt de dé-
fauts : il est laid. Bien sûr, c’est subjec-
tif. Son organisation ne permet pas de
le rendre assez beau pour que chaque
groupe puisse y inscrire son identité
propre. Donc, 90% des MySpace sont
sur fond noir, avec un petit logo et une
photo, un jukebox à droite et un liste
d’amis juste en-dessous. Pour sortir du
lot, ce n’est pas facile, facile. D’ailleurs,
la fréquentation de MySpace n’est pas
non plus qu’un avantage : pour se faire
entendre, il faut vraiment avoir de la
chance, tant le nombre de groupes uti-
lisant MySpace est énorme.
MySpace n’est pas le seul site com-
munautaire à proposer ce genre de
services, mais il est de loin le plus re-
présentatifs des qualités, et surtout
des défauts, des sites communautaires
pour les groupes.
Un site web vraiment
personnel, c’est mieux...
MySpace
mais pas plus facile. http://www.myspace.com
Bien sûr, la seconde solution, c’est
d’avoir un site web dédié à son groupe,
qui ne parle que de lui et qui collera au
mieux à son identité.
Le premier problème rencontré, outre
l’aspect technique que nous aborderons
très vite, c’est que le web est grand.
Il faut se faire une raison : le nombre
de visiteurs qu’un groupe amènera de
nulle part sur son site sera, au début, MySpace sur wikipédia
relativement nul. Comme pour tout,
http://fr.wikipedia.org/
l’idée est de faire son nid, petit à petit,
wiki/Myspace
sur Internet, en se servant des forums,
chats, mailing-list et de tous les outils
possibles et imaginables sur le net (et
en dehors) pour faire la pub licité du
groupe.
Internet ne peut qu’aider un groupe à
se faire connaître, ce n’est que rare-
ment une fin en soit.
Le deuxième problème soulevé par la
création d’un site web pour un groupe,
c’est la création en elle-même. On dé-
gage ici deux tendances :
• C’est un peu cher, mais tant pis,
on paie : pour un petit groupe dé-
butant (et même plus), la solution de
payer une société pour se faire créer
un premier site web est de loin la
moins utilisée, car la plus onéreuse.
Il ne faut pas oublier une chose : la
 musique des débutants est rarement site de mon groupe, et permettait à
rentable dès le début. mes collègues musiciens d’éditer les
• “J’ai un ami qui connait un type news, l’agenda et de modérer le livre
qui pourrait...” est la solution la d’or de notre site.
plus utilisée par la plupart des petits Progressivement, les fonctions se sont
groupes : le bon vieux “Do it yourself”. améliorées, et la possibilité de faire de
Ici, c’est au petit bonheur la chance : cette idée un vrai projet scolaire m’a
on s’y connait ou on ne s’y connait poussé à le reprendre de zéro, et d’en
pas, et donc le résultat est souvent faire un système plus costaud, polyva-
loin des attentes du groupe. lent et apte à s’adapter aux exigences
Au final, on en arrive à un problème qu’attendent les groupes qui souhai-
simple et vieux comme le web : on a un tent se lancer dans la grande aventure
site qui est super au début, mais qu’il de la création d’un site web.
faut maintenir à jour. Et quand person-
ne dans le groupe ne sait manier les ar-
canes sombres et mystérieuses (quoi,
j’exagère ?) du web, le groupe passe à
côté d’un chouette outil de communi-
cation. Ce fait lui sera souvent repro-
ché en concert : “- Je suis venu parce
que j’ai vu votre affiche par hasard,
pourquoi n’aviez-vous pas annoncé ce
concert sur votre site ?”.
C’est ainsi que certains groupes dé-
tournent à grand peine des outils de
blog ou de gestion de site web pour
en faire leur site, rencontrant en che-
min toutes les misères de monde pour
adapter un système qui au départ n’est
pas fait pour gérer un site de groupe de
musique.
Afin d’éviter ces désagréments, lors-
que moi-même j’ai été amené à créer
le site de mon premier groupe, m’est
venue l’idée de mettre en place un sys-
tème de site personnalisable et adapté
aux besoins des groupes de musique.
Dans un premier temps, cette idée est
restée egoïstement appliquée au seul

idée de réaliser un système per-
mettant aux groupes de créer leur
propre site web, personnalisable mais
surtout évolutif et simple à maintenir à
jour était donc née.
Mais telle quelle, l’idée est assez mai-
gre. Encore fallait-il définir ce qu’il en
serait, et savoir ce que devrait contenir
ce système.
Me basant sur ma propre expérience de
musicien et de créateur de sites web,
j’ai vite dressé une première liste de
ce que devait absolument permettre ce
système :
• La gestion de l’actualité du groupe.
• La gestion de son agenda.
• La biographie et la présentation du
groupe.
• La possibilité de mettre en ligne des
extraits sonores, vidéos et photos du
groupe.
• Laisser aux visiteurs la possibilité de
s’exprimer sur le groupe (livre d’or,
formulaire de contact, etc...)
L’idée et les objectifs
Voilà pour l’absolument nécéssaire.
J’avais d’autres idées de fonctionnali-
tés, mais tout choisir seul, amènerait
un système permettant beaucoup de
chose, mais de mon point de vue per-
sonnel en tant que créateur de site et
non en tant que musicien.
Enquête préliminaire
J’ai donc décidé de réaliser un petit
questionnaire, afin de connaître les at-
tentes d’autres musiciens, et de mobi- Cahier des charges
liser toutes mes connaissances et amis Ce premier cahier des
rencontrés dans la vie, comme sur les charges est consultable à
forums, de manière à recueillir leurs at- l’annexe 1.
tentes concernant un site de groupe.
L’enquête a été rédigée avec l’aide de
ma mère, qui, dans le cadre de sa pro-
fession (coordinatrice de projets qua-
lité), en a réalisé plus d’une. Elle a été
présentée sur une page web avec une
série de champs de formulaire classi-
que (cases à cocher, boutons radios,
etc...). Un questionnaire écrit envoyé
par courrier classique me semblait hors
propos. En effet, la plupart des sondés
sont des connaissances rencontrées
sur des forums internet, la plupart ha-
bitant en France ou ailleurs (l’un des
sondés résidant en Guadeloupe). De
plus, ayant pour projet le développe-
ment d’un site Internet, il aurait été cu-
rieux de ne pas utiliser ce média pour
en démontrer l’efficacité et la rapidité.
Cette enquête, réalisée lors des mois
de novembre et décembre 2006 avait
deux objectifs principaux : définir le ni-
veau moyen de connaissance du web
par les personnes sondées, et connai-
tre leurs attentes envers un site de
groupe.
En mois de deux mois, j’ai reçu plus
de 250 réponses, dont j’ai pu retirer
beaucoup d’informations, dont voici les
tendances marquantes :
Les personnes sondées
La première partie du questionnaire
servait à mieux cerner les personnes
sondées et connaître leur niveau de
compétence sur internet. Les deux
premières questions (moyenne d’âge
et type d’utilisation d’internet) m’ont
servi à savoir un peu plus qui j’avais
comme public “cible”.
Plus de 75% des personnes sondées
se situent dans la large tranche des
16 - 35 ans (plus précisément 41%
de 16 - 20 ans, 27% de 21 - 25 ans
et 17,6% de 26 - 35 ans). Donc, pour
la plupart, un public jeune, ouvert
aux nouvelles technologies. La se-
conde question était plus révélatrice
: 75,7% des sondés utilisent internet
pour leurs loisirs, les près de 25%
restant l’utilisant pour le travail.
La question suivante me permettait
de cibler au maximum les niveaux des
personnes sondées par rapport à leurs
expériences sur Internet. Il leur était
demandé de cocher, dans une série
d’actions communes sur internet (pos-
ter sur un forum, utiliser un FTP, télé-
charger un fichier, etc...), les actions
qu’ils avaient déjà réalisées lors de
leurs navigations. À ma surprise :
• plus de 95% d’entre eux avaient
déjà posté sur un forum.
• près de 60% avaient déjà utilisé un
FTP
• et plus de 93% se sont déjà créés
un compte utilisateur sur un site
quelconque.
La plupart d’entre eux savent donc
remplir un formulaire. Il ne leur en fau- Résultats détaillés
dra pas plus pour utiliser fish in a pan.
Les résultats détaillés de
Un peu plus d’une personne sondée sur
l’enquêtes sont consultables
2 sait utiliser un FTP, compétence né-
à l’adresse :
céssaire pour installer fish in a pan.
http://fishinapan.
Les deux questions suivantes, un peu lisaserver.be/enquete.php
plus techniques, demandaient aux per-
sonnes sondées s’ils avaient déjà créé
un site web (51% de oui contre 49% de
non), et quelles étaient leurs compé-
tences dans les langages ou technolo-
gies web les plus courants : HTML, CSS,
Javascript, PHP, MySQL et Flash. Com-
me je le précisais dans l’enquête, l’ob-
jectif de fish in a pan reste la possibilité
d’éditer un site sans connaître les lan-
gages précités. Toutefois, c’est un plus
pour la personnalisation des thèmes et
du moteur en particulier. Sans surprise,
un peu plus d’une personne sur deux indispensables, tant et si bien que ma
déclare avoir de vagues connaissances liste de fonctions à intégrer a très vite
(ou plus) en HTML et CSS. Un bon point
pour l’édition de thèmes.

Les personnes sondées et les

sites de groupe.
La seconde partie du questionnaire vi-
sait à savoir si les musiciens intérrogés
avaient déjà un site, par qui il avait été
réalisé, qui le maintenait à jour, et à
quelle fréquence.
Près de 40% affirment avoir un site
pour leur groupe. Et dans plus de
50% de ces cas, le site en question
a été réalisé par l’un des membres
du groupe.
Et dans plus de 50% des cas, la fré-
quence des mises à jour du site est
mensuelle, voire anecdotique.
Une confirmation de mon impression :
le fait de devoir toucher à du code pour
effectuer une mise à jour rebute bien
du monde, surtout si cette opération
n’est pas une habitude pour l’utilisa-
teur.

Les attentes des personnes

sondées envers un site de
groupe.
La troisième partie de l’enquête intro-
duisait mon idée et demandait aux uti-
lisateurs de noter la pertinence d’une
liste de fonctionnalités typiques.
Les résultats sont détaillés dans l’ima-
ge suivante.
Sans surprise, donc, la plupart des
modules proposés sont jugés utiles ou
été bouclée (et surtout fameusement
aggrandie).
Dans la question suivante, les person-
nes sondées pouvaient proposer une
idée non citée dans la liste.
J’ai eu droit à quelques propositions far-
felues, allant d’une déclaration d’amour
fougueuse de la part de mon batteur, à
une personne sondée me demandant
la mise en place dans le système d’un
“accès webcam pour concerts privés”,
rien que ça.
Les autres suggestions étaient souvent
fort intéressantes, mais faute de temps
pour le développement du projet, je de-
vais faire un choix. Certaines des idées
seront utilisées par suite pour augmen-
ter les possibilités du système.
Les questions suivantes portaient
sur les motivations des musiciens en-
vers l’idée de mettre à jour eux-mêmes
leur site si un système le leur permet-
tait. Leurs réponses positives m’ont
donné le courage de me lancer dans
l’aventure.
Il ne me restait plus qu’à définir une lis-
te complète et définitive des fonctions
de mon projet avant de me lancer dans
le développement proprement dit.
Un projet sans nom
c’est comme Laurel sans Hardy...
Je ne pouvais raisonnablement pas me
lancer dans ce projet sans lui donner
un nom.
Partant du nom redbox et après un
long brainstorming, mon choix s’est
porté sur fish in a pan, nom à la fois fish in a pan
mystérieux et complètement idiot. Écrit tout en minuscule.
Toutefois, sachant que l’un des meilleurs En français, ça signifie “un
moteurs de blog se nomme Dotclear, poisson dans une poêle”.
qu’il existe des systèmes de site nom-
més Spip et Joomla!, et que la plupart
des gens utilisent quotidiennement un
système d’exploitation nommé Win-
dows, je trouve que mon nom est bien
choisi. De plus, c’était le seul qui me
permettait de faire un logo marrant et
de susciter la curiosité des utilisateurs.
Plus le nom est étrange, plus la curio-
sité est grande.
Un nom, des objectifs
J’avais un nom, mes idées, et celles des
gens qui ont participé à mon enquête,
il ne me restait plus qu’à réunir le tout, La dernière partie du
définir mes objectifs et commencer le questionnaire
travail, ce qui est l’objet du chapitre La dernière partie du
suivant. questionnaire portait sur la
participation des personnes
sondées à un futur site
communautaire regroupant
les sites utilisant le système
fish in a pan. Cette idée a
été mise de côté pour le PFE
mais reste dans les cartons
(avec un cachet rouge du
genre “prioritaire”).
 Le développement de fish in a pan
e développement d’un système aus-
si complexe que fish in a pan ne peut
se faire sans préparer convenablement
le terrain.
Une fois toutes les idées réunies et les
objectifs définis, il y a encore fort à fai-
re avant de se lancer dans le gros du
travail.
3.1 Les ingrédients
Avant de commencer à taper la pre-
mière ligne de code, je devais définir
4 points :
• Le public visé
• Les technologies requises par le
système
• Les outils dont j’aurai besoin
• Les objectifs à atteindre
Le public visé
Fish in a pan est un système de site
qui doit permettre à des utilisateurs de
créer et d’entretenir un site de groupe
de musique de manière simple, effica-
ce et pratique, le tout en se connectant
simplement sur une partie du site dé-
diée à cet usage.
Ma cible est donc un internaute qui sait
manipuler les bases d’internet, et qui
pourra utiliser mon système le mieux
possible en ne faisant que cliquer sur
des boutons et remplir des formulai-
res.
Toutefois, certaines fonctions plus poin-
tues du système nécéssiteront peut-
être des connaissances un peu plus
poussées, mais ces fonctions particu-
lières doivent être les moins nombreu-
ses possibles.
Il me faut donc respecter le principe du
KISS. Principe du KISS
“Keep it simple, stupid !”
Les technologies requises par
http://fr.wikipedia.org/
le système
wiki/KISS-principe
Fish in a pan est avant tout un site web,
et son objectif est d’être utilisable par
le plus grand nombre d’utilisateurs,
sur le plus grand nombre d’hébergeurs
possibles.
Il me faut donc choisir des technologies
qui sont gratuites, répandues et, autant
que possible, open-source.
J’ai donc opté pour les langages sui-
vants :
• langage serveur : php 4.3 : même
si la version 5 de php est plus qu’in-
téressante, notamment pour ses
nouvelles fonctions et sa gestion plus
poussée de la programmation orien-
tée objet, elle n’est pas encore assez
répandue chez les hébergeurs mon-
diaux pour pouvoir se permettre de la
choisir. Ce qui reste, au passage, une
belle abbération : php 5 a été conçu
pour être le plus compatible possible
avec php 4, afin de casser le moins
de scripts possibles lors d’une migra-
tion. Mais bref, j’ai choisi php 4, par
souci de liberté envers mes futurs uti-
lisateurs.
• langage de bases de données :
mysql 4 : ici encore, c’est le langa-
ge de bases de données le plus ré-
pandu du web, et, contrairement au
php, même si la version 5 de mysql
est sortie, la version 4 reste plus que
compétitive, et ne souffre d’aucunes
erreurs de compatibilité (ou presque,
mais rien d’alarmant).
• autres technologies : de manière
à séparer le plus possible le moteur
du système et celui de l’affichage, j’ai
choisi d’utiliser le moteur de templa-
te Smarty, qui fait l’interface entre
le code généré par le php et l’html.
L’avantage de ce choix est de facili-
ter la relecture du code par des utili-
sateurs qui, connaissant vaguement
le HTML et le CSS, voudraient “tripa-
touiller” mon code afin de faire leurs
propres thèmes. Smarty est clair et
puissant, me permettant de générer
des affichages complexes tout en
gardant un code propre et lisible.
Pour le reste, le grand trio du web, à
savoir HTML/CSS/Javascript, se verra
renforcé par la bibliothèque prototype, Prototype
qui permet de simplifier le code à
http://www.prototypejs.org
l’extrême sans souci de compatibilité
entre les navigateurs, et la bibliothèque
scriptaculous, qui permet d’ajouter Scriptaculous
des effets spectaculaires aux éléments
de la page.
http://script.aculo.us
Les outils
Pour concevoir un poisson dans une
poêle, il ne suffit pas de pêcher le pois-
son puis de le frire : il faut conscien-
cieusement choisir ses outils.
Dans le cadre de fish in a pan, mes
principaux outils sont :
• Coda, de la société Panic, logiciel Coda
qui à priori ne paie pas de mine, mais
http://www.panic.com/coda/
qui s’avère être le couteau Suisse des
développeurs web travaillant sur Mac
: coloration syntaxique poussée, mo-
teur FTP intégré, console intégrée, ré-
férences en ligne, travail communau-
taire, tout y passe...et j’en passe. Le
dévelopement de fish in a pan peut se
limiter entièrement à ce programme.
Les programmes suivants sont d’un
grand secours, mais malgré tout, ac- Smarty
cessoires.
http://smarty.php.net
• YourSQL, petit programme tout sim-
ple de gestion graphique de bases de
données, plus convivial que l’usine à
gaz phpmyadmin pour manipuler et
consulter ses bases de données. Un
brin moins puissant (pas d’export),
mais plus pratique.
• Une immense bibliothèque musi-
cale : siffler en travaillant...
Les objectifs à atteindre
Les objectifs à atteindre sont clairs :
avoir une version fonctionnelle, instal-
lable et (surtout) utilisable de fish in a
pan, avec toutes les fonctions et modu-
les suivants, définis à la suite de mon
cahier des charges et de l’enquête pré-
liminaire :
• Gestion des membres
• Gestion des news
• Gestion d’un agenda
• Gestion d’un blog
• Gestion des médias (photo/video/
audio)
• Gestion des liens
• Gestion des paroles (textes de chan-
son)
• Gestion de la discographie
• Gestion de thèmes
• Gestion d’un formulaire de contact
• Gestion d’un livre d’or
• Chat privé pour les membres du
groupe
Chaque module devant être
(dés)activable à volonté de manière à
permettre aux groupes de moduler le YourSQL
site selon leurs envies.
http://yoursql.ludit.it
3.2 La recette
(première tentative)
Fish in a pan a essentiellement été
conçu en deux tentatives chacune
ayant tenté une approche différente.
La première, plus classique mais sur-
tout plus désordonnée, se basait sur
des techniques de travail en PHP assez
anarchiques et qui me conduisaient
droit dans le mur (fichiers de fonctions
dans tous les sens, dédales de varia-
bles temporaires et inutiles, requêtes
MySQL tordues... bref, un cauchemar).
Nous ne nous étendrons pas plus sur
cette première tentative.
3.3 Mi-temps
Fin mars, début avril, après un petit
mois de stage, le projet Fish in a pan
avançait, doucement mais surtout pé-
niblement.
J’ai plusieurs fois songé à le recommen-
cer de zéro, mais sans jamais pouvoir
choisir une approche qui me faciliterait
la tâche tout en gardant le code lisible
et pratique. Rien n’y faisait.
Fin avril, je suis parti faire un complé-
ment de stage de trois semaines chez
VAlain S.A., à Wiltz (au Luxembourg). VAlain S.A.
J’y ai appris beaucoup de choses, dont http://www.valain.lu
une qui a (osons le mot) révolutionné
ma façon de travailler : l’orienté objet
réfléchi.
Si j’avais déjà touché à la program-
mation orientée objet en php4, je ne
l’avais jamais abordée convenable-
ment. L’approche de ces concepts, au
sein de VAlain S.A., était bien plus logi-
que et basée sur le fameux MVC, alias
“Modèle-Vue-Contrôleur”, qui peut être
résumé de manière très simple :
• Le modèle représente le comporte-
ment : il accède au bases de données,
effectue des requêtes, manipule les
données, mais ne fait rien de plus.
• La vue, est, comme son nom l’indi-
que, tout ce que l’utilisateur voit et
manipule. La vue n’effectue aucun
traitement des données du modèle,
elle se contente de les afficher pour
permettre à l’utilisateur de continuer
à travailler sur ces données.
• Enfin, le contrôleur est le lien entre
les deux : il ne traite rien, mais ap-
pelle les modèles correspondant aux
requêtes de l’utilisateur dans la vue.
Chez VAlain S.A., ce système était gros-
so-modo appliqué comme suit :
• Les modèles sont des objets PHP qui
ne font que 4 actions : lire, sauvegar-
der, charger et supprimer des infor-
mations dans une table d’une base
de données choisie.
• Les contrôleurs sont d’autres objets
avec des petites manipulations pro-
pres (transformations de données
dans le but de permettre à la vue de
les afficher plus facilement), ou l’ana-
lyse des requêtes de la vue pour être
traitée par les modèles.
• Les vues ne sont rien d’autre que des
templates Smarty affichant les don-
nées demandées et permettant d’in-
téragir avec elles.
Cette façon de travailler, en plus d’être
rapide, permet d’être extrêmement ef- Modèle-Vue-Contrôleur
ficace et lisible pour une personne ex- http://fr.wikipedia.org/
térieure à son travail. wiki/MVC
Pour fish in a pan, mon choix était fait.
3.4 Le retour du poisson
surgelé.
(deuxième tentative)
Fish in a pan fût donc ressorti du frigo
et entièrement effacé, pour repartir sur
de nouvelles bases plus saines.
J’ai donc choisi de partir de la méthode
“VAlain” pour recréer Fish in a pan, tout
en y apportant plusieurs modifications
pratiques :
• Dans la méthode VAlain, il existe un
fichier de modèle par table dans la
base de données. Ce choix, très logi-
que chez eux qui développent leurs
sites de A à Z pour un client donné,
ne pouvait que me bloquer pour fish
in a pan qui, lui, devait pouvoir évo-
luer après sa sortie. J’ai donc pris le
parti d’avoir le moins d’objets possi-
bles en les rendant polyvalents.
• Les vues, dans la méthode VAlain,
étaient souvent peu dynamisées par
du javascript, ou alors avec du ja-
vascript un peu “barbare” (faute de
temps pour se pencher sur ces as-
pects du travail). Pour Fish in a pan,
je voulais dès le début intégrer du ja-
 vascript propre et dégradable, afin Javascript dégradable
de permettre aux utilisateurs ayant
Un code javascript
fait le choix d’activer javascript de
dégradable est un code
profiter d’une expérience utilisateur
javascript qui vient rajouter
plus agréable et intuitive, sans pour
des fonctionnalités par
autant pénaliser les utilisateurs qui
dessus une page existante,
ne veulent pas activer javascript sur
sans pour autant être
leur machine.
obligatoire.
La méthode de travail étant mainte-
En bref, un code dégradable
nant complètement définie, nous al-
enrichit l’application mais ne
lons pouvoir aborder le côté plus tech-
l’empêche pas de fonctionner
nique de la chose, à savoir : comment
si javascript est désactivé.
ça marche et selon quels principes ?
Ce principe est un des plus
importants concernant
l’utilisation moderne et
intelligente de javascript.
 Le fonctionnement de fish in a pan
uisque fish in a pan est basé sur
l’idée MVC, nous allons suivre l’ordre
de fonctionnement du système.
Nous commencerons donc par la des-
cription des modèles, suivie de celle
des contrôleurs, et enfin de celle des
vues.
4.1 Les modèles
Un petit rappel ne fait pas de tort. Dans
le système MVC, le modèle “accède au
bases de données, effectue des requê-
tes, manipule les données, mais ne fait
rien de plus”.
C’est donc le plus “bas niveau” de l’ap-
plication fish in a pan. Les objets sont
chargés directement après les variables
de configuration, et contiennent toutes
les actions les plus importantes.
Fish in a pan est articulé autour de 4
objets principaux :
• l’objet Element et son descendant
User
• l’objet Config
• l’objet Multiple
• l’objet Uploaded et son jumeau
Image
Ces 4 objets représentent l’entièreté
des actions de traitement de données.
Nous allons les décrire plus en détails.
Petit rappel rapide sur les objets
La notion d’objet peut être assez com-
plexe à appréhender quand on ne la
connait pas. Pour résumer de manière
très imagée (mais bien plus compré-
hensible), un objet est un conteneur qui
possède ses propres variables (appe-
lées propriétés), ses propres fonctions
(appelées méthodes), et une fonction
particulière appelée constructeur, qui,
déclanchée à la création d’un objet,
sert à l’initialiser.
Lorsque l’on crée un objet, la variable
qui l’accueille devient une instance de
l’objet, c’est-à-dire qu’elle devient une
“copie” de celui-ci, avec toutes ses
Avertissement
Ce chapitre est sûrement
le plus technique de ce
travail, celui où vous
êtes susceptible de voir
apparaître de drôles de
signes sur les pages. Ces
signes seront soit du code,
soit des hallucinations dues
à une surdose de lecture
technique à une heure
avancée de la nuit.
Quoi qu’il en soit, c’est
l’heure où je vous conseille
de vérifier le niveau de
remplissage de la tasse de
café la plus proche.
possibilités : accès aux propriétés de
l’objet (et possibilité d’en créer de nou-
velles), utilisation des méthodes...
4.1.1 L’objet Element
L’objet Element est sûrement l’objet
le plus important du système fish in a
pan.
Son rôle est de manipuler un rang
d’une table MySQL, de le charger de-
puis la table, de l’éditer, de le suppri-
mer, voire d’en créer un nouveau avant
de le sauvegarder dans la base.
Le principe de cet objet est simple :
chaque colonne de la table MySQL est
une propriété de l’objet.
Ainsi, pour une table qui possèderait
une colonne nommée “categorie”, la
manière d’y accéder dans l’objet serait
simplement “$myObject->categorie”.
De plus, l’objet Element possède trois
méthodes principales : load, save et
delete.
• load, la première, est appelée lors de
la création de l’objet. Elle va chercher
dans la table MySQL la rangée défi-
nie par l’identifiant qu’on lui a fourni,
et charge toutes les colonnes de la
table dans des propriétés de l’objet.
Si aucun identifiant n’est donné, on
crée un objet vide qui pourra par la
suite être sauvegardé dans la table,
une fois rempli.
• save, comme son nom l’indique, ré-
cupère les changements appliqués
aux propriétés de l’objet, et les sau-
vegarde dans la table MySQL.
• delete, elle, supprime dans la table
le rang correspondant à l’identifiant
de l’objet.
L’avantage indéniable d’un objet com-
me celui-ci est le gain de temps qu’il
apporte lors du développement, puis-
que la manipulation d’un élément dans
la base de données se trouve simplifiée
et accélérée.
Code Complet
Puisqu’un petit exemple vaut mieux
Vous pouvez consulter le
qu’un long discours, examinons le cas
code complet de l’objet
typique de l’édition d’un titre d’un ar-
Element en annexe 2.
ticle dans une base de données, avec
mon objet :
En trois lignes, c’est terminé. La pre-
mière ligne crée l’objet et va chercher
$myArticle = new Element(“blogs”, 3);
$myArticle->titre = “Mon nouveau titre”;
$myArticle->save();
dans la base de données la rangée qui
correspond à l’identifiant (deuxième
paramètre) dans la table donnée en
premier paramètre. Ensuite, nous chan-
geons le contenu de la colonne titre et
lui affectons une nouvelle valeur. Enfin,
nous sauvegardons les changements
dans la base de données.
Bien sûr, l’exemple donné ici est des
plus sommaires, mais résume les pos-
sibilités et les avantages de l’utilisation
de cet objet.
L’objet User
L’objet User, est, comme son nom l’in-
dique, un objet dédié à la manipulation
des utilisateurs. Cet objet hérite de l’ob-
jet Element, au sens où il en récupère
tous les principes d’utilisation (fonc-
tions save et delete pour modifier les
données de l’utilisateur), mais se voit
ajouter de nouvelles méthodes propres
à des actions utilisateurs, telle que la
vérification de la validité d’un utilisa-
teur connecté, la gestion des sessions
utilisateurs, etc...
4.1.2 L’objet Config
Dans fish in a pan, les données de confi-
guration du système sont stockées en
deux parties. Les informations de confi-
guration “critiques”, celles qui permet-
tent de définir les chemins d’accès aux
fichiers et les paramètres de base de
données, sont écrites dans un fichier
PHP créé lors de l’installation.
Toutes les autres informations, relati-
ves au fonctionnement du site, telles
que la visibilité du site ou d’un module
particulier, le nombre d’éléments à af-
ficher d’un module, sont stockées dans
un table nommée config, qui fonctionne
avec deux colonnes : un mot-clé décri-
vant le paramètre de configuration, et
l’autre donnant sa valeur. Chaque rang
de la table config donne donc un cou-
ple “clé/valeur”, facile à manipuler.
Toutefois, les changements sur la confi-
guration doivent se répercuter immé-
diatement sur le site, et le couple “clé/
valeur” nécéssite une autre approche
pour la manipulation de son contenu.
C’est pourquoi j’ai créé un objet Config,
qui fonctionne sur le même principe
que l’objet Element, mais adapté au
format de la table config. De plus, l’ob-
jet Config n’a que deux méthodes as-
sociées : save, et saveAndReload. La
première effectuant la sauvegarde sim-
ple des nouvelles données, la suivante
rechargeant les variables de configura-
tion à la suite de la sauvegarde.
4.1.3 L’objet Multiple
Jusqu’à maintenant, nous avons pu voir
les procédés mis en place pour manipu-
ler des éléments de la base de données
un par un. Il nous faut pourtant avoir
Codes Complets
accès à un procédé nous permettant
de visualiser un ensemble d’éléments, Vous pouvez consulter les
notamment pour en faire des listes codes complets des objets
(liste des articles de la table blogs, par Config et Multiple en annexe
exemple). 3 & 4.
C’est ce rôle que remplit l’objet Multi-
ple.
L’objet Multiple n’est pas vraiment un
objet en tant que tel, puisqu’on ne fait
jamais appel à son constructeur. En ef-
fet, il est plutôt utilisé comme un réper-
toire de fonctions statiques, qui sont
réunies dans l’objet Multiple pour plus
de commodités.
L’objet Multiple n’a aucune propriété,
mais une série de méthodes qui met-
tent en place une requête pour la base
de données, et appelent ensuite une
méthode générale de l’objet Multiple,
qui va soumettre cette requête à la
base de données, récupérer le résultat,
lui appliquer un petit traitement et re-
tourner la liste des éléments dans un
tableau associatif.
Par exemple, pour charger la liste des
articles de la table blogs, il nous suffit
de faire ceci :
$articles = Multiple::getArticles();
La variable $articles contiendra un ta-
bleau associatif des articles du blog.
Certaines des méthodes de l’objet Mul-
tiple peuvent recevoir des paramètres
pour définir le nombre d’éléments à
renvoyer, un éventuel filtre à appliquer
aux résultats, etc...
4.1.4 L’objet Uploaded
Le dernier type de données à manipu-
ler sont les fichiers. En effet, les utilisa-
teurs de fish in a pan auront la possi-
bilité d’envoyer sur le site des images,
des sons, des vidéos, voire d’autres fi-
chiers en pièces jointes des messages
du chat privé.
L’objet Uploaded a été créé pour mani-
puler facilement un fichier uploadé afin
de le sauvegarder à l’endroit voulu,
tout en gérant les erreurs éventuelles.
Ainsi, l’objet Uploaded, à sa création,
reçoit trois paramètres : la variable
$_FILES contenant le fichier temporaire
à traiter, le dossier de destination, et
enfin, un paramètre optionnel pour for-
cer le nom du fichier (si ce paramètre
est omis, le nom physique du fichier
sur le serveur sera le timestamp ac-
tuel concaténé avec le hash md5 du
fichier).
Avec ces trois paramètres, l’objet Uploa-
ded vérifie le nouveau fichier, l’état du
dossier de destination, et enfin sauve
le fichier. Si l’opération s’est bien dé-
roulée, l’objet recevra cinq nouvelles
propriétés : url, qui contient le nom
physique du fichier sur le serveur, com-
pleteUrl, qui contient le chemin absolu
vers le fichier, name qui contient son
nom, type qui contient son type MIME,
et enfin size qui contient sa taille en
octets. Ces cinq propriétés seront cel-
les qui, typiquement, seront utilisées
pour être stockées dans une table de la
base de données.
Si par malheur l’envoi ou la sauvegar-
de du fichier échoue, l’objet Uploaded
recevra une propriété nommée error,
avec un code d’erreur correspondant
au type d’erreur rencontré (fichier par-
tiellement envoyé, pas de fichier, fi-
chier trop gros, etc...).
L’objet Image
Les images envoyées par un utilisateur
sur le web sont souvent trop grosses,
que ce soit en taille disque (en octets)
ou en dimension (en pixels). C’est pour-
quoi lorsque l’on envoie une image sur
un site, elle est bien souvent redimen-
sionnée, puis vignettée.
L’objet Image de fish in a pan remplit
ce rôle. Mais une image envoyée sur
un site est, avant tout, un fichier en-
voyé sur le site. C’est pourquoi l’objet
Image est une copie de l’objet Uploa-
ded, lui rajoutant une méthode de re-
dimensionnement. Lors de sa création,
un objet Image requiert les mêmes pa-
ramètres qu’un objet Uploaded, et une
fois le fichier sauvegardé sur le serveur
avec succès, l’objet Image pourra uti-
liser sa méthode spécialisée dans la
redimension, nommée resize, et qui
permet, selon ses paramètres, de re-
dimensionner l’image en l’écrasant, ou
en en faisant une copie.
Voilà pour les objets principaux de Fish
in a pan, ceux qui définissent le côté
“Modèle” de notre système Modèle-
Vue-Controleurs.
4.1.5 Les autres objets
Fish in a pan utilise aussi deux autres
objets, mineurs, qui permettent de
générer des fichiers au format zip (ob-
jet open-source codé par l’équipe de
phpmyadmin), et de manipuler des
fichiers audio au format mp3 (objet
open-source codé par regin). Ces deux
objets sont utilisés chacun dans un mo-
dule précis et ne font donc pas partie
des objets “noyaux” du système. Ils
seront abordés plus loin, lors de la pré-
sentation des modules associés.
4.2 Les contrôleurs
Dans l’architecture MVC, le contrôleur
est ce qui sert d’interface entre les mo-
dèles et les vues...
Techniquement, il ne traite aucune
donnée, ce sont les modèles qui s’en
chargent. De même, il n’affiche rien, ce
sont les vues qui s’en chargent.
Dans fish in a pan, les contrôleurs sont
donc les portions de code qui récupè-
rent les données envoyées par les mo-
dèles, et chargent les vues qui vont les
afficher, pour permettre aux utilisa-
teurs de les manipuler.
Typiquement, il y a un contrôleur par
module. Ces contrôleurs sont tous
structurés comme suit (pour un contrô-
leur de la zone d’administration) :
1. Chargement du noyau de fish in a
pan
2. Vérification de la validité de l’utilisa-
teur connecté
3. Analyse de l’action à effectuer. Par
défaut, on demande au modèle de
retourner une liste des éléments du
module (les news, par exemple). Un
autre type d’action est par exemple
de récupérer les données d’un for-
mulaire complété dans la vue pour
les enregistrer via le modèle.
4. Appel de la vue en fonction de l’ac-
tion demandée.
L’analyse de la fonction à effectuer se
fait à partir d’une structure de switch,
qui examine la variable action et effec-
tue les opérations en fonction de sa va-
leur. L’utilisation d’une telle structure
permet d’utiliser le même contrôleur
lors d’opérations en AJAX. Le script Ja- Code Complet
vascript appelle ce contrôleur, qui ef- Vous pouvez consulter le
fectue l’action et se termine au point code d’un module commun,
trois du déroulement cité ci-dessus, le module de news, en
juste avant d’appeler la vue, puisque la annexe 5.
vue est déjà chargée.
Voilà pour les contrôleurs. Même s’il
n’y a pas grand chose à dire sur eux,
ils restent les piliers de l’application et
sont à ce titre des éléments incontour-
nables du système.
4.3 Les vues
Selon le modèle MVC, les vues sont
les interfaces avec lesquelles l’utilisa-
teur interagit. Dans fish in a pan, les
vues sont des templates Smarty qui
affichent, en HTML (ou XML selon les
cas) les données envoyées par le mo-
dèle correspondant et interprétées par
le contrôleur du module.
Toutes les variables des templates sont Le diagramme suivant résume toute la
affectées à Smarty dans le contrôleur structure de fonctionnement de fish in
du module associé, hormis les variables a pan développée au long de ce cha-
globales (variables de configuration pitre.
qui peuvent être nécéssaires à afficher
dans le template), qui sont affectées à
Smarty depuis le noyau du système.
Les templates sont divisés en plusieurs Vue
parties, de manière à être le plus logi- Affichage, Manipulation par l'utilisateur
que possible.
Pour chaque module, il y a un template
principal, qui porte le nom du module. Contrôleurs
Ce template, qui contient la structure
Interface Modèles/Vues
de la page HTML, en appelle plusieurs
autres :
• Un template, commun à tous les mo- Noyau Modèles
dules, qui contient la balise <head> de Base de
la page, et inclut donc les données Config, Fonctions de base Objets généraux données
concernant les scripts, les meta-tags
et les feuilles de styles.
• L’en-tête de la page, commune aux
modules de l’administration, avec le
titre, et le menu principal.
• Le sous-menu, commun à une section
de l’administration.
• Le template de l’action appelée dans
le contrôleur. Chaque module possè-
de un sous-dossier dans le répertoire
templates qui contient les templates
de chaque action. Ces templates af-
fichent les formulaires d’édition, les
listes d’éléments, etc...
• Le pied de page, commun à tous les
modules de l’administration.
La longueur de ces fichiersne me per-
met pas de les joindre en annexe.

4.4 Structure globale

 Les modules de fish in a pan
omme décrit précédemment, fish in
a pan est divisé en plusieurs modules,
qui se chargent chacun de la gestion
d’un type de données. Par exemple, le
module de news est le seul habilité à
gérer les news : il peut les créer, les
éditer, les lister et même les suppri-
mer.
Dans ce chapitre, nous allons aborder
chaque module de fish in a pan, en
commençant par son installation, puis
par les modules de l’administration (le
gros du chapitre), et enfin le fonction-
nement de la partie publique de l’ap-
plication.
5.1 Le script d’installation
L’installation d’un fish in a pan sur un
hébergeur se réalise en quelques éta-
pes.
Une fois les fichiers de l’application ins-
tallés via FTP sur l’hébergeur, l’utilisa-
teur se connecte sur le dossier /install
de l’application et l’installation com-
mence.
Cette installation s’effectue en quatre
grandes étapes.
1. Vérification des permissions :
pour fonctionner, fish in a pan né-
céssite que plusieurs de ses dossiers
aient les permissions en écriture sur
le serveur. Cette étape de l’installa-
tion vérifie que tous les dossiers re-
quis aient l’accès en écriture adéquat
afin de passer à l’étape suivante.
2. Paramètres de base de données :
à cette étape, l’utilisateur doit fournir
les identifiants de connexion à la base
de données. Un test de connexion a
lieu et s’il est positif, l’installation
passe à l’étape suivante.
3. Création des tables dans la base
de données et création du pre-
mier utilisateur : cette étape de-
mande à l’utilisateur les login et mot
de passe qu’il désire pour se connec-
ter au système, et les tables de l’ap-
 plication sont créées, ainsi que le
compte du premier utilisateur.
4. Ecriture du fichier config.php :
À cette étape, le script d’installation
tente de créer le fichier config.php.
S’il échoue, l’utilisateur peut créer
lui-même le fichier à partir du conte-
nu qui lui est fourni.
À la fin de l’installation, l’utilisateur est
invité à créer un code de sécurité, une
sorte de super mot de passe, qui sera
demandé à chaque opération délicate
sur le système (suppression d’un uti-
lisateur, modification des paramèttres
sensibles, etc...) Ce code est très im-
portant et ne peut être regénéré par la
suite. Il peut être changé, mais unique-
ment si on connait l’ancien.
Une fois le fichier config.php créé,
l’installation est terminée et le site est
pleinement fonctionnel. Le script d’ins-
tallation recommande à l’utilisateur
de supprimer le dossier d’installation,
de manière à sécuriser le site. Malgré
tout, le script d’installation ne se relan-
cera plus s’il détecte l’existence d’un
fichier config.php.
5.2 La zone
d’administration
L’application fish in a pan est fonda-
mentalement divisée en deux parties :
la zone d’administration et la zone
publique.
La zone d’administration, uniquement
accessible aux utilisateurs enregistrés,
permet de gérer l’entièreté des modu-
les et de leurs données.
La zone publique, elle, affiche les don-
nées pour les visiteurs.
Globalement, la création et la modifica-
tion des données ne se font que dans la
zone d’administration, hormis pour le
livre d’or et les commentaires de blog,
où les visiteurs ajoutent ces éléments
depuis la zone publique.
5.2.1 Répartition des modules
dans la zone d’administration
La zone d’administration de Fish in a
pan, que nous appellerons aussi conso-
le ou admin, se divise en 5 sections :
1. Le tableau de bord, qui comporte
un seul module
2. La section Groupe, qui comporte
cinq modules
3. La section Média, qui en comporte
trois
4. La section Site, qui en comporte six
5. Et la section Config, qui comporte
cinq modules
À ces 20 modules, nous devons ajouter
un module global qui gère la connexion
d’un utilisateur à l’admin.
5.2.2 Le module de connexion
Ce module, un peu spécial, est appelé
à chaque tentative de connexion d’un
utilisateur à l’admin. Il vérifie le cou-
ple login et mot de passe entré dans le
formulaire, et autorise le cas échéant
l’utilisateur à aller plus en avant dans
la console.
C’est aussi ce module qui se charge de
créer les cookies de connexion automa-
tique si l’utilisateur le demande, et de
vérifier leur existence éventuelle lors
de la tentative de connexion.
5.2.3 Le tableau de bord
5.2.3.1 Chat privé et notifications
Le tableau de bord de fish in a pan
est le point de départ de l’administra-
tion. Lors de la conception sur papier,
il n’était constitué que d’un chat privé,
rudimentaire.
De tous les outils proposés lors de l’en-
quête, le chat privé est certainement
l’un de ceux qui a le moins intéressé
les personnes sondées, mais, par ex-
périence personnelle, j’ai décidé de
l’intégrer. En effet, sur le site de mon
groupe, ancêtre du système fish in a
pan, nous avons un petit chat privé qui
nous sert énormément pour nous lais-
ser des messages, des indications pour
les répètes et autre. En bref, pour nous,
c’est devenu un point de communica-
tion indispensable pour le groupe, une
fois qu’on y a pris goût.
Cela dit, le chat du premier site était
des plus rudimentaires : on ajoutait un
message, limité à 255 caractères, et
c’est tout.
Pour fish in a pan, c’était un peu limite.
Les améliorations possibles étaient lé-
gions, je me suis malgré tout limité, de
manière à laisser à ce chat un côté pra-
tique et surtout léger.
Les fonctionnalités de ce nouveau chat
sont simples :
• Plus de limite de taille pour les
messages : le contenu d’un messa-
ge est stocké dans une colonne de la
table, en type TEXT. Le contenu est
donc limité à 65535 caractères, ce
qui, objectivement, laisse de la mar-
ge.
• Mise en forme des messages : le
contenu d’un message peut recevoir
une mise en forme basée sur le sys-
tème BBCode.
• Gestion de fichiers joints : cha-
que message peut recevoir une pièce
jointe, un fichier quelconque que les
autres membres du groupe pourront
récupérer. Idéal pour partager les
partitions d’une composition, ou que
sais-je d’autre.
• Notifications : d’un simple clic sur la
petite cloche située sous les messa-
ges du chat, l’utilisateur peut consul-
ter toutes les actions effectuées sur
le site. À la manière d’un fichier log,
toutes les actions effectuées sur la
zone publique comme sur la zone ad-
min sont indexées dans une table de
la base de données.
• Flux RSS : les messages du chat ain-
si que les notifications sont indexés
dans un flux RSS sécurisé. Contraire-
ment au flux RSS des news, agenda,
blog et autre, le flux du chat privé doit
rester...privé. Fish in a pan étant des-
tiné à être publié et installable gra-
tuitement, n’importe quel petit malin
pourrait déduire l’adresse du flux rss
du chat privé... Du coup, il fallait trou-
ver une parade pour le sécuriser. Lors
de l’installation de fish in a pan, un
code de sécurité est généré. Ce code,
passé dans l’url du flux RSS, sécurise
 le flux (ce code étant impossible à ré-
cupérer ailleurs dans le site). De plus,
ce code sert pour d’autres opérations
“critiques”, nous y reviendrons en
temps voulu.
5.2.4 Le groupe
La seconde section de l’administration
est la section Groupe, qui se charge,
comme son nom l’indique, de gérer
tout ce qui concerne le groupe, à sa-
voir les membres, la biographie, la dis-
cographie et les textes des morceaux.
Dans le cahier des charges, c’était les
seuls impératifs de cette section. Au fur
et à mesure du développement, et sur
un conseil donné par Thierry de chez
VAlain S.A., la section groupe a reçu un
nouveau module : les intervenants.
5.2.4.1 Les membres
Le module des membres du groupe s’oc-
cupe de la gestion des utilisateurs de
l’application qui font partie du groupe.
Chaque utilisateur membre du groupe
reçoit un login et un mot de passe qui
lui permettent de se connecter à l’ad-
min et d’éditer le contenu du site.
De plus, il ne suffit pas d’afficher une
liste des membres du groupe sur la
partie publique du site. Chaque mem-
bre possède une fiche descriptive qu’il
est libre de remplir.
Petite précision sur les droits
utilisateurs.
Depuis le début du développement,
la question des droits utilisteurs est
souvent revenue sur le plan de tra-
vail. Faut-il ou non permettre aux uti-
lisateurs de se définir des droits, per-
mettre à l’un ou l’autre de faire plus ou
moins que les autres ? Dans le cadre
d’un site communautaire, cet aspect
des choses était à prendre en compte.
Mais dans le cadre de fish in a pan, j’ai
pris le parti de laisser chaque utilisa-
teur pouvoir faire tout, sans restriction.
En effet, mon système est un moteur
de site pour groupe de musique, et les
membres d’un groupe, de manière logi-
que, sont des gens qui se connaissent
et doivent se faire confiance mutuelle-
ment pour jouer ensemble.
Toutefois, pour des raisons de sécurité,
certaines actions sont soumises à un
code de sécurité, de manière à être
sûr que l’utilisateur ait bien conscience
de la “criticité” de l’action entreprise
(suppression d’un utilisateur, change-
ment de la mise en ligne du site public,
etc...).
Fonctions du module
• Ajouter un membre : Crée un nou-
veau compte utilisateur en lui spéci-
fiant login, mot de passe et surnom
affiché sur le site. Sitôt créé, un nou-
veau compte est actif pour l’édition
du contenu du site.
• Éditer la fiche descriptive : Cha-
que membre peut éditer le contenu
de sa propre fiche descriptive, ainsi
que celle des autres. Ce choix est
motivé par le fait que dans le site de
mon groupe, chaque membre ne peut
éditer que sa propre fiche. Et notre
batteur n’ayant plus accès à Internet
depuis des mois, quand il veut met-
tre sa fiche à jour, c’est moi qui m’en
 charge en me connectant avec ses lo-
gin et mot de passe. Comme dit dans
la note ci-dessus, c’est au groupe de
gérer lui-même ses interactions, il n’y
a donc pas de restriction à l’édition
d’une fiche d’un autre membre que
soi-même.
• Changer sa photo : En plus de
personnaliser sa fiche descriptive,
chaque utilisateur peut la compléter
avec une photo personnelle. La photo
est uploadée et redimmensionnée
via la procédure expliquée lors de la
description de l’objet Image. De plus,
l’utilisateur a la possibilité de choisir
si oui ou non cette photo est affichée
dans la zone publique.
• Masquer/Afficher un membre :
Cette action permet de masquer ou,
au contraire, d’afficher le membre
dans la liste des membres sur le site.
Un membre masqué n’est plus visible
depuis la zone publique.
• Masquer la liste des membres :
Cette action, qui est aussi disponible
depuis la configuration, permet de
masquer la liste des membres sur la
zone publique. Cette action ne se fait
pas immédiatement, elle demande à
chaque fois une confirmation.
• Changer l’ordre d’affichage des
membres : La liste des membres
n’est pas affichée selon un ordre al-
phabétique, mais à partir d’un nu-
méro d’ordre. En effet, la compo-
sition de la plupart des groupes est
affichée selon un ordre qui est sou-
vent “chanteur(s)-guitariste(s)-bas-
siste-batteur”. Cette option permet
de changer l’ordre d’affichage des
membres.
Changement d’ordre
• Supprimer un utilisateur : La sup-
pression d’un utilisateur demande Cette fonction est l’une
une confirmation et la saisie du code des rares qui bénéficie
de sécurité dont nous avons déjà par- actuellement d’une couche
lé plus haut. De plus, et par mesure AJAX. En effet, si javascript
de sécurité, l’utilisateur connecté ne est activé sur le navigateur
peut supprimer son propre compte. de l’utilisateur, il lui est
possible de changer
5.2.4.2 Les intervenants l’ordre des membres en
effectuant une série de
Lors d’une discussion à propos de mon
drag & drop des utilisateurs.
application avec Thierry, chef de projet
Les changements sont
chez VAlain, un point intéressant a été
automatiquement
souligné : qu’en est-il des groupes qui
sauvegardés via AJAX.
feront appel à d’autres personnes pour
éditer le contenu d’un site ? On peut
très bien imaginer un groupe n’ayant
aucune connaissance en Internet et
demandant à un ami dévoué de s’oc-
cuper du contenu du site... Cet ami ne
fait bien sûr pas partie du groupe en
tant que tel. La première solution envi-
sagée était de créer un membre pour
cette personne, et de le laisser masqué
de la liste des membres. Mais, du coup,
la possibilité de se créer une fiche ou
de changer sa photo est inutile.
Le module des intervenants est donc
né. Les intervenants ont les mêmes
possibilités d’édition du site que les Préférence des
membres, excepté la suppression de intervenants
membres : un intervenant ne peut sup-
Un intervenant peut, comme
primer un membre du groupe. C’est
un membre, changer ses
la seule restriction ressemblant à des
login et mot de passe depuis
droits utilisateurs qui a été codée.
le module des préférences
Fonctions du module dans la section configuration.
• Créer un intervenant
• Supprimer un intervenant
5.2.4.3 La biographie
La biographie est l’un des modules les
plus simples de l’application. En effet,
la biographie n’est jamais qu’un texte
éditable.
Fonctions du module
• Éditer la biographie : Affiche un
simple champ de texte, avec un sys-
tème de BBCode pour styler le texte.
• Afficher/Masquer la biographie :
Permet de choisir ou non d’afficher la
biographie du groupe sur la zone pu-
blique du site.
5.2.4.4 La discographie
La discographie est un module assez
complexe de par le nombre de fonc-
tions qu’il possède. Malgré le fait que
certaines d’entre elles auraient pu être
liées, elles ont été séparées pour ren-
dre le module plus cohérent.
Au départ, sur mes premières notes, un
élément disque devait être caractérisé
par un nom, une description, une éven-
tuelle image et une liste des titres qui
compose la tracklist du disque.
À la suite de l’enquête préliminaire, où
il est apparu qu’un système de com-
mande de cd était très demandé par
les sondés, les idées du module de dis-
cographie ont pris de l’ampleur, pour
se voir enfin ajouter une fonction de té-
léchargement d’une archive du disque,
pour les groupes qui souhaiteraient
partager leur musique gratuitement.
Fonctions du module
• Ajouter un disque : Lors de l’ajout
d’un disque, on ne fait que préciser
son nom, des mots-clés (affichés seu-
lement dans la zone d’admin pour l’or-
ganisation), une description, la date
de sortie et le nombre de disques que
contient cet élément. Le reste des in-
formations sera édité avec les fonc-
tions suivantes du module.
• Éditer les informations : Cette
fonction sert à éditer les informations
générales du disque, celles remplies
à la création du disque et citées ci-
dessus.
• Éditer la tracklist du disque :
Cette fonction sert, comme son nom
l’indique, à définir les tracklist d’un
disque, c’est-à-dire la liste des mor-
ceaux le composant. Il est possible
de lier à chaque morceau un élément
du module audio et un élément du
module paroles pour consulter un ex-
trait ou le texte du morceau lors de la
navigation dans la zone publique.
• Éditer les images : Chaque disque
peut se voir affecter une image de
face, une image d’arrière, ainsi qu’un
lien vers une galerie de photos. Ainsi,
depuis la zone publique, un visiteur
pourra voir la couverture du disque,
sa face arrière, et une série de photos
illustrant le packaging du disque, par
exemple.
• Paramètres de téléchargement :
Cette fonction permet d’autoriser le
téléchargement d’une archive des
morceaux du disque, pour les grou-
pes qui souhaitent le faire. Il y a deux
méthodes de téléchargement : le té-
léchargement externe, et le téléchar-
gement interne. Le téléchargement
 externe consiste à uploader l’archive
du groupe sur un service de partage
de fichiers externe, tel que rapids-
hare ou megaupload, et d’ajouter
dans fish in a pan le lien vers l’archi-
ve hébergée chez ce service. Cette
solution est bien sûr celle qui est la
plus économique en place sur l’hé-
bergeur. La seconde solution permet
d’uploader l’archive directement sur
le site. Cette opération peut se faire
de deux façons différentes : en en-
voyant directement le fichier via l’in-
terface d’administration, opération
assez lente et souvent limitée en
taille d’envoi par l’hébergeur, ou en
envoyant directement le fichier dans
le bon dossier via un logiciel FTP et
en le choisissant dans une liste des
fichiers du dossier.
• Paramètres de commande : Cette
fonction permet de créer un formulai-
re de commande du disque pour les
visiteurs, leur précisant le prix à l’uni-
té et quelques informations concer-
nant la vente. Le contenu de ces
commandes sera affiché dans le mo-
dule Contact de la section Site. Fish
in a pan ne gère pas la comptabilité
des groupes, mais permet au moins
de centraliser leurs commandes.
• Afficher/Masquer un disque
• Afficher/Masquer la discographie
• Changer l’ordre d’affichage des
disques
• Supprimer un disque : Lors de la
suppression d’un disque, les fichiers
liés (couvertures, archives de télé-
chargement) sont supprimés. Seule
une éventuelle galerie de photos liée
n’est pas supprimée. Cette galerie
doit être supprimée via le module de
gestion des photos.
5.2.4.5 Les textes des morceaux
Le module des textes des morceaux
est un module assez simple. En effet,
un texte n’est défini que par les infos
suivantes : son titre, son auteur, son
contenu, et des mots-clés pour s’y re-
trouver.
Fonctions du module
• Ajouter un texte
• Editer un texte
• Supprimer un texte
• Afficher/Masquer un texte
• Afficher/Masquer la liste des tex-
tes
• Changer l’ordre d’affichage des
textes
5.2.5 Média
La troisième section de l’admin est la
section média, qui gère les photos, les
vidéos et les sons. Lors de l’enquête
préliminaire, le module des médias
audio et vidéo est celui qui a été jugé le
plus indispensable par les utilisateurs,
juste devant le module agenda. Celui
des galeries photos a aussi remporté
pas mal de suffrages. Ces modules de-
vaient donc être impérativement figu-
rer dans l’application.
Toutefois, les modules des médias video
et audio, qui ne faisaient qu’un dans le
site de mon groupe, ont ici été sépa-
rés, car certaines fonctions propres à
la manipulation de fichiers audios ne
s’appliquaient pas au fichiers vidéos.
5.2.5.1 Les galeries de photos
Lors de l’enquête préliminaire, les per-
sonnes sondées furent interrogées sur
la pertinence de galeries photos publi-
ques et de galeries privées. Les deux
propositions ont reçu un accueil favora-
ble, même si l’enthousiasme était bien
plus important pour les galeries publi-
ques que privées.
Le module des galeries de photos
contient deux types d’éléments dis-
tincts : les galeries et les photos.
Une galerie se caractérise par un nom,
une description et sa disponibilité (pu-
blique ou privée). Une galerie privée ne
pourra pas être utilisée pour être liée à
un article de blog ou un disque, et ne
sera pas affichée dans la liste des gale-
ries. Chaque galerie publique peut être
masquée de la liste des galeries, mais
une galerie masquée peut être utilisée
pour illustrer un article de blog ou un
disque, et ce de manière à ce qu’elle
n’apparaisse pas à la fois dans un arti-
cle de blog et dans la liste des galeries,
par exemple.
Une photo est caractérisée par un nom,
la galerie dont elle fait partie et une
description.
Fonctions du module pour les
éléments galerie
• Explorer la galerie : affiche les pho-
tos qui composent la galerie et per-
met d’accéder aux fonctions d’édi-
tion de chaque photo ou de la galerie
elle-même.
• Ajouter une galerie
• Editer une galerie
• Changer l’ordre d’affichage des
galeries
• Afficher/Masquer une galerie
• Afficher/Masquer la liste des ga-
leries
• Changer l’ordre d’affichage des
photos dans la galerie
• Supprimer une galerie : lors de la
suppression d’une galerie, les photos
qu’elle contient sont supprimées.
• Ajouter des photos : cette fonction
permet d’ajouter jusqu’à 5 photos
d’un coup à la galerie en question.
Toutefois l’utilisateur est prévenu
que le transfert de plusieurs photos
en une fois risque d’être plus long
qu’une à la fois, selon la taille et le
format des photos envoyées. Chaque
photo est en effet redimensionnée et
vignetée sitôt envoyée.
• Organiser les photos : cette fonc-
tion, utilisant AJAX et nécéssitant
donc que javascript soit activé pour
fonctionner, affiche les photos de
chaque galerie et permet, par drag
& drop, de déplacer une photo d’une
galerie à une autre. Si l’utilisateur
n’a pas activé javascript sur son na-
vigateur, il devra passer par l’édition
d’une photo pour la faire changer de
galerie.
• Télécharger une archive de la ga-
lerie : cette fonction, se basant sur
 l’objet zip.lib développé par l’équipe
des développeurs de phpmyadmin,
permet d’un seul clic de télécharger
une archive au format zip contenant
toutes les photos de la galerie en
question.
Fonctions du module pour les
éléments photo
• Editer une photo : permet d’éditer
les informations d’une photo ainsi que
la galerie à laquelle elle appartient.
• Supprimer une photo
• Afficher/Masquer une photo
5.2.5.2 Les médias audios
Un site de groupe sans morceaux à
écouter, ce n’est pas vraiment un site
de groupe. Ce module était donc indis-
pensable à l’application.
La seule restriction posée par le modu-
le est l’utilisation de fichiers au format
mp3, format audio le plus répandu sur
le net (et le plus facile à créer), ainsi
que l’un des plus légers. De plus, le lec-
teur utilisé pour lire les médias mp3 sur
le site n’est ni windows média player,
ni quicktime. C’est un lecteur de mp3
en flash, libre et open-source, créé
par le développeur neolao. Ce lecteur
a l’avantage d’être hautement per-
sonnalisable, notamment en ce qui
concerne les couleurs du lecteur, de
manière à pouvoir l’intégrer au design
du site.
Chaque morceau est défini par les ca-
ractéristiques suivantes : un nom, des
mots-clés, une description et l’autorisa-
tion ou non de télécharger le morceau
depuis le site.
Fonctions du module
• Ajouter un morceau : Lors de l’ajout PhpMyAdmin
d’un morceau, en plus de définir ses http://www.phpmyadmin.net
caractéristiques, on uploade le mor-
ceau au format mp3 via un formulaire
d’envoi de fichier.
• Afficher/Masquer un morceau
• Afficher/Masquer la liste des mor-
ceaux
• Changer l’ordre d’affichage des
morceaux
• Editer les informations d’un mor-
ceau
• Supprimer un morceau
• Manipuler un morceau : Cette fonc-
tion expérimentale, basée sur l’objet
mp3 de regin, permet de générer un Regin
extrait du morceau en cours. Cet ex-
http://www.sourcerally.
trait ne remplacera pas le morceau,
net/regin
il sera ajouté aux autres médias so-
nores avec la mention “extrait” dans
son titre. Cette fonction est expéri-
mentale, et pour des raisons encore
inconnues, elle ne marche pas avec
tous les mp3, seuls certains passent.
Cette fonction a malgré tout été ajou-
tée à l’application avec un message
avertissant les utilisateurs du carac- Neolao
tère aléatoire de sa réussite...
http://www.neolao.com
5.2.5.3 Les médias vidéos
Le plus grand problème concernant Personnalisation du
l’utilisation de vidéos sur un site est le lecteur
choix du format de vidéo utilisé. Afin
Les options de
d’éviter autant que possible des pro-
personnalisation du lecteur
blèmes de compatibilité, j’ai choisi de
sont accessibles dans la
n’utiliser qu’un seul format, le format
section Config de l’admin.
FLV (flash vidéo). Ce format, taillé pour
le web, est léger et lisible avec le player
flash, installé sur la plupart des naviga-
teurs, quelle que soit la plate-forme de
l’ordinateur.
De plus, les fichiers vidéos sont volumi-
neux et du coup remplissent vite l’es-
pace de stockage chez un hébergeur.
C’est pourquoi j’ai choisi de permet-
tre aux utilisateurs d’utiliser des ser-
vices de partage de vidéo, tels que le
très connu YouTube ou encore Daily-
motion. Ces services permettent de
stocker des vidéos en ligne, tout en
les convertissant à la volée au format
flv, et autorise la lecture de vidéo sur
d’autres sites. Parfait pour une applica-
tion comme fish in a pan.
Fonctions du module
• Ajout d’une vidéo : Lors de l’ajout
d’une vidéo, l’utilisateur peut soit
rentrer le code d’identification de sa
vidéo envoyée sur Youtube ou Daily-
motion (seuls ces deux services sont
supportés pour l’instant), ou stocker
sa vidéo (au format flv) dans les dos-
siers de l’application. Pour cela, il a
le choix, à l’instar des archives de la
discographie, entre l’envoyer par for-
mulaire, ou via FTP. La vidéo se décrit
ensuite avec un titre, des mots-clés
et une description.
• Edition des infos d’une vidéo
• Paramètres de téléchargement :
Sur le même principe que les archi-
ves des disques de la discographie,
les utilisateurs peuvent permettre le
téléchargement d’une archive de la
vidéo dans un format différent du flv.
Ce fichier peut être envoyé en interne
par formulaire ou FTP, ou utiliser un
service externe tel que rapidshare.
• Suppression d’une vidéo : Lors de
la suppression de la vidéo, les éven-
tuels fichiers locaux (vidéo au format
flv et archive téléchargeable) sont
supprimés.
• Changement de l’ordre d’afficha-
ge des vidéos
• Afficher/Masquer d’une vidéo
Services vidéo
• Afficher/Masquer la liste des vi-
déos http://www.youtube.com
http://www.dailymotion.com
5.2.6 Le site
La section Site de la zone d’administra-
tion regroupe tous les modules concer-
nant la vie du site, à savoir les news,
l’agenda, le livre d’or, le blog, etc...
C’est ici que l’on retrouve les modules
les plus simples (ou presque) dans leur
fonctionnement.
5.2.6.1 Les news
Module indispensable s’il en est, le mo-
dule des news est malgré tout assez
simpliste. Chaque news est définie par
un titre, une date de publication, une Dates des news
date d’expiration (optionnelle) et un Même si la visiblité d’une
contenu. news est définie à “visible”,
Fonctions du module elle ne sera affichée sur
le site qu’entre sa date
• Ajout d’une news
de publication et sa date
• Edition d’une news
d’expiration.
• Suppression d’une news
• Afficher/Masquer une news
• Afficher/Masquer la liste des
news
5.2.6.2 L’agenda
Deuxième module jugé le plus indis-
pensable lors de l’enquête préliminaire,
l’agenda est un élément incontourna-
ble de tout site de groupe qui se res-
pecte, permettant à tous les visiteurs
de consulter les prochains événements
relatifs à leur groupe préféré...
Chaque événement de l’agenda est
caractérisé par un titre, une date, une
description, le lieu, le prix et un lien
vers l’éventuel site de l’événement
(ces trois derniers attributs sont op-
tionnels).
Fonctions du module
• Ajout d’un événement
• Edition d’un événement
• Suppression d’un événement
• Afficher/Masquer un événement
• Afficher/Masquer la liste des évé-
nements
5.2.6.3 Le blog
Parmi les modules proposés lors de
l’enquête préliminaire, le blog n’a pas
été très populaire. Certaines person-
nes sondées ne comprenaient pas l’uti-
lité d’un blog sur un site du groupe, ce
n’est qu’après une petite explication
qu’ils ont compris le potentiel d’un blog
sur un site de groupe.
Depuis la création de l’ancien site de
mon groupe, nous avons pris l’habi-
tude de raconter nos répétitions, sor-
ties et concerts sous forme de “chro-
niques” sur le site. Ce petit “blog” du
groupe, d’abord créé pour nous-même
dans l’optique de nous rappeller nos
meilleures répètes et souvenirs, est
vite devenu une section fort fréquen-
Certains nous reprochent
tée par nos visiteurs qui voyaient là
même de ne pas être à jour
une occasion de suivre l’évolution du
lorsque nous oublions de
groupe, pas à pas, semaine après se-
chroniquer une répète !
maine.
Et puisqu’avant d’être une application
libre, fish in a pan sera l’application qui
fera tourner la nouvelle version du site
de mon groupe, populaire ou pas, le
blog en fera partie. Quitte à ce qu’il n’y
aie que nous qui ne l’utilisions...
Le module de blog de fish in a pan est
une version simplifiée mais fonction-
nelle des moteurs de blog traditionnels,
avec des catégories pour les articles et
la possibilité de laisser des commentai-
res pour chacun d’entre eux.
Le module gère donc trois types d’élé-
ments distincts mais liés : les éléments
articles, les éléments catégories et les
éléments commentaires.
Fonctions du module pour les
éléments articles
Chaque article de blog est caractérisé
par un titre, une catégorie, une date Date de publication
de publication, l’autorisation de com-
Même si la visibilité de
menter l’article, un résumé, un texte,
l’article est sur “visible”,
une galerie liée et un champ de texte
l’article ne sera pas publié
pour écrire une éventuelle setlist de
sur la zone publique tant que
concert.
sa date de publication ne
• Ajouter un article sera pas atteinte.
• Editer un article
• Visualiser un article : affiche l’ar-
ticle et les commentaires qui y sont
associés, pour les éditer ou les sup-
primer.
• Supprimer un article : si l’article
supprimé avait des commentaires, ils
seront également supprimés.
• Afficher/Masquer un article
• Afficher/Masquer la liste des arti-
cles du blog
Fonctions du module pour les
éléments commentaires
Un commentaire de blog est caracté-
risé par le pseudo de son auteur, son
email et éventuellement son site web,
la date de publication et son contenu.
• Afficher/Masquer un commentai-
re
• Afficher/Masquer les commentai-
res d’un billet
• Modérer le contenu d’un com-
mentaire
• Répondre à un commentaire :
cette fonction permet au groupe de
répondre à un commentaire précis,
cette réaction s’ajoutant direct à la
suite du commentaire dans la zone
publique.
• Supprimer le commentaire
Dans les préférences du blog dans la
configuration, l’utilisateur peut choisir
si les commentaires postés en réaction
à un article sont visibles directement
ou doivent être rendu visibles depuis la
zone d’administration.
Fonctions du module pour les
éléments catégories
Les catégories des articles sont définies
par un nom et une petite description.
• Ajouter une catégorie
• Edition d’une catégorie
• Suppression d’une catégorie :
une catégorie qui contient des arti-
cles ne peut être supprimée. Seules
les catégories vident peuvent être
supprimées.
5.2.6.4 Le livre d’or
Lors de l’enquête préliminaire, plus
de deux tiers des personnes sondées
ont trouvé le module de livre d’or utile
ou indispensable à un site de groupe.
Malgré tout ce que l’on peut dire, nous
aimons toujours bien savoir ce que
les autres pensent de ce que nous fai-
sons.
Le module du livre d’or, à l’instar des
commentaires du blog, agit sur des élé-
ments qui sont ajoutés depuis la zone
publique du site.
Chaque message posté sur le livre d’or
est caractérisé par un titre, le pseudo
de son auteur, son email, son éventuel
site web et enfin son message.
Fonctions du module
• Modérer le contenu d’un messa-
ge
• Réagir à un message : cette fonc-
tion est identique à celle des com-
mentaires de blog, et permet de
publier une réaction à un message
directement à la suite de celui-ci.
• Supprimer un message
• Afficher/Masquer un message
• Afficher/Masquer le livre d’or
À l’instar des commentaires de blog,
depuis la configuration du livre d’or,
vous pouvez décider de la visibilité par
défaut des nouveaux messages.
5.2.6.5 Le formulaire de contact
Lors de l’enquête préliminaire, les per-
sonnes sondées ont été 45% à trouver
le formulaire de contact utile et 40% à
le trouver indispensable. Mais, plutôt
que de faire un formulaire de contact
“classique” qui envoie un email à une
adresse de contact du groupe, les mes-
sages envoyés via ce formulaire sont
stockés dans la zone d’administration
du site et consultables par les utilisa-
teurs.
C’est aussi ici que sont affichés les
messages de commande de disque,
dont nous avons vu les options au point
5.2.4.4.
Chaque message est caractérisé par un
sujet, le pseudo de son expéditeur, son
adresse email, le contenu du message,
le type de message (message simple
ou commande), et enfin un indicateur
de réponse (qui est affiché lorsque l’un
des membres du groupe a répondu au
message en question).
Fonctions du module
• Lire le message
• Répondre au message : permet de
répondre à l’expéditeur à l’adresse
email laissée. Le contenu de l’email
est envoyé au format html, et peut
être personnalisé à l’aide de BBCode
et/ou d’un template Smarty spécial à
l’image du groupe (situé dans le dos-
sier templates du theme utilisé).
• Supprimer le message
• Afficher/Masquer le formulaire
de contact
5.2.6.6 Les liens
Lors de l’enquête préliminaire, les per-
sonnes sondées ont été unanimes :
90% d’entre elles jugeaient un module
de liens utile voire indispensable !
Le module de liens est sûrement le plus
basique de tous. Un lien est caractérisé
par un titre, une adresse, et une des-
cription.
Fonctions du module
• Ajouter un lien
• Edition d’un lien
• Supprimer un lien
• Afficher/Masquer un lien
• Afficher/Masquer la liste des
liens
• Changer l’ordre des liens
5.2.7 Configuration
La dernière des sections de l’admin est
la plus importante : c’est elle qui règle
tout le contenu du site.
5.2.7.1 Les préférences
utilisateurs
Le premier module de la configuration
est celui qui règle les préférences pro-
pres à l’utilisateur connecté sur l’ad-
min.
C’est le seul module de la configuration
qui n’a aucune incidence sur la zone
publique. Ici, chaque utilisateur peut
modifier son login et son mot de passe
pour la connexion à l’admin, etc...
5.2.7.2 Paramètres des modules
Ce module se charge de définir les op-
tions d’affichage des modules de la
zone publique. C’est ici, par exemple,
que vous pourrez choisir combien de
news s’afficheront en page d’accueil,
combien d’articles de blog il y aura par
page.
Depuis ce module, vous pouvez mas-
quer chacun des modules du site, de la
même manière que vous le pouvez sur
chaque module indépendamment.
C’est ici aussi que vous choisissez l’or-
dre d’affichage des pages dans le menu,
ainsi que les regroupements éventuels
des pages. En effet, vous pouvez réu-
nir ensemble la liste des membres et la
biographie pour ne faire qu’une seule
page sur la partie publique du site, la
même chose pour les médias audio et
vidéo que vous pouvez réunir en une
seule page.
C’est toujours sur ce module que vous
pouvez choisir le titre de chaque page,
son nom dans le menu du site, ainsi
que le texte d’introduction qui précé-
dera la liste des éléments de chaque
module.
5.2.7.3 Les paramètres du
système
Ce module est à la fois le plus impor-
tant du site et le plus à même de tout
détruire. Il est à prendre avec des pin-
cettes. C’est sur ce module que tous
les paramètres les plus importants du
site sont définis : le thème utilisé, le
nom du groupe, la taille des vignettes
générées lors de l’upload d’une photo,
la visibilité par défaut des commentai-
res du blog ou des messages du formu-
laire de contact, les flux rss disponibles
pour les visiteurs de la zone publique,
etc... Chaque modification d’un para-
mètre du système requiert le code de
sécurité pour être validé.
Ce module permet aussi de régler la Visibilité de la partie
visibilité de la zone publique du site. publique
En passant le site hors-ligne, seul les
Le changement de cet
membres pourront visiter le site, via
état se signale par un
l’administration. C’est pratique pour
changement de la couleur
les opérations de maintenance d’en-
de l’en-tête de l’admin.
vergure, l’installation d’un nouveau
Habituellement de couleur
thème, etc...
bleue, l’en-tête de la zone de
l’administration passe en gris
5.2.7.4 Système antispam
lorsque la partie publique du
Le spam par email est un fléau connu site est hors-ligne.
de tous sur le net. Ces emails non-dési-
rés, admirablement nommés pourriels
par les Québecquois, infestent nos
boites mail depuis des années. Depuis
quelques mois, un autre type de spam
sévit sur le réseau, appelé le spam de
commentaires. Typiquement, il s’agit
d’un robot (petit programme informati-
que qui fonctionne de manière autono-
me sur le net), qui, dès qu’il trouve un
formulaire de contact, de commentaire
pour un blog ou un livre d’or, s’amuse
comme un petit fou à l’inonder de mes-
sage vantant les plaisirs de sites por-
nographiques, de vente de viagra, ou
les deux (l’un ne va bizarrement jamais
sans l’autre sur internet).
Fish in a pan intègre un système antis-
pam basé sur un dictionnaire de mots.
Lorsque l’un de ces mots est trouvé
dans un commentaire ou message sou-
mis par un visiteur, celui-ci n’est pas
enregistré et un message avertit l’uti-
lisateur du blocage de son message.
Un robot ne cherchera pas plus loin, et
un visiteur humain prendra conscience
de son erreur et modifiera son messa-
ge (ou ira vendre ses stocks de pilules
bleues plus loin).
Le module antispam de fish in a pan
permet de choisir quel filtre antispam
utiliser. Le système par défaut est celui
du dictionnaire, défini plus haut. Le mo-
dule vous permet d’ajouter vos propres
mots au dictionnaire, afin de l’enrichir
au fur et à mesure de l’évolution des
robots spameurs.
Le second type de filtre se base sur un
test de Turing. Pour faire court, le test
de Turing est un test qui sert à détermi-
ner si on a à faire à une machine ou un
humain, en posant une suite de ques-
tions. Le test de Turing le plus connu
sur internet est le Captcha, image
légèrement brouillée contenant des
caractères à retaper pour valider son
message. Mais il existe un test de Tu-
ring encore plus simple et tout aussi ef-
ficace, le test de la question idiote.
À la différence d’un humain, un ordina-
teur ne pourra répondre à une question
du style “Quelle est la couleur du che-
val blanc de Napoléon ?”
Un ordinateur, à l’heure actuelle de la
technologie, ne peut comprendre l’ab-
surdité de la question qui donne la ré-
ponse dans son énoncé.
Le second type de filtre antispam de
fish in a pan consiste à poser la ques-
tion ci-dessus en demandant une cou-
leur aléatoirement choisie parmi une
série de couleurs. Ainsi, les robots se-
ront floués.
Vous pouvez activer l’un ou l’autre des
filtres antispam, ou les deux ensem-
bles.
Ce filtre s’appliquera aux messages du
livre d’or, du formulaire de contact et
aux commentaires de blog.
5.2.7.5 Utilitaire de base de
données
On ne le dira jamais assez, une sauve-
garde régulière des bases de données
et des fichiers d’un site est plus qu’im-
portante en cas de crash. Si la plupart
des hébergeurs sérieux font ces sauve-
gardes quotidiennement, on est jamais Test de Turing
à l’abri d’un incident. De plus, avoir une http://fr.wikipedia.org/
sauvegarde des bases de données per- wiki/Test_de_Turing
met de réparer une grosse erreur acci-
dentelle d’un membre qui aurait eu la
main lourde lors de l’édition du site. Captcha
http://fr.wikipedia.org/
Le module d’utilitaire de base de don-
wiki/Captcha
nées permet de sauvegarder le conte-
nu des tables de la base de données de
fish in a pan dans un fichier texte ainsi
que de les restaurer à partir d’un autre Second avantage de la
fichier. question idiote
Ce système de sauvegarde n’est pas Ce test a pour qualité
automatisé, mais les utilisateurs peu- supplémentaire de recaler les
vent, depuis ce module, demander au gens les plus idiots, souvent
système de leur rappeler, via un mes- bien plus nuisibles que les
sage dans le chat privé, de faire une robots.
sauvegarde de la base de données tou-
tes les semaines ou tous les mois, par
exemple.
 5.3 La zone publique
La partie publique du site de fish in a
pan est bien plus rapide à décrire. En
effet, son fonctionnement est en tout
point conforme à celui d’un site classi-
que, si ce n’est que chaque page affi-
che les éléments du module associé.
L’entièreté du contenu de la partie pu-
blique est généré depuis l’admin.
5.3.1 Les thèmes
La personnalisation de l’habillage de
cette partie publique passe par un sys-
tème de thèmes.
Ces thèmes, qui consistent en un réper-
toire contenant des feuilles de styles,
des templates smarty et des images,
sont personnalisables facilement par
les utilisateurs qui s’y connaissent un
peu en CSS, voire en HTML.
Les utilisateurs plus hardis ou confir-
més pourront même modifier le conte-
nu des templates de manières à ce que
l’affichage des modules soit le plus
proche possible de leurs attentes.
Lors de l’installation de fish in a pan,
le système est installé avec un thème
par défaut, passe-partout. L’utilisateur
est libre de le modifier ou d’utiliser l’un
des thèmes qui seront progressivement
disponibles sur le site de fish in a pan.
5.3.2 Les flux RSS
À l’instar de l’administration, la partie
publique possède aussi ses flux RSS
pour suivre l’actualité du groupe.
Ces flux, personnalisables depuis l’ad-
ministration, reprennent :
• Les news
• Les événements de l’agenda
• Les articles du blog
• Les commentaires postés sur le blog
(pour un article ou pour tous)
• Les messages postés sur le livre d’or
• Un flux général réunissant les précé-
dents
5.4 Les modules abandonnés
Un certain nombre de modules divers
n’ont pas pu être intégrés à fish in a
pan, et ce pour deux raisons.
La première est le manque de temps
pour développer le projet. Il a fallu faire
un choix et certains modules ont été
mis sur le côté.
La seconde est la pertinence, certains
modules à priori intéressants ne fe-
raient qu’alourdir l’application, surtout
pour une première version.
Mais qui dit abandonné ne veut pas
dire mort, et certains de ces modules
sont entourés de rouge dans mes ca-
hiers afin de sortir de l’ombre au fur et
à mesure des évolutions prochaines de
fish in a pan.
Parmi ces modules, on peut citer :
• Mailing-list : Ce module, initiale-
ment prévu, a été reporté par manque
de temps. Il permettra aux visiteurs
de s’inscrire en donnant leur adresse
email afin de recevoir des bulletins
de news écrits par le groupe.
• Splash-screen : Reporté parce que
susceptible de créer un immense trou
 de sécurité. Ce module devrait per-
mettre au groupe d’ajouter une page
d’introduction au site, avec un conte-
nu personnalisé.
• Statistiques : Reporté par manque
de temps, le module de statistiques
permettra au groupe de visualiser
le nombre de visiteurs du site, selon
leur provenance, leur parcours sur le
site, les navigateurs utilisés et bien
d’autres choses encore.
• Espace pro : Ce module, soumis lors
de l’enquête préliminaire, n’a pas
été inclus au projet par manque de
temps, mais fait partie des futurs mo-
dules à intégrer dans l’application. Il
permettra au groupe de partager en
ligne ses dossiers de presse, fiches
de scène et contrats avec d’éven-
tuels organisateurs de concerts.

5.5 Captures d’écrans

Pour conclure notre description de l’ap-
plication, je vous invite à vous reporter
à l’annexe 6 où vous pourrez consulter
quelques captures d’écrans de l’appli-
cation.

ish in a pan ne se réduit pas unique-
ment à l’application décrite dans cet
ouvrage.
Dans ce petit chapitre, nous abordons
certains points dont on n’a pas encore
parlé, ou qui ont été abordés lors de
la description de l’application sans être
approfondis.
6.1 Le site de fish in a pan
Actuellement en développement, le
site de fish in a pan, prévu pour la
release de juillet, a pour objectif de
devenir une référence pour les utilisa-
teurs de l’application, où ils pourront
consulter l’aide en ligne et un forum
d’entraide. Ce sera aussi le point cen-
tral pour télécharger les mises à jour et
les correctifs de l’application ainsi que
les nouveaux thèmes qui s’ajouteront
progressivement sur le site.
Autour de fish in a pan
6.2 La sortie publique
J’en ai parlé plusieurs fois au cours de
l’ouvrage, la sortie publique de fish in a
pan en version 1.0, sa première release,
aura lieu selon toute vraisemblance en
juillet 2007, une fois les derniers bou-
lons resserrés.
À partir de ce moment-là, le travail de
support et d’aide aux premiers utilisa-
teurs commençera.
6.3 Le prix de fish in a pan Le site de fish in a pan
À partir du moment où j’ai décidé de http://fishinapan.
rendre publique cette application, l’idée sourceforge.net
était claire dans ma tête : ce sera une
application gratuite et libre, au sens où
les futurs utilisateurs de mon applica-
tion seront libres d’en modifier la struc-
ture selon leurs compétences, afin de
l’adapter à leurs besoins spécifiques.
De nos jours, nous utilisons de plus en
plus de logiciels open-source, souvent
développés par une seule personne
au départ qui est progressivement en-
tourée par une équipe de gens moti-
vés pour faire avancer un projet qu’ils
aiment.
C’est donc pour ces raisons que fish in
a pan sera téléchargeable gratuitement
et disponible sous licence GNU/GPL.
6.4 L’équipe fish in a pan
concerts, s’entraider et se faire connaî-
tre les uns les autres.
La release de juillet 2007 n’est donc
pas une fin en soit, mais plutôt le vrai
départ de fish in a pan.
License GNU/GPL
http://www.gnu.org/
licenses/gpl.html

À l’heure où j’écris ces lignes, l’équipe

fish in a pan n’est pas bien grande,
puisqu’elle comporte un chef de projet,
un webdesigner, un développeur et un
intégrateur... qui ne sont jamais qu’une
seule et même personne, moi.
Tant que fish in a pan était un projet
scolaire, je ne pouvais bien sûr pas me
faire aider. Mais tout au long du dé-
veloppement, j’ai rencontré des gens
motivés par mon projet, qui souhaitent
apporter leur écaille au poisson.
Une fois la release de juillet effectuée,
je compte bien recontacter toutes ces
personnes pour faire évoluer fish in a
pan autour d’une équipe soudée, profi-
tant des capacités de chacun.

6.5 La communauté
Ce projet, que j’ai vaguement abordé
au début de cet ouvrage, est l’un de
ceux qui me tient le plus à coeur une
fois que l’application aura pris un peu
d’ampleur : créer un site communau-
taire, réunissant les groupes utilisant
mon moteur de site, afin de mettre en
commun leurs news, leurs agendas
et morceaux, pour créer une commu-
nauté de groupes apte à se trouver des
 u moment où je rédige ces lignes, La prochaine grande aventure, ce sera
fish in a pan est presque terminé. Il la release de fish in a pan, en juillet.
reste quelques bug à corriger. En regar- Sortir mon poisson de sa poêle et le re-
dant ma table de nuit où se trouve mon lacher dans les eaux troubles du net.
cahier à idées, dans les pages duquel la Espérons juste qu’il n’ait pas cuit trop
première idée concernant fish in a pan longtemps...
fut écrite, bien, bien avant de taper la
première ligne de code, je ne suis pas
peu fier du chemin parcouru.
Entre les premières lignes de code,
tapées en janvier 2007, l’abandon en
mars, la renaissance du code sous une
autre forme en fin avril et les derniers « Quelque part, dans un autre monde loin du
boulons à serrer, il y a eu beaucoup de Disque, quelqu’un empoigna d’une main hésitante
questions, d’idées idiotes tombées à un instrument dont la musique fit écho au rythme
l’eau, de grandes idées bien trop gran- qui lui soûlait l’âme.
des pour être reprises et de petites
idées anodines qui sont toujours écrites Elle ne mourra jamais.
à droite à gauche, dans mon fameux Elle est là et bien là. »
cahier ou sur le gigantesque poster col-
lé sur le mur de ma chambre qui m’a Accros du roc, Terry Pratchett
servi de roadmap, rempli de gribouillis,
de ratures et de petits “OK” verts au fur
et à mesure de l’avancée des fonctions
à inclure dans fish in a pan.
 Bibliographie
Collectif, article “Myspace” sur Wikipédia, http://fr.wikipedia.org/wiki/Myspace
(consulté le 12 mai 2007)
Collectif, article “KISS (principe)” sur Wikipédia, http://fr.wikipedia.org/wiki/KISS-
principe (consulté le 15 mai 2007)
Collectif, article “Modèle-Vue-Contrôleur” sur Wikipédia, http://fr.wikipedia.org/
wiki/MVC (consulté le 11 mai 2007)
Collectif, article “Test de Turing” sur Wikipédia, http://fr.wikipedia.org/wiki/Test_de_
Turing (consulté le 20 mai 2007)
Collectif, article “Captcha” sur Wikipédia, http://fr.wikipedia.org/wiki/Captcha
(consulté le 20 mai 2007)

Références
WIEDEMANN Julius (éd.), Web Design : Music Sites, Taschen, coll. Icons, 2006
WIEDEMANN Julius (éd.), Web Design : Studios, Taschen, coll. Icons, 2006
GOTO Kelly & COTLER Emily, [Re]design web [2.0] Conduite de projet, Eyrolles,
2005
PORTENEUVE Christophe, Bien développer pour le Web 2.0, Eyerolles, 2006

Partie Privée
Fish in a pan La partie privée d’un
sh in a pan a plusieurs
C’est quoi ?
fonctionnalités, dont la
plus importante est celle de
Fish in a pan est le nom de gêrer le contenu de la partie
mon projet de n d’études. publique du site.
Ca consiste en quoi ? Mais comme le système
sh in a pan est ciblé pour
Fish in a pan est un CMS les groupes de musique, la
destiné aux groupes de partie privée comprendra
musique. certaines fonctionnalités
L’idée est de développer un plus pratiques qui leur sont
destinés, telles que:
système de site web complet
à destination des groupes de Tagboard: Le tagboard est un
musique, avec une interface chat, privé, à destination des
d’administration simple et musiciens du groupe, pour
permettant de gêrer tout le faciliter la communication
contenu d’un site de groupe entre eux.
typique.
Gestion des chansons: Au
sein de la partie privée du
Fonctionnalités sh in a pan, les musiciens
du groupe pourront mettre à
Installeur: L’installation du
jour l’avancée des chansons
système sh in a pan sur un en cours de composition, en
hébergeur quelconque sera leur attachant les partitions,
simple, basée sur une suite ajouts, etc, de manière à
de petits formulaires pour savoir à tout moment où se
chaque étape (un peu comme situe le travail à faire sur les
dans le système Dotclear).
compositions.
Le reste des fonctionnalités
2 3
Annexe 1 : Cahier des charges original
Cahier des charges
permet de gêrer le contenu
de la partie publique du site.
Parmis ces fonctionnalités,
nous trouverons:
• Un module de news
• Gestions des membres (pour
ajouter/éditer/supprimer les
ches des membres du groupe)
• Edition de la biographie
• Gestion de la discographie
• Un module de blog
• Un agenda
• Un livre d’or
• Gestion des médias audio/vidéo
• Gestion des galeries photos (galeries privées / publi-
ques)
• Conguration du site
Chaque module sera (dés)activable à volonté pour per-
mettre au groupe de modeler son site à sa convenance, au
fur et à mesure de son évolution.
Partie publique De plus, l’utilisation de la
technologie rss permettra de
La partie publique du tenir les visiteurs au courant
site, visible par tous les de tout changement sur le
visiteurs, sera entièrement site.
personnalisable via un
système de thèmes simples
à modier.
Cahier des charges

Technologies permettra aux utilisateurs

du système d’être tenu au
Le système     courant des mises à jour du
sera réalisé en utilisant l’en- système.
semble des technologies web  Le système
suivantes: sh in a pan sera téléchar-
 (version 4.3 par souci geable gratuitement sous
de compatibilité) couvert de la license GNU/
GPL.

 (normes W3C)
 (non-obstructif,
l’utilisation d’AJAx appor-
tant plus d’intuitivité et de
convivialité à un outil)



Notes
 le
système sh in a pan sera
codé de manière a être fa-
cilement adaptable en de
multiples langues. Lors de
la sortie du projet, la langue
française sera la seule dispo-
nible, mais la langue anglai-
se rejoindra très vite cette
première.
 un système
basé sur la technologie rss

4
 Annexe 2 : Code de l’objet Element

<?php
class Element {
// Constructeur
function Element($table=NULL, $id=NULL) {
if( !empty($table) && is_numeric($id) ) {
$this->o_table = BDD_PREFIX.$table;
$this->o_tableName = $table;
$this->o_idPrefix = substr($table, 0, -1);
$this->o_id = $id;
$this->load($id);
}
} // Element

// fonction load, charge un rang de la db (identifié par un id) dans l’objet
function load($id) {
if( !$id ) return false;
$request = ”SELECT * FROM ”.$this->o_table.” WHERE ”.$this->o_idPrefix.”_id =
‘”.$id.”’”;
$this->o_loadRequest = $request;
$data = mysql_query($request);
if( !$data ) { return false; }
while( $current = @mysql_fetch_assoc($data) ) {
$array[] = array_map(”stripslashes”, $current);
}
// variables de l’utilisateur
foreach($array[0] as $key=>$value) {
$this->$key = $value;
}
$this->o_id = $id;
} // load

(suite du code page suivante)


// fonction save, sauve le contenu de l’objet dans la db

function save() {
// récupération des paramètres de l’objet
$properties = get_object_vars($this);
foreach($properties as $key=>$value) {
if( substr($key, 0, 2) != ”o_” ) {
if( strlen($value) == strlen( addslashes($value) ) ) {
$values[] = ”’”.$value.”’”;
} else {
$values[] = ”’”.addslashes($value).”’”;
}
$keys[] = $key;
}
}
$keysForRequest = implode(”, ”, $keys);
$valuesForRequest = implode(”, ”, $values);
// construction de la requête
$request = ”REPLACE INTO ”.$this->o_table.” (”.$keysForRequest.”) VALUES
(”.$valuesForRequest.”)”;
$this->o_saveRequest = $request;
return mysql_query( $request );
} // save

// fonction delete, efface de la db l’objet en cours

function delete() {
$request = ”DELETE FROM ”.$this->o_table.” WHERE ”.$this->o_idPrefix.”_id = ‘”.$this-
>o_id.”’”;
return mysql_query( $request );
} // delete
} // class Element
?>
 Annexe 3 : Code de l’objet Config

<?php
class Config {
// Constructeur
function Config() {
$this->o_table = BDD_PREFIX.»config»;
$configData = Multiple::parseRequest(«SELECT * FROM «.$this->o_table.»»);
foreach($configData as $param) {
$this->$param[«config_key»] = $param[«config_value»];
}
} // Config

// fonction save, sauve le contenu de l’objet dans la db
function save() {
// récupération des paramètres de l’objet
$properties = get_object_vars($this);
foreach($properties as $key=>$value) {
if( substr($key, 0, 2) != «o_» ) {
$values[] = «(‘».$key.»’, ‘».$value.»’)»;
}
}
$valuesForRequest = implode(«, «, $values);
// construction de la requête
$request = «REPLACE INTO «.$this->o_table.» (config_key, config_value) VALUES
«.$valuesForRequest.»»;
return mysql_query( $request );
} // save

// fonction saveAndReload, sauve la config et la recharge

function saveAndReload() {
if( $this->save() ) {
$configData = Multiple::parseRequest(«SELECT * FROM «.$this->o_table.»»);
foreach($configData as $param) {
$this->$param[«config_key»] = $param[«config_value»];
}
return true;
}
}
} // class Config
?>
 Annexe 4 : Code de l’objet Multiple

<?php
class Multiple {
// pas de constructeur
// ----------------------------------------
// --- fonctions de requêtes

// getTagboardMessages
function getTagboardMessages($begin=0, $limit=50) {
$request = ”SELECT tb.* , usr.surnom AS msg_user FROM ”.BDD_PREFIX.”boardmsgs tb LEFT
JOIN ”.BDD_PREFIX.”users usr USING ( user_id ) WHERE msg_type = ‘msg’ ORDER BY tb.msg_date DESC
LIMIT ”.$begin.”, ”.$limit.””;
return Multiple::parseRequest($request, true);
} // getTagboardMessages

// getTagboardNotifs
function getTagboardNotifs($begin=0, $limit=200) {
$request = ”SELECT tb.* , usr.surnom AS msg_user FROM ”.BDD_PREFIX.”boardmsgs tb LEFT
JOIN ”.BDD_PREFIX.”users usr USING ( user_id ) WHERE msg_type <> ‘msg’ ORDER BY tb.msg_date DESC
LIMIT «.$begin.”, ”.$limit.””;
return Multiple::parseRequest($request, true);
} // getTagboardNotifs

// getMembers
function getMembers() {
$request = ”SELECT usr.* FROM ”.BDD_PREFIX.”users usr WHERE group_members = 1 ORDER
BY usr.display_order ASC”;
return Multiple::parseRequest($request, true);
} // getMembers

// getUsers
function getUsers() {
$request = ”SELECT usr.* FROM ”.BDD_PREFIX.”users usr WHERE group_members = 0 ORDER
BY usr.display_order ASC”;
return Multiple::parseRequest($request, true);
} // getUsers


 // getLyrics
function getLyrics() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”lyrics ORDER BY lyric_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getLyrics

// getDiscs
function getDiscs() {
$request = ”SELECT dsc.*, COUNT(sng.song_id) AS nbrSongs FROM ”.BDD_PREFIX.”discs dsc
LEFT JOIN ”.BDD_PREFIX.”songs sng ON( dsc.disc_id = sng.song_disc_id ) GROUP BY dsc.disc_id ORDER
BY disc_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getDiscs

// getSongs
function getSongs( $discId ) {
$request = ”SELECT * FROM ”.BDD_PREFIX.”songs WHERE ‘”.$discId.”’ = song_disc_id
ORDER BY song_disc_cd_order ASC, song_disc_order ASC”;
$songs = Multiple::parseRequest($request, true);
if( $songs ) {
$newSongs = array();
foreach( $songs as $sng ) {
$newSongs[ $sng[”song_disc_cd_order”] ][ $sng[”song_disc_order”] ] =
$sng;
}
}
return $newSongs;
} // getSongs

// getSongByTrackNum
function getSongByTrackNum( $discId, $discNumber, $songNumber ) {
$request = ”SELECT song_id FROM ”.BDD_PREFIX.”songs WHERE ‘”.$discId.”’ = song_disc_
id AND song_disc_cd_order = ‘”.$discNumber.”’ AND song_disc_order = ‘”.$songNumber.”’ LIMIT 0,1”;
$data = Multiple::parseRequest($request);
return new Element(”songs”, intval( $data[”song_id”] ));
} // getSongByTrackNum


 // getAudio
function getAudio() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”medias ORDER BY media_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getAudio
// getVideo
function getVideo() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”videos ORDER BY video_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getVideo

// getNews
function getNews() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”news ORDER BY new_date DESC”;
return Multiple::parseRequest($request, true);
} // getNews

// getEvents
function getEvents() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”events ORDER BY event_date DESC”;
return Multiple::parseRequest($request, true);
} // getEvents

// getLivre
function getLivre() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”livres ORDER BY livre_date DESC”;
return Multiple::parseRequest($request, true);
} // getLivre

// getContacts
function getContacts() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”contacts ORDER BY contact_date DESC”;
return Multiple::parseRequest($request, true);
} // getContacts

 // getLinks
function getLinks() {
$request = ”SELECT * FROM ”.BDD_PREFIX.”links ORDER BY link_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getLinks

// getArticles
function getArticles( $byCat=false ) {
if( $byCat ) {
$filter = ”WHERE art.categorie_id = ‘”.$byCat.”’”;
}
$request = ”SELECT art.*, COUNT(com.comment_id) AS comNbr, usr.surnom AS author,
cat.categorie_name FROM ”.BDD_PREFIX.”articles art LEFT JOIN ”.BDD_PREFIX.”comments com ON com.
article_id = art.article_id LEFT JOIN ”.BDD_PREFIX.”users usr ON usr.user_id = art.article_author
LEFT JOIN ”.BDD_PREFIX.”categories cat ON cat.categorie_id = art.categorie_id ”.$filter.” GROUP BY
art.article_id ORDER BY article_date DESC”;
return Multiple::parseRequest($request, true);
} // getArticles

// getCategories
function getCategories() {
$request = ”SELECT cat.*, COUNT(art.article_id) as artNbr FROM ”.BDD_
PREFIX.”categories cat LEFT JOIN ”.BDD_PREFIX.”articles art USING(categorie_id) GROUP BY
categorie_id ORDER BY categorie_name ASC”;
return Multiple::parseRequest($request, true);
} // getCategories

// getComments
function getComments( $art=false ) {
if( is_numeric($art) ) {
$filter = ”WHERE article_id = ‘”.intval($art).”’”;
}
$request = ”SELECT * FROM «.BDD_PREFIX.”comments ”.$filter.” ORDER BY comment_date
DESC”;
return Multiple::parseRequest($request, true);
} // getComments


 // getFolders
function getFolders( $public=false ) {
if( $public ) {
$filter = ”WHERE folder_private = 0”;
}
$request = ”SELECT fld.*, COUNT(pto.photo_id) AS nbrPhotos FROM ”.BDD_PREFIX.”folders
fld LEFT JOIN ”.BDD_PREFIX.”photos pto USING(folder_id) ”.$filter.” GROUP BY folder_id ORDER BY
folder_private DESC, folder_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getFolders

// getPhotos
function getPhotos( $id ) {
$request = ”SELECT * FROM ”.BDD_PREFIX.”photos WHERE folder_id = ‘”.$id.”’ ORDER BY
photo_display_order ASC”;
return Multiple::parseRequest($request, true);
} // getPhotos

(suite du code à la page suivante)

// ----------------------------------------
// --- fonctions utilitaires

// parseRequest, effectue la requête et la pré-traite, puis retourne le résultat

function parseRequest($request, $skipUnique=false) {
$data = mysql_query($request);
if( $data == false ) {
return false;
}
while( $current = @mysql_fetch_assoc($data) ) {
$array[] = array_map(”stripslashes”, $current);
}

if( $skipUnique && count($array) != 0 ) {
return $array;
}

if( count($array) > 1 ) {

return $array;
 } elseif( count($array) > 0 ) {
return $array[0];
} else {
return false;
}
} // parseRequest

// getError, récupère la dernière erreur rencontrée

function getError() {
if (mysql_error() != ‘’) {
echo ‘<h2>Mysql Error (‘.mysql_errno().’) : ‘.mysql_error().’</h2>’;
exit;
} else {
echo ‘<h2>Aucune erreur mysql rencontr&eacute;e.</h2>’;
}
} // getError
} // class Multiple
?>
 Annexe 5 : Code d’un module typique : le module admin_news

<?php
// inclusion noyau
require_once(”../core/core_admin.php”);
session_start();

// vérification utilisateur actuel

User::verifyUser();

if( isset( $_GET[”action”] ) ) {

$smarty->assign(”action”, $_GET[”action”]);
} else {
$_GET[”action”] = ”list”;
}

// action à effectuer
switch( $_GET[”action”] ) {
case ”confirmDelete”:
$delNews = new Element(”news”, intval( $_POST[”new_id”] ) );
if( isset( $_POST[”reset”] ) ) {
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
break;
}
if( !$delNews->delete() ) {
$smarty->assign(”error”, ”cantSuppressNews”);
}
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
break;
case ”delete”:
$delNews = new Element(”news”, intval($_GET[”id”]) );
if( !$delNews ) {
$smarty->assign(”error”, ”news_dontExists”);
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
} else {
$smarty->assign(”newsData”, $delNews);
$smarty->assign(”action”, ”delete”);
}
 break;

case ”addSubmit”:
if( empty($_POST[”new_title”]) || empty($_POST[”new_description”]) ) {
$smarty->assign(”error”, ”emptyForm”);
$smarty->assign(”action”, ”add”);
} else {
$tempNews = new Element();
$tempNews->o_table = BDD_PREFIX.”news”;
$tempNews->o_idPrefix = ”new”;
if( !$tempNews ) {
$smarty->assign(”error”, ”saveError”);
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
} else {
$tempNews->new_title = str_entities( $_POST[”new_title”] );
$tempNews->new_date = ””.intval( $_POST[”new_date_Year”] ).”-
”.intval( $_POST[”new_date_Month”] ).”-”.intval( $_POST[”new_date_Day”] );
$tempNews->new_date_expiration = ””.intval( $_POST[”new_date_
expiration_Year”] ).”-”.intval( $_POST[”new_date_expiration_Month”] ).”-”.intval( $_POST[”new_
date_expiration_Day”] );
$tempNews->new_description = str_entities( $_POST[”new_description”] );
if( !$tempNews->save() ) {
$smarty->assign(”error”, ”saveError”);
$smarty->assign(”newsData”, $tempNews );
$smarty->assign(”action”, ”edit”);
} else {
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
}
}
}
break;
case ”add”:
$smarty->assign(”action”, ”add”);
break;

(suite du code page suivante)

 case ”editSubmit”:
$tempNews = new Element(”news”, intval( $_POST[”new_id”] ) );
if( !$tempNews ) {
$smarty->assign(”error”, ”saveError”);
$smarty->assign(”newsData”, $tempNews );
$smarty->assign(”action”, ”edit”);
} else {
$tempNews->new_title = str_entities( $_POST[”new_title”] );
$tempNews->new_date = ”.intval( $_POST[”new_date_Year”] ).”-”.intval(
$_POST[”new_date_Month”] ).”-”.intval( $_POST[”new_date_Day”] );
$tempNews->new_date_expiration = ””.intval( $_POST[”new_date_expiration_
Year”] ).”-”.intval( $_POST[”new_date_expiration_Month”] ).”-”.intval( $_POST[”new_date_
expiration_Day”] );
$tempNews->new_description = str_entities( $_POST[”new_description”] );
if( !$tempNews->save() ) {
$smarty->assign(”error”, ”saveError”);
$smarty->assign(”newsData”, $tempNews );
$smarty->assign(”action”, ”edit”);
} else {
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
}
}
break;
case ”edit”:
$tempNews = new Element(”news”, intval($_GET[”id”]) );
if( !$tempNews ) {
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
} else {
$smarty->assign(”newsData”, $tempNews );
$smarty->assign(”action”, ”edit”);
}
break;

(suite du code page suivante)

 case ”confirmToggleAllVisibility”:
if( isset( $_POST[”confirm”] ) ) {
$config->visible_news = intval( !$config->visible_news );
$config->save();
}
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action», ”list”);
break;
case ”toggleAllVisibility”:
if( $config->visible_news ) {
$smarty->assign(”action”, ”hideAll”);
} else {
$smarty->assign(”action”, ”showAll”);
}
break;
case ”toggleVisibility”:
if( is_numeric($_GET[”id”]) ) {
$tempNews = new Element(”news”, intval( $_GET[”id”] ));
$tempNews->new_visible = intval(!$tempNews->new_visible);
$tempNews->save();
unset( $_GET );
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
}
break;
default:
$smarty->assign(”news”, Multiple::getNews() );
$smarty->assign(”action”, ”list”);
break;
}

// affichage
$smarty->assign(”PageScriptFile”, ”admin_news”);
$smarty->assign(”activePage”, ”site”);
$smarty->assign(”activeUnder”, ”news”);
$smarty->display(”admin_news.tpl”);
?>
 Annexe 6 : Captures d’écran

Les captures d’écran ont été réalisées avec le navigateur Firefox 2.0.0.3 sur Mac
OS 10.4.9

Capture n°1
Chat privé et son formulaire.
 Capture n°2
Module de gestion des
membres
 Capture n°3
Module des photos :
organisation des photos
 Capture n°4
Edition d’une vidéo importée
de YouTube
 ish in a pan est un CMS (Content Ma-
nagement System - Système de gestion
de contenu) qui permet de facilement
créer et maintenir à jour un site dédié
à un groupe de musique, avec tous les
fonctionnalités appropriées : gestion
de médias, d’un agenda, d’un livre d’or
et bien d’autres choses.
Ce projet, qui a la base était une pro-
duction égoïste et destinée à ne servir
qu’à un seul site et un seul groupe de
musique (le mien), s’est doucement
changé en un projet ouvert et destiné
à être publié sur internet, pour être uti-
lisée de manière libre et gratuite par
tous les groupes en manque de temps
et de compétences pour pouvoir se do-
ter d’un site web facile à maintenir en
vie en même temps que le groupe dont
il parle.
De la préparation du hameçon à la fina-
lisation du projet, le document que vous
tenez dans les mains vous dira tout sur
cet étrange poisson qui frit doucement
dans sa poêle depuis bientôt un an...
ish in a pan is a CMS (Content Mana-
gement System) which easily allows to
create and to keep updated a website
dedicated to a music band with all the
appropriated functions: media, journal,
tour dates management and so on.
This project, which was first created for
an egocentric purpose (the manage-
ment of my band website), slowly turns
to become an open and online project
so that all bands could use it freely wi-
thout charges. The main goal is to help
those bands which didn’t have time or
skills enough to manage their music,
their members and their website in the
same time.
From the hook to the plate the docu-
ment you are holding in your hands is
going to tell you everything about this
weird fish which has been frying slowly
in its pan from nearly one year...