Création D'un Site de Réservation en Ligne [PDF]

Zitiervorschau

Création d'un site de réservation en ligne

Années 2010-2011

INFRASTRUCTURES TECHNOLOGIQUES POUR LE COMMERCE ELECTRONIQUE

Cours CNAM NFE102

Cours offerts par Luc Cantelaube

Auteur : Laurent Thiébaud

Table des matières Création d'un site de réservation en ligne.............................................................................................1 Introduction..........................................................................................................................................3 Analyse des besoins fonctionnels.........................................................................................................4 1. Business plan...........................................................................................................................4 2. Définition des acteurs .............................................................................................................4 3. Cas d'utilisation.......................................................................................................................5 a. Pour les visiteurs:...........................................................................................................5 b. Pour la société :..............................................................................................................8 Etude des besoins techniques.............................................................................................................10 1. Définition et choix d'un CMS...............................................................................................10 2. Composants nécessaires........................................................................................................11 a. Composants :................................................................................................................11 b. Modules :.....................................................................................................................12 c. Plugins :.......................................................................................................................12 3. Contenu.................................................................................................................................12 Réalisation technique..........................................................................................................................15 1. Template :..............................................................................................................................15 2. Modification du code source.................................................................................................15 a. Le menu d'affichage des catégories :...........................................................................15 b. Modification du panier : .............................................................................................16 c. Affichage d'un calendrier en commande......................................................................16 d. Modifications divers :..................................................................................................17 Hébergement.......................................................................................................................................19 1. Choix de l'hébergeur.............................................................................................................19 2. Sécurité..................................................................................................................................20 a. Droit d'accès : ..............................................................................................................20 b. Sécurisation du .htaccess : ..........................................................................................20 c. Déplacer les fichiers téléchargeables en dehors de l'espace web : ..............................21 d. Protéger le fichier configuration.php : ........................................................................21 e. Crypter les données .....................................................................................................21 f. Divers...........................................................................................................................21 Présence sur le web............................................................................................................................22 1. Référencement.......................................................................................................................22 2. Publicité................................................................................................................................23 Conclusion..........................................................................................................................................24

Introduction Dans le cadre de l'UE CNAM « NFE102 Infrastructures technologiques pour le commerce électronique », il nous est demandé de réaliser 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 réceptionner chez soit (par livraison ou téléchargement). D'essor récent (une quinzaine d'années), leur cadre légal est maintenant strictement défini. Ces sites doivent en effet suivre certaines obligations (changement d'avis sans frais, affichage des CGV, procédures de remboursement). De même, leur contenu et apparence est généralement uniforme : produits regroupés en catégories, 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 réalisation de ces sites, entre le codage intégrale du site (en PHP ou ASP par exemple) d'un côté, et la solution « clés en main » de l'autre côté, 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 définition un Content Management System, permet de réaliser un site internet à partir d'une interface graphique, séparant le contenu de l'apparence. Permettant l'ajout d'infinité de composants supplémentaires, nous lui adjoignons Virtuemart qui permet de gérer une plateforme de commerce électronique, en back- et frontstore (une partie pour rajouter des articles à vendre, une autre pour les consulter). Pour le projet à réaliser, nous présenterons un site de réservation de voyages en ligne. Dans un premier temps, nous définirons les fonctionnalités et besoins attendus. Nous présenterons ensuite l'infrastructure technologique supportant ce projet ; enfin nous expliquererons certains requis commerciaux.

Analyse des besoins fonctionnels 1. Business plan Afin de définir la stratégie commerciale et les besoins du site de e-commerce, il convient de définir les grandes lignes d'un business plan. Nous situerons ainsi la concurrence et le potentiel du marché. − l'entreprise : le site est réalisé dans un futur imaginaire pour la société SPace Agency, agence de voyage et de réservation. Les produits proposés sont : − − − − − −

des des des des des des

séjours circuits touristiques vols spatiaux réservations d'hôtel locations croisières

L'entreprise se situe comme la « SNCF des vols spatiaux », en pleine démocratisation des voyages dans l'espace. − concurrence : aucune actuellement − clientèle : composée à moitié par des vacanciers, désirant voyager pour le plaisir, recherchant soit de simples locations soit des croisières, dans des « packs » tout compris ; l'autre moitié est constituée de voyageurs d'affaires désireux soit de voyager, soit de réserver une location, soit les 2 séparément. − besoins financiers et humains, planification et budget prévisionnel non nécessaires pour l'instant

2. Définition des acteurs Pour définir les besoins, nous définirons tout d'abord les différents utilisateurs potentiels du système, dont nous déduirons 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 créer de nouvelles catégories de produits et de nouveaux produits, créer des promotions et modifier les transporteurs/frais de port. Il pourra également accéder aux commandes, bien que l’envoi des billets soit automatisé ; − les administrateurs pourront en plus configurer la boutique en ligne et l'apparence/fonctionnement du site internet ; − le système est composé d'un serveur d'application (PHP), d'une base de données (MySQL) et d'un serveur SMTP (envoi e-mails) ; − des serveurs de paiement externes permettant le paiement sécurisé (banque ou paypal).

3. Cas d'utilisation La modélisation UML permet de schématiser, pour chaque utilisateur, les utilisations qu'il fera du système. Nous pourrons ainsi, dans la partie suivante, procéder aux réalisations techniques réalisant ces besoins. a. Pour les visiteurs:

UC « Voir catalogue » : Acteurs : visiteur But : Sélectionner une catégorie et de voir les articles en faisant partie, avec une image associée. Scénario : le visiteur clique sur un lien vers une catégorie, depuis une fiche informative ou un menu dédiée. Il voit alors les articles faisant partie de cette catégorie, peut les trier, voir les notations d'autres clients.

UC « Voir un article» : Acteurs : visiteur But : Voir le détail d'un article : prix, produits enfants, attributs Scénario : depuis une catégorie, le visiteur clique sur un article précis. Il voit alors le descriptif de l'article, peut choisir un produit-enfant ou sélectionner 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

Scénario : depuis une fiche article, après avoir choisi, selon l'article, l'âge du voyageur, la date de début 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 : Créer un compte sur le site et de devenir un client Scénario : 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 Scénario : 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 déconnecter'. UC « Gérer son comptee » : Acteurs : client But : Modifier ses informations personnelles et d'accéder à l'état de commandes passées Scénario : le client clique sur le lien 'votre compte'. Il peut alors accéder 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. Scénario : depuis le panier, le client clique sur 'commander'. Il choisit ensuite son adresse de livraison, le transporteur, la méthode de paiement, laisse un message et valide les Conditions Générales de Vente. Un récapitulatif de la commande est présenté et permet de télécharger le billet. Un récapitulatif est également envoyé par email. UC « Télécharger le billet » : Acteurs : client But : Télécharger le(s) billet(s) suite à une validation de commande Scénario : en fin de commande, suite de la page récapitulative, le client clique sur 'télécharger le fichier' et peut ensuite l'imprimer.

UC « Effectuer un paiement » : Acteurs : client But : Choisir le mode de règlement et d'effectuer le paiement lors d'une commande Scénario : lors de la validation d'une commande, l'utilisateur choisit entre 'paiement par chèque', 'paiement dès réception' et 'paiement pay pal' et procède (virtuellement) au paiement.

b. Pour la société :

UC « Gérer les produits » : Acteurs : commercial But : Modifier, créer et supprimer des produits en vente Scénario : le commercial voit la liste des produits. Il peut en activer/désactiver, supprimer ou ajouter, en modifier. UC « Gérer les catégories » : Acteurs : commercial But : Modifier, créer ou supprimer des catégories de produits

Scénario : le commercial voit la liste des catégories. Il peut en activer/désactiver, modifier, créer ou supprimer. UC « Gérer les transporteurs » : Acteurs : commercial But : Modifier les transporteurs livrant les billets, ainsi que le tarif associé. Scénario : le commercial voit les transporteurs et peut les modifier. Il peut également modifier ou créer des taux d'expéditions, associés aux transporteurs. UC « Voir les commandes » : Acteurs : commercial But : Voir les commandes passées et modifier leur état Scénario : le commercial voit les commandes, triées. 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 Scénario : le webmaster peut modifier les options relatives à la boutiques en ligne : informations sur l'entreprise, informations de contact, devises, logo, description, CGV, modes de règlement. UC « Configurer le site internet » : Acteurs : webmaster But : Modifier l'apparence ou le fonctionnement du site internet Scénario : le webmaster peut modifier l'apparence du site internet, ajouter de nouvelles fonctionnalités et de nouveaux articles

Etude des besoins techniques Pour satisfaire les besoins exprimés, plusieurs solutions techniques peuvent être utilisées. La liste ci-dessous n'est pas exhaustive, les principales possibilités étant : − payer une entreprise extérieure qui réalisera pour notre compte le site, nous en confiant ou non l'administration (back-office). Solution présentant le plus de potentiel, mais également la plus couteuse ; − réaliser nous-même le site de e-commerce. Les principales options sont alors : − réaliser 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 inconvénients : personnalisation à volonté, aucun 'cout externe' mais très 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 différencient l'apparence du site du contenu, et leur utilisation ne requiert qu'un navigateur web.

1. Définition et choix d'un CMS Un CMS est un Content Management System ou Système de gestion de contenu. Il se présente 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 créer du contenu (création d'articles dans une base de données), modifier l'apparence (utilisation de templates) et ajouter des fonctionnalités (modules, composants...), ce en parallèle à d'autres administrateurs. Le stockage se fait sous deux formes : − une base de données (généralement SQL), dans laquelle sont par exemple stockées les articles, comptes utilisateurs... Ce qui permet un affichage dynamique du contenu. − Des fichiers, organisées selon une arborescence, stockés sur un serveur FTP. Les templates sont par exemple stockés sous cette forme. Certains CMS sont propriétaires et leur utilisation payante. Par exemple

Magento, ayant servi à réaliser 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 possibilités à priori infinies, à définir avec l'éditeur selon le contrat. Néanmoins, le prix en est très élevé. D'autres CMS sont gratuits. Par exemple Joomla ou SPIP. Des modules payants ou gratuits peuvent être installés en plus, permettant une infinité de possibilités. Sous licence GPL, ces CMS sont créés par d'autres utilisateurs à titre gratuit, et sont soutenus par une forte communauté de développeur. Les avantages, par rapport à un CMS payant, et selon la popularité de celui utilisé, sont une forte réactivité lors de bugs ou de faille de sécurités trouvés, rendant le code robuste. De nombreuses extensions sont proposées par d'autres utilisateurs, généralement gratuitement, permettant un ajout facile de nouvelles fonctionnalités. En cas de problème, de nombreux forums peuvent aider. Enfin, le code source étant modifiable, il est possible de modifier soit même le code du CMS ou de développer les fonctionnalités dont nous avons besoin. L'avantage évident, par rapport aux CMS payant, concerne le prix, permettant à toute entreprise d'être présente sur internet. Pour réaliser 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 développeurs. 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 création de boutique en ligne. De nombreuses extensions peuvent être ajoutées aux 2, rendant les personnalisations gratuites et infinies.

2. Composants nécessaires Suite à l'installation de Joomla, pour réaliser les besoins exprimés en première partie, nous utiliserons les add-ons suivants : a. Composants : Les composants sont des « mini-applications qui gèrent le corps de la page ». Les composants ajoutent des fonctionnalités. Nous utiliserons : Akeeba : sauvegarde et restauration du site ; Security Images : utilisation d'un code de sécurité lors de la création d'un compte, pour empêcher des 'bots' de s'inscrire sur le site.

b. Modules : Les modules sont des « bouts de code spécialisés » dont le résultat apparaît 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 créer des liens directs vers des articles en vente → Product_Categories : permet de créer des liens vers le catégories d'articles existantes → Virtuemart_Tag_Cloud : affichage d'un 'nuage de tags' → Virtuemart_search : rechercher dans les produits/catégories c. Plugins : Aucun plugin particulier n'est nécesaire en plus de ceux fournis avec Joomla.

3. Contenu Le contenu est de 2 types : les articles informatifs, gérés par Joomla uniquement, et les produits, gérés par Virtuemart. Le choix du contenu, et sa mise en place, est fait préalablement au choix de l'apparence du site. Nous devons alors choisir ce que nous voulons « dire et montrer », et comment cela sera géré par le couple Joomla-Virtuemart. Deux cas peuvent se présenter : soit le visiteur chercher des informations sur un objet stellaire, nous les lui offrons et proposons ensuite des voyages associés ; soit un client souhaite faire une réservation et peut être intéressé par plus d'informations sur un sujet précis, 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 associés au sujet de l'article ; de même un produit proposera un lien vers un article informatif associé. Les articles seront alors organisés comme suit, dans Joomla : − section société − catégorie société − accueil

− notre garantie − mentions légales − notre technologie − section Virtuemart − catégories destinations − les supernavoa − les quasars − les pulsars − les trous noirs − Saturne − Jupiter − Venus − le soleil − Mercure − la lune Le choix de catégoriser les articles peut sembler inutile. Il faut néanmoins envisager les nouveaux contenus futurs, qui pourront alors prendre place sans modification importante. Les articles seront ensuite stockés comme tel dans Virtuemart : − catégorie séjours − sous-catégorie système solaire − séjour autour du soleil − séjour sur Jupiter − séjour sur la lune − produit enfant : face éclairée − produit enfant : face cachée − séjour sur mercure − séjour sur Pluton − sous-catégorie espace lointain − Amas globulaire − centre galactique − produit enfant : 6 mois − produit enfant : 50 ans plus tard − catégorie circuits − les géants de l'univers − tour du système solaire − catégorie vols spatiaux − réservation 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 Vénus − catégorie hôtels − hôtel Europa − hôtel Ganymède

− hôtel Lune − hôtel Mercure − hôtel Vénus − catégorie locations − centre de vacances Phobos − hôtel Europa − hôtel Ganymède − hôtel Lune − hôtel Mercure − hôtel Vénus − location dans la station spatiale internationale − catégorie croisières − amas globulaire − les géants de l'univers − tour de la voie lactée − tour du système solaire Selon les produits, nous utiliserons également les attributs suivants : − Age : majeur / - 16 ans / - 5 ans ; − Date et Date2 (pour la date de début de séjour et, si besoin, date de fin) Nous utiliserons 2 « types produits », selon les articles : − fiche détaillée : indique pour le produit la météo prévue et envisageable, les beautés et anomalies qui seront vues, si le séjour est pour du repos ou des aventures, si le voyage fera voyager dans le temps, et le jour de début du voyage ; − commodités : si le client pourra trouver une sale de réunion, si l'équipement pour bébés est prévu, si des adaptations pour handicapées existent, et les sorties possibles. Après avoir créé le contenu, nous pouvons maintenant créer le site.

Réalisation technique

1. Template : Pour correspondre à l'image voulu par la société, nous recherchons un template évoquant l'espace, dans les tons du bleus foncés. Néanmoins, par soucis de lisibilité, la partie centrale du site doit être claire. Après plusieurs tests, notre choix final se porte sur siteground-j15-85, dont la barre de titre et de pied de page est un dégradé de noir, avec certains menus bleus. Nous modifions le template de la façon suivante : − pour afficher les différentes catégories de produits existantes en haut de page, nous positions le module associé en position 'user3'. Pour déplacer 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 l’arborescence du site, au bloc 'flashnews_1' : − height: 20px;

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

pour réduire la hauteur à 20px; Nous modifions également les images de titre, de panier, d'ajout au panier

2. Modification du code source a. Le menu d'affichage des catégories : Par défaut, lors du passage de la souris sur le menu des catégories (en position

User3), un sous-menu montrant les sous-catégories s'affiche. Nous désirons désactiver cet affichage pour forcer le visiteur à aller sur la page d'accueil de la catégories, 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 défaut, le module de panier affiche en permanence le contenu du panier. Pour afficher uniquement un résumé 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, commençant 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 début (et de fin selon article) pour la réservation . Pour ce faire, nous nous inspirons de la méthode décrite à cette adresse : http://forum.joomla.fr/showthread.php?113907-Ajouter-un-calendrier-dansboutique-location-Virtuemart Néanmoins, celle-ci ne marchant pas en l'état (probablement à cause d'une évolution dans les version), nous l'adaptons en procédant 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 début de boucle : if ($attribute['title'] == 'Date') { ?>