Deboffles Jérôme Shopmedia/Hibe

DUT informatique Maître de stage : Omar Lamrani

IUT A, Villeneuve d’Ascq Jérôme Hennebert(Lille)
Montreal, Quebec Michel Pare(Montreal)

Rapport de stage :

Création d’un site de e-commerce,

ComicAge
2
Remerciements :

La réalisation de ce projet s’est réalisée grâce à la présence de plusieurs personnes que j’aimerai
remercier :

Je tiens tout d’abord remercié mes deux tuteurs de stage à savoir Michel Pare, professeur
d’informatique au Cegep de Saint-Jean-sur-Richelieu ainsi que Jérôme Hennebert, professeur de
communication à l’IUT A de Lille 1 pour leur écoute et leur disponibilité tout au long de ce stage.

Je remercie également Omar Lamrani, mon maître de stage au sein de l’entreprise pour
m’avoir suivi et confié ce projet au cours de ces dix semaines de stage.

Pour mon départ dans un pays étranger, je tiens à remercier le bureau de relations
internationales notamment Valérie Buquet ainsi que Patrick Lebègue sans lesquels je n’aurais pas pu
faire mon stage au Québec.

Enfin, au sein de l’entreprise je remercie mes collègues de travail avec lesquels j’ai pu
apprendre de nouvelles choses en réalisant ce stage.

3
Résumé :

Pour finaliser ma formation en DUT informatique, par la découverte du monde professionnel, j’ai
effectué un stage de dix semaines chez Shopmedia/Hibe, une entreprise de développement de site
internet situé à Montréal. J’ai alors été accueillie au sein d’une équipe de développeurs où l’on nous
a confié la réalisation d’un site de e-commerce appelé « ComicAge ». Ce dernier consiste à vendre
en ligne des bandes dessinées et au bout d’un certain temps et par le bon vouloir de l’administrateur
déplacer directement les produits de la boutique sur ebay. Pour réaliser cette mission j’ai dû
développer en PHP et utilisé le javasript. Pour ce qui est de la base de données, nous avons utilisé
mysql. L’objectif principal était de partir d’une base déjà faite, « Zen-Cart », puis d’adapter ce dernier
aux besoins du client.

Abstract :

To complete my training course in DUT computer sciences, by the discovery of the professional
world, I did a ten-week internship at Shopmedia / Hibe, a development company website located in
Montreal. I was then welcomed into a team of developers where we have been entrusted the
realization of an e-commerce site called "ComicAge”. The latter is to sell online comics and after a
while and by the willingness of the administrator to move products directly from the shop on ebay.
To achieve this mission, I had to develop in PHP and used the JavaSript. Regarding the database, we
used mysql. The main objective was to start with a base already made, "Zen-Cart”, and then adapt it
to customer needs.

4
Table des matières
Remerciements : ..................................................................................................................................... 3
Résumé : .................................................................................................................................................. 4
Abstract : ................................................................................................................................................. 4
Introduction............................................................................................................................................. 7
I Présentation de l’entreprise et du projet .............................................................................................. 8
1) Présentation de Shopmedia/Hibe ............................................................................................... 8
1) Situation géographique ........................................................................................................... 8
2) Historique de Shopmédia et de Hibe ...................................................................................... 8
3) Répartition des part de Shopmédia et de Hibe ....................................................................... 8
4) Activité de l’entreprise ............................................................................................................ 8
5) Structure de l’entreprise ......................................................................................................... 9
2) Présentation et description du département ............................................................................. 9
1) Organisation du département des opérations ........................................................................ 9
2) Description des équipements .................................................................................................. 9
3) Liens administratif avec le département ............................................................................... 10
Conclusion de la partie : .................................................................................................................... 10
II Les Missions réalisées ......................................................................................................................... 11
1) Analyse et fonctionnement d’une boutique de bande dessinées............................................. 11
1) Similitudes et différences avec une boutique ordinaire ....................................................... 11
2) Etude de l’existant ................................................................................................................. 11
2) Présentation générale et technique de « zen-cart » ................................................................. 12
1) Présentation générale ........................................................................................................... 12
2) Les modules complémentaires.............................................................................................. 12
3) Ajouts et Modifications de fonctionnalités ............................................................................... 13
1) Gestion des états des produits .............................................................................................. 13
2) Ajout d’un produit ................................................................................................................. 14
3) Gestion des stocks et des quantités ...................................................................................... 16
4) Création des artistes .............................................................................................................. 18
5) Ajout au panier de plusieurs produits avec états .................................................................. 20
6) Gestions des promotions....................................................................................................... 21
4) Correction du calcul du prix entre promotion et attributs ....................................................... 22
5) Tests de la boutique et des fonctionnalités .............................................................................. 23
1) Règlement par Paypal............................................................................................................ 23

5
 2) Le plug-in « Canada-post » .................................................................................................... 24
3) Le plug-in Ebay Exporter........................................................................................................ 24
4) Les autres tâches et correction de bugs. ............................................................................... 25
5) Le script d’importation dans la base de données ................................................................. 25
Conclusion de la partie ...................................................................................................................... 26
III Bilan technique et humain ................................................................................................................ 27
1) Les apports techniques.............................................................................................................. 27
1) La base de données ............................................................................................................... 27
2) HTML et CSS .......................................................................................................................... 27
3) Le Php .................................................................................................................................... 27
4) Le JavaScript et l’Ajax ............................................................................................................ 27
2) Gestion et communication ........................................................................................................ 28
1) Les réunions........................................................................................................................... 28
2) Le travail en équipe ............................................................................................................... 28
3) Les tests ................................................................................................................................. 29
4) Rédaction du manuel et suivit du projet ............................................................................... 29
Conclusion de la partie .................................................................................................................. 29
Conclusion ............................................................................................................................................. 30
Annexes ................................................................................................................................................. 31
Glossaire ................................................................................................................................................ 37
Références ............................................................................................................................................. 38

6
Introduction

Etudiant à l’Institut Universitaire de Technologie de Lille 1 en deuxième année de DUT Informatique

de gestion, j’ai été amené à effectuer un stage de dix semaines en entreprise du 6 avril 2010 au 11
juin 2010. Comme mon IUT me proposé de partir faire mon stage à l’étranger, j’ai décidé de partir
faire ce dernier au Québec pour découvrir un nouveau continent et aussi une nouvelle culture. Mon
stage s’eskjt donc déroulé chez Shopmedia dans le service « développement et assurance qualité ».
J’ai alors eu pour mission de développer un site de commerce électronique de bandes dessinées.

Une question s’est alors immédiatement posé :

- Devons nous démarrer de zéro ou alors utiliser une plateforme existante ?

D’autres questions sont aussi survenues par la suite:

- Comment gérer les stocks de produits ?

- Comment identifier une bande dessinée parmi les autres ?
- Comment gérer les promotions dans la boutique ?

Nous avons eu une réponse très vite à la première question, la durée de notre stage ne nous
permettait pas de partir de rien, nous sommes donc partit d’une base existante avec « zen-cart » qui
est une solution Open-source de boutique en ligne qui est développé en PHP et qui peut utiliser la
plupart des bases de données. Mais comme nous le verrons tout au long de ce rapport, les
fonctionnalités de base de « zen-car » sont trop globales pour être adapté à une boutique de bandes
dessinées.

Dans un premier temps, je procéderai à une présentation de Shopmedia, le service dans lequel j’ai
effectué mon stage et enfin à une description du projet que j’ai eu à réaliser. Dans une seconde
partie, j’expliquerai le cahier des charges qui a été réalisé avec l’équipe dans laquelle j’ai travaillé
suite à l’analyse et aux divers rendez-vous et réunions réalisé avec le client et notre maître de stage.
Enfin, dans la troisième partie j’effectuerai un bilan technique et humain qui décrira les différentes
compétences et savoir-faire que j’ai dû acquérir au cours de mon stage ainsi que les ressemblances
et différences avec l’enseignement que j’ai reçu avec les enseignements de l’IUT.

7
I Présentation de l’entreprise et du projet
1) Présentation de Shopmedia/Hibe
1) Situation géographique

Shopmedia est une entreprise de développement de site internet qui se situe au Québec.
L’entreprise se trouve plus précisément au 432 rue Sainte Hélène à Montréal. Ce quartier de
Montréal est appelé la cité du multimédia car c’est ici que se situe la plupart des entreprises
d’informatique et d’audiovisuelle.

2) Historique de Shopmédia et de Hibe

Shopmedia est une entreprise d’informatique qui développe principalement une application
de réseau social appelé « Hibe » mais également des applications pour d’autres sociétés telles que la
création de site e-commerce et divers programme basé sur une architecture web pour les
entreprises. Depuis l’arrivé du réseau social dans l’entreprise, cette dernière vise plus à s’appelé
« Hibe » car c’est maintenant l’activité principale de l’entreprise.

En 2007 Hibe se crée aux Etats-Unis avec un apport de trois millions de dollars
d’investissement privé provenant du créateur du concept et directeur de l’entreprise : Jean Dobey.

C’est en 2009 que Hibe sort sur le web mais il est alors en phase de test et de
développement. Ce n’est que vraiment en 2010 que ce dernier est disponible au public mais encore
une fois ce n’est qu’une beta. A l’heure actuelle, Hibe est en version 0.4.

3) Répartition des part de Shopmédia et de Hibe

La répartition de l’entreprise entre les différents actionnaires est très inégale. En effet, on peut
apercevoir que l’actionnaire principal qui est le président et le fondateur de l’entreprise, compte à
lui seul, 70% des parts de l’entreprise. Aux côtés du président, les Co-fondateurs possèdent 24% des
parts, et enfin les investisseurs initiaux 6% des parts. On voit donc que la répartition de l’entreprise
est vraiment inégale et surtout que le président de l’entreprise possède plus de 50% des parts et, à
ce niveau là, il peut prendre les plus grandes décisions.

4) Activité de l’entreprise

Shopmedia développe Hibe, un réseau social en concurrence avec Facebook et à Twitter. Ce

réseau social gère la gestion d’identité dans les profils d’utilisateurs et permet à ses membres de
créer des identités qui peuvent être à la fois profondes, nuancées et sûres. C’est aussi le premier

8
réseau social permettant à ses membres de choisir de partager la totalité ou seulement une partie de
leur identité, en fonction de la relation avec les autres membres. Cela est possible grâce aux profils
« multi-facettes » qui permettent de recréer l’environnement social réel. Les membres de ce réseau
social peuvent donc protéger leurs images entre les différents groupes d’amis, professeurs, parents
ou patrons.

En parallèle au développement de Hibe, Shopmedia créé différents projets tels que le service
aux abonnés, la création et la mise à jour de différents sites web portant sur le e-commerce ou
encore des outils pour entreprises.

5) Structure de l’entreprise

L’entreprise compte actuellement trente employés divisés en quatre départements principaux à

savoir :

- Le département des Finances qui va s’occuper des investissements et de répartir le

budget de l’entreprise.
- Le département Marketing qui lui va s’occuper de trouver de potentiels investisseur dans
Hibe, mais aussi trouver d’autre contrats tel que la création de site internet.
- Le département Opération
- Le département des ressources humaines.

2) Présentation et description du département

1) Organisation du département des opérations

Le département des opérations possède deux groupes distincts. D’une part, la « Support
Team » qui est centralisée sur la partie relation client et d’autre part, l’ « Operation Team » qui est
centré sur le développement. Cette dernière est spécialisée dans quatre domaines :

- Le management
- L’opération
- L’architecture
- L’administration

L’entreprise m’a confié un poste de « Web Integrator », appartenant au domaine de l’architecture.

Selon le contrat établi avec la société, j’occupe également le poste de « Quality assurance »
appartenant à la partie Management. (Voir annexe 1)

2) Description des équipements

9
 Shopmedia est une entreprise moderne. Elle possède de nombreux équipements récents.
Parmi eux, deux salles pour les développeurs avec dans chacune, des boxes avec des ordinateurs
récents dont le système d’exploitation est Windows XP Professional. L’entreprise possède aussi deux
pièces de conférence contenant deux écrans plats reliés à un ordinateur. Chaque membre de la
société a sa propre session et peut avoir accès à son poste depuis n’importe quel PC. En revanche,
malgré la mobilité des sessions, chaque développeur a son propre ordinateur sur lequel il travaille
tous les jours. De plus, il peut travailler avec les outils qu’il désire si ceux-ci sont gratuits. Dans le cas
où ils seraient payants, il faut l’autorisation de l’administrateur réseau.

3) Liens administratif avec le département

Le lien administratif avec le département se fait par l’intermédiaire du directeur des

opérations, Omar Lamrani. Chaque département est relié aux autres par un serveur installé dans
l’entreprise. Il n’y a pas vraiment de procédure à suivre si un employé de l’entreprise veut parler avec
un autre employé de la société. Il ne doit pas forcément passer par le directeur des opérations. Un
développeur peut ainsi s’adresser directement à l’administrateur réseau sans passer par le directeur
de son secteur.

Conclusion de la partie :

Shopmedia est une entreprise moderne de son environnent de travail qui est un espace open
source que part ses équipement et son dynamisme. Cette société travaille surtout sur son projet
principal qui est Hibe, un réseau social en concurrence avec facebook et Twitter, mais la société
prend aussi des contrats pour créer d’autre site comme des sites de e-commerce. Etant une
entreprise d’informatique, Shopmedia a été pour moi un lieu très enrichissant quotidiennement.

10
II Les Missions réalisées

Le projet que l’on nous a confié était la réalisation d’un site de e-commerce en utilisant
comme base « zen-cart » qui est un CMS. C’est donc sur cette base que notre projet s’est réalisé et
nous avons par la suite, adapté cette base pour qu’elle puisse convenir pour une boutique de bande
dessinées.

1) Analyse et fonctionnement d’une boutique de bande dessinées

1) Similitudes et différences avec une boutique ordinaire

Les similitudes d’une boutique de bandes dessinées et d’une boutique ordinaire sont que
chaque produit à un prix, une description de lui. Une boutique ordinaire peut avoir aussi une gestion
des stocks, gestion des taxes, des clients et des commandes.

Les différences sont quant à elles assez prononcées :

- Un produit possède un « issue » qui est un volume d’un titre

- Un produit possède des artistes
- Une bande dessinée possède des attributs tels que
o Cover Date
o Cover price

Tous ces changements font que l’on ne peut pas utiliser « zen-cart » dans sa version
d’origine. Des modifications doivent être faites mais pour cela nous devons étudier l’existant

2) Etude de l’existant

Nous allons présenter ici brièvement ce que « zen-cart » permet de réaliser, nous verrons
dans un point suivant les aspects plus techniques de cette plateforme.

« Zen-cart » est une plateforme de boutique de vente en ligne très complète et qui possède
tous les outils nécessaires pour vendre facilement sur internet. Elle possède une très grosse base de
données à l’origine composée de 95 tables. Son MLD est très complet mais avec toutes ces tables, il
est dur au début de s’y retrouver. (Voir Annexe 1)

Cette plateforme est très complète, car nous pouvons par l’administration :

- Configurer la boutique : Changer le nom de la boutique, configurer l’envoi de mails,

régler les modes de paiement, etc.
- Gérer le catalogue : Ajouter des produits, des catégories, des sous-catégories etc.

11
 - Gérer les commandes : Régler les modes de livraison, les réductions pour les grosses
commandes etc.
- Gérer les clients : Supprimer un client, traiter les commandes, etc.
- Voir les statistiques de la boutique : Observer les produits les plus vus, les plus vendus,
les meilleurs clients, etc.
- Gérer les prix : Appliquer des promotions, gérer les taxes, etc.

Du point de vue du client, ce dernier peut gérer son compte notamment si ce dernier à
plusieurs adresses, une adresse de facturation spécifique etc.

2) Présentation générale et technique de « zen-cart »

1) Présentation générale

« Zen-cart » est une solution Open Source pour créer une boutique en ligne, qui est à l’origine issu du
développement d’OScommerce mais, qui a été par la suite la plus adapté que ce dernier sur les
fonctions de e-commerce et de sécurité. Cette solution est entièrement paramétrable et peut être
installé en plusieurs langues. A l’origine, elle intègre la gestion des stocks, même si celle-ci n’est pas
très évoluée au départ, la fonction mail, la gestion des catalogues, des modules de payement dont
Paypal, la gestion des taxes, la gestion des clients. Il est aussi possible d’intégrer un forum phpBB à
l’intérieur du site.

2) Les modules complémentaires

« Zen-cart » est un CMS auquel on peut ajouter des modules complémentaires très utiles comme par
exemple pour changer l’affichage des images dans la boutique ou encore pour pouvoir gérer les
stocks différemment. Parmi tous ces modules, nous avons dû en installer certains :

- Simple SEO URL : ce module sert à générer des URL propre dans le navigateur du client.
De plus, ce module est aussi très utile pour les moteurs de recherche, pour que le site
puisse avoir un bon référencement de ses produits et donc avoir beaucoup plus de visite.

- LigthBox Gallery : ce module quant à lui sert à avoir une meilleure galerie d’image pour
les produits de la boutique avec un effet sympathique. Il utilise principalement du
JavaScript.

12
 Capture écran LightBox Gallery.

3) Ajouts et Modifications de fonctionnalités

Comme il a été dit plus haut dans le rapport, certaines fonctionnalités de la solution Open
source ne correspondaient pas ou bien était trop général pour notre boutique. C’est pour cela que
quelques modifications ont été apportées et dans le cas où les modifications étaient trop
conséquentes ou inadaptables, on a alors décidé de refaire complètement la fonctionnalité.

1) Gestion des états des produits

Un état est une condition du produit, c'est-à-dire si le produit est en bon état ou si au contraire il ne
l’est pas. Le meilleur conditionnement prend le prix de départ du produit. En revanche, les autres
états prennent un pourcentage sur le prix de base (par exemple quand le produit sera dans un
mauvais état, ce dernier prendra seulement 20% du prix de base).

La première modification a été réalisée pour que l’administrateur du site puisse ajouter des états
facilement et non pas ajouter un état par un état et pour chaque produit mais, au contraire ajouter
un état par le biais d’un formulaire. Une fois que le nom de l’état et que sa valeur a été remplie, ce
dernier s’ajoute alors pour tous les produits présents dans la base de données. Pour pouvoir réaliser
cette fonction, on a d’abord étudié comment les attributs des produits étaient gérés par « zen-cart »,
puis on a par la suite adaptée ce que l’on voulait faire. Les états sont donc gérés comme des attributs
pour le produit. En revanche, l’ajout de ce dernier est bien plus rapide que les autres attributs, car les
requêtes ne s’appliquent pas sur un seul produit à la fois comme c’était le cas dans le « zen-cart »
d’origine mais bien sur l’ensemble des bandes dessinées.

Nous devons faire aussi attention à la méthode d’insertion de ces attributs spéciaux, car ces derniers
sont utilisés dans plusieurs fichiers du site notamment celui de la gestion des stocks.

13
 Ajout et suppression d’un état.

2) Ajout d’un produit

Le fichier pour ajouter un produit a aussi était modifié, car il ne répondait plus aux exigences du
client. En effet une bande dessinée comporte beaucoup plus d’informations qu’un simple produit de
base. Cette dernière comporte un « issue », plusieurs artistes, un cover date etc… Ce fichier est
compliqué à modifier car non seulement c’est dans celui que l’on rentre les informations pour
ajouter un produit à la boutique, mais c’est aussi dans ce fichier que l’on rentre pour modifier un
produit et donc les valeurs par défauts doivent apparaitre pour l’administrateur.

Pour pouvoir mettre de nouvelles informations à rentrer, on ne peut pas mettre de simples
formulaires comme dans des pages web classiques car elles ne seront pas pries en compte dans
l’insertion. Pour remédier à ce problème nous avons dû étudier les fonctions de « zen-cart » pour
pouvoir comprendre comment ces dernières fonctionnent.

zen_draw_input_field('products_issue', $pInfo->issue,
'onKeyUp="updateGross()"')

14
 Fonction de zen-cart pour afficher une zone de saisi.

Pour pouvoir faire l’insertion dans la base de données on a ensuite une deuxième page. Dans cette
page les informations sont rentrées de deux manières, pour la table « products » ont un tableau sql
et pour les autres tables on a des insertions basiques. Comme nous avons modifié la table
« products », il fallait faire très attention à ce que l’on rentrait dans cette table pour ne pas se
tromper de colonne ce qui peut avoir des conséquences dramatiques dans notre cas, car c’est un site
de vente en ligne.

$sql_data_array = array('products_type' =>

zen_db_prepare_input($_GET['product_type']),
'products_model' =>
zen_db_prepare_input($_POST['products_model']),
'products_price' => $products_price,
…
Tableau sql pour l’insertion dans la table product.

Après l’insertion du produit, on génère alors les attributs du produit pour que l’utilisateur puisse
ensuite rentrer les quantités dans une autre page prévue à cet effet. Pour effectuer l’insertion sur les
différents états, nous avons créé une table avec les états des produits par défaut.

Petit point sur les requêtes :

Pour pouvoir exécuter des requêtes, nous devons passer par une variable de « zen-cart ».

$req = $db->Execute($Requette);

Nous pouvons ensuite récupérer les résultats de la manière suivante :

$req->fields[‘colonne’];

S’il y a plusieurs lignes dans notre requête nous pouvons alors faire une boucle While :

While( !$req->EOF)

{
Echo $req->fields[‘colonne’] ;
}

15
Nous devons notamment utiliser cette manière de faire pour récupérer les informations au cas où
l’utilisateur voudrait changer les informations du produit par la suite, en effet il faut que les
informations précédemment ajoutées soit visible lors de l’édition du produit pour que
l’administrateur de la boutique puisse changer que ce qui ne va pas dans la description du produit.

3) Gestion des stocks et des quantités

Ce point a été l’un des plus importants de notre projet, car c’est le plus gros point que l’on a dû
gérer. En effet les quantités de produit se font en fonction de la bande dessinées mais aussi en
fonction de son état. Pour ce faire nous avons dû installer un module à zen-cart qui s’appelle
« products with attributes stock ». Malheureusement, ce module ne correspondait pas tout à fait à
ce qu’attendait le client et nous avons donc dût refaire une page complète, car les exigences du
client s’éloignait de trop de ce que proposé ce module.

Nous sommes donc partis de cette base que nous avons bien étudiée avant de nous lancer dans la
programmation.

A l’origine, pour modifier les quantités de produit dans « zen-cart », il fallait rentrer la fiche de
chaque produit pour modifier cette valeur, cela prenait donc beaucoup de temps pour modifier
toutes les valeurs, on a donc dû faire en sorte que la gestion des stocks se fasse rapidement.

Pour compléter cette page, nous avons donc fait un tableau avec comme colonne le nom des états et
en ligne l’issue des produits, de plus une pagination a été faite pour limiter le nombre de bande
dessinées affichées par page. De cette manière, une insertion de la quantité peut être faite et faire
gagner beaucoup de temps. Le temps est une priorité pour notre client car ce dernier sous-traite
certaines tâches, donc plus l’insertion de la quantité pour un produit est rapide, moins le client
payera pour rentrer ces informations. De plus, pour chaque produit, nous devons récupérer l’issue du
produit et la quantité pour renseigner l’utilisateur des stocks actuels.

Tableau de gestion des quantités

16
Code des requêtes à effectuer pour créer le tableau :

//Requette pour l’etat

$query_state = 'SELECT products_options_values_name FROM

products_options_values
WHERE language_id ='.$_SESSION['languages_id'].
' ORDER BY products_options_values_sort_order ASC';
$result_state = $db->Execute($query_state);

//Requette pour l’issue

$query_issue = 'SELECT pd.products_id, pd.products_name FROM

products_description pd
WHERE pd.language_id ='.$_SESSION['languages_id'];

//Requette pour l’image

$query_image = 'SELECT products_image FROM products

WHERE products_id = '.$result_issue-
>fields['products_id'];
$result_image = $db->Execute($query_image);

$query_qty = 'SELECT SUM(PWAS.quantity) AS "qty", PA.products_id,

POV.products_options_values_name, POV.products_options_values_id,
POV.products_options_values_sort_order
FROM products_with_attributes_stock PWAS JOIN
products_attributes PA on PWAS.stock_attributes =
PA.products_attributes_id JOIN products_options_values POV ON
PA.options_values_id = POV.products_options_values_id
WHERE PWAS.products_id ='.$result_issue-
>fields['products_id'].' and POV.language_id
='.$_SESSION['languages_id'].' GROUP BY PWAS.stock_attributes
ORDER BY POV.products_options_values_sort_order ASC';

Requête pour la quantité de produit dans le tableau d’ajout rapide.

Une fois les informations sur cette page complétée, l’utilisateur est alors redirigé vers une autre page
où il peut voir toutes les quantités qu’il vient de rentrer et s’il s’est trompé il peut même éditer ces
derniers. Un SKU, qui est un numéro de stock est alors automatiquement généré pour chaque
quantité rentrée, ce qui permet de bien gérer les produits. Ce SKU est généré par un code car ce
n’est pas seulement une incrémentation de chiffre. C’est en effet une incrémentation de chiffres et
de lettres.

17
Explication génération SKU :

Si le SKU_CHIFFRE < 99999 ALORS

SKU_CHIFFRE ++ ;
SINON
SKU_LETTRRE ++ ;

Pour incrémenter SKU_LETTRE, on passe cette valeur la lettre qui le suit dans l’alphabet, si ce dernier
est arrivé à Z, alors le SKU_CHIFFRE prend deux lettres etc…

De plus, l’administrateur possède aussi un calendrier pour voir les quantités rentrées soit
pendant le mois, soit durant une journée préalablement sélectionné. Il peut ainsi modifier la quantité
qu’il a ajoutée à une date précise s’il s’est trompé.

Sku et calendrier.

4) Création des artistes

Les artistes ne sont pas pris en compte d’origine dans zen-cart et il n’y a pas non plus de plug-
in à ajouter pour que cette fonction soit innée dans le site, c’est pour cela que nous avons dû nous
même rajoutés cette fonctionnalité. Une bande dessinées peut avoir jusqu’à huit artistes différents,
et un artiste peut se retrouver dans plusieurs bandes dessinées, c’est pour cela que nous avons

18
 rajouté deux tables supplémentaires dans la base de données. La première avec l’id de l’artiste et son
nom, la deuxième avec son id, id du produit et son rôle.

Voici un MCD représentant la façon dont est gérée les artistes et leurs rôles par rapport aux
produits :

1,n 1,n
Produit Artiste
Est associé à
___________
Id_Produit Nom_Rôle Id_Artiste
Nom_Produit Nom_Artiste

Un artiste n’a pas un rôle fixe, d’où l’utilité de l’association porteuse.

Pour pouvoir rajouter un artiste à un produit, l’utilisateur rentre dans la même page
d’insertion / édition d’un produit et peut donc rentrer le nom de ce dernier dans la case
correspondant à son rôle.

if($bool){
$infoart = '';
if($products_art->fields['lib_role']==3){$infoart =
$products_art->fields['artist_name'];}
if(!$products_art->EOF)
$products_art->MoveNext();

}
?>

<td class="main"><?php echo TEXT_PRODUCTS_COLORIST; ?></td>

<td class="main"><?php echo zen_draw_separator('pixel_trans.gif',
'24', '15') . '&nbsp;' . zen_draw_input_field('products_artist3',
($infoart), 'onKeyUp="updateGross()"'); ?></td>
</tr>

Zone de saisie permettant de rentrer un artiste

La première partie du code sert lors de la modification d’un produit déjà existant et d’afficher
l’artiste qui a été rentré lors de l’ajout du produit.

Une fois les artistes rentrés dans la base de données, il faut que le visiteur du site puisse les
voir quand il regarde la fiche du produit, pour cela nous avons dû modifier la page d’affichage des

19
 informations du produit : tpl_product_info_display.php. Pour cette page, nous récupérons juste les
artistes grâce à l’id du produit.

$query_artist = "SELECT artist_name, lib_role FROM artist, artist_role

WHERE artist_id = id_artist AND id_product = ".$_GET['products_id'];

$result_artist = $db->Execute($query_artist);

Requête pour récupérer les artistes d’un produit.

La partie la plus difficile dans la gestion des artistes a été lors de la modification de ceux-ci.
En effet pour les modifier il faut d’abord vérifier s’ils existent, puis s’il n’existe pas il faut les créer
dans la base de données.

5) Ajout au panier de plusieurs produits avec états

D’origine, quand on effectue une recherche, on se retrouve avec une liste de produits que
l’on peut ajouter au panier. Malheureusement, dans notre cas, tous les produits ont des attributs :
les états. Le problème qui s’est présenté est que nous ne pouvons pas choisir d’attribut pour un
produit dans cette page, et si nous ajoutons un produit au panier, nous avons donc un problème car
l’objet est sans états et donc le prix est faussé mais aussi la quantité par attribut. Pour cela nous
avons donc dût modifier principalement trois fichiers :

- Product_listing.php qui est le fichier qui affiche les produits dans la page.
- Main_cart_action.php qui est le fichier de fonction qui permet l’ajout au panier.
- Shopping_cart.php qui est le panier.

Nous avons donc dût d’abord bien étudier ces fichiers pour pouvoir ensuite les modifier. Après cette
phase d’analyse, nous avons tout d’abord affiché les états disponibles avec le prix et la quantité
restante. Pour le calcul du prix, ce fut un peu plus compliqué car il fallait prendre en compte s’il y
avait une promotion ou non. Pour pouvoir ajouter le produit sélectionné avec son état, il nous a fallu
changer certaines fonctions de « zen-cart » pour pouvoir faire l’ajout au panier avec les attributs. Les
différentes requêtes SQL faites pour récupérer les informations sont faites à partir de plusieurs tables
donc il faut être très vigilent dans ce que l’on fait. Une fois les requêtes sont effectuées, on peut
afficher dans une liste de sélection.

$chaine.= '<option value="'

.$req1->fields['products_options_values_id'] .'">'
. $req1->fields['pname']. ' (' .$prix . '$)'. QUANTITY
. $qua->fields['qua'] .'</option>';

Affichage des états disponible dans une liste de sélection

Une fois les états affichés, il fallait que le visiteur puisse ajouter au panier ce qu’il avait choisi,
pour cela nous avons modifié la fonction « actionMultipleAddProduct », pour que cette dernière

20
puisse prendre en compte ces derniers. Les fonctions de « zen-cart » sont très difficiles à modifier car
il faut vraiment faire attention que dans tous les autres cas où la fonction est appelée, qu’elle revoit
le résultat voulu.

Ajout de plusieurs produits au panier avec sélection des états.

6) Gestions des promotions

La gestion des promotions ont été l’un des points de notre projet les plus longs à mettre en
place. En effet, notre client n’aimait pas la gestion des promotions telles qu’elle l’était par défaut.
Nous avons donc dût refaire la page néanmoins, nous n’avons pas changé la façon dont celle-ci était
faite, c'est-à-dire que nous n’avons pas rajouté de table à la base de données, néanmoins nous avons
changé la table salemaker pour pouvoir y loger les artistes, « era » et autres attributs propre au
produit, car au départ, la promotion ne se faisait que sur les catégories, on ne pouvait pas faire de
promotion sur un attribut du produit comme « era », sa maison d’édition ou encore les artistes.

Le principe de la promotion en lui-même est assez simple, l’utilisateur choisit l’objet sur
lequel il veut faire la promotion, il sélectionne ensuite la date de début puis la date de fin et enfin un
pourcentage. Il peut choisir aussi de faire une promotion sur toutes les catégories ou bien de choisir
précisément la catégorie, l’artiste, « l’era » ou encore la maison d’édition. Une fois qu’il a fini, il ne lui
reste plus qu’à valider ses choix.

Information :
Pour choisir des attributs plus précis lors de la précision, la recherche a été faite en AJAX, c'est-à-dire
que l’on n’est pas obligé de recharger la page à chaque recherche effectué.

21
 Pour le nouveau calcul du prix, le produit met à jour son prix automatiquement et affiche au
visiteur qu’une promotion est actuellement en cours sur lui. Malheureusement, une erreur
répertoriée sur le site de « zen-cart France», nous a obligés à nous concentrer davantage sur ce
calcul de prix pour résoudre ce problème.

Ajout d’une promotion.

4) Correction du calcul du prix entre promotion et attributs

C’est l’un des plus gros problèmes que nous avons eu à résoudre sur notre projet, pire encore, si ce
problème n’avait pas été résolut, c’est l’ensemble de notre projet qui s’écroulait. En effet comme
expliqué plus haut, nous avons un prix de départ qui est le prix de l’état qui est le meilleur. Tous les
autres attributs ont un pourcentage sur ce prix. Mais lors de l’ajout de promotion sur les produits
ayant un prix qui se calcul avec l’attribut, le prix final est mal calculé.

Pour résoudre ce problème, nous avons dû modifier des fichiers de « zen-cart », à savoir le
fichier où se trouve toutes les fonctions de calcul de prix, le fichier du panier.

La principale fonction que nous avons changée est la fonction

zen_get_products_special_price qui d’origine se présentait comme ceci :

function zen_get_products_special_price($product_id,
$specials_price_only=false)

Pour bien faire attention à ce que le résultat ne change pas lors de l’appel de la fonction par
d’autres fichiers, nous avons rajouté deux attributs supplémentaires.

22
 function zen_get_products_special_price($product_id,
$specials_price_only=false, $appel=0, $att=0)

Le premier attribut pour savoir si c’est un appel à la fonction fait par notre modification et le
deuxième pour savoir l’attribut du produit et calculer justement la promotion en fonction de cet
attribut. Nous procédons ensuite au calcul du prix en fonction du prix de l’attribut et non pas par le
prix général du produit qui correspond à l’attribut qui possède le meilleur état.

Dans le fichier du panier, nous avons dû récupérer l’attribut du produit par diverses requêtes
dans la base de données pour ensuite passer l’id de l’attribut à notre fonction.

Nous avons finalement réussit par avoir le bon prix, mais comme dit précédemment, sans la
résolution de ce problème notre projet était en péril, donc c’est l’un de nos plus gros défit que nous
avons réalisé lors de notre projet.

Prise en compte de la promotion sur les états.

5) Tests de la boutique et des fonctionnalités

1) Règlement par Paypal

23
 Pour tester si notre boutique fonctionnée bien et pour répondre aux exigences du client,
nous avons dû simuler une commande et créer un compte de test sur Paypal pour pouvoir tester la
finalité de la commande. Nous avons aussi dût modifier la configuration de la boutique pour envoyer
la commande passée sur le compte test de Paypal et pour rediriger vers le site une fois la commande
effectuée. Nous devions surtout regarder le prix final de chaque objet pour vérifier si le prix avec
promotion et attribut était le bon.

Information sur le compte de test de Paypal:

Ce compte de test est en fait une plateforme fictive qui permet de faire des payements sans
pour autant déposer de l’argent sur son compte. Ce système est très bien fait et il permet de plus de
bien vérifier le prix avec les différents plug-ins comme celui de canada post qui est fait pour calculer
le prix pour envoyer le produit.

2) Le plug-in « Canada-post »

Pour pendre en compte le prix pour envoyer le produit au client, nous avons dû installer le
plug-in « Canada Post ». Mais nous avons dû faire très attention lors de l’ajout de ce dernier, car il
modifiait certaines pages que nous avions préalablement changé comme la page d’insertion du
produit. Ce module modifie lui aussi la base de données pour rentrer des informations sur les
produits comme sa taille, sa longueur, sa hauteur et enfin son poids. Si la commande dépasse 50$,
l’envoi en coli standard est gratuit. Mais pour faire fonctionner ce plug-in correctement, nous avons
dû appeler Canada post pour ouvrir un compte cyber vente et activer les calculs, car d’origine le
compte de base ne permettait pas ces fonctionnalités.

Choix d’envoi de Canada Post.

3) Le plug-in Ebay Exporter

24
 Ce plug-in sert à exporter directement les produits sur ebay par l’intermédiaire d’un fichier
csv. On récupère ensuite ce fichier par une application qui a été développée par ebay qui est : « Ebay
Turbo Lister ». Ce programme ouvre alors le ficher csv et permet de mettre en vente sur le site de
vente aux enchères rapidement avec toutes les informations nécessaires.

Ebay exporter.

4) Les autres tâches et correction de bugs.

Tout au long du projet nous avons eu des autres tâches et des corrections à faire sur le site mais ces
dernières ne prenaient pas beaucoup de temps par rapport aux autres tâches qui sont présentées
dans ce rapport. Notre phase de test à la fin de notre projet nous a vraiment permis de remonter
quelques erreurs que nous avons pu corriger immédiatement après les avoirs remarquées. Mais une
fois les problèmes corrigés, nous devons refaire tous les tests en rapport avec le changement pour
vraiment voir si nous avons corrigé le problème ou si cela fonctionne que dans un cas particulier.

5) Le script d’importation dans la base de données

Pour remplir notre boutique nous avons dû créer un script d’importation. Nous devions
importer dans notre base de données plus de 450 000 produits. Nous avions deux tableaux excel que
nous avons regroupé en un seul. Mais mysql ne prenait pas toutes ces insertions dans la base de
données car il y a énormément de ligne à insérer si on prend en compte tout ce qui tourne autour du
produit :

- Issue
- Les artistes
- Les attributs
- Les descriptions du produit
- Les catégories
- L’era
- Les maisons d’éditions

Au final nous avons dû diviser le fichier en 91 fichiers pour que mysql puisse gérer toutes les
insertions dans la base de données.

25
 Ce script était très difficile à réaliser et à optimiser. D’une part les images pour les produits
étaient très difficiles à réaliser car il fallait aller chercher le lien de cette image et bien vérifier son
existence. Pour l’optimiser au maximum, les requêtes ont été revues pour faire le moins possible de
SELECT et donc accélérer le script. De plus nous avons aussi fait des index pour l’optimisation et la
rapidité, nous sommes ainsi arrivés à une baisse de 75% de temps en moins.

Conclusion de la partie

Pendant mon stage, j’ai fait attention au fichier que je modifiais car quand une erreur
survient, il faut être capable de revenir en arrière, c’est pour cela qu’une sauvegarde des fichiers
modifié est toujours faite avant la modification de ceux-ci. De plus j’ai toujours essayé d’optimiser
mon code et surtout les requêtes faites avec la base de données.

26
III Bilan technique et humain

J’espère avoir apporté à l’entreprise qui a eu la générosité de m’accueillir autant que j’ai moi-
même appris en travaillant pour elle. Ce stage a été pour moi une source d’enrichissement du point
de vue professionnel mais aussi en termes de savoir-être.

1) Les apports techniques

1) La base de données

Travailler sur une grande base de données est dur car il faut faire attention aux jointures que
l’on effectue. De plus, plus une requête est longue et plus on risque de faire des erreurs sur celle-ci.
Finalement, travailler sur une grande base de données avec beaucoup de lignes m’a permis de me
perfectionner dans les requêtes que j’ai pu faire. De plus lors de l’importation des produits dans la
base de données j’ai dû faire attention à ce que je faisais pour optimiser au maximum mes requêtes.
Nous avons travaillé sur une base de données mysql, mais « zen-cart » permet une installation ou
une migration sur n’importe quelle base de données telle qu’Oracle et c’est pour cela que nous
devions respecter la norme SQL au maximum sur nos requêtes.

2) HTML et CSS

Nous avions très peu utilisé le html et le CSS à l’IUT et j’ai donc dû m’apprendre la syntaxe de
ces derniers en autodidacte au début du stage. J’avais tout de même quelques notions et finalement
ces deux langages vont relativement vite à apprendre. Le plus compliqué a été de se retrouver dans
les fichiers de « zen-cart ».

3) Le Php

Je n’avais jamais travaillé avec le langage php, mais avec l’expérience du J2EE lors de ma
formation à l’IUT, ce langage m’est apparu simple à maitriser. De plus le php, contrairement au
langage J2EE peut être directement placé dans les balises HTML et permet donc de gagner du temps.
En revanche, quand on ne connait pas le php et que l’on étudie « zen-cart », on est vite perdu car il y
a une multitude de fichiers. Ce stage m’a au final permis de connaître un nouveau langage de
programmation qui s’exécute du coté serveur. Je pense que ce langage est très facile à utiliser de
part sa syntaxe mais aussi par les possibilités qu’il offre au niveau de la base de données.

4) Le JavaScript et l’Ajax

27
 Le JavaScript, contrairement au php est un langage qui s’exécute du coté du client, c’est un
langage qui est inspiré du Java. Ce dernier est utilisé en général pour obtenir une page web
dynamique car il permet de réagir avec le code HTML. Nous avons utilisé le JavaScript dans la page
d’ajout de quantité pour vérifier que l’utilisateur rentré bien des chiffres et pas d’autres caractères.

L’Ajax, quant à lui n’est pas un langage de programmation ni une technologie. Il signifie
Asynchronous JavaScript ans XML* et prend en compte le php, le JavaScript le CSS et le HTML. L’ajax
est très utile si on veut récupérer des informations venant de la base de données sans pour autant
recharger la page.

function afficheRes(callback, choix)

{
var xhr = getXMLHttpRequest();
getXMLHttpRequest()
var rech = document.getElementById("recherche").value;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
callback(xhr.responseText);
}
}
xhr.open("GET", "recherche.php?rech="+rech+"&choix="+choix, true);
xhr.send(null);
}

Cette fonction va envoyer la variable choix au fichier recherche.php et ce fichier fait une
recherche dans la base de données pour afficher le résultat de la recherche. Ce fichier va ensuite
retourner une variable à une autre fonction.

2) Gestion et communication

1) Les réunions

Nous avons eu souvent des réunions lors de notre stage et cela surtout au début pour nous
briefer sur la manière de gérer une boutique en ligne et plus précisément sur la gestion des bandes
dessinées. Lors de ces réunions, on nous a expliqué la gestion des stocks, et comment insérer une
bande dessinée dans notre boutique. Au départ nous avions des réunions avec le directeur de
shopmedia, puis nous avons eu ensuite des réunions et des démonstrations avec le vrai client. Nous
avons donc dû faire très attention à notre langage et ne pas parler trop techniquement.

2) Le travail en équipe

28
 Pour ce projet j’ai travaillé avec deux collègues stagiaires sur la boutique et nous nous
sommes réparti les tâches suivantes ce que chacun préféré faire. Si l’un de nous avait un problème
alors il demandait de l’aide aux deux autres de manière à ne pas perdre de temps lors du
développement de la boutique. Nous avons dû aussi faire attention au commentaire laissé dans le
code au cas où l’un de nous reprenne le code pour le modifier. De plus au début de chaque semaine
nous avions une réunion d’équipe pour mettre au clair ce qui avait été fait durant la semaine et pour
se distribuer les tâches de la semaine. (Voir diagramme de Gantt annexe 3)

Mais, chacun de nous était indépendant et on prenait des initiatives. Nous ne devions pas
compter que sur l’aide de nos collègues et nous débrouiller par nous même.

3) Les tests

Le développement d’un projet comme celui-ci parait inconcevable sans la réalisation de tests.
Le développement de chaque fonctionnalité était suivi d’une phase de test par un membre de
l’équipe qui n’avait pas réalisé cette dernière. Ces tests sont très importants et permettent de
corriger rapidement les erreurs faites. Lorsqu’une erreur est relevée puis corrigée on procède alors à
toute la batterie de tests pour vérifier si la correction n’a pas ajoutée une erreur quelque part
ailleurs. Nous avions, pour réaliser ces tests des fiches que nous avions préalablement faites. (Voir
annexe 4).

4) Rédaction du manuel et suivit du projet

Tout au long du projet, nous avons rédigé le manuel de suivi des modifications que nous
avons effectuées pour savoir quels fichiers nous avions modifié mais aussi pour les futurs
développeurs qui vont reprendre le projet derrière nous (Voir annexe 5). Nous avons aussi rédigé le
manuel pour faciliter la prise en main de la plateforme à notre client. (Voir annexe 6)

Conclusion de la partie
Les dix semaines de stage que j’ai effectuées ont été pour moi très enrichissantes du point de vue
technique mais aussi du point de vue humain. J’ai aimé dans cette entreprise l’ambiance au
quotidien et la bonne humeur. J’ai aussi apprécié les relations entre les employés où le niveau
hiérarchique ne paraissait pas.

29
Conclusion

Ce stage a été pour moi une découverte du milieu professionnel, de plus étant dans un pays
étranger j’ai pu découvrir en même temps que de réaliser mon stage une autre culture, c’est pour
cela que ce stage a été pour moi une expérience très riche du côté technique mais il m’a
énormément appris sur le côté relationnel. Ce qui m’a plu aussi c’est le contact avec le client qui va
être le futur utilisateur du site et donc comprendre ses besoins pour lui programmer une boutique
qui lui fera gagner du temps tout au long de son utilisation. Pour finir, ce stage a été pour moi une
façon de murir et de regarder le milieu professionnel d’un autre regard.

30
Annexes

Annexe 1 : Diagramme hiérarchique de Shopmédia.

31
Annexe 2 : MLD de « Zen-Cart »

32
Annexe 3 : Diagramme de Gantt.

33
Annexe 4 : Feuille de Test

PROCESSUS D’ACHAT
Feuille de Tests

CALCUL DU PRIX
Nom Description Validation
Promo1 Promotion sur tout le catalogue
Promo2 Promotion sur un manufacturer
Promo3 Promotion sur un artiste
Promo4 Promotion sur une era
Promo1+3 Promotion sur tout le catalogue +
Promotion sur un artiste
Promo1+2 Promotion sur tout le catalogue +
Promotion sur un manufacturer
Promo1+4 Promotion sur tout le catalogue +
Promotion sur une era

Vérification que le prix en fonction de l’état choisis est bien calculé.

Vérification que les produits affectés sont censé l’être.
Vérification du prix affiché, dans le panier, envoyé à Paypal et dans la confirmation de commande.
Vérification de la promotion choisis s’il y en a plusieurs.

34
 Annexe 5 : Exemple de fichier de suivi

Raison t Explication Page(s) Date v

Gestion de M Possibilité de faire une admin/salemaker.php 18/05/1 1
promotion promotion en choisissant 0
la caractéristique.
Calcul du M Suite de la gestion de Includes/function/function_price.php 18/05/1 1
prix promotion. Choix de la 0
promotion la plus
avantageuse.
Choix du A Lecture des SKU et choix includes\templates\OUR_TEMP\templates\ 13/05/1 1
SKU à du plus petit. tpl_checkout_success_default.php 0
envoyer
Affichage A Affichage des SKU admin/packingslip.php 05/05/1 1
des SKU correspondant à la 0
dans la commande
facture
Gestion A Ajout de la notion admin/artist.php 05/05/1 1
d’artiste d’artiste copié sur la admin\includes\modules\product\collect_info. 0
notion de manufacturer php
admin\includes\modules\update_product.php
includes/templates/OUR_TEMP/tpl_product_in
fo_display.php
Modificatio M Voir plugin 1
n de la
recherche
Gestion M Pouvoir éditer la quantité Admin/products_with_attributes_stock.php 19/05/1 1
quantité des produits 0
products_w
hith_attrib
utes_stock
Ajout du M Ajouter aux produits un admin/includes/stylesheet.css 01/05/1 1
module de attribut état admin/orders.php 0
products_w includes/classes/order.php
ith_attribut includes/functions/functions_lookups.php
es_stock includes/modules/pages/checkout_shipping/he
ader_php.php
includes/modules/pages/shopping_cart/header
_php
Epuration M Enlever les champs date Includes/templates/template_default/template 11/05/1 1
de la page de naissance et téléphone s/tpl_module_create_account.php 0
d’inscriptio
n
Epuration A Enlever les vérifications Includes/modules/create_account.php 11/05/1 1
de la page des champs de date de 0
d’inscriptio naissance et de téléphone
n

35
Annexe 6 : Exemple du manuel de l’administrateur.

36
Glossaire

Attribut : Information contenue dans une balise HTML et qui en complète la signification.

Balise : Marque utilisée dans un texte pour identifier la description ou la mise en forme d’un
élément. En HTML, une balise est composée au minimum d’un mot-clé entouré des
signes « < » et « > » .

Base de données : Ensemble structuré d’informations conçues afin de faciliter leur consultation et
modification rapide et sûre, réalisées par plusieurs utilisateurs.
Champ : Dans une base de données, colonne qui contient un certain type d’information.

Fonction : Sous-programme composé d’une suite d’instructions effectuant une tâche précise.
HTML : langage simpliste utilisé pour la création de pages web.

HTTP (HyperText Transfer Protocole) : protocole de transfert des pages HTML sur le web.

Requête : Expression d'une demande soumise à un service, par exemple une base de données,
généralement pour déclencher un traitement.

Table : Dans une base de données, tableau à deux dimensions donc chaque ligne correspond à un
enregistrement et chaque colonne à un champ.

URL (Uniform Resource Locator) : Adresse codifiée d'une page internet utilisée par les navigateurs

XML (Extensible Markup Language) : Langage standardisant la structure du contenu d'une page qui
sert de base pour la création d'un langage balisé.

37
Références

Comicage
Le site de Comicage.
http://www.comicage.com/

Php :
Le site du zéro – un site dynamique avec php... à partir de zéro
http://www.siteduzero.com/tutoriel-3-14668-un-site-dynamique-avec-php.html

XHTML / CSS
Le site du zéro – XHTML/CSS
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

Zen-Cart
Zen-cart francophone et son forum
http://www.zencart-france.com/
http://www.zencart-france.com/forum/

38