Vous êtes sur la page 1sur 68
CMS et groupes de musique
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.

Accros du roc, Terry Pratchett CMS et groupes de musique
Accros du roc, Terry Pratchett
CMS et groupes de musique

– Vous avez jamais été doué en musique, doyen. C’est un de vos bons côtés. »

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

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

1 2

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

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.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, à
nternet est une invention formida- ble. Et quand Internet est entré dans ma vie, à

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.

possible de ne pas faire l’impasse sur l’essentiel, sans pour autant vous perdre dans des ex-
possible de ne pas faire l’impasse sur l’essentiel, sans pour autant vous perdre dans des ex-

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é

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 !)

(ou au moins fish in a pan) Merci les gars.

Et coucou à tout ceux que j’oublie.

</mode>

Bon. Et si on commençait ?

au moins fish in a pan) Merci les gars. Et coucou à tout ceux que j’oublie.
au moins fish in a pan) Merci les gars. Et coucou à tout ceux que j’oublie.
nternet, comme je le disais dans l’introduction, est un outil formidable. Je ne suis bien
nternet, comme je le disais dans l’introduction, est un outil formidable. Je ne suis bien

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.

à essayer de s’y montrer en se créant un site. Science du buzz web Le groupe

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.

fans de télécharger les sources de leurs morceaux au format GarageBand afin qu’ils créent leurs propres

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

mais pas plus facile.

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, relativement nul. Comme pour tout, l’idée est de faire son nid, petit à petit, 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

car la plus onéreuse. Il ne faut pas oublier une chose : la MySpace http://www.myspace.com MySpace

MySpace

http://www.myspace.com

MySpace sur wikipédia

http://fr.wikipedia.org/

wiki/Myspace

pas oublier une chose : la MySpace http://www.myspace.com MySpace sur wikipédia http://fr.wikipedia.org/ wiki/Myspace

musique des débutants est rarement rentable dès le début.

• “J’ai un ami qui connait un type ”

est la solution la

plus utilisée par la plupart des petits groupes : le bon vieux “Do it yourself”. Ici, c’est au petit bonheur la chance :

on s’y connait ou on ne s’y connait pas, et donc le résultat est souvent loin des attentes du groupe.

Au final, on en arrive à un problème simple et vieux comme le web : on a un site qui est super au début, mais qu’il 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

qui pourrait

site de mon groupe, et permettait à mes collègues musiciens d’éditer les news, l’agenda et de modérer le livre d’or de notre site.

Progressivement, les fonctions se sont améliorées, et la possibilité de faire de cette idée un vrai projet scolaire m’a poussé à le reprendre de zéro, et d’en faire un système plus costaud, polyva- lent et apte à s’adapter aux exigences qu’attendent les groupes qui souhai- tent se lancer dans la grande aventure de la création d’un site web.

qu’attendent les groupes qui souhai - tent se lancer dans la grande aventure de la création
qu’attendent les groupes qui souhai - tent se lancer dans la grande aventure de la création
L’idée et les objectifs idée de réaliser un système per- mettant aux groupes de créer

L’idée et les objectifs

L’idée et les objectifs idée de réaliser un système per- mettant aux groupes de créer leur

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

)

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- liser toutes mes connaissances et amis rencontrés dans la vie, comme sur les forums, de manière à recueillir leurs at- 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

par courrier classique me semblait hors

Un questionnaire écrit envoyé

).

me semblait hors Un questionnaire écrit envoyé ). Cahier des charges Ce premier cahier des charges

Cahier des charges

Ce premier cahier des charges est consultable à l’annexe 1.

hors Un questionnaire écrit envoyé ). Cahier des charges Ce premier cahier des charges est consultable

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

les actions

charger un fichier, etc

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- dra pas plus pour utiliser fish in a pan. Un peu plus d’une personne sondée sur 2 sait utiliser un FTP, compétence né- céssaire pour installer fish in a pan.

Les deux questions suivantes, un peu 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,

des thèmes et du moteur en particulier. Sans surprise, Résultats détaillés Les résultats détaillés de

Résultats détaillés

Les résultats détaillés de l’enquêtes sont consultables à l’adresse :

http://fishinapan.

lisaserver.be/enquete.php

résultats détaillés de l’enquêtes sont consultables à l’adresse : http://fishinapan. lisaserver.be/enquete.php

un peu plus d’une personne sur deux déclare avoir de vagues connaissances (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

indispensables, tant et si bien que ma liste de fonctions à intégrer a très vite

proposés sont jugés utiles ou indispensables, tant et si bien que ma liste de fonctions à
proposés sont jugés utiles ou indispensables, tant et si bien que ma liste de fonctions à
proposés sont jugés utiles ou indispensables, tant et si bien que ma liste de fonctions à

é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 mystérieux et complètement idiot.

Toutefois, sachant que l’un des meilleurs moteurs de blog se nomme Dotclear, 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, définir mes objectifs et commencer le travail, ce qui est l’objet du chapitre suivant.

le travail, ce qui est l’objet du chapitre suivant. fish in a pan Écrit tout en

fish in a pan

Écrit tout en minuscule.

En français, ça signifie “un poisson dans une poêle”.

La dernière partie du questionnaire

La dernière partie du 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”).

idée a été mise de côté pour le PFE mais reste dans les cartons (avec un
Le développement de fish in a pan e développement d’un système aus- si complexe que

Le développement de fish in a pan

Le développement de fish in a pan e développement d’un système aus- si complexe que fish

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.

Les technologies requises par le système

Fish in a pan est avant tout un site web, et son objectif est d’être utilisable par le plus grand nombre d’utilisateurs,

utilisable par le plus grand nombre d’utilisateurs, Principe du KISS “Keep it simple, stupid !”

Principe du KISS

“Keep it simple, stupid !”

http://fr.wikipedia.org/

wiki/KISS-principe

grand nombre d’utilisateurs, Principe du KISS “Keep it simple, stupid !” http://fr.wikipedia.org/ wiki/KISS-principe

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, qui permet de simplifier le code à l’extrême sans souci de compatibilité entre les navigateurs, et la bibliothèque scriptaculous, qui permet d’ajouter des effets spectaculaires aux éléments de la page.

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 qui à priori ne paie pas de mine, mais 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-

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- cessoires.

taire, tout y passe

mais malgré tout, ac- cessoires. taire, tout y passe Prototype http://www.prototypejs.org Scriptaculous

Prototype

http://www.prototypejs.org

Scriptaculous

http://script.aculo.us

Coda

http://www.panic.com/coda/

Smarty

http://smarty.php.net

Scriptaculous http://script.aculo.us Coda http://www.panic.com/coda/ Smarty 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

être

(dés)activable à volonté de manière à

Chaque module devant

permettre aux groupes de moduler le site selon leurs envies.

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

Nous ne nous étendrons pas plus sur cette première tentative.

bref, un cauchemar).

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). J’y ai appris beaucoup de choses, dont une qui a (osons le mot) révolutionné ma façon de travailler : l’orienté objet

réfléchi.

ma façon de travailler : l’orienté objet réfléchi . YourSQL http://yoursql.ludit.it VAlain S.A.

YourSQL

http://yoursql.ludit.it

VAlain S.A.

http://www.valain.lu

ma façon de travailler : l’orienté objet réfléchi . YourSQL http://yoursql.ludit.it VAlain S.A. http://www.valain.lu

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- ficace et lisible pour une personne ex- térieure à son travail.

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-

Pour Fish in a pan, je voulais dès le début intégrer du ja- Modèle-Vue-Contrôleur http://fr.wikipedia.org/ wiki/MVC

Modèle-Vue-Contrôleur

http://fr.wikipedia.org/

wiki/MVC

Pour Fish in a pan, je voulais dès le début intégrer du ja- Modèle-Vue-Contrôleur http://fr.wikipedia.org/ wiki/MVC

vascript propre et dégradable, afin de permettre aux utilisateurs ayant fait le choix d’activer javascript de profiter d’une expérience utilisateur plus agréable et intuitive, sans pour autant pénaliser les utilisateurs qui ne veulent pas activer javascript sur leur machine.

La méthode de travail étant mainte- nant complètement définie, nous al- lons pouvoir aborder le côté plus tech- nique de la chose, à savoir : comment ça marche et selon quels principes ?

à savoir : comment ça marche et selon quels principes ? Javascript dégradable Un code javascript

Javascript dégradable

Un code javascript dégradable est un code javascript qui vient rajouter des fonctionnalités par dessus une page existante, sans pour autant être obligatoire.

En bref, un code dégradable enrichit l’application mais ne l’empêche pas de fonctionner si javascript est désactivé.

Ce principe est un des plus importants concernant l’utilisation moderne et intelligente de javascript.

désactivé. Ce principe est un des plus importants concernant l’utilisation moderne et intelligente de javascript.
Le fonctionnement de fish in a pan basé sur l’idée MVC, nous allons suivre l’ordre

Le fonctionnement de fish in a pan

Le fonctionnement de fish in a pan basé sur l’idée MVC, nous allons suivre l’ordre de

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.

uisque fish

in

a

pan est

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

devient une “copie” de celui-ci, avec toutes ses Avertissement Ce chapitre est sûrement le plus technique

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.

soit, c’est l’heure où je vous conseille de vérifier le niveau de remplissage de la tasse

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.

Puisqu’un petit exemple vaut mieux qu’un long discours, examinons le cas typique de l’édition d’un titre d’un ar- 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

Code Complet

Vous pouvez consulter le code complet de l’objet Element en annexe 2.

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

Cet objet hérite de l’ob - jet Element, au sens où il en récupère tous les
Cet objet hérite de l’ob - jet Element, au sens où il en récupère tous les

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 accès à un procédé nous permettant de visualiser un ensemble d’éléments, notamment pour en faire des listes (liste des articles de la table blogs, par exemple).

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();

suffit de faire ceci : $articles = Multiple::getArticles(); Codes Complets Vous pouvez consulter les codes complets

Codes Complets

Vous pouvez consulter les codes complets des objets Config et Multiple en annexe 3 & 4.

Codes Complets Vous pouvez consulter les codes complets des objets Config et Multiple en annexe 3

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é

ou en en faisant une copie. Voilà pour les objets principaux de Fish in a pan,
ou en en faisant une copie. Voilà pour les objets principaux de Fish in a pan,

“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- vascript appelle ce contrôleur, qui ef- fectue l’action et se termine au point trois du déroulement cité ci-dessus, juste avant d’appeler la vue, puisque la 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.

et interprétées par le contrôleur du module. Code Complet Vous pouvez consulter le code d’un module

Code Complet

Vous pouvez consulter le code d’un module commun, le module de news, en annexe 5.

le contrôleur du module. Code Complet Vous pouvez consulter le code d’un module commun, le module

Toutes les variables des templates sont affectées à Smarty dans le contrôleur du module associé, hormis les variables globales (variables de configuration 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 parties, de manière à être le plus logi- que possible.

Pour chaque module, il y a un template principal, qui porte le nom du module. Ce template, qui contient la structure de la page HTML, en appelle plusieurs autres :

• Un template, commun à tous les mo- dules, qui contient la balise <head> de la page, et inclut donc les 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

Le diagramme suivant résume toute la structure de fonctionnement de fish in a pan développée au long de ce cha- pitre.

Vue

Affichage, Manipulation par l'utilisateur

pitre. V ue Affichage, Manipulation par l'utilisateur Contrôleurs Interface Modèles/Vues Noyau Config,
Contrôleurs Interface Modèles/Vues
Contrôleurs Interface Modèles/Vues
Contrôleurs Interface Modèles/Vues
Contrôleurs Interface Modèles/Vues
Contrôleurs Interface Modèles/Vues
Contrôleurs Interface Modèles/Vues
Contrôleurs Interface Modèles/Vues

Contrôleurs

Interface Modèles/Vues

Contrôleurs Interface Modèles/Vues
l'utilisateur Contrôleurs Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base

Noyau

Noyau Config, Fonctions de base
Noyau Config, Fonctions de base

Config, Fonctions de base

Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Noyau Config, Fonctions de base
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données

Modèles

Objets généraux

Modèles Objets généraux
Modèles Objets généraux
Modèles Objets généraux
Modèles Objets généraux
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données
Base de données
Base de
données
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données
Interface Modèles/Vues Noyau Config, Fonctions de base Modèles Objets généraux Base de données
Les modules de fish in a pan omme décrit précédemment, fish in a pan est

Les modules de fish in a pan

Les modules de fish in a pan omme décrit précédemment, fish in a pan est divisé

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-

à l’utilisateur les login et mot de passe qu’il désire pour se connec - ter au
à l’utilisateur les login et mot de passe qu’il désire pour se connec - ter au

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

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.

Ce code est très im-

)

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-

à aller plus en avant dans la console. C’est aussi ce module qui se charge de
à aller plus en avant dans la console. C’est aussi ce module qui se charge de

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

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

rester

privé.

du chat privé

un code de sécurité est généré. Ce code, passé dans l’url du flux RSS, sécurise rester
un code de sécurité est généré. Ce code, passé dans l’url du flux RSS, sécurise rester

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

batteur n’ayant plus accès à Internet depuis des mois, quand il veut met- tre sa fiche
batteur n’ayant plus accès à Internet depuis des mois, quand il veut met- tre sa fiche

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.

• Supprimer un utilisateur : La sup- pression d’un utilisateur demande une confirmation et la saisie du code de sécurité dont nous avons déjà par- lé plus haut. De plus, et par mesure de sécurité, l’utilisateur connecté ne peut supprimer son propre compte.

5.2.4.2 Les intervenants

Lors d’une discussion à propos de mon

application avec Thierry, chef de projet chez VAlain, un point intéressant a été souligné : qu’en est-il des groupes qui 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

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 membres, excepté la suppression de membres : un intervenant ne peut sup- primer un membre du groupe. C’est la seule restriction ressemblant à des droits utilisateurs qui a été codée.

Fonctions du module • Créer un intervenant

• Supprimer un intervenant

Cet ami ne

un intervenant • Supprimer un intervenant Cet ami ne Changement d’ordre Cette fonction est l’une des

Changement d’ordre

Cette fonction est l’une des rares qui bénéficie actuellement d’une couche AJAX. En effet, si javascript est activé sur le navigateur de l’utilisateur, il lui est possible de changer l’ordre des membres en effectuant une série de drag & drop des utilisateurs. Les changements sont automatiquement sauvegardés via AJAX.

Préférence des intervenants

Un intervenant peut, comme un membre, changer ses login et mot de passe depuis le module des préférences dans la section configuration.

peut, comme un membre, changer ses login et mot de passe depuis le module des préférences

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

deux méthodes de téléchargement : le té- léchargement externe, et le téléchar- gement interne. Le téléchargement
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-

les modules des médias video et audio, qui ne faisaient qu’un dans le site de mon
les modules des médias video et audio, qui ne faisaient qu’un dans le site de mon

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

photo pour la faire changer de galerie. • Télécharger une archive de la ga- lerie :
photo pour la faire changer de galerie. • Télécharger une archive de la ga- lerie :

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 d’un morceau, en plus de définir ses 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 extrait du morceau en cours. Cet ex- trait ne remplacera pas le morceau, 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- tère aléatoire de sa réussite

5.2.5.3 Les médias vidéos

Le plus grand problème concernant l’utilisation de vidéos sur un site est le choix du format de vidéo utilisé. Afin d’éviter autant que possible des pro- blèmes de compatibilité, j’ai choisi de n’utiliser qu’un seul format, le format FLV (flash vidéo). Ce format, taillé pour

le format FLV (flash vidéo). Ce format, taillé pour PhpMyAdmin http://www.phpmyadmin.net Regin

PhpMyAdmin

http://www.phpmyadmin.net

Regin

http://www.sourcerally.

net/regin

Neolao

http://www.neolao.com

Personnalisation du lecteur

Les options de personnalisation du lecteur sont accessibles dans la section Config de l’admin.

du lecteur Les options de personnalisation du lecteur sont accessibles dans la section Config de l’admin.

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

Afficher/Masquer la liste des vi- déos

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

date d’expiration (optionnelle) et un contenu.

Fonctions du module • Ajout d’une news

• Edition d’une news

• Suppression d’une news

Afficher/Masquer une news

Afficher/Masquer news

la

liste

des

une news • Afficher/Masquer news la liste des Services vidéo http://www.youtube.com

Services vidéo

http://www.youtube.com

http://www.dailymotion.com

Dates des news

Même si la visiblité d’une news est définie à “visible”, elle ne sera affichée sur le site qu’entre sa date de publication et sa date d’expiration.

à “visible”, elle ne sera affichée sur le site qu’entre sa date de publication et sa

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- tée par nos visiteurs qui voyaient là une occasion de suivre l’évolution du groupe, pas à pas, semaine après se- 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 de publication, l’autorisation de com- menter l’article, un résumé, un texte, une galerie liée et un champ de texte pour écrire une éventuelle setlist de concert.

• Ajouter un article

• 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.

qui y sont associés, pour les éditer ou les sup - primer. Certains nous reprochent même

Certains nous reprochent même de ne pas être à jour lorsque nous oublions de chroniquer une répète !

Date de publication

Même si la visibilité de l’article est sur “visible”, l’article ne sera pas publié sur la zone publique tant que sa date de publication ne sera pas atteinte.

l’article ne sera pas publié sur la zone publique tant que sa date de publication ne

• 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,

• Afficher/Masquer le livre d’or À l’instar des commentaires de blog, depuis la configuration du livre
• Afficher/Masquer le livre d’or À l’instar des commentaires de blog, depuis la configuration du livre

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 de contact

le

formulaire

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

zone publique. Ici, chaque utilisateur peut modifier son login et son mot de passe pour la
zone publique. Ici, chaque utilisateur peut modifier son login et son mot de passe pour la

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

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 zone publique du site. En passant le site hors-ligne, seul les membres pourront visiter le site, via l’administration. C’est pratique pour les opérations de maintenance d’en- vergure, l’installation d’un nouveau thème, etc

Chaque modification d’un para-

5.2.7.4 Système antispam

Le spam par email est un fléau connu 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

ou message sou- mis par un visiteur, celui-ci n’est pas Visibilité de la partie publique Le

Visibilité de la partie publique

Le changement de cet état se signale par un changement de la couleur de l’en-tête de l’admin. Habituellement de couleur bleue, l’en-tête de la zone de l’administration passe en gris lorsque la partie publique du site est hors-ligne.

bleue, l’en-tête de la zone de l’administration passe en gris lorsque la partie publique du site

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 à l’abri d’un incident. De plus, avoir une sauvegarde des bases de données per- met de réparer une grosse erreur acci- dentelle d’un membre qui aurait eu la main lourde lors de l’édition du site.

Le module d’utilitaire de base de don- 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 fichier.

Ce système de sauvegarde n’est pas automatisé, mais les utilisateurs peu- vent, depuis ce module, demander au système de leur rappeler, via un mes- sage dans le chat privé, de faire une sauvegarde de la base de données tou- tes les semaines ou tous les mois, par exemple.

tou - tes les semaines ou tous les mois, par exemple. Test de Turing http://fr.wikipedia.org/ wiki/Test_de_Turing

Test de Turing

http://fr.wikipedia.org/

wiki/Test_de_Turing

Captcha

http://fr.wikipedia.org/

wiki/Captcha

Second avantage de la question idiote

Ce test a pour qualité supplémentaire de recaler les gens les plus idiots, souvent bien plus nuisibles que les robots.

Ce test a pour qualité supplémentaire de recaler les gens les plus idiots, souvent bien plus

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

bulletins de news écrits par le groupe. • Splash-screen : Reporté parce que susceptible de créer
bulletins de news écrits par le groupe. • Splash-screen : Reporté parce que susceptible de créer

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.

invite à vous reporter à l’annexe 6 où vous pourrez consulter quelques captures d’écrans de l’appli
invite à vous reporter à l’annexe 6 où vous pourrez consulter quelques captures d’écrans de l’appli
Autour de fish in a pan ish in a pan ne se réduit pas unique

Autour de fish in a pan

Autour de fish in a pan ish in a pan ne se réduit pas unique -

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.

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 é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.

sourceforge.net

De nos jours, nous utilisons de plus en plus de logiciels open-source, souvent développés par une seule personne

De nos jours, nous utilisons de plus en plus de logiciels open-source, souvent développés par une
De nos jours, nous utilisons de plus en plus de logiciels open-source, souvent développés par une

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

À 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

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.

intégrateur

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

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.

pas une fin en soit, mais plutôt le vrai départ de fish in a pan. License

License GNU/GPL

http://www.gnu.org/

licenses/gpl.html

pas une fin en soit, mais plutôt le vrai départ de fish in a pan. License
u moment où je rédige ces lignes, fish in a pan est presque terminé. Il
u moment où je rédige ces lignes, fish in a pan est presque terminé. Il

u moment où je rédige ces lignes, fish in a pan est presque terminé. Il reste quelques bug à corriger. En regar- dant ma table de nuit où se trouve mon cahier à idées, dans les pages duquel la première idée concernant fish in a pan 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 boulons à serrer, il y a eu beaucoup de questions, d’idées idiotes tombées à l’eau, de grandes idées bien trop gran- des pour être reprises et de petites idées anodines qui sont toujours écrites

à droite à gauche, dans mon fameux

cahier ou sur le gigantesque poster col- lé sur le mur de ma chambre qui m’a 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.

La prochaine grande aventure, ce sera la release de fish in a pan, en juillet. Sortir mon poisson de sa poêle et le re- lacher dans les eaux troubles du net. Espérons juste qu’il n’ait pas cuit trop longtemps

« Quelque part, dans un autre monde loin du Disque, quelqu’un empoigna d’une main hésitante un instrument dont la musique fit écho au rythme qui lui soûlait l’âme.

Elle ne mourra jamais.

Elle est là et bien là. »

Accros du roc, Terry Pratchett

au rythme qui lui soûlait l’âme. Elle ne mourra jamais. Elle est là et bien là.
au rythme qui lui soûlait l’âme. Elle ne mourra jamais. Elle est là et bien là.
Bibliographie Collectif, article “Myspace” sur Wikipédia, http://fr.wikipedia.org/wiki/Myspace (consulté le 12 mai

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

Fish in a pan

C’est quoi ?

Fish in a pan est le nom de mon projet de n d’études.

Ca consiste en quoi ?

Fish

in

a

pan est un

CMS

destiné

aux

groupes de

musique.

L’idée est de développer un système de site web complet à destination des groupes de musique, avec une interface d’administration simple et permettant de gêrer tout le contenu d’un site de groupe typique.

Fonctionnalités

Installeur: L’installation du système sh in a pan sur un hébergeur quelconque sera simple, basée sur une suite de petits formulaires pour chaque étape (un peu comme dans le système Dotclear).

Partie Privée

La partie privée d’un sh in a pan a plusieurs fonctionnalités, dont la plus importante est celle de gêrer le contenu de la partie publique du site.

Mais comme le système sh in a pan est ciblé pour les groupes de musique, la partie privée comprendra certaines fonctionnalités plus pratiques qui leur sont destinés, telles que:

Tagboard: Letagboardestun chat, privé, à destination des musiciens du groupe, pour faciliter la communication entre eux.

Gestion des chansons: Au sein de la partie privée du sh in a pan, les musiciens du groupe pourront mettre à jour l’avancée des chansons en cours de composition, en leur attachant les partitions, ajouts, etc, de manière à savoir à tout moment où se situe le travail à faire sur les compositions.

Le reste des fonctionnalités

2

faire sur les compositions. Le reste des fonctionnalités 2 Annexe 1 : Cahier des charges original
faire sur les compositions. Le reste des fonctionnalités 2 Annexe 1 : Cahier des charges original

Annexe 1 : Cahier des charges original

Cahier des charges

permet de gêrer le contenu de la partie publique du site.

Parmis

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)

• Conguration 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.

De plus, l’utilisation de la technologie rss permettra de tenir les visiteurs au courant de tout changement sur le site.

La partie publique du site, visible par tous les visiteurs, sera entièrement personnalisable via un système de thèmes simples à modier.

entièrement personnalisable via un système de thèmes simples à modi  er. ces fonctionnalités, Partie publique

ces

fonctionnalités,

Partie publique

entièrement personnalisable via un système de thèmes simples à modi  er. ces fonctionnalités, Partie publique

3

Cahier des charges

Technologies

Le système     sera réalisé en utilisant l’en- semble des technologies web suivantes:

 (version 4.3 par souci de compatibilité)



 (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

permettra aux utilisateurs du système d’être tenu au courant des mises à jour du système.

 Le système sh in a pan sera téléchar- geable gratuitement sous couvert de la license GNU/ GPL.

4

Le système  sh in a pan sera téléchar- geable gratuitement sous couvert de la license
Le système  sh in a pan sera téléchar- geable gratuitement sous couvert de la license
Annexe 2 : Code de l’objet Element <?php class Element { // Constructeur function Element($table=NULL,

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() { //

// 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()

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»];

}

}

} // class Config ?>

}

return true;

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

// --- fonctions de requêtes Annexe 4 : Code de l’objet Multiple // getTagboardMessages

Annexe 4 : Code de l’objet Multiple

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

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

// 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”;

// 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”;

}

if( $public ) { $filter = ”WHERE folder_private = 0”; } $request = ”SELECT fld.*, COUNT(pto.photo_id)

$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

$array[0]; } else { return false; } } // parseRequest // getError, récupère la dernière erreur

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

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

break; case ”addSubmit”: if( empty($_POST[”new_title”]) || empty($_POST[”new_description”]) ) {

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

{

); $smarty->assign(”action”, ”edit”); } else { $tempNews->new_title = str_entities(

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

case ”confirmToggleAllVisibility”: if( isset( $_POST[”confirm”] ) ) { $config->visible_news = intval(

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”);

?>