Vous êtes sur la page 1sur 16

BENCHETRIT Michaël Brevet de Technicien Supérieur

BTS IG 2ème année Informatique de Gestion


Option : Développeur d’applications
Session 2011

Note de synthèse

Développement web sur le


CMS Prestashop

Stage du 17 mai au 25 juin 2010

Entreprise decoratzia.com
15 rue Erlanger
75016 - Paris

1
Sommaire

Introduction ……………………………………………. 3

I. Présentation de l’entreprise decoratzia………….…...4


1.1. Activité, lieu, objectif ………………………….……. 4
1.2. Structure et effectif de l’entreprise…………….…....... 4
1.3. Les produits proposés par l’entreprise ……….…......... 5

II. Présentation du projet……………………………....... 6


2.1. Présentation du site existant………………………...... 6-7
2.1.1. Qu’est-ce qu’un CMS ? ………………………...11
2.1.2. Présentation du CMS Prestashop ……………….11
2.1.3. Les différents CMS e-commerce sur le marché .. 11
2.2. Problème du site existant ………………........................ 8
2.3. Cahier des charges ………………………..…………… 9

III. Réalisation du projet………………………………... 12


3.1. Outils utilisés lors du projet……………………………..11
2.4.1. Matériel ……………..…………………………………..11
2.4.2. Langage et environnement de développement ................11
2.4.3. Logiciel……………………………………….................11
3.2. Apprentissage du CMS………………………………..12-13
3.3. Méthode de travail utilisé …………………………….. ...14
3.4. Implémentation du cahier des charges…………………...13
3.1.1. Mise en place de le page « Nouveaux produits » ………13
3.1.2. Module d’automatisation des produits………………….14
3.1.3. Création d’outils de partage : facebook et twitter ……...15

IV. Conclusion…………………………………………… 16

2
Introduction
Ce dossier a pour but de présenter le stage effectué au cours du cursus scolaire de la formation
BTS Informatique de Gestion au lycée Le Rebours en date du 17 Mai au 25 Juin 2010 à Paris.
La société pour laquelle le travail a été fourni se nomme Decoratzia, sous la tutel de son
directeur, Oren Ohana.

Ma mission a été, tout d’abord, de corriger certains problèmes liés au site de l’entreprise en
travaillant sur l’outil de gestion de contenu (CMS, content manager system) Prestashop.
Puis de développer et d’intégrer de nouveaux modules et fonctionnalités qui n’étaient pas
proposées par le CMS.

Ce stage a été l’opportunité pour moi d’appréhender le fonctionnement d’un CMS,


d’apprendre de nouvelles méthodes de programmation (programmation orienté objet en PHP)
et de découvrir l’univers du monde du travail en mettant en pratique les connaissances déjà
acquises.

La première partie de ce rapport porte sur une présentation de l’entreprise, une deuxième
partie est consacrée à la présentation du projet, puis une troisième partie aborde la réalisation
du projet.

3
I – Présentation de l’entreprise Décoratzia

1.1 Activité, lieu, objectif


Créée en 2010, Decoratzia.com est une toute nouvelle boutique de décoration d'intérieur
sur Internet qui réalise ses propres créations. Actuellement, l’entreprise est implanté à
Paris dans le 16ème arrondissement dans un studio de 30m².

L’objectif de la société est avant tout d'innover dans la création d'objets déco originaux
afin de proposer des produits uniques créés sur mesure par les designers.

L’avantage de Decoratzia sur une grande partie de ses concurrents réside dans le fait que
toutes ses fabrications sont exclusivement française et réalisées dans un atelier de
création en région parisienne. En effet, la plus part des entreprises concurrentes importe
leur production de Chine pour abaisser leur coût de fabrication au détriment parfois de la
qualité.

1.2 Structure et effectif de l’entreprise

Decoratiza est une filiale de l’entreprise SARL « A3 Sign » qui elle s’occupe de fabriquer
tous les produits de la marque dans un atelier en région parisienne.

La conception et le design des produits sont réalisés par des indépendants « free-lance »
qui sont rémunérés au prorata de leurs travaux.

Le gérant de la marque (Oren Ohana, mon maître de stage) s’occupe de la maintenance


du site internet et des commandes passées par les clients.

Actuellement, je travail seul avec le directeur (Oren Ohana) en tant que collaborateur
stagiaire.

4
1.3 Les produits proposés par l’entreprise

Actuellement, l’entreprise fabrique deux types de produits : des stickers et des tableaux.

Decoratzia proposera très prochainement de nouveaux produits comme des horloges, des
objets de décoration et du mobilier.

Voici quelques produits du catalogue présent sur le site :

LES STICKERS

LES TABLEAUX

5
II – Présentation du projet
2.1 Présentation du site existant

Le site de l’entreprise decoratzia.com a été réalisé par mon maître de stage à l’aide du
CMS (content manager system) Prestashop. L’intérêt du site est de pouvoir présenter
le catalogue des différents produits de décoration et de permettre aux clients de payer
en ligne.

Page d’accueil du site decoratzia.com

2.1.2 Qu’est-ce qu’un CMS ?


Un système de gestion de contenu (de l’anglais Content Management System ou
CMS) est une application internet permettant à quiconque de développer et
d’administrer facilement un site internet sans connaissance technique particulière.
Ils proposent une zone d'administration pour gérer dynamiquement le site en ligne
depuis le web. Les CMS sont généralement « open source » c'est-à-dire que
l’ensemble du programme est libre de droit. Cela permet de disposer des sources du
programme et de les modifier.

6
2.1.2 Présentation du CMS Prestashop
Le CMS Prestashop est un projet qui a été conçu au sein de l’école supérieur
d’informatique Epitech et qui s’est étalé sur 2 ans. Il est aujourd’hui utilisé par plus de
35 000 marchands dans le monde et est traduit en 31 langues. Cet outils permet en
quelque clique à un marchant d’ouvrir sa boutique sur internet.

2.1.3 Les différents CMS e-commerce sur le marché


Il existe de nombreux CMS permettant aux marchands de lancer leur boutique sur
internet. Cependant, j’ai choisi de retenir les trois principaux utilisés : Prestashop,
Magento et osCommerce. Ce tableau a pour but de présenter les forces et faiblesses de
chacun de ces trois outils.

7
2.2 Problèmes du site existant
Le site existant de l’entreprise Decoratzia présente plusieurs lacunes qu’il a fallu corriger.
Tout d’abord, le système de catégorie proposé par le CMS était défaillant. En effet, lorsque
l’on se trouvait sur la page d’un produit du site, rien ne nous permettait de savoir à quelle
catégorie et sous catégorie appartenait ce produit. Cela posait donc un problème de lisibilité
pour le visiteur d’autant plus que mon maitre de stage souhaité mettre en surbrillance la
catégorie et la sous catégorie dans le menu du site comme présenté ci-dessous.

Non surbrillance du bouton


f catégorie « stickers »

Non surbrillance du bouton sous


catégorie « Personnalités »

Page du produit « Sticker Barack Obama » - decoratzia.com

Un autre problème du site concernait le fil d’Ariane. Le fil d’Ariane est une aide à la
navigation sous forme de signalisation permettant de savoir à quel endroit se situe-t-on sur le
site internet. Il se présente généralement sous cette forme : Accueil >Tableaux > Tableaux
de personnalités

Le fonctionnement du fil d’Ariane actuel était assez aléatoire puisqu’il n’indiquait pas
toujours le bon chemin de la page sur laquelle on se situait. En effet, lorsque l’on se trouvait
dans la page d’un produit, le fil d’Ariane affichait parfois ceci :

Accueil > Accueil > Tableaux > Stickers Barack Obama

Alors qu’il aurait du afficher ce chemin :

Accueil > Tableaux > Tableaux de personnalités > Stickers Barack Obama

8
2.3 Cahier des charges
En plus de ces deux problèmes à corriger, d’autres travaux m’on étés confiés par mon
maitre de stage. En effet, celui-ci souhaitait ajouter de nouvelles fonctionnalités sur le site
internet, lesquelles n’étaient pas proposées par le CMS Prestashop.

◊ Création d’outils partage (lien sociaux) : La première fonctionnalité concernait


l’ajout de liens sociaux en bas de chaque fiche produits. Cela permettra d’une part aux
visiteurs de partager un produit qu’il apprécie sur leur page Facebook ou sur leur compte
Twitter. Et d’autre part de générer un trafic important de visiteurs vers le site puisqu’à eux
deux, Facebook et Twitter rassemble près de 600 millions d’internautes permettent
d’alimenter considérablement la promotion du site de l’entreprise.

◊ Créer une page « nouveaux produits » : La seconde fonctionnalité était celle de


créer une page « Nouveaux produits » qui permettra d’afficher les derniers articles ajoutés
dans le catalogue les 30 derniers jours. Les visiteurs du site pourront ainsi d’un seul clique
consulter les toutes dernières nouveautés du catalogue.

◊ Un module d’automatisation pour l’ajout des produits : Le troisième point de mon


travail est celui qui a m’a pris le plus de temps durant ce stage car il a nécessite une
longue phase d’analyse et de réflexion.

Il s’agissait de réaliser un module dans le panel d’administration qui permettrait


d’automatiser et de faciliter l’ajout de produits sur le site. Jusqu’à maintenant, lorsque
mon maître de stage souhaiter insérer un nouveau tableau dans le catalogue, cela pouvait
prendre parfois jusqu’à 20 minutes ce qui devenait très lourd à gérer.

En effet, pour les articles « tableaux », le produit est proposé en plusieurs tailles selon son
format. Chaque taille a son prix différent, il fallait donc ajouter pour chaque tableau les
tailles associées au format ainsi que les prix correspondant. A cela s’ajoute le fait que tous
les tableaux sont proposés sur deux supports : PVC (matière plastique) ou Toile.
Voici un imprime écran des listes des tailles proposés aux clients sur une fiche produit et
qu’il fallait ajouter « manuellement » pour chaque nouveau tableau:

Format portrait Format panoramique Format carré

9
Mon rôle dans l’élaboration de ce module sera donc de rendre « dynamique » l’ajout de toutes
les tailles d’un format de tableau lors de l’ajout d’un nouveau produit dans le catalogue

III –Réalisation du projet

2.3 Outils utilisés lors du projet

2.3.1 Matériel
S’agissant du matériel informatique, j’ai travaillé tout au long du stage avec mon
ordinateur portable ce qui était très pratique car je pouvais continuer à travailler à
l’extérieur de l’entreprise quand cela était nécessaire. Pour la connexion internet, je
me suis connecté au réseau wifi installé dans le locale.

2.3.2 Langage et environnement de développement


Pour travailler sur le développement du site, j’ai dû utiliser le langage PHP (langage
de programmation permettant de concevoir des sites aux pages dynamiques) que je
connaissais déjà bien car je l’ai souvent utilisé dans le passé. Cependant, le CMS
utilisait une version du langage PHP que je ne connaissais pas : la version 5 qui inclut
le fonctionnement du modèle objet.

J'ai utilisé aussi le logiciel Wamp qui est un environnement de développement de site
web en PHP. J'ai été amené à utiliser Wamp pour travailler localement sur le site
depuis mon PC Portable car celui-ci devra être migré ultérieurement. Cet
environnement regroupe les logiciels : MySql qui est un gestionnaire de données,
Apache (serveur), PHP, et phpMyAdmin qui est un outil pour administrer des bases
de données MySql.

2.3.3 Logiciel

Pour pouvoir écrire les lignes de code en PHP, j’ai utilisé l’éditeur de texte Notepad++
qui intègre la coloration syntaxique de code source pour les langages.

Enfin, j’ai utilisé un autre outil très intéressant et très efficace pour le développement
qui est la barre d’outils «Web developer » : cet outil, qui est une extension pour
Mozilla Firefox permettant aux développeurs de modifier les lignes de codes (HTML

10
et CSS) directement consultée (sans passer par les fichiers et sans les sauvegarder) et
de repérer les erreurs de script.

3.1 Apprentissage du CMS


La première partie du stage a été de comprendre l’outil sur lequel j’allai travaillant
pendant 5 semaines. En effet, avant de me lancer dans l’écriture de nombreuses lignes
de code pour travailler sur le projet, il m’a fallu une période d’adaptation du CMS
Prestashop pour comprendre les rouages de son fonctionnement, l’organisation du code
employé, la conception de la base de données, etc..

Ce travail en amont d’analyse du CMS m’a pris toute la première semaine du stage.
 Apprentissage de la programmation objet en PHP : le CMS étant développé
uniquement en modèle objet, j’ai dû obligatoirement me familiariser avec ce type de
programmation qui m’était jusque-là inconnu. Mon maître de stage a passé beaucoup
de temps à m’expliquer certains principes de l’objet : l’héritage, les types de variables,
l’instanciation de classe. J’ai également consulté de nombreux tutoriaux à ce sujet,
notamment sur le siteduzero.com. Bien entendu, même à la fin du stage, je n’ai pas
encore pu voir toutes les fonctionnalités de la programmation objet car

 Apprentissage du système de Template : le CMS Prestashop utilise le


système de template Smarty. Un système de template permet de rendre les scripts PHP
indépendants de la présentation, c'est-à-dire de séparer la logique applicative de la
logique d’affichage. J’ai dû donc également apprendre à utiliser ce moteur de template
puisqu’il utilise son propre langage de formatage. Pour ce faire, j’ai utilisé la
documentation proposé sur le site officiel de Smarty qui explique très simplement
comment l’utiliser.

 Comprendre la conception de la base de données du CMS : le travail le plus


compliqué fut de comprendre la logique de conception de la base de données du
gestionnaire de contenu. En effet, travailler sur de grosses applications comme celle de
Prestashop nécessite pour un développeur de bien cerner les liens entre les tables pour
pouvoir travailler sur des
développements spécifiques. Pour
ce faire, j’ai dû me procurer le
modèle physique des données sur
le site officiel du CMS.
Ce modèle m’a été très utile pour
pouvoir travailler plus rapidement
et efficacement sur le projet.

Modèle physique de donnée du CMS Prestashop


11
3.2 Méthode de travail utilisé
Auparavant, mon maitre de stage était chef de projet pour un magazine du groupe Lagardère.
Il avait donc l’habitude de diriger et d’animer des équipes de développeur, ce qui ma permit
de profiter de ses méthodes de travail.

Pour mener à bien ce projet, une organisation du travail a été déterminée de manière à
planifier les taches au jour le jour. J’ai utilisé l’application « Google Agenda ». Il s’agit d’un
outil permettant d’organiser et de planifier des évènements depuis une interface unique. Il est
aujourd’hui utilisé par plus de deux millions d’entreprises à travers le monde.

Imprime écran des taches à faire pour la semaine du 31 mai au 6 juin 2010 avec l’outil
« Google Agenda »

12
3.3 Implémentation du cahier des charges

3.3.1 Mis en place de la page « Nouveaux produits »

Le premier travail réalisé était celui d’une page présentant les nouveaux produits du site.
Pour ce faire, une fonction « getNewProducts » a été crée permettant d’interroger la base
de donnée et de renseigner les 30 derniers produits insérés sur le site. Cette fonction se
trouve dans la classe « Product » et sera appelée par la suite dans une autre partie du code
pour pouvoir afficher les produits.

La fonction est statique, Paramètre envoyé à la fonction


c'est-à-dire qu’on peut y correspondant à l’identifiant de la
accéder sans avoir besoin langue du visiteur.
d’instancier la classe.

static public function getNewProducts ($id_lang) Méthode permettant d’exécuter une


{ requête SQL et de retourner son
résultat sous forme de tableau.
$result = Db ::ExecuteS(‘
SELECT p.price, p.`description`, p.`description_short`, p.`link_rewrite`,
p.`meta_description
FROM `product` p
WHERE p.`active` = 1
AND p.’id_lang’ = “.$id_lang.”
AND DATEDIFF(p.`date_add`, DATE_SUB(NOW(), INTERVAL 30 DAY)) > 0’)

return $result;
}

 DATEDIFF : fonction SQL qui calcule le nombre de jours entre deux dates.

 INTERVAL 30 DAY : spécifie qu’on ne recherche que les différences de moin de 30


jours.

 return $result : permet de retourner le résultat de la requete sql contenu dans la variable
$result.

13
3.3.2 Module d’automatisation des produits

L’imprime écran ci-dessous présente un aperçu du formulaire permettant d’ajouter un


nouveau produit sur le site.

L’ajout d’une liste déroulante proposant les différents formats


permettra à mon maître de stage de gagner un temps précieux. En
effet, celui-ci n’aura plus besoin d’ajouter chaque déclinaison de
produit lors de l’insertion d’un nouveau tableau puisque le module
s’en chargera lui-même simplement en renseignant le format du tableau.

Pour mettre en place cette solution, nous avons moi et mon maître de stage établi un
Modèle Conceptuel de données (MCD) qui nous a aidé à schématiser plus facilement les
tables nécessaires au module. Ce modèle nous a également permis de présenter les
données et le problème indépendamment des choix technique
Explication du MCD

- Un produit correspond à
un et un seul format.

- « Combinaison » est une


entité faible identifiée par
un format et une taille.

- L’association « valoir »
indique le prix d’une
déclinaison de produit en
fonction de son format, sa
taille et son support.

14
3.3.3 Création d’outils de partage : bouton facebook et twitter

Après avoir mise en place l’outil permettant de partager les fiche produit sur les sites
« facebook » et « twitter », nous avons rapidement constaté un problème au niveau des
vignettes. En effet, dans le cas de notre site, facebook propose par défaut une vignette associé
au lien qui ne correspond pas du tout au contenu du produit partagé (voir l’image ci-dessous).

Dans un soucie de cohérence, nous souhaiterions indiquer à l’outil que l’image accolé au lien
corresponde à une photo du produit. En cherchant dans la documentation du site de
facebook, j’ai pu trouver la solution au problème : il suffit d’ajouter les balises ci-dessous au
début de chaque fiche produit pour pouvoir contrôler l’image exacte qui sera apposé au lien.

<link rel="image_src" href="lien image produit.jpg" />

Grâce à cette nouvelle ligne de code, nous pouvons voir le résultat sur le sticker « Elvis
Presley ».

Page d’un produit sticker / decoratzia

L'image associé est bien celle du produit.

15
IV – Conclusion
Le bilant du stage est positif : j’ai pu corriger la grande majorité des problèmes existant sur le
site et y ait ajouté quelques fonctionnalités supplémentaire. Bien entendu, 5 semaines n’ont
pas suffit à satisfaire toutes les demandes de mon maître de stage qui souhaitait mettre en
place d’autres modules pour perfectionner sa vitrine internet.

Ce stage a été bénéfique et formateur tant sur le plan technique que humain.

Technique car j’ai vu améliorer mes compétence dans la programmation web en apprenant
notamment le « modèle l’objet » qui permet d’organiser son code de manière à ce que celui-
ci puisse être plus facilement réutilisable. Le fait d’avoir appris à travailler sur l’outil CMS est
aussi un atout car ces logiciels sont de plus en plus utilisés pour développer des sites web
dynamiques et les programmeurs doivent maintenant savoir les manipuler.

Ce stage est aussi une expérience humaine enrichissante où il a fallut apprendre à s’adapter
aux personnes avec lesquelles on est amené à travailler et respecter le rythme de travail
imposé. Je me suis rendu compte que rester toute une journée à analyser et rédiger des lignes
de code derrière un ordinateur est une chose fatiguant qui demande une grande concentration.

16