[RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT...

25
[RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé 268 avenue du Président Wilson 93210 La Plaine Saint-Denis Tél : +33 (0) 1 55 93 26 00 Fax : +33 (0) 1 55 93 26 01 www.sqli.com ESIAL Campus Aiguillettes 193 avenue Paul Muller CS 90172 54602 Villers-lès-Nancy Tél. : +33 (0) 3 83 68 26 00 Fax : +33 (0) 3 83 68 26 09 www.esial.uhp-nancy.fr 2009 Olivier Versanne Maître de stage Ronan Lequere Encadrant ESIAL Hervé Panetto SQLI > Web Agency > PAGT > Développeur PHP Développement du site web d’une grande maison de luxe sous eZ Publish, au sein de l’équipe technique du groupe SQLI.

Transcript of [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT...

Page 1: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE] Deuxième année ESIAL

SQLI Paris - Siège social

Immeuble le Pressensé

268 avenue du Président Wilson 93210 La Plaine Saint-Denis

Tél : +33 (0) 1 55 93 26 00 Fax : +33 (0) 1 55 93 26 01

www.sqli.com

ESIAL

Campus Aiguillettes

193 avenue Paul Muller CS 90172

54602 Villers-lès-Nancy

Tél. : +33 (0) 3 83 68 26 00 Fax : +33 (0) 3 83 68 26 09

www.esial.uhp-nancy.fr

2009

Olivier Versanne Maître de stage Ronan Lequere Encadrant ESIAL Hervé Panetto

SQLI > Web Agency > PAGT > Développeur PHP

Développement du site web d’une grande maison de luxe sous

eZ Publish, au sein de l’équipe technique du groupe SQLI.

Page 2: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Avant-propos 2

Avant-propos

Ce rapport traite du stage effectué en deuxième année de l’ESIAL. Le stage a pour but

d’effectuer un travail de niveau technicien afin de valider la deuxième année. Il s’inscrit dans le

cursus ESIAL et précède le stage ingénieur de six mois l’année suivante. La durée du stage est d’un

minimum de 8 semaines.

Mon stage s’est déroulé du 2 juin 2009 au 28 août 2009 dans la société SQLI située à Paris.

J’ai été accueilli par Ronan Lequere qui fut mon maître de stage et mon encadrant universitaire fut

Hervé Panetto.

Remerciements

Je remercie Ronan Lequere pour m’avoir donné la chance d’intégrer l’équipe SQLI Agency.

Merci aussi pour toutes les aides que tu as pu m’apporter lors du stage et ce, même avec les faibles

disponibilités que tu avais.

Merci également à Ly Lo Cong, mon « maître eZ Publish », qui m’a énormément apporté dans

la connaissance de cet immense Framework.

Merci à Marie Lange, ma chef de projet, pour avoir su nous mettre la pression juste comme il

fallait pour que le projet avance bien. Je te souhaite bon courage pour la suite.

Enfin, je tiens également à remercier toute l’équipe PAGT de SQLI Agency qui m’a accueilli

chaleureusement, et avec qui j’ai passé de très bons moments pendant ces trois mois. Je n’oublierai

pas tous les bons moments, ainsi que les pots d’agence mensuels et les soirées passées ensemble.

À tous je souhaite une bonne continuation et espère vous revoir prochainement.

Page 3: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Remerciements 3

Sommaire

Avant-propos ......................................................................................................................... 2

Remerciements ...................................................................................................................... 2

1. Présentation de la société ............................................................................................... 4

1.1. Le Groupe SQLI ........................................................................................................ 4

1.2. SQLI Agency ............................................................................................................. 6

1.3. La gestion d’un projet .............................................................................................. 8

2. Contexte du projet .......................................................................................................... 9

3. L’existant ...................................................................................................................... 10

3.1. Les interfaces ......................................................................................................... 10

3.1.1. Le « Front Office » ............................................................................................ 10

3.1.2. Le « Back Office » ............................................................................................. 11

3.2. Solution retenue : eZ Publish .................................................................................. 12

3.2.1. Adaptations des interfaces ............................................................................... 12

3.2.2. Système CMS .................................................................................................... 12

3.2.3. Modularité d’eZ Publish .................................................................................... 13

4. Travail réalisé ................................................................................................................ 14

4.1. Import / Export ...................................................................................................... 15

4.1.1. Description ....................................................................................................... 15

4.1.2. Analyse et conception....................................................................................... 16

4.1.3. Module d’import.............................................................................................. 17

4.1.4. Difficultés rencontrées ...................................................................................... 18

4.1.5. Le devenir ......................................................................................................... 19

4.2. « Ask for Price » ..................................................................................................... 20

4.2.1. Formulaire........................................................................................................ 21

4.2.2. Traitements ...................................................................................................... 22

4.2.3. Envoi de mails .................................................................................................. 22

5. Bilan .............................................................................................................................. 24

Glossaire .............................................................................................................................. 25

Page 4: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Présentation de la société 4

1. Présentation de la société

1.1. Le Groupe SQLI

Créé en 1990, le Groupe SQLI est le leader français des sociétés de services spécialisées dans

les Nouvelles Technologies de l'Information et de la Communication (NTIC). L’entreprise se

positionne en tant que "Grand Spécialiste" unique en France en proposant une offre globale alliant la

capacité de production industrielle d'un groupe international à l'expertise et la souplesse d'un

spécialiste, en mesure de donner de la valeur aux innovations des entreprises qu'elle accompagne.

Le groupe est spécialisé sur trois segments de compétence :

Les technologies & usages Internet (Java/J2EE, Microsoft, Open Source…)

Les nouvelles offres SAP (NetWeaver, CRM…)

La Business Intelligence (BO, Cognos, Open Source…)

Depuis 2005, SQLI s’est inscrite dans un projet industriel de croissance ambitieux qui vise à

faire du groupe le leader incontesté des « pure players »

du conseil et des solutions e-business. Pour cela, l’objectif

de croissance dans le plan de développement 2005-2008

devait amener le groupe à 150M€ de chiffre d’affaires en

2008 avec une marge opérationnelle de 10 %.

De plus, l’entreprise est cotée sur Euronext depuis juillet

2000, et supporte une croissance soutenue avec un

chiffre d’affaires multiplié par deux en 2 ans (Figure 1 :

Évolution du chiffre d'affaires de SQLI).

Au niveau du fonctionnement de l’entreprise, il faut noter que le groupe est organisé en

agences. Les agences sont découpées en entités de business (Business Unit ou BU). Une BU est un

centre de responsabilités dont l'objectif s'exprime sous la forme d'un résultat (marge ou

contribution) à obtenir. C’est un département d’entreprise spécialisé. Chez SQLI les BU sont

spécialisées dans un domaine d’activité.

Une agence est sous la responsabilité d’un manager d’agence. Une BU est placée sous la

responsabilité d’un manager de BU. Chaque collaborateur est rattaché à une et une seule BU.

Figure 1 - Évolution du chiffre d'affaire de SQLI (en M€)

Page 5: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Présentation de la société 5

Le groupe SQLI possède 20 agences en France et à l’internationale, ce qui lui permet de

bénéficier d’une large couverture géographique.

L’entreprise est présente en France (Aix en

Provence, Bordeaux, Dijon, Lyon, Montpellier,

Nantes, Paris, Poitiers, Strasbourg, Toulouse),

en Suisse (Genève et Lausanne), au

Luxembourg, au Maroc (Casablanca, Rabat et

Oujda), en Espagne (Madrid), en Belgique

(Bruxelles) et au Canada (Montréal).

Ce réseau d’agences permet une grande

proximité avec les clients et une présence

internationale.

SQLI compte plus de 2000 collaborateurs en France et à l’étranger et plus de 800 clients

actifs. Les projets sont conduits auprès de grands comptes dans tous les secteurs d’activités.

La gestion des ressources humaines à SQLI est un peu particulière. En effet, il n’y a pas de

service dédié à cette gestion. Elle est assurée par la cellule de recrutement qui s’occupe

essentiellement du recrutement, par le service de Paie qui gère tout le côté administratif des

Ressources Humaines et par les relais RH, collaborateurs volontaires désirant gérer des personnes. La

gestion des Ressources Humaines est donc décentralisée mais permet un management de proximité.

Figure 2 - Répartition des agences SQLI dans le monde

Figure 3 - Quelques clients de SQLI

Page 6: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Présentation de la société 6

1.2. SQLI Agency

SQLI Agency, la Web Agency de SQLI, est une agence du groupe SQLI qui propose du conseil

et de la création Web, dans une dynamique d’innovation et de créativité : stratégie de

positionnement e-business, conseil en performance ergonomique, connaissance utilisateur,

génération de trafic ainsi que des prestations de création, de conception, d’accompagnement et de

formation e-business.

Contrairement aux agences « standards » de type ingénierie, le fonctionnement de l’Agency

est différent. En effet, l’Agency a été créée il y a quelques années pour pouvoir gérer des projets web

non réalisables de la part de l’Ingénierie à cause de son fonctionnement trop strict, notamment dû à

un processus de qualité adopté par l’entreprise.

Comme toutes les agences de SQLI, l’Agency est découpée en BU. Celle qui est concernée par

ce projet est la BU PAGT (Paris AGency Technique) plus communément appelée « Pôle Techno », qui

réalise les parties techniques des sites web, en PHP, MySQL, .NET ou encore AJAX. Cette BU est

dirigée par Jean-Marc Leglise.

Sous la direction de Jean-Marc Leglise, Ronan Lequere s’occupe du management de l’équipe

de développement. Il endosse également la responsabilité de relais RH, et est mon maître de stage

pour ce projet.

Groupe SQLI

Agence

Lyon

Agence

Nantes

Agence

Oujda

Agence

Agency

Consulting

Agency

Santé

Agency

Agence Paris

Agency Web Agency

BU PAGT

(Technique)

BU PAGC

(Conseil)

BU Business

Dév.

BU PARD

(Design)

Figure 4 – Organisation du groupe SQLI

Page 7: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Présentation de la société 7

Le pôle techno est divisé en trois entités d’une dizaine de collaborateurs :

Le pôle Flash, qui s’occupe des réalisations des animations flash sur les sites web,

L’entité Développement que j’ai intégrée, qui a pour objectif de rendre dynamique le site en

y incluant des modules (exemple : gestion d’utilisateur, forum, blog…),

Et l’entité HTML qui réalise le design général du site (navigation, mise en page, …).

Manager & Relais RH

Ronan Lequere

Directeur de BU (PAGT)

Jean-Marc Leglise

Directrice (Web Agency)

Isabelle Gauthier

Figure 5 - Organigramme PAGT simplifié et adapté au projet

Pôle Flash Pôle HTML Développement

Chef de projet

Marie Lange

Expert technique

Ly Lo Cong

Développeur

Mathieu Monselet

Développeur

Olivier Versanne

Développeurs

Développeur

William Ong

Page 8: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Présentation de la société 8

Le précédent organigramme a été simplifié pour correspondre au projet décrit dans ce

rapport. En effet, le pôle développement dispose de plusieurs chefs de projet travaillant sur divers

projets simultanément. Toute l’équipe de l’Agency ne travaillent pas sur le projet exposé dans ce

rapport.

1.3. La gestion d’un projet

Les projets passent par plusieurs phases avant d’arriver en phase de réalisation au sein de

l’équipe de développement. La première phase consiste à remporter un projet en faisant les

propositions de solutions et commerciales les plus adaptée au client. C’est le travail de la BU Business

qui réalise les avant-ventes.

Après avoir gagné un projet, celui-ci est envoyé à la BU Technique qui se charge, avec l’aide

des autres BU de l’Agency, de réaliser un cahier des charges que validera le client étape par étape.

L’Agency utilise pour la majorité de ses projets, un système de développement itératif. Le

développement d’un site web est découpé en plusieurs étapes qu’approuve à chaque fois le client. La

première étape dans la conception de sites web est de définir l’ensemble des fonctionnalités et des

cas d’utilisation que celui-ci devra remplir. L’étape suivante est de concevoir le design général des

pages ainsi que l’architecture du site. Après avoir élaboré les aspects statiques, les rubriques

dynamiques sont alors conçues. Enfin, les dernières phases dans la gestion d’un projet, sont la

livraison au client, puis, la période de maintenance du projet démarre pour une durée déterminée

lors de la signature du contrat.

SQLI Agency propose à ses clients un grand nombre de technologies pour la plupart Open

Source (code source accessible et libre de redistribution), et se lance régulièrement dans de

nouvelles technologies pour proposer constamment une grande diversité de choix. L’utilisation

d’applications Open Source permet de diminuer les coûts de développements pour le client et pour

l’agence qui n’ont, ni l’un ni l’autre, pas besoin d’acheter de licences. En contre partie de cette

économie, le support proposé par les créateurs de ces technologies n’est généralement pas gratuit et

la documentation d’utilisation peut manquer de mises à jour, mais… cela n’empêche pas SQLI de

réaliser correctement l’ensemble de ses projets !

Page 9: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Contexte du projet 9

2. Contexte du projet

Il y a un peu plus d’un an, une grande maison de luxe que nous appellerons Diamant dans ce

rapport (le projet n’étant pas terminé à la date de publication du rapport, je n’ai pas le droit de

mentionner son nom), a commandé un site Internet e-commerce pour le Japon. La réalisation fut un

succès au Japon et l’entreprise souhaita étendre le site à d’autres pays. Elle s’adressa à la même

société qui avait conçu son précédent site mais celle-ci refusa le contrat pour cause de travaux trop

complexes pour modifier le site existant afin de l’adapter aux demandes de Diamant. En effet, le site

n’avait pas été conçu dans l’optique d’être plurilingue et un redéveloppement intégral était moins

onéreux qu’une adaptation de l’existant.

Diamant fit alors appel à d’autres sociétés de services informatiques comme SQLI pour

redévelopper le site à l’international. SQLI Agency fit la proposition d’utiliser eZ Publish, un

gestionnaire de contenu (CMS : Content Management System) de plus en plus plébiscité par le milieu

professionnel. Ce CMS a les avantages de pouvoir décliner les contenus d’un site en plusieurs langues

et propose un cadre de développement très complet qui accélère les développements d’extensions

spécifiques.

SQLI décrocha le contrat et au mois de février commença le développement du projet pour

une durée d’une dizaine de mois et d’un budget d’un million d’euros.

Dans un premier temps, nous verrons les points importants du site existant qui a servi de

base pour le cahier des charges du site. Nous nous attarderons ensuite sur certains points précis sur

lesquels j’ai pu apporter ma contribution, et enfin l’état d’avancement du projet à la fin de mon

stage.

Page 10: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | L’existant 10

3. L’existant

3.1. Les interfaces

Figure 6 - Page d'accueil Diamant.jp (interface utilisateur)

3.1.1. Le « Front Office »

Le site Diamant.jp actuellement en ligne réalisé par la précédente société a une interface

utilisateur est entièrement réalisée avec la technologie Flash. La technologie Flash, créée par

Macromedia et détenue aujourd’hui par Adobe, permet d’inclure des animations graphiques sur un

site et de s’assurer que le rendu visuel sera le même quelque soit le navigateur et le système

d’exploitation utilisés par le client. En effet, pour afficher une animation Flash le navigateur doit

posséder un plugin et le taux de pénétration du « lecteur Flash » est supérieur à 99%.

Figure 7 - Taux de pénétration des technologies plugin chez les internautes (source : Adobe)

Page 11: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | L’existant 11

Un inconvénient à réaliser un site complètement en Flash concerne l’indexation du contenu

par les moteurs de recherches. C’est un enjeu capital pour n’importe quelle entreprise d’être

correctement référencer dans les annuaires de recherches. Les moteurs de recherches utilisant, pour

indexer, des navigateurs n’intégrant aucun module d’extension afin d’être le plus léger et rapide

possible (navigateurs appelés « robots »), ils sont incapables d’interpréter les animations Flash et ne

peuvent indexer le contenu que voit l’utilisateur. Ainsi, sur le précédent site web une navigation

alternative a été prévue si l’on détecte que l’internaute visitant la page n’a aucun plugin. Le contenu

à indexer est afficher en HTML simple (ne nécessitant aucun module d’extension) et peut donc être

indexé.

Figure 8 - Page d'accueil Diamant.jp sans plugin (interface moteurs de recherche)

3.1.2. Le « Back Office »

Enfin, la dernière interface utilisateur est celle utilisée par les employés Diamant. Cette

interface administrateur est appelée « Back Office », à l’opposé de l’interface visible par le client qui

est nommée « Front Office ». L’interface administrateur permet de gérer les contenus à afficher sur

le Front Office.

Figure 9 - Back office de la précédente version

Page 12: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | L’existant 12

3.2. Solution retenue : eZ Publish

3.2.1. Adaptations des interfaces

La nouvelle version du site à développer doit avoir exactement la même interface utilisateur :

une interface complètement réalisée en Flash et reprenant les mêmes graphismes et fonctionnalités

(avec quelques améliorations) que la version japonaise en ligne. Elle doit également disposer d’une

interface facilitant l’indexation des robots des moteurs de recherche, et doit être dotée d’un Back

Office pour gérer les contenus du site de manière dynamique.

Le CMS eZ Publish, de part sa conception, répond intégralement à ces exigences et

correspond donc parfaitement au besoin du client. Effectivement, eZ Publish propose aux

concepteurs d’utiliser plusieurs Front Office en définissant simplement de nouveaux « Layouts »

(affichages). Ainsi, les contenus de chaque page sont générés sous deux formes différentes : sous

forme HTML directement interprétable par les robots, et sous forme XML qui permet les interactions

avec le module Flash.

3.2.2. Système CMS

Le mode de fonctionnement CMS d’eZ Publish permet de gérer facilement le contenu d’un

site. L’administrateur peut créer des pages très simplement en les reliant à d’autres pages et ainsi il

crée son arbre de navigation.

Dans le principe, chaque page est représentée par un objet qui est une instance d’une classe.

Une classe peut être créée par l’administrateur pour définir les différents attributs qu’aura

l’ensemble des objets de la classe. Par exemple, une bague et une montre seront du même type de

classe (produit) puisqu’ils comportent tous les deux un prix et un nom. Le même affichage étant

utilisé pour les informations de ces deux produits, il est plus aisé d’utiliser un seul modèle d’affichage

Figure 10 - Fonctionnement du Front Office

Internaute

Navigateur

Plugin Flash

Moteur de

recherche

Serveur

eZ Publish

Base de données

www.Diamant.jp

www.Diamant.jp

XML

HTML

Page 13: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | L’existant 13

(appelé template) pour afficher ces produits. Ainsi, avec eZ Publish, on associe une classe avec un

modèle d’affichage qui a un contenu dynamique reprenant les contenus des attributs.

Pour l’internaute, lorsqu’il accèdera à la page de la montre, il y verra un contenu différent de celui de

la bague. Pourtant, la structure des données est identique et la seule différence réside dans le

contenu des objets.

Figure 11 - Back Office fourni par eZ Publish

3.2.3. Modularité d’eZ Publish

Malheureusement, la complexité du site Diamant ne peut pas être gérée entièrement par le

système des objets-classes-nœuds des CMS, par conséquent des développements spécifiques sont

nécessaires. En effet, certaines pages du site font appel à des modules extérieurs (des « web

services » qui vont rechercher des informations distantes, des envois de mails à l’utilisateur, des

requêtes spécifiques…) et ceux-ci ne peuvent pas utiliser les fonctionnalités des CMS.

Un des grands points forts d’eZ Publish est les possibilités du cadre de développement

technique utilisable par les développeurs. eZ Publish permet l’ajout d’extension (module) de manière

simple et grâce à son système de surcharge très performant, donne la possibilité d’ajouter ou de

redéfinir de A à Z, si on le souhaite, chaque méthode, chaque paramètre et chaque module déjà

inclus dans les fondements techniques du CMS. Dans le cadre de Diamant, ce système de surcharge

Page 14: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 14

nous a permis de redéfinir manuellement tous les nœuds qui avaient des comportements

particuliers, comme par exemple toute la partie du site sur lequel un utilisateur est connecté et gère

son compte. Les informations des utilisateurs sont stockées sur un serveur à part qui est utilisé par

d’autres modules ou département de l’entreprise comme, peut-on le supposer, le département

marketing ou le département relation clientèle de Diamant. Pour obtenir les informations de ce

serveur, on passe par l’intermédiaire de web services qui interrogent le serveur, en utilisant des

protocoles spécifiques (SOAP et WSDL). Ce système centralise ainsi toutes les informations des

clients en évitant tous les problèmes liés à la redondance d’informations à l’échelle d’une entreprise

(exemple : deux adresses différentes pour un client, quelle est la bonne ?).

Après vous avoir rapidement présenté l’essence du projet et défini quelques notions

basiques sur le CMS que j’ai utilisé, je vais vous présenter les tâches notables que j’ai réalisées.

4. Travail réalisé

Pendant mon stage, j’ai réalisé de nombreuses tâches qui m’ont fait découvrir les nombreux

points essentiels d’eZ Publish. Détailler chaque point serait trop fastidieux et ennuyeux, aussi je ne

vous présenterai que deux tâches, très différentes afin de vous donner une vision la plus large

possible du projet et du travail réalisé :

L’import et export des données dans le Back Office.

La réalisation de la page du site « Ask For Price & information » sur le Front Office.

Quelques exemples supplémentaires de travaux seront donnés lors de la soutenance.

Page 15: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 15

4.1. Import / Export

4.1.1. Description

Une ou deux semaines après mon arrivée dans l’équipe, Ly Lo Cong (expert technique eZ

Publish pour le projet Diamant) me confia la tâche d’importation des modèles de produit dans la

base de données eZ Publish afin que le front office ait du contenu à afficher sur les pages qui étaient

en cours de développement.

La tâche consiste à créer ou mettre à jour les produits présents dans les bases de données

Diamant. Il existe plus de 6.600 modèles de produits différents, chaque modèle pouvant être décliné

en plusieurs références à cause de certains paramètres propres aux produits (la taille d’une bague

par exemple).

Chaque modèle comporte une quarantaine d’informations à compléter de tous les types,

comme par exemple :

- nom du modèle,

- texte descriptif du modèle,

- date de lancement,

- si le modèle peut être visible sur le site,

- les autres modèles qui s’afficheront dans une rubrique « créations similaires »,

- les propriétés et collections du modèle,

- l’éventuel modèle « parent » qui contient les informations du modèle consulté,

- etc.

À cette liste non exhaustive d’attributs, il faut également ajouter la gestion des langues pour chaque

attribut.

Les fichiers d’entrées à importer sont au format CSV (« Comma-Separated Values »), un

format de fichier permet de stocker très facilement les informations d’un tableau sous forme

textuelle (et donc facilement interprétable par une machine). Chaque valeur est séparée par un point

virgule et chaque ligne est séparée par un saut de ligne. Un petit exemple :

Format tableur

Format CSV

Mon premier fichier

CSV, Un vrai Bonheur ‼

Mon;premier;fichier

CSV,;;Un

vrai;Bonheur;‼

Les fichiers CSV provenant de l’ancien site Diamant, comporte un nombre variable de

colonnes, en moyenne 65 colonnes, qui définissent les en-têtes/attributs. Chaque ligne définit les

caractéristiques d’un modèle dans la langue d’export du fichier.

Page 16: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 16

4.1.2. Analyse et conception

L’importation et exportation des données de contenu du catalogue sont essentielles

puisqu’ils agissent ensuite sur la presque totalité du site. Ces tâches sont réalisées par les

intégrateurs de contenus Diamant. Ils modifient les informations des produits soit en passant par

l’interface d’administration (Backoffice) et en allant éditer directement un objet, soit en exportant le

catalogue via le module d’import/export, puis en modifiant le fichier CSV et en le réimportant pour

mettre à jour les produits.

Création de l’extension

Par conséquent, après cette brève analyse, nous avons convenu de greffer une extension

dans le backoffice d’eZ Publish pour pouvoir intégrer des modules qui réaliseront ces fonctionnalités.

Pour créer une extension, nous nous sommes servis des possibilités de surcharge du CMS afin

d’ajouter un nouveau menu au backoffice « Import/Export ».

Figure 12 - Module import/export : sous-menu à gauche, menu en haut, message d’erreurs, formulaires

L’extension servira également de rubrique pour tous les autres types d’import et export

spécifiques aux autres parties du site que nous avons développés. L’utilisateur est immergé dans le

backoffice l’utilisation de nos modules est transparent pour l’utilisateur qui a gardé toute

l’ergonomie du backoffice (typographie des messages, design des formulaires…).

La création de l’extension fut difficile car ce fut ma première tâche importante à réaliser sur

eZ Publish. Néanmoins, j’ai pu faire beaucoup de recherches dans la documentation du site officiel

d’eZ Publish et ainsi j’ai commencé à comprendre les premiers fondements du framework.

Page 17: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 17

Après avoir créé l’extension, j’ai créé un premier module pour l’import des données du

catalogue et un second pour l’export.

4.1.3. Module d’import

Le module d’import est composé d’un formulaire avec deux champs à remplir. Le premier est

pour sélectionner le fichier CSV à importer, le second pour choisir la langue du fichier.

Figure 13 - Formulaire d'import

Après avoir vérifié les conditions de non traitement (fichier invalide, format CSV incorrects,

colonnes introuvables…), le script d’import

va parcourir chaque ligne du fichier CSV

pour mettre à jour le modèle

correspondant avec les informations

fournies dans le CSV.

L’importation étant excessivement

long (cinq à dix minutes pour 1 000

modèles), un log est généré pour suivre

l’avancement et le bon fonctionnement.

Trois niveaux d’informations sont

disponibles :

« info » (des informations pour suivre

l’avancement),

« warning » (un défaut est relevé mais n’empêche pas le reste du modèle de se mettre à

jour),

et « error » qui interrompt le traitement d’une ligne CSV et passe à la suivante.

Figure 14 - Exemple de log généré

Page 18: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 18

Une vérification basée sur l’utilisation de verrous exclusifs, est effectué pour détecter si un

autre script est exécuté avant d’en lancer un nouveau. En effet, lancer deux scripts de mise à jour en

parallèle pourrait créer des conflits et des erreurs de cohérences dans le contenu des modèles.

4.1.4. Difficultés rencontrées

Plusieurs difficultés ont été rencontrées pendant le développement du script d’importation.

La première difficulté fut de trouver la correspondance entre chaque nom des en-têtes CSV

avec les attributs définis dans eZ Publish. Un grand fichier de « mapping » a été réalisé et permet une

gestion dynamique des attributs.

Un second problème concerna la lenteur d’importation d’un modèle. En effet, les premières

versions du script demandaient 1 minute en moyenne pour mettre à jour une ligne de 65 colonnes

CSV. Pour l’import de 3000 produits, il fallait compter plus de 50h d’exécution ce qui n’était pas

acceptable, d’autant plus que le précédent site insérait un modèle en 0,02 seconde.

J’ai fortement étudié ce problème de lenteur à un point où j’avais tracé le temps d’exécution de

chaque ligne de code PHP (le langage de développement d’eZ Publish). Mes premiers retours

montraient une lenteur due à l’appel d’une méthode eZ Publish lors de l’enregistrement des

modèles. Il est compréhensible que le temps de mise à jour soit plus important que 0,02 seconde car

eZ Publish met en cache l’objet ajouté/modifié afin d’optimiser le rendu d’affichage, il indexe

également le contenu de certains attributs pour une recherche rapide ; mais 1 minute de publication

est une différence trop importante pour ne pas être une anomalie.

L’Agency fit appel à un expert eZ Publish extérieur, pour passer une journée dans nos locaux afin de

résoudre les problèmes que nous avions rencontrés en utilisant eZ Publish, dont celui-ci.

Après plusieurs échanges vocaux et un audit de code, il remarqua quelques erreurs de « néophytes

eZ Publish » mais qui n’étaient l’origine des ralentissements. Nous sommes arrivés ensuite à la même

conclusion : un problème se trouve dans le framework d’eZ Publish. En effet, nous nous sommes

aperçus qu’une requête SQL était plusieurs fois appelée et qu’elle mettait plus de 7 secondes pour

retourner le résultat. Nous avons découpé la requête pour trouver la source du problème et avons

constaté que le bug portait sur un tri effectué dans la requête. Ne pouvant pas modifier le noyau du

MySQL, nous avons supprimé le tri de la requête eZ Publish ce qui fait un script 100 fois plus rapide !

À présent l’import d’une ligne CSV ne mettait plus qu’une demi-seconde.

Un troisième bug lié à eZ Publish avait été décelé. Au bout d’un certains temps d’exécution

équivalent à la mise à jour de 300 modèles, les scripts s’arrêtaient sur un message d’erreur : la

mémoire allouée au script dépasse la limite autorisée. Un premier essai pour éviter ce problème fut

de remanier le script intégralement pour libérer les ressources mémoires lorsqu’elles ne sont plus

Page 19: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 19

utilisées. Quelques dizaines de modèles supplémentaires furent ajoutés, mais le total avoisinait

toujours les 10% d’un fichier CSV de plusieurs milliers de produits.

J’ai alors proposé de découper le script en deux avec une relation parent-enfant. Le père avait pour

but de lire chaque ligne du fichier CSV et de créer un script enfant qui se chargerait de mettre à jour

la ligne CSV que le père lui aurait fourni.

Par ce biais, l’enfant n’atteindra pas la limite de mémoire puisqu’il ne traitera qu’un seul modèle.

Après avoir traité son modèle il sera tué, et le père en créera un nouveau pour traiter le modèle

suivant.

La solution fut adoptée et je la mis en application. Le bug disparu, la solution était fonctionnelle. Ce

système de double script fut ensuite mis en place sur tous les autres scripts d’import du projet qui

rencontraient également ce problème.

Enfin, lors du passage du serveur de recette (là où les développeurs font des tests) au serveur

de pré-production (là où les clients font des tests), un bug, qui n’existait pas sur le serveur de recette

surgît. Le script plantait de manière aléatoire. Après quelques jours de recherches, nous avions

compris que le bug n’était pas lié au module, mais à la configuration du serveur de pré-production.

En effet, l’environnement de pré-production utilisait du « load-balancing », une technologie qui

permet de répartir les charges sur plusieurs serveurs afin d’augmenter les capacités d’utilisation d’un

site. Pour réaliser le load-balancing, il faut une réplication des informations sur chaque serveur, sinon

l’internaute n’aurait pas les mêmes rendus sur une même page.

Le problème venait donc du load-balancing, et d’un oubli de la part des administrateurs réseaux

Diamant qui faisaient correctement la réplication des fichiers entre les serveurs, mais qui avaient

oublié de faire la réplication de la base de données. Ainsi, le script essayait de trouver des

informations inexistantes dans la base de données, et comme il n’y arrivait pas, il s’arrêtait.

4.1.5. Le devenir

Le module a vu au cours des trois mois constamment des changements à cause de certaines

précisions que nous a indiquées le client lors de ses tests. Beaucoup de modifications ont pu être

facilement intégrées mais certaines ont eu pour conséquences le remaniement quasi complet du

module d’import.

Page 20: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 20

4.2. « Ask for Price »

La fonctionnalité Ask-for-price est absolument différente de l’import catalogue expliqué

précédemment. Les actions sont réalisées côté client sur le front office.

L’objectif de « Ask-for-price » est de permettre à l’internaute de remplir un formulaire pour

demander les tarifs d’un produit proposé sur le site.

Figure 15 - Page d'un modèle (bouton « Ask for price » à gauche)

Pour demander les tarifs ou plus d’informations sur le produit, l’internaute doit se rendre sur

la page du modèle pour ensuite cliquer sur le bouton « Ask for price ».

Il obtient alors le formulaire suivant.

Page 21: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 21

4.2.1. Formulaire

Figure 16 - Formulaire ask-for-price

En fonction de la culture du site visité (exemple : Diamont.jp (japonais), Diamont.com

(international), Diamont.it (Italien)…), le formulaire de gauche prend des aspects différents.

Par exemple, pour les sites asiatiques, un champ supplémentaires pour les noms / prénoms apparaît

afin d’obtenir ces informations en version latines.

Sur la version Japonaise « Your title » devient « Your gender » et l’affichage est seulement « Male » /

« Female ».

Si l’utilisateur navigue sur le site en s’étant déjà connecté à son compte, le formulaire de

gauche disparaitra et le script de traitement, appelé lors de l’appui sur le bouton « Send », ira

chercher les informations du formulaire dans le profile de l’internaute connecté.

Toutes les informations affichées à l’écran sont automatiquement traduites par le biais du

CMS qui utilisera un fichier de traduction (appelé Wording) pour remplacer le texte source (en

anglais) par le texte de la version associée au site (exemple Japonais). Le contenu en haut à droite

décrivant le produit, est récupéré du backoffice et fonctionne avec le système de base du CMS (les

classes-objets-nœuds).

Ainsi, beaucoup de cas particulier sont à prendre en compte lors de la création de template,

ce qui ne rend pas la conception et le développement facile.

Page 22: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 22

4.2.2. Traitements

Lorsque l’internaute clique sur le bouton « Send », un script PHP est appelé pour effectuer le

traitement de tous les paramètres envoyés.

En fonction de tous les différents cas d’utilisation, il vérifie que les champs obligatoires soient

bien complétés et affiche une erreur en conséquence.

Si l’utilisateur a coché l’inscription à une newsletter, le script créera (si ce n’est déjà fait) un

compte à l’utilisateur avec les informations qu’il a rentré, pour l’inscrire à une newsletter.

Le script enverra un mail de demande d’informations à Diamant et de prix si celui-ci a été

demandé et n’a pas été trouvé.

Le script met également à jour les comptes des utilisateurs si ceux-ci changent de pays, et les

redirige vers une page intermédiaire leurs demandant de s’authentifier pour mettre à jour leurs

informations

.

4.2.3. Envoi de mails

Quelque soit la manœuvre effectué sur cette page, un mail de confirmation ou de

renseignement sera envoyé au client.

Figure 17 - Email envoyé à l'internaute

Page 23: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Travail réalisé 23

L’envoi de mail a été développé en extension. Je me suis entièrement occupé de la

conception et la réalisation de cette extension.

Les contraintes que j’ai prises en compte ont été :

Avoir la plus grande facilité d’utilisation,

Créer un mini-framework au sein d’eZ Publish pour faciliter la création de mail,

Avoir des mails qui puissent changer de langue en fonction du site consulté.

Pour répondre à ces critères, j’ai développé un mini-framework qui utilise le système des

templates et le wording (comme pour le formulaire ask-for-price) associés à une interface de

développement la plus simple possible d’utilisation.

Pour créer un nouveau mail, le développeur doit seulement créer le template avec les

sources du wording, puis créer une page PHP qui lui permettra de transférer des variables au

template (exemple le prix récupéré de la page dans ask-for-price).

L’envoi de mails a ensuite été adapté à plusieurs endroits sur le site, pour permettre une

meilleure gestion que la solution précédente qui n’envoyait des mails qu’en anglais.

Page 24: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Bilan 24

5. Bilan

Comme j’ai souvent pu le dire à mon maître de stage ainsi qu’à toute l’équipe PAGT de SQLI,

j’ai beaucoup apprécié travailler au sein de l’Agency. Le milieu du web est le secteur d’activité que je

recherche et l’Agency collait parfaitement à mon centre d’intérêt.

Habituellement, les stagiaires chez SQLI Agency travaillent sur plusieurs projets. Ils gagnent

ainsi en connaissances sur plusieurs technologies et acquièrent des compétences généralement

superficielles sur l’ensemble des technologies utilisées. Mon cas au sein de l’Agency fut légèrement

différent.

Quand je suis arrivé, le projet Diamant ne comportait que peu de développeurs à cause de la

technologie utilisée (eZ Publish) qui était nouvelle pour beaucoup de collaborateurs. On m’affecta

dès mon arrivée sur le projet, et je fus complètement immergé dans cette nouvelle technologie.

Je n’avais jamais utilisé de CMS et en connaissais très vaguement les principes. L’arrivée sur eZ

Publish était loin d’être le plus simple de CMS pour commencer, mais avec l’aide très pédagogue de

Ly Lo Cong (expert technique SQLI pour le projet Diamant) qui possède une bonne maîtrise d’eZ

Publish, j’ai pu rapidement apprendre et me former sur ce CMS.

On m’a ensuite confié des tâches complexes comme l’importation et exportation de données qui

m’ont plongé en plein dans le cœur d’eZ Publish. Ainsi, avec les compétences acquises, je suis resté

sur le projet pendant les trois mois de mon stage. J’aurai souhaité découvrir d’autres CMS ou

framework de développement. Mais, cela fut quand même fort instructif car j’ai pu étudier en

profondeur les points forts et faibles de ce CMS très complet et ainsi découvrir véritablement

l’essence même des CMS.

Ce stage fut donc très formateur, j’ai pu voir différentes manières de gestion d’équipe et de

gros projets.

La deuxième année de l’ESIAL se termine donc sur un stage qui m’aura consolidé dans mon

choix de projet professionnel : travailler dans le web.

Page 25: [RAPPORT DE STAGE] - esial.delcedo.comesial.delcedo.com/Stages/Rapport de stage 2A.pdf · [RAPPORT DE STAGE] Deuxième année ESIAL SQLI Paris - Siège social Immeuble le Pressensé

[RAPPORT DE STAGE - 2ÈME ANNÉE ESIAL] Juin - Août 2009

Olivier Versanne | Glossaire 25

Glossaire

ADSL (Asymetric Digital Suscriber Line) : technique de communication qui permet d'utiliser

une ligne téléphonique d'abonné pour transmettre et recevoir des signaux numériques à des débits

élevés, de manière indépendante du service téléphonique proprement dit.

BU (Business Unit) : division de la société SQLI.

CMS (Content Management System) : gestionnaire de contenu, application permettant de

créer, d’éditer et de manipuler simplement le contenu d’un site, que ce soit des articles, des titres,

des images.

CSV (Comma-separated-values) : format de fichier texte dans lequel les données sont

rangées sous forme de tableaux, chaque ligne représentant une ligne du tableau, les colonnes étant

séparées par des virgules ou des points-virgules.

E-commerce (site) : site proposant la vente en ligne de services et de biens.

E-mail : courrier électronique.

eZPublish : CMS Open Source utilisé dans le projet Luxe, qui se base sur une architecture

proche du modèle MVC.

Flash (Flash Player) : application client fonctionnant sur la plupart des navigateurs Web

permettant la création d’animation et de vidéo intégrée dans des pages web.

Framework : ensemble de bibliothèques de fonctions, d’outils et de conventions aidant à

développer des applications.

HTML : langage de programmation permettant de créer des pages web.

Open Source : qualifie les applications gratuites et dont les codes sources sont mis à la

disposition de tout le monde.

PAGC : pôle Agency Conseil, une BU de SQLI Agency.

PAGD : pôle Agency Design, une BU de SQLI Agency.

PAGT : pôle Agency Technique, une BU de SQLI Agency.

PHP (Hypertext Preprocessor) : langage script utilisé principalement pour produire des pages

web dynamiques via un serveur Apache.

Popin : encart contenant du texte et des images apparaissant par-dessus la page précédente.

SQL : langage de programmation dédié à la manipulation de base de données à base de

requête.

SSII : société de service en ingénierie informatique