Cration d'un site de rservation en ligne

Annes 2010-2011

INFRASTRUCTURES TECHNOLOGIQUES POUR LE COMMERCE ELECTRONIQUE

Cours CNAM NFE102

Cours offerts par Luc Cantelaube

Auteur : Laurent Thibaud

Table des matiresCration d'un site de rservation en ligne.............................................................................................1 Introduction..........................................................................................................................................3 Analyse des besoins fonctionnels.........................................................................................................4 1. Business plan...........................................................................................................................4 2. Dfinition des acteurs .............................................................................................................4 3. Cas d'utilisation.......................................................................................................................5 a. Pour les visiteurs:...........................................................................................................5 b. Pour la socit :..............................................................................................................8 Etude des besoins techniques.............................................................................................................10 1. Dfinition et choix d'un CMS...............................................................................................10 2. Composants ncessaires........................................................................................................11 a. Composants :................................................................................................................11 b. Modules :.....................................................................................................................12 c. Plugins :.......................................................................................................................12 3. Contenu.................................................................................................................................12 Ralisation technique..........................................................................................................................15 1. Template :..............................................................................................................................15 2. Modification du code source.................................................................................................15 a. Le menu d'affichage des catgories :...........................................................................15 b. Modification du panier : .............................................................................................16 c. Affichage d'un calendrier en commande......................................................................16 d. Modifications divers :..................................................................................................17 Hbergement.......................................................................................................................................19 1. Choix de l'hbergeur.............................................................................................................19 2. Scurit..................................................................................................................................20 a. Droit d'accs : ..............................................................................................................20 b. Scurisation du .htaccess : ..........................................................................................20 c. Dplacer les fichiers tlchargeables en dehors de l'espace web : ..............................21 d. Protger le fichier configuration.php : ........................................................................21 e. Crypter les donnes .....................................................................................................21 f. Divers...........................................................................................................................21 Prsence sur le web............................................................................................................................22 1. Rfrencement.......................................................................................................................22 2. Publicit................................................................................................................................23 Conclusion..........................................................................................................................................24

IntroductionDans le cadre de l'UE CNAM NFE102 Infrastructures technologiques pour le commerce lectronique , il nous est demand de raliser un projet de site de e-commerce en ligne. Un site de e-commerce, par rapport un site habituel , permet de faire un achat en ligne, c'est--dire passer commande et la rceptionner chez soit (par livraison ou tlchargement). D'essor rcent (une quinzaine d'annes), leur cadre lgal est maintenant strictement dfini. Ces sites doivent en effet suivre certaines obligations (changement d'avis sans frais, affichage des CGV, procdures de remboursement). De mme, leur contenu et apparence est gnralement uniforme : produits regroups en catgories, parcourables, avec possibilit de constituer un panier et payer en ligne, mise en avant de produits en promotion, nuage de tags... Plusieurs solutions technologiques permettent la ralisation de ces sites, entre le codage intgrale du site (en PHP ou ASP par exemple) d'un ct, et la solution cls en main de l'autre ct, payante. Entre les 2 se trouve une possibilit gratuite et pourtant mature, choisie pour ce projet. Il s'agit d'utiliser le CMS Joomla, auquel nous rajoutons un module de e-commerce. Un CMS, par dfinition un Content Management System, permet de raliser un site internet partir d'une interface graphique, sparant le contenu de l'apparence. Permettant l'ajout d'infinit de composants supplmentaires, nous lui adjoignons Virtuemart qui permet de grer une plateforme de commerce lectronique, en back- et frontstore (une partie pour rajouter des articles vendre, une autre pour les consulter). Pour le projet raliser, nous prsenterons un site de rservation de voyages en ligne. Dans un premier temps, nous dfinirons les fonctionnalits et besoins attendus. Nous prsenterons ensuite l'infrastructure technologique supportant ce projet ; enfin nous expliquererons certains requis commerciaux.

Analyse des besoins fonctionnels1. Business planAfin de dfinir la stratgie commerciale et les besoins du site de e-commerce, il convient de dfinir les grandes lignes d'un business plan. Nous situerons ainsi la concurrence et le potentiel du march. l'entreprise : le site est ralis dans un futur imaginaire pour la socit SPace Agency, agence de voyage et de rservation. Les produits proposs sont : des des des des des des sjours circuits touristiques vols spatiaux rservations d'htel locations croisires

L'entreprise se situe comme la SNCF des vols spatiaux , en pleine dmocratisation des voyages dans l'espace. concurrence : aucune actuellement clientle : compose moiti par des vacanciers, dsirant voyager pour le plaisir, recherchant soit de simples locations soit des croisires, dans des packs tout compris ; l'autre moiti est constitue de voyageurs d'affaires dsireux soit de voyager, soit de rserver une location, soit les 2 sparment. besoins financiers et humains, planification et budget prvisionnel non ncessaires pour l'instant

2. Dfinition des acteursPour dfinir les besoins, nous dfinirons tout d'abord les diffrents utilisateurs potentiels du systme, dont nous dduirons les cas d'utilisation possibles. le visiteur pourra consulter des pages informatives, consulter des articles, ajouter des articles au panier, s'enregistrer sur le site ; le client est un visiteur ayant un compte, il pourra en plus s'identifier, modifier ses informations personnelles et passer une commande ;

le service commercial pourra crer de nouvelles catgories de produits et de nouveaux produits, crer des promotions et modifier les transporteurs/frais de port. Il pourra galement accder aux commandes, bien que lenvoi des billets soit automatis ; les administrateurs pourront en plus configurer la boutique en ligne et l'apparence/fonctionnement du site internet ; le systme est compos d'un serveur d'application (PHP), d'une base de donnes (MySQL) et d'un serveur SMTP (envoi e-mails) ; des serveurs de paiement externes permettant le paiement scuris (banque ou paypal).

3. Cas d'utilisationLa modlisation UML permet de schmatiser, pour chaque utilisateur, les utilisations qu'il fera du systme. Nous pourrons ainsi, dans la partie suivante, procder aux ralisations techniques ralisant ces besoins. a. Pour les visiteurs:

UC Voir catalogue : Acteurs : visiteur But : Slectionner une catgorie et de voir les articles en faisant partie, avec une image associe. Scnario : le visiteur clique sur un lien vers une catgorie, depuis une fiche informative ou un menu ddie. Il voit alors les articles faisant partie de cette catgorie, peut les trier, voir les notations d'autres clients.

UC Voir un article : Acteurs : visiteur But : Voir le dtail d'un article : prix, produits enfants, attributs Scnario : depuis une catgorie, le visiteur clique sur un article prcis. Il voit alors le descriptif de l'article, peut choisir un produit-enfant ou slectionner un attribut, voir ses type produits UC Ajouter au panier : Acteurs : visiteur But : Ajouter un article au panier, puis de voir le panier et continuer ses ventes

Scnario : depuis une fiche article, aprs avoir choisi, selon l'article, l'ge du voyageur, la date de dbut de voyage et si besoin la date de fin, le visiteur clique sur le bouton 'ajouter au panier'. Il choisit alors dans un popup s'il veut aller au panier ou continuer ses achats UC Enregistrement : Acteurs : visiteur But : Crer un compte sur le site et de devenir un client Scnario : le visiteur clique soit sur le lien 'inscription' (partie de droite), soit essaie de valider un panier et se voit proposer de s'inscrire. Le visiteur rentre les informations personnelles requises et valide les CGV. Un email de confirmation lui est alors envoy avec rappel de l'identifiant et du password.. UC Identification : Acteurs : client But : S'enregistrer avec son code personnel pour retrouver un ancien panier et/ou voir ses commandes, informations personnelles Scnario : en essayant de valider un panier ou sur la droite de toute page, le client rentre son login et son mot de passe. Un lien permet alors de 'se dconnecter'. UC Grer son comptee : Acteurs : client But : Modifier ses informations personnelles et d'accder l'tat de commandes passes Scnario : le client clique sur le lien 'votre compte'. Il peut alors accder aux 'informations de compte', 'informations de livraison' et voir ses anciennes commandes. UC Valider une commande : Acteurs : client But : Valider un panier pour finaliser une commande. Scnario : depuis le panier, le client clique sur 'commander'. Il choisit ensuite son adresse de livraison, le transporteur, la mthode de paiement, laisse un message et valide les Conditions Gnrales de Vente. Un rcapitulatif de la commande est prsent et permet de tlcharger le billet. Un rcapitulatif est galement envoy par email. UC Tlcharger le billet : Acteurs : client But : Tlcharger le(s) billet(s) suite une validation de commande Scnario : en fin de commande, suite de la page rcapitulative, le client clique sur 'tlcharger le fichier' et peut ensuite l'imprimer.

UC Effectuer un paiement : Acteurs : client But : Choisir le mode de rglement et d'effectuer le paiement lors d'une commande Scnario : lors de la validation d'une commande, l'utilisateur choisit entre 'paiement par chque', 'paiement ds rception' et 'paiement pay pal' et procde (virtuellement) au paiement.

b. Pour la socit :

UC Grer les produits : Acteurs : commercial But : Modifier, crer et supprimer des produits en vente Scnario : le commercial voit la liste des produits. Il peut en activer/dsactiver, supprimer ou ajouter, en modifier. UC Grer les catgories : Acteurs : commercial But : Modifier, crer ou supprimer des catgories de produits

Scnario : le commercial voit la liste des catgories. Il peut en activer/dsactiver, modifier, crer ou supprimer. UC Grer les transporteurs : Acteurs : commercial But : Modifier les transporteurs livrant les billets, ainsi que le tarif associ. Scnario : le commercial voit les transporteurs et peut les modifier. Il peut galement modifier ou crer des taux d'expditions, associs aux transporteurs. UC Voir les commandes : Acteurs : commercial But : Voir les commandes passes et modifier leur tat Scnario : le commercial voit les commandes, tries. Il peut les consulter, les imprimer, modifier leur tat pour soit les valider, soit les annuler. UC Configurer la boutique en ligne : Acteurs : webmaster But : Modification de configuration de la boutique en ligne Scnario : le webmaster peut modifier les options relatives la boutiques en ligne : informations sur l'entreprise, informations de contact, devises, logo, description, CGV, modes de rglement. UC Configurer le site internet : Acteurs : webmaster But : Modifier l'apparence ou le fonctionnement du site internet Scnario : le webmaster peut modifier l'apparence du site internet, ajouter de nouvelles fonctionnalits et de nouveaux articles

Etude des besoins techniquesPour satisfaire les besoins exprims, plusieurs solutions techniques peuvent tre utilises. La liste ci-dessous n'est pas exhaustive, les principales possibilits tant : payer une entreprise extrieure qui ralisera pour notre compte le site, nous en confiant ou non l'administration (back-office). Solution prsentant le plus de potentiel, mais galement la plus couteuse ; raliser nous-mme le site de e-commerce. Les principales options sont alors : raliser le site de a z dans un langage de script (par exemple PHP, ASP...), en construisant un front-store (accessibles aux visiteurs) et un back-store (permettant l'administration du site). Avantages et inconvnients : personnalisation volont, aucun 'cout externe' mais trs forte complexit (il faut coder la partie visible, l'administration, les moyens externes de paiements) ; utiliser un outil de conception de site. Les CMS sont actuellement les plus populaires, car par nature ils diffrencient l'apparence du site du contenu, et leur utilisation ne requiert qu'un navigateur web.

1. Dfinition et choix d'un CMSUn CMS est un Content Management System ou Systme de gestion de contenu. Il se prsente pour les administrateurs sous la forme d'un site web (backstore) permettant la modification du site web qui sera vu par les visiteurs (front store). Les administrateurs ont la possibilit de crer du contenu (cration d'articles dans une base de donnes), modifier l'apparence (utilisation de templates) et ajouter des fonctionnalits (modules, composants...), ce en parallle d'autres administrateurs. Le stockage se fait sous deux formes : une base de donnes (gnralement SQL), dans laquelle sont par exemple stockes les articles, comptes utilisateurs... Ce qui permet un affichage dynamique du contenu. Des fichiers, organises selon une arborescence, stocks sur un serveur FTP. Les templates sont par exemple stocks sous cette forme. Certains CMS sont propritaires et leur utilisation payante. Par exemple

Magento, ayant servi raliser le site www.selexium.fr. Selon la licence, la modification du code peut tre impossible, et toute mise jour tre payante. L'avantage est un code robuste et des possibilits priori infinies, dfinir avec l'diteur selon le contrat. Nanmoins, le prix en est trs lev. D'autres CMS sont gratuits. Par exemple Joomla ou SPIP. Des modules payants ou gratuits peuvent tre installs en plus, permettant une infinit de possibilits. Sous licence GPL, ces CMS sont crs par d'autres utilisateurs titre gratuit, et sont soutenus par une forte communaut de dveloppeur. Les avantages, par rapport un CMS payant, et selon la popularit de celui utilis, sont une forte ractivit lors de bugs ou de faille de scurits trouvs, rendant le code robuste. De nombreuses extensions sont proposes par d'autres utilisateurs, gnralement gratuitement, permettant un ajout facile de nouvelles fonctionnalits. En cas de problme, de nombreux forums peuvent aider. Enfin, le code source tant modifiable, il est possible de modifier soit mme le code du CMS ou de dvelopper les fonctionnalits dont nous avons besoin. L'avantage vident, par rapport aux CMS payant, concerne le prix, permettant toute entreprise d'tre prsente sur internet. Pour raliser notre projet, plusieurs CMS sont utilisables. Par exemple OSCommerce. Nous utiliserons le CMS Joomla, de par sa popularit et le support de la communaut de dveloppeurs. Nous y adjoindrons le composants Virtuemart, qui permet l'administration d'une boutique en ligne et ajoute au site la possibilit de parcourir des articles et passer des commandes. Joomla + Virtuemart constitue la solution la plus populaire de cration de boutique en ligne. De nombreuses extensions peuvent tre ajoutes aux 2, rendant les personnalisations gratuites et infinies.

2. Composants ncessairesSuite l'installation de Joomla, pour raliser les besoins exprims en premire partie, nous utiliserons les add-ons suivants : a. Composants : Les composants sont des mini-applications qui grent le corps de la page . Les composants ajoutent des fonctionnalits. Nous utiliserons : Akeeba : sauvegarde et restauration du site ; Security Images : utilisation d'un code de scurit lors de la cration d'un compte, pour empcher des 'bots' de s'inscrire sur le site.

b. Modules : Les modules sont des bouts de code spcialiss dont le rsultat apparat directement dans le corps de la page. Nous utiliserons : Vituemart : administration d'une boutique en ligne Virtuemart_Cart: gestion d'un panier d'achats (remplir, voir, valider) Productscrollers : permet de crer des liens directs vers des articles en vente Product_Categories : permet de crer des liens vers le catgories d'articles existantes Virtuemart_Tag_Cloud : affichage d'un 'nuage de tags' Virtuemart_search : rechercher dans les produits/catgories c. Plugins : Aucun plugin particulier n'est ncesaire en plus de ceux fournis avec Joomla.

3. ContenuLe contenu est de 2 types : les articles informatifs, grs par Joomla uniquement, et les produits, grs par Virtuemart. Le choix du contenu, et sa mise en place, est fait pralablement au choix de l'apparence du site. Nous devons alors choisir ce que nous voulons dire et montrer , et comment cela sera gr par le couple Joomla-Virtuemart. Deux cas peuvent se prsenter : soit le visiteur chercher des informations sur un objet stellaire, nous les lui offrons et proposons ensuite des voyages associs ; soit un client souhaite faire une rservation et peut tre intress par plus d'informations sur un sujet prcis, il ne faut alors pas le laisser aller sur un autre site (o il pourrait avoir d'autres offres). Un article informatif proposera un lien des voyages associs au sujet de l'article ; de mme un produit proposera un lien vers un article informatif associ. Les articles seront alors organiss comme suit, dans Joomla : section socit catgorie socit accueil

notre garantie mentions lgales notre technologie section Virtuemart catgories destinations les supernavoa les quasars les pulsars les trous noirs Saturne Jupiter Venus le soleil Mercure la lune Le choix de catgoriser les articles peut sembler inutile. Il faut nanmoins envisager les nouveaux contenus futurs, qui pourront alors prendre place sans modification importante. Les articles seront ensuite stocks comme tel dans Virtuemart : catgorie sjours sous-catgorie systme solaire sjour autour du soleil sjour sur Jupiter sjour sur la lune produit enfant : face claire produit enfant : face cache sjour sur mercure sjour sur Pluton sous-catgorie espace lointain Amas globulaire centre galactique produit enfant : 6 mois produit enfant : 50 ans plus tard catgorie circuits les gants de l'univers tour du systme solaire catgorie vols spatiaux rservation de vol produit enfant : station solaire produit enfant : vol vers la lune produit enfant : vol vers le bulbe galactique produit enfant : vol vers Mars produit enfant : vol vers Mercure produit enfant : vol vers Vnus catgorie htels htel Europa htel Ganymde

htel Lune htel Mercure htel Vnus catgorie locations centre de vacances Phobos htel Europa htel Ganymde htel Lune htel Mercure htel Vnus location dans la station spatiale internationale catgorie croisires amas globulaire les gants de l'univers tour de la voie lacte tour du systme solaire Selon les produits, nous utiliserons galement les attributs suivants : Age : majeur / - 16 ans / - 5 ans ; Date et Date2 (pour la date de dbut de sjour et, si besoin, date de fin) Nous utiliserons 2 types produits , selon les articles : fiche dtaille : indique pour le produit la mto prvue et envisageable, les beauts et anomalies qui seront vues, si le sjour est pour du repos ou des aventures, si le voyage fera voyager dans le temps, et le jour de dbut du voyage ; commodits : si le client pourra trouver une sale de runion, si l'quipement pour bbs est prvu, si des adaptations pour handicapes existent, et les sorties possibles. Aprs avoir cr le contenu, nous pouvons maintenant crer le site.

Ralisation technique

1. Template :Pour correspondre l'image voulu par la socit, nous recherchons un template voquant l'espace, dans les tons du bleus foncs. Nanmoins, par soucis de lisibilit, la partie centrale du site doit tre claire. Aprs plusieurs tests, notre choix final se porte sur siteground-j15-85, dont la barre de titre et de pied de page est un dgrad de noir, avec certains menus bleus. Nous modifions le template de la faon suivante : pour afficher les diffrentes catgories de produits existantes en haut de page, nous positions le module associ en position 'user3'. Pour dplacer cette position entre l'image de titre et le contenu, nous modifions le fichier/templates/siteground-j15-85/css/template.css

Nous ajoutons au bloc '#pillmenu' le contenu suivant :float:right; top:220px; position: relative; font: white;

Puis pour modifier l'affichage de la position dans larborescence du site, au bloc 'flashnews_1' : height: 20px;

et nous modifions l'imagetemplates\siteground-j15-85\images\flashnews.png

pour rduire la hauteur 20px; Nous modifions galement les images de titre, de panier, d'ajout au panier

2. Modification du code sourcea. Le menu d'affichage des catgories : Par dfaut, lors du passage de la souris sur le menu des catgories (en position

User3), un sous-menu montrant les sous-catgories s'affiche. Nous dsirons dsactiver cet affichage pour forcer le visiteur aller sur la page d'accueil de la catgories, et voir chaque produit en faisant partie. Pour ce faire, nous modifions le fichier :includes\js\jscook!;js

Dans la fonction cmItemMouseOverOpenSub, nous cachons la ligne 526 ://cmShowSubMenu (obj, prefix, subMenu, orient);

b. Modification du panier : Par dfaut, le module de panier affiche en permanence le contenu du panier. Pour afficher uniquement un rsum du panier, nous modifions :/components/com_virtuemart/themes/[default]/templates/common/minicart.tpl.php

Nous commentons la boucle entre la ligne 14 et la ligne 35, commenant par :// Loop through each row and build the table foreach( $minicart as $cart ) etc ...

c. Affichage d'un calendrier en commande Permet de choisir une date de dbut (et de fin selon article) pour la rservation . Pour ce faire, nous nous inspirons de la mthode dcrite cette adresse : http://forum.joomla.fr/showthread.php?113907-Ajouter-un-calendrier-dansboutique-location-Virtuemart Nanmoins, celle-ci ne marchant pas en l'tat (probablement cause d'une volution dans les version), nous l'adaptons en procdant ainsi : nous modifions le fichier :\components\com_virtuemart\themes\default\templates\product_details\includes\addtocart_advanced_ attributes.tpl.php

Ce fichier est constitu d'une boucle, parcourant tous les attributs possibles d'un produit. Nous ajoutons en dbut de boucle :if ($attribute['title'] == 'Date') { ?>