Rapport de stage : Création d un site de e-commerce, ComicAge

Transcription

1 Deboffles Jérôme DUT informatique IUT A, Villeneuve d Ascq Montreal, Quebec Shopmedia/Hibe Maître de stage : Omar Lamrani Jérôme Hennebert(Lille) Michel Pare(Montreal) Rapport de stage : Création d un site de e-commerce, ComicAge

2 2

3 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

4 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

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

6 2) Le plug-in «Canada-post» ) Le plug-in Ebay Exporter ) Les autres tâches et correction de bugs ) Le script d importation dans la base de données Conclusion de la partie III Bilan technique et humain ) Les apports techniques ) La base de données ) HTML et CSS ) Le Php ) Le JavaScript et l Ajax ) Gestion et communication ) Les réunions ) Le travail en équipe ) Les tests ) Rédaction du manuel et suivit du projet Conclusion de la partie Conclusion Annexes Glossaire Références

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

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

9 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

10 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

11 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

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

13 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

14 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

15 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

16 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

17 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

18 Explication génération SKU : Si le SKU_CHIFFRE < 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é. 4) Création des artistes Sku et calendrier. Les artistes ne sont pas pris en compte d origine dans zen-cart et il n y a pas non plus de plugin à 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

19 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 : Produit Id_Produit Nom_Produit 1,n 1,n Est associé à Nom_Rôle Artiste Id_Artiste 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'). ' '. 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

20 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

21 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

22 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

23 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

24 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

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

26 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

27 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 moimê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

28 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

29 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

30 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

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

32 Annexe 2 : MLD de «Zen-Cart» 32

33 Annexe 3 : Diagramme de Gantt. 33

34 Annexe 4 : Feuille de Test CALCUL DU PRIX PROCESSUS D ACHAT Feuille de Tests 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

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

36 Annexe 6 : Exemple du manuel de l administrateur. 36

37 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

38 Références Comicage Le site de Comicage. Php : Le site du zéro un site dynamique avec php... à partir de zéro XHTML / CSS Le site du zéro XHTML/CSS Zen-Cart Zen-cart francophone et son forum