1

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

Brevet de Technicien Supérieur Informatique de Gestion Option : Développeur d’applications Session 2011

BENCHETRIT Michaël BTS IG 2ème année

2

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

3

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.

4

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.

5

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 TABLEAUX

LES STICKERS

6

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.

7

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.

8

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

Non surbrillance du bouton catégorie « stickers »

Non surbrillance du bouton sous catégorie « Personnalités »

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

9

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é

10

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

11

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

12

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 »

13

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.

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

static public function getNewProducts ($id_lang)

{

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

}

Méthode permettant d’exécuter une requête SQL et de retourner son résultat sous forme de tableau.

La fonction est statique, c'est-à-dire qu’on peut y accéder sans avoir besoin d’instancier la classe.

Paramètre envoyé à la fonction correspondant à l’identifiant de la langue du visiteur.

14

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.

15

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.

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

Page d’un produit sticker / decoratzia

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

L'image associé est bien celle du produit.

16

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.