Creer Un Site e Commerce

Le Campus
Crer un site
e-commerce
avec Dreamweaver CS4
et PHP/MySQL
Franois et Sandrine Houste, Delphine Bouton
avec la contribution de Raphalle Roux
Codes sources
sur www.pearson.fr
CCCCCCC
su uurrrr wwww
Crer un site
e-commerce avec
Dreamweaver CS4
et PHP/MySQL
4
e
dition
ecom Livre Page I Jeudi, 12. novembre 2009 1:00 13
Pearson Education France a apport le plus grand soin la ralisation de ce livre an de vous fournir une
information complte et able. Cependant, Pearson Education France nassume de responsabilits, ni pour
son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraient
rsulter de cette utilisation.
Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions tho-
riques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle.
Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages
de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cits dans ce livre sont des marques dposes par leurs
propritaires respectifs.
Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du code
de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas
chant, sans le respect des modalits prvues larticle L. 122-10 dudit code.
No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including
photocopying, recording or by any information storage retrieval system, without permission from Pearson Education,
Inc.
Publi par Pearson Education France
47 bis, rue des Vinaigriers
75010 PARIS
Tl. : 01 72 74 90 00
www.pearson.fr
Mise en pages : TyPAO
Collaboration ditoriale : Herv Guyader
ISBN : 978-2-7440-4101-3
Copyright 2009 Pearson Education France
Tous droits rservs
ecom Livre Page II Jeudi, 12. novembre 2009 1:00 13
Crer un site
e-commerce avec
Dreamweaver CS4
et PHP/MySQL
Franois Houste, Sandrine Houste et Delphine Bouton
avec la contribution de Raphalle Roux
ecom Livre Page III Jeudi, 12. novembre 2009 1:00 13
ecom Livre Page IV Jeudi, 12. novembre 2009 1:00 13
Table des matires
1 Introduction au monde du e-commerce . . . . . . . . . . . . . . . . . . . . . . . 1
Comment utiliser ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Une boutique en ligne, mais pas nimporte comment . . . . . . . . . . . . . 3
Bien penser la stratgie de sa boutique . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Le statut juridique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Dclaration la CNIL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Comment procder ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Les diffrentes tapes de la cration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Le design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Partie I Mise en place technique dune boutique
2 Bien choisir son hbergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Les offres ddies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Lhbergement gnraliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3 Mise en place dun serveur de dveloppement . . . . . . . . . . . . . . . 21
Comment fonctionne un site dynamique ? . . . . . . . . . . . . . . . . . . . . . . . . . 21
Les avantages dun site dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Anatomie dun site dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
La technologie PHP en dtail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Prsentation gnrale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
PHP dans vos pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Les bases de donnes MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Dernire brique, un serveur Apache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
ecom Livre Page V Jeudi, 12. novembre 2009 1:00 13
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL VI
Installation de WampServer 2.0 sur un systme Windows . . . . . . . . . . . 31
Prsentation et tlchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Installation de WampServer 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Mise en marche des serveurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Conguration de lenvironnement de dveloppement . . . . . . . . . . . . . . . 36
Nommage de la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Dnition des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Cration du rpertoire de dveloppement . . . . . . . . . . . . . . . . . . . . . . . . 41
Cration du prol de site dans Dreamweaver CS4 . . . . . . . . . . . . . . . . . . 41
Prsentation rapide de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Lassistant Prol de sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Localisation du serveur de dveloppement . . . . . . . . . . . . . . . . . . . . . . . 43
Connexion au serveur distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4 Spcifications et cration de la base de donnes . . . . . . . . . . . . . 51
Spcication des pages dun site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Arborescence du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Spcication des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Ralisation des maquettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Dnition de la structure de la base de donnes . . . . . . . . . . . . . . . . . . . . 68
Communication entre le site et la base de donnes . . . . . . . . . . . . . . . . 69
Conseils gnriques la conception de la base de donnes. . . . . . . . . . 69
Base de donnes de la boutique en ligne . . . . . . . . . . . . . . . . . . . . . . . . . 70
Cration des tables dans phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Remplissage des tables MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Connexion la base de donnes dans Dreamweaver CS4 . . . . . . . . . 86
Cration dune page blanche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
ecom Livre Page VI Jeudi, 12. novembre 2009 1:00 13
VII TABLE DES MATIRES
Le panneau Bases de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Cration dune connexion pour un site PHP . . . . . . . . . . . . . . . . . . . . . . 88
Fichier de connexion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
5 Cration dun catalogue en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Fonctionnement thorique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Dnition de jeux denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Le panneau Liaisons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Cration dun jeu denregistrements simple . . . . . . . . . . . . . . . . . . . . . . 96
Insertion de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Donnes dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Dnition dynamique dune image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Aperu des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Aperu dans le navigateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Aperu dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Finalisation de la page de description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Cration avance de jeux denregistrements . . . . . . . . . . . . . . . . . . . . . . 113
Afchage du nom de lauteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Afchage des catgories dannuaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Mise en place de la page Auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Cration des jeux denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Rgions rptes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Navigation page page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Numrotation des enregistrements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Dtail de lannuaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Note sur les comportements de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Le panneau Comportements de serveur. . . . . . . . . . . . . . . . . . . . . . . . . . 136
Modication dun comportement de serveur . . . . . . . . . . . . . . . . . . . . . 136
ecom Livre Page VII Jeudi, 12. novembre 2009 1:00 13
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL VIII
6 Installation dun moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . 139
Lutilisation des actifs sur un site dynamique . . . . . . . . . . . . . . . . . . . . . . . 140
Cration du formulaire de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Cration physique du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Nommage des lments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Action ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Les actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Le panneau Actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Cration dun lment de bibliothque . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Insertion dun lment de bibliothque dans une page . . . . . . . . . . . . . 148
Mise jour des lments de bibliothque . . . . . . . . . . . . . . . . . . . . . . . . 150
Page de rsultat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Jeux denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Afchage des rsultats sur la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
7 Accueil des clients et ouverture des comptes . . . . . . . . . . . . . . . . . 159
Les clients dans la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Sessions PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Cration dun client laide des assistants . . . . . . . . . . . . . . . . . . . . . . . . . 162
Assistant de formulaire dinsertion denregistrement . . . . . . . . . . . . . . 162
Finalisation du formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Vrication des doublons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Connexion, dconnexion des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Connecter lutilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Dconnecter lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
La section Client du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Cration dune page accs restreint . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Mise jour des informations personnelles du client . . . . . . . . . . . . . . . 181
ecom Livre Page VIII Jeudi, 12. novembre 2009 1:00 13
IX TABLE DES MATIRES
Reconnatre un utilisateur dans une zone non restreinte . . . . . . . . . . . . 185
Intgration du formulaire de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
8 Grer les commandes des clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Un peu de thorie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Modication du descriptif des produits . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Gestion du panier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Validation du panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Modication de la page de description des articles . . . . . . . . . . . . . . . . . . 192
Mise en place dun lien Acheter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Lien vers le panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Mise en place de lafchage conditionnel . . . . . . . . . . . . . . . . . . . . . . . . 197
Cration du panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Afchage dune ligne de panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Modication de la quantit darticles . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Suppression dun article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Afchage de la totalit du panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Validation de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Bouton de validation sur panier.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Ajout de la commande la base de donnes . . . . . . . . . . . . . . . . . . . . . . 212
Page de validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Rsum des commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
9 Paiement et facturation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
PayPal, une solution de paiement en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Inscription PayPal France . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Conguration de linterface de paiement . . . . . . . . . . . . . . . . . . . . . . . . 227
ecom Livre Page IX Jeudi, 12. novembre 2009 1:00 13
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL X
Intgration du lien de paiement au panier . . . . . . . . . . . . . . . . . . . . . . . . . 229
Retour votre boutique aprs paiement . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Vrication des paiements en attente dans PayPal . . . . . . . . . . . . . . . . . . 233
Gestion des factures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Les autres solutions de paiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
10 Mise en place dune plate-forme dadministration . . . . . . . . . . . . 235
Quelle architecture et quelles fonctionnalits ? . . . . . . . . . . . . . . . . . . . . . 235
Les droits daccs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Mettre jour les ches produits existantes . . . . . . . . . . . . . . . . . . . . . . . . . 237
Lister les produits du catalogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Lassistant pages Principale-Dtails. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Cration de la page de dtail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Modier un produit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Supprimer un produit du catalogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Insrer de nouveaux produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Protection de linterface dadministration . . . . . . . . . . . . . . . . . . . . . . . . . 246
Partie II La relation client, point central
du site e-commerce
11 Un site scuris inspirant confiance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Lobligation dinformation lgard de linternaute . . . . . . . . . . . . . . . . 251
Protger son site webmarchand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Utiliser les plates-formes de paiement bancaires . . . . . . . . . . . . . . . . . . . . 258
Loffre CM-CIC P@iement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
ecom Livre Page X Jeudi, 12. novembre 2009 1:00 13
XI TABLE DES MATIRES
Loffre e.transactions du Crdit Agricole . . . . . . . . . . . . . . . . . . . . . . . . 260
Sogenactif de la Socit Gnrale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Autres banques, autres solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Souscrire une assurance : Fia-Net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Le logo Fia-Net : un gage de scurit et de transparence . . . . . . . . . . . 265
La prsence dune che descriptive de votre site . . . . . . . . . . . . . . . . . . 266
Linterface Fia-Net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Le cot de Fia-Net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
12 Support et aide pour guider le client lors de son achat . . . . . . . 269
Limportance dune bonne ergonomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Des ches produits claires et faciles daccs . . . . . . . . . . . . . . . . . . . . . 273
Les cls pour viter labandon de panier . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Les rubriques daide et de contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Foire aux questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Intgration de laide sur le site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
La rubrique contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
13 Statistiques de frquentation et de vente . . . . . . . . . . . . . . . . . . . . . 279
Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
La mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
La cration dun prol sur Google Analytics . . . . . . . . . . . . . . . . . . . . . 281
La gestion des informations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Xiti.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
La mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
La gestion des informations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
ecom Livre Page XI Jeudi, 12. novembre 2009 1:00 13
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL XII
14 Vers une boutique 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Le Social Marketing, pourquoi faire ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Mettre les produits en avant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Des propositions contextuelles bases sur les clients . . . . . . . . . . . . . . . . . 299
Principe gnral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Cration dune requte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Interagir avec les clients ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Partie III Premiers pas en marketing,
faire connatre sa boutique en ligne
15 Rfrencement naturel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
De limportance des mots cls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
La page daccueil. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Mots cls des pages de catalogue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Optimisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Les balises de rfrencement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Intgration des balises den-tte, avec Dreamweaver. . . . . . . . . . . . . . . 312
Optimisation du texte des pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Tisser des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Quest-ce que le Net Linking ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Les tapes dune stratgie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Le recours au chier Sitemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Le principe du protocole Sitemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
La mise en place de Sitemaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Linscription au service Google Outils pour Webmaster . . . . . . . . . . 320
Dclarez vos chiers au protocole Sitemaps. . . . . . . . . . . . . . . . . . . . . . 321
ecom Livre Page XII Jeudi, 12. novembre 2009 1:00 13
XIII TABLE DES MATIRES
Les techniques dexclusion dindexation . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Syntaxe du chier Robots.txt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Mise en place du chier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
16 Rfrencement payant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Quelques pralables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Ltude concurrentielle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Prparez votre future campagne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Google AdWords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Crer son compte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Grer son compte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Yahoo! Search Marketing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Crer son compte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Grer sa campagne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Microsoft adCenter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Crer son compte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Grer sa campagne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Loptimisation dune campagne de liens sponsoriss . . . . . . . . . . . . . . . . 364
Loptimisation de votre campagne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Loptimisation de votre site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
17 Utiliser les comparateurs de prix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Kelkoo, la plate-forme commerante de Yahoo . . . . . . . . . . . . . . . . . . . . . 370
Le Guide.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Shopping.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Twenga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
ecom Livre Page XIII Jeudi, 12. novembre 2009 1:00 13
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL XIV
18 Faire appel aux services daffiliation . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Le principe de lafliation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Une relation aflieur, afli et plate-forme dafliation . . . . . . . . . . . . 378
Une offre commerciale performante . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Les diffrents modes de fonctionnement/de facturation . . . . . . . . . . . . 378
Votre programme dafliation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Le choix dun rseau dafliation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
La mise en place dun programme dafliation . . . . . . . . . . . . . . . . . . . 384
Sassurer de la performance de la campagne . . . . . . . . . . . . . . . . . . . . . 385
19 Lexploitation de votre base e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
La conception de votre newsletter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
La gestion de vos mailings lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
ecom Livre Page XIV Jeudi, 12. novembre 2009 1:00 13
1
Introduction au monde
du e-commerce
Au sommaire de ce chapitre
Comment utiliser ce livre ?
Une boutique en ligne, mais pas nimporte comment
Comment procder ?
Les diffrentes tapes de la cration
E-commerce. Quest-ce qui se cache exactement derrire ce terme ?
Le mot e-commerce dsigne lensemble des activits visant vendre des biens matriels
ou immatriels en se servant dun site Internet comme support principal.
On retrouve donc dans cette dnition la fois les boutiques en ligne les plus connues,
telles CDiscount, Amazon, Rue du Commerce, mais galement les versions en ligne des
grandes anciennes physiques classiques, quil sagisse de commerce spcialis (FNAC,
Petit Bateau) ou de grande distribution (Auchan Direct, Houra pour le groupe
Cora) Se retrouve galement sous cette dnomination tous les commerces "dmat-
rialiss", vendeurs de musique numrique en ligne (liTunes Musique Store dApple, et
ses quivalents VirginMega ou Fnac Digital), mais galement les prestataires de services
sur Internet, quils vendent de simples abonnements des services de mail ou des solutions
dhbergement web ddies compltes
En ralit, ds que vous effectuez une transaction montaire par le biais dun site
Internet, mme dun site denchres en ligne comme eBay, vous participez lvolution
du e-commerce en France et dans le monde.
Mais le commerce en ligne est-il rellement important aujourdhui ? Il lest de plus en
plus. La priode de Nol 2004 a entran plus de 13 milliards deuros de chiffre daffaires
dans le monde. Pour lanne 2007, ce nest pas moins de 16,3 milliards deuros de chif-
fre daffaires qui ont t raliss en France par le biais des transactions sur le Web, soit
une augmentation de 36 % par rapport lanne prcdente. Le secteur rassemble plus
de 20 millions dacheteurs et emploie plus de 800 000 personnes, rien que dans lHexa-
gone. Il est devenu inconcevable pour une entreprise moderne de laisser de ct un tel
march !
Alors, peut-tre voulez-vous une part de ce gigantesque gteau ?
ecom Livre Page 1 Jeudi, 12. novembre 2009 1:00 13
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL 2
Comment utiliser ce livre ?
Avant de parler plus avant de le-commerce et de son implication sur votre entreprise,
quelques remarques sur ce livre. Contrairement aux versions prcdentes du Campus
"Crer un site e-commerce", cette nouvelle dition vous expliquera non seulement
comment construire votre boutique, mais aussi comment la promouvoir et interagir
avec ses clients. Plus quun guide pratique, cet ouvrage est destin vous accompagner
tout au long de la vie de votre boutique, et non plus seulement lors de la conception ou
de la mise en ligne de celle-ci. Ainsi, au l de ses pages, vous retrouverez :
Mise en place technique dune boutique en ligne. Ces 9 chapitres dtaillent les
tapes pratiques et claires pour crer une boutique web en ligne laide dAdobe
Dreamweaver CS4 et dun serveur PHP/MySQL. Vous dcouvrirez comment
mettre en place un panier client, un paiement scuris, un catalogue complet en
ligne
Au terme de cette premire partie, vous disposerez dune boutique en ligne opra-
tionnelle, quipe dun paiement scuris est prte tre livre vos clients potentiels.
Cette boutique possde avant tout les lments de base dun portail de vente sur
Internet. Libre vous, par la suite, dinventer dautres accroches, dautres mthodes
de vente et dautres mcaniques an de lamliorer.
La relation client, point central du site e-commerce. Cette seconde partie de
louvrage, couvrant 4 chapitres, est avant tout destine vous faire prendre conscience
de limportance de la relation avec vos clients. Sur Internet, rien ne diffrencie rel-
lement une boutique dune autre. De plus, le contact physique avec les produits et
les vendeurs nexiste pas. Il est donc trs important de mettre en conance vos visi-
teurs, de les inciter acheter et les rassurer au moment du paiement. Cette partie
abordera galement les problmatiques nouvelles lies au Web 2.0 et lensemble
de la mode du Social Commerce, ou comment utiliser vos clients et leur avis an de
gnrer encore plus de vente
Premiers pas en marketing, faire connatre sa boutique en ligne. Une partie
essentielle de louvrage, elle vous accompagnera tout au long de la vie de votre
boutique. Y sont aborder les diffrentes mthodes pour faire connatre votre bou-
tique sur Internet, aussi bien de manire organique grce au rfrencement naturel
quavec un budget marketing avenant laide de liens sponsoriss, de programmes
dafliation ou des comparateurs de prix. Vous y trouverez galement des conseils
utiles pour montiser votre base de clients existants laide de newsletter ou de-mail-
ling cibls.
3 INTRODUCTION AU MONDE DU E-COMMERCE
Bref, cet ouvrage contient des conseils qui concernent non seulement la cration, mais
plus importants encore la vie de votre boutique en ligne. La mise en ligne dun site
e-commerce nest pas un but en soi. Limportant est avant tout dassurer sa rentabilit.
Cest l un travail continue qui vous demandera beaucoup dides et de patiences.
Ce livre se propose donc de vous accompagner sur ce long chemin.
Afin de mieux vous aider mettre en place votre commerce en ligne, vous allez btir laide de cet
ouvrage une boutique type en utilisant Adobe Dreamweaver CS4 et la technologie PHP/MySQL. Et
parce quil faut bien vendre quelque chose, cette boutique type sera une librairie. Ce modle, lun des
plus frquents sur la Toile, met en jeu lensemble des techniques de prsentation et de vente des pro-
duits populariss aujourdhui sur Internet. Il se peut toutefois que les produits que vous envisagez de
vendre demandent des fonctionnalits supplmentaires, comme un choix de taille ou de couleur.
Le Campus "Crer un site e-commerce" vous donne lensemble des cls techniques pour russir
votre boutique en ligne. En adaptant certaines sections et surtout en prtant attention aux phases
de conception du site et de sa base de donnes, vous pourrez adapter le modle prsent ici
nimporte quel bien.
Retrouvez lensemble des fichiers exemple de ce livre sur le site web de Pearson, www.pearson.fr,
la page ddie cet ouvrage. Vous pouvez voir un aperu de boutique finalise ladresse : http://
www.creer-un-site-ecommerce.com/demo/.
Une boutique en ligne, mais pas nimporte comment
Dvelopper sa propre boutique en ligne est tentant. Et cette image de territoire vierge
que possde encore Internet de nos jours permet dimaginer de nombreux scnarios.
Mais attention ! Se lancer dans ce projet, quivaut ouvrir un pas-de-porte mondial.
Les rgles qui rgissent le commerce lectronique sont plus ou moins celles du commerce
physique. Alors se lancer en ligne oui, mais hors de question de le faire nimporte
comment !
Bien penser la stratgie de sa boutique
Vous tes dj un commerant et possdez votre propre boutique ?
Dans ce cas, pensez votre boutique en ligne comme une extension de votre com-
merce rel. Grce Internet, vous pourrez toucher des clients qui ne sont pas dans
votre sphre gographique classique. Votre clientle ne se limite plus votre ville ou
votre dpartement, mais elle stend dsormais au monde entier ! Tentant, mais ce nou-
veau pas-de-porte impose des responsabilits vis--vis de cette nouvelle clientle. Cette
connexion avec la terre entire vous impose de matriser la VAD, la Vente Distance.
Vous devrez assurer les expditions de vos produits, et respecter les dlais de livraison
indiqus sur votre site. La rputation dune boutique sur Internet tient, comme dans la
vie relle, la qualit de son service auprs des clients. Cest non seulement votre cata-
logue, mais surtout la rapidit de vos services et de vos rponses qui seront jugs par les
Internautes. Si vos produits sont spciques, voire uniques, vous pourrez facilement
exploiter cette niche et gagner une clientle cible sur Internet. Soyez visibles, nhsitez
pas mettre en avant leurs qualits et lhistorique de votre commerce. Ce sont des
points que les Internautes apprcieront.
Vous ne possdez pas de commerce et souhaitez vous lancer dans laventure ?
Une boutique en ligne peut tre une premire tape peu onreuse pour lancer votre pre-
mier business : pas de fonds de commerce acqurir, pas de ramnagement de bouti-
que La conception dun site web est, dans ce cas, un investissement minime face aux
implications dun commerce rel.. Mais cela reste un engagement auprs de vos futurs
clients !
Monter un commerce en ligne, cest galement crer une entreprise ! Au regard de la
lgislation franaise un commerce en ligne est un commerce avant tout. Vous devrez
donc le dclarer suivant le mme modle scal que nimporte quelle entreprise !
Le statut juridique
La lgislation franaise simplie grandement aujourdhui la cration dentreprises indi-
viduelles, tels les commerces en ligne. Il nest plus ncessaire de crer une socit
part entire pour proter de revenus commerciaux, grce au statut juridique dentre-
prise individuelle.
Ce statut permet dviter le montage dun capital propre lentreprise. En effet, dans ce
cadre, les biens privs de lentrepreneur et les biens de la socit sont confondus. Il est
donc possible dutiliser nimporte quelle ressource pour faire vivre lentreprise, mais en
contrepartie la responsabilit lgale stend aux biens personnels (automobile, maison)
y compris ceux du couple en cas de communaut des biens. Rassurez-vous toutefois,
des astuces existent pour pargner vos possessions les plus prcieuses en cas de mauvais
rsultats de votre commerce en ligne.
Les dmarches de dclaration de votre entreprise sont alors rduites au minimum : une
simple demande dimmatriculation auprs de la chambre de commerce et dindustrie
dont vous dpendez, en gnral celle de votre dpartement, suft. Une fois cette imma-
triculation effectue, libre vous de commencer votre activit commerciale.
En ce qui concerne la dclaration des revenus de votre commerce, ils se font sur une
dclaration complmentaire votre dclaration de revenus habituelle au titre des bn-
ces industriels et commerciaux (BIC) ou bnces non commerciaux (BNC).
Si vous souhaitez en savoir plus sur les formalits remplir pour crer votre entreprise,
il existe en France lAgence pour la cration dentreprise. Elle possde un site trs
complet (www.apce.com, voir Figure 1.1) sur lequel vous devriez trouver tous les rensei-
gnements ncessaires.
Avec lentre en application de la Loi de modernisation de lconomie du 4 aot 2008,
le rgime dauto-entrepreneur est consacr. Depuis le 1
er
janvier 2009, il est dsormais
plus ais de dvelopper son affaire.
Llment caractristique de ce rgime est la simplicit des dmarches pour dclarer
son activit. Il ny a pas lieu de recourir lenregistrement au registre du commerce et
des socits (RCS). Les formalits consistent ici en une simple dclaration de son acti-
vit au centre de formalits des entreprises (CFE). Celle-ci peut se faire directement et
gratuitement en ligne.
Pour cela rendez-vous la page http://www.auto-entrepreneur.cci.fr/declaration.htm
et cliquez sur Demander un compte CFEnet.
Figure 1.1
Le site de lAPCE est
une vritable mine de
renseignements sur la
cration dentreprise.
Les alergiques aux critures comptables seront soulags ; avec le statut dauto-entrepreneur,
seule la tenue dun livre de recettes et dachats est demande.
Comme dans toute activit, un suivi rgulier de sa comptabilit est la condition sine qua
non dune bonne gestion, permettant de dterminer ltat de sant de son affaire, de
budgtiser ou de raliser des tudes prvisionnelles.
Les cotisations sociales, quant elles, reposent exclusivement sur le chiffre daffaires
dgag. Elles sont actualisables mensuellement ou trimestriellement.
Comme vous pourrez le constater dans le tableau de la Figure 1.2, les taux des charges
sociales varient en fonction de la nature de lactivite exerce.
12 % dans le cadre dune activit de commerce avec un impt sur le revenu repr-
sentant 1 % du chiffre daffaires ;
21,3 % pour une activit de services auxquels sajoutent les 1,7 % du chiffre
daffaires au titre dimpts sur le revenu.
Dans son volet scal, le statut dauto-entrepreneur rvle une imposition reposant sur
les recettes dclares. Larticle 151.0 du Code gnral des impts dans son alina 1
nonce que "le versement libratoire de limpt sur le revenu repose sur le chiffre
daffaires".
Lacquittement peut tre forfaitaire (concommittant au paiement des charges sociales).
Autre caractristique de ce statut, lauto-entrepreneur nest pas redevable de la TVA.
Une telle donne a son importance pour ceux voluant dans un univers business to busi-
ness. Elle doit tre prise en compte lors de ltablissement de ses prix an de ne pas
faire fuir des clients potentiels tablant sur la rcupration de la TVA et pouvant considrer
votre tarication trop onreuse.
Figure 1.2
Les diffrents taux
applicables en matire
de charges sociales.
Types d'activits Exemples Total
Taux
charges
sociales
Commerciale, artisanale Vente de biens, fourniture de
logement, restaurants, boulangerie
1 %
12,0 % 13,0 %
Prestation de services commerciale,
artisanale ou librale relevant du RSI
Intermdiaire de commerce, coiffeur,
rflexologue 21,3 %
1,7 % 23,0 %
Prestation de services librale
relevant de la CIPAV
Conseil, gologue, dcorateur
18,3 %
2,2 % 20,5 %
Taux de
l'impt
Taux du micro-social et du micro-fiscal simplifi
Dernier point mentionner au titre des avantages : lexonration de la taxe profession-
nelle pendant deux ans aprs lanne de cration de votre activit.
Tout rgime saccompagne de limites. En matire de retraite, le recours au statut
dauto-entrepreneur doit tre rchi. Son aspect dclaratif repose sur lexistence dun
chiffre daffaires ; en son absence, vous tes dans lincapacit de cotiser la retraite.
Veillez donc de prs votre protection sociale et pensez souscrire une assurance,
dautant plus si votre statut dauto-entrepreneur ne se cumule pas avec celui de salari
ou dtudiant.
Ne pensez pas pouvoir faire jouer votre assurance civile personnelle en cas de litige ou
dommage caus dans le cadre de votre activit auto-entrepreunariale. Elle ne vous sera
daucun recours.
Il est galement vivement recommand de faire les dmarches ncessaires pour protger
son patrimoine. En effet, le corollaire dun tel statut est la responsabilit illimite engage
sur son patrimoine personnel en cas de dettes professionnelles. ce titre vous pouvez
envisager douvrir un compte bancaire propre votre activit auto-entrepreunariale. Il
ny aura ainsi aucune confusion entre les oprations professionnelles et celles personnelles.
En toute hypothse, la simplicit du formalisme de lauto-entrepreunariat, attractive, ne
vous dispense pas dtudier les autres rgimes. Il peut tre intressant dtablir un
tableau comparatif des avantages et inconvnients de chacun dentre eux.
Dautant plus que le recours ce statut sera bien souvent quune tape transitoire avant
de se lancer dans la cration de socit. Rappelons en effet que le rgime tudi com-
porte un seuil de 32 000 de chiffre daffaires pour une activit de services ou 80 000
dans le cadre dune activit commerciale.
Nhsitez pas suivre sur le site de la Chambre de Commerce et dIndustrie (CCI), toute lactualit pro-
pre au statut dauto-entrepreneur. En juin 2009, la premire Universit des auto-entrepreneurs a t
organise.
cette occasion, des thmatiques telles que la gestion dactivit, le choix de la fiscalit approprie, le
dveloppement du chiffre daffaires ou la prospection de nouveaux clients ont t abordes.
Pour de plus amples informations rendez vous sur le site http://www.auto-entrepreneur.cci.fr.
Dclaration la CNIL
Pour continuer dans un cadre juridique plus gnral, parlons un peu de la CNIL (Com-
mission nationale informatique et libert : www.cnil.fr, voir Figure 1.3). En montant
votre boutique en ligne, vous allez collecter des informations personnelles en provenance
de vos clients, quil sagisse de leurs coordonnes lectroniques ou physiques, de leurs ge,
nom et prnom, ou de nimporte quel autre type dinformation. Le stockage dinformations
personnelles, et surtout leur utilisation, est soumis des rgles trs strictes en France.
Quelles que soient ces informations que vous collectez, vous devez informer vos clients
de lusage que vous en ferez : utilisation sur votre site uniquement, partage avec des
sites partenaires ventuels La CNIL met disposition des webmasters des formu-
laires et mentions prrdigs, en accord avec la lgislation actuelle sur la collecte dinfor-
mations personnelles. Vous les trouverez sur une page ddie du site de la commission :
www.cnil.fr/index.php?id=1861.
Pensez galement dclarer votre boutique auprs de la CNIL an quelle prenne connais-
sance des informations que vous conservez et de lutilisation que vous en faites. Cette
dclaration passe par un formulaire en plusieurs tapes sur le site mme de la CNIL :
www.cnil.fr/index.php?id=1545.
Comment procder ?
Attention, la cration dune boutique en ligne est loin dtre un "petit projet" ! Cest un
vritable investissement quil convient de ne pas mesurer la lgre.
Le dveloppement de votre boutique, la conception et la cration de toutes ses pages et son
processus vont dj vous prendre du temps. La gestion quotidienne de votre boutique
Figure 1.3
En France, la CNIL veille
au bon usage des infor-
mations personnelles
sur Internet.
par la suite, la gestion des commandes, lexpdition de celles-ci, les relations rgulires
avec vos clients vont ensuite occuper une grande partie de votre temps. Prenez bien
en compte cela avant de vous lancer dans laventure.
Si vous tes toujours dcid lancer votre propre boutique, tudiez ces questions cruciales,
quil est bon de se poser avant de lancer nimporte quel business en ligne :
Quallez-vous vendre ?
Quelle approche du march allez-vous avoir, quest-ce qui fera votre originalit ?
tudiez bien attentivement le march qui vous intresse, histoire de vous faire une ide
prcise du nombre de clients que vous pouvez esprer. Des tudes paraissent assez
rgulirement sur des sites comme le Journal Du Net (www.journaldunet.com, voir
Figure 1.4), vous permettant dapprhender les mutations du march. Vous pouvez par
la mme occasion vous faire une ide des socits proposant une offre proche de la
votre en effectuant quelques recherches dans Google ou en parcourant lannuaire des
socits de Journal du Net (http://societe.journaldunet.com).
tablissez ce quon appelle un Business plan : "Document de plusieurs pages qui dcrit
lensemble du projet dune entreprise : activit, march, technologie, marketing, res-
sources humaines et plus prcisment les dpenses programmes et les ressources
Figure 1.4
Le Journal du Net
reste une bonne source
dinformation sur le
monde du Web.
envisages court et moyen terme. Ce document sert principalement convaincre
les investisseurs de la viabilit dun projet." (dnition issue du Journal Du Net :
http://www.journaldunet.com/encyclopedie/denition/28/41/21/business_plan.shtml).
Dans ce business plan, vous devrez prendre en compte lensemble de vos dpenses: la
cration de votre boutique (location dun espace dhbergement, temps de dvelop-
pement, fabrication des biens vendre), son activit quotidienne (stockage, frais
dexpdition des biens) sa promotion (publicit en ligne, communiqus de presse,
afchage), etc. Il rsumera galement les recettes espres de faon raliste en fonc-
tion du prix de vos produits, du nombre de visiteurs et du pourcentage de personnes
susceptibles de passer lachat.
La rdaction de ce document peut savrer fastidieuse, mais elle est indispensable la
bonne tenue de votre future entreprise. Cest uniquement laide de ce type de document
que vous aurez une ide des dlais de rentabilit que vous pouvez viser, et que vous
connatrez vos objectifs rguliers en termes de vente pour que votre site soit un succs.
Si vous pensez faire appel des investisseurs, mme si cest l une tape ultrieure, un
business plan sera indispensable pour les convaincre du bien-fond de votre entreprise !
Ces questions tiennent du bon sens. Mais lancer un commerce nest pas une opration
prendre la lgre, il est donc bon de les rappeler.
Les diffrentes tapes de la cration
Dans cet ouvrage, vous allez dcouvrir les diffrentes tapes de la cration de votre
boutique en ligne, de sa conception sa mise en ligne en passant par toutes les tapes de
la construction de ses pages. Vous trouverez ainsi au l des chapitres :
le choix de lhbergeur qui accueillera votre boutique ;
la mise en place dune interface de dveloppement efcace ;
la conception fonctionnelle des pages et leurs spcications ;
la conception et la mise en place de la base de donnes associe votre boutique ;
les mthodes de cration de lensemble des pages de votre site, quil sagisse du
catalogue de produit ou des processus de commande ;
la synchronisation de votre boutique avec une interface de paiement externe ;
la gestion de la relation client et la mise en conance de celui-ci an quil nalise
ses achats ;
le rfrencement et le marketing en ligne an de faire connatre votre nouveau
commerce sur le Net.
Larchitecture technique choisie dans cet ouvrage est axe autour du couple PHP/
MySQL. Ce langage de programme et ce systme de base de donnes offrent tous deux
lavantage dtre disponibles gratuitement et de se trouver sur de nombreuses offres
dhbergeur !
An dviter un fastidieux travail de saisie de code PHP, la majorit des pages de votre
boutique sera ralise laide de lditeur Dreamweaver CS4, propos par Adobe.
Il offre toutes les fonctionnalits ncessaires la ralisation dun site dynamique, sur une
architecture PHP/MySQL classique.
Le design
Le design est une donne majeure dans la construction dun site. Est-il russi que vos
clients trouveront vos pages agrables, prendront plaisir visiter votre site et passeront
plus facilement commande. Est-il nglig ? personne ne sattardera sur ce site peu
convivial. Sa charte graphique tout comme vos logos participent votre identit visuelle,
car votre site est la vitrine de votre entreprise.
Le sujet est vaste et mrite un ouvrage part entire. Nous nous contenterons ici de
vous proposer quelques indications bibliographiques :
Site Web : priorit la simplicit, de Jakob Nielsen et Hoa Loranger, Pearson, 2007,
29,90 .
Dans cet ouvrage, vous trouverez de nombreux conseils pour amliorer lergonomie,
la lisibilit et la convivialit de votre site.
Conception de sites Web avec les CSS, dric A. Meyer, Pearson, 2007, 24,90
Cet ouvrage, conu sous forme dexercices pratiques, vous apprendra la manipulation
des feuilles de styles en cascade (CSS), lesquelles permettent de contrler faci-
lement lapparence dun site en dcrivant dans un document spar la prsentation
visuelle de vos pages.
Interfaces web interactives de Bill Scott et Theresa Neil, Pearson, 2010, 34
Cet ouvrage prsente plus de 75 design patterns pour construire des interfaces web
interactives en prenant en compte les dernires avances technologiques.
Vous trouverez galement de nombreuses ressources sur Internet, en particulier sur les
blogs ou sites des webdesigners.
Visitez par exemple :
http://webdesign.2803.com/
http://www.advancedweb.fr
http://all-for-design.com/
http://www.css4design.com/blog/
http://www.css-design.fr/
http://www.cssburst.com/ (en anglais)
http://www.noupe.com/category/design (en anglais)
http://www.smashingmagazine.com/ (en anglais)
http://net.tutsplus.com/ (en anglais)
et tant dautres.
Partie
MISE EN PLACE
TECHNIQUE DUNE
BOUTIQUE
Vous voil donc parti dans la grande aventure du commerce en ligne. Votre projet
est clair et votre business-plan prvoit une boutique rentable. Vous allez ds pr-
sent pouvoir lancer votre projet et crer linterface technique de votre futur site
web. Au cours des chapitres qui vont suivre, vous allez dcouvrir les bases de la
cration technique dun site e-commerce. Vous y aborderez la mise en place dun
catalogue, dune zone rserve vos clients, dun processus dachat avanc et
dcouvrirez votre premire interface de gestion des paiements.
Pour tous ces points, vous allez avoir recours deux technologies et un outil : PHP,
MySQL et Adobe Dreamweaver CS4. Pourquoi ces technologies plutt que dautres ?
Pour de simples questions de cot et de abilit de votre plate-forme de dveloppement.
PHP et MySQL, respectivement un langage de programmation et un gestionnaire
de base de donnes, sont des technologies gratuites issues de la communaut du
logiciel libre. Bien que gratuites, elles bncient dun rel engouement sur le
Web et sont au nombre des technologies les plus populaires. Elles offrent gale-
ment lavantage dtre trs rpandues parmi les plates-formes dhbergement,
vous ne devriez donc pas rencontrer de problme pour identier un prestataire
capable daccueillir votre boutique et proposant ces technologies.
Adobe Dreamweaver CS4 est lui un logiciel de cration web disponible depuis 10 ans.
Il permet la cration visuelle de pages et de programmes web volus. Il bncie du
support de la socit Adobe, cratrice entre autres de Photoshop, et possde une large
communaut dutilisateurs de part le monde. Cest lun des seuls investissements
en matire de logiciel que vous aurez faire pour raliser votre boutique en ligne.
Vous allez maintenant entrer dans la partie la plus technique de cet ouvrage. Suivez
bien attentivement les chapitres qui vont suivre, vous y trouverez mthodes et techni-
ques pour crer un site dynamique rpondant vos attentes et celles de vos clients.
I
2
Bien choisir son hbergeur
Les offres ddies
Lhbergement gnraliste
Avant de vous lancer dans la cration de votre boutique par la pratique, quelques lignes
dtudes simposent encore. An quelle soit accessible tous, votre future boutique
doit tre en ligne. Cela passe par la location des services dun hbergeur de sites web.
On dsigne par hbergeur tout prestataire technique charg sur Internet de recevoir les
informations et les sites de ses clients et de rendre ceux-ci accessibles au monde entier.
On compte plusieurs milliers dhbergeurs dans le monde, de lassociation gratuite la
multinationale prsente sur les cinq continents.
Mais tous ces hbergeurs ne conviennent pas forcment la vision que vous avez de
votre boutique. Les hbergeurs gratuits, par exemple, nancs par lafchage de publi-
cit sur les sites quils diffusent, ne vous conviendront pas. Pour garder sa crdibilit,
votre boutique doit saffranchir de toute publicit extrieure. Cest donc vers lhbergement
payant quil vous faut vous tourner.
Deux options soffrent en fait vous quant au choix de lhbergeur de votre futur site
e-commerce. Vous pouvez opter pour un hbergeur qui dispose dj dune offre de bou-
tique en ligne ddie ou vous tourner vers un hbergeur plus gnraliste et implmenter
par vous-mme votre solution de commerce lectronique. Comme vous allez le voir, ces
deux solutions ont leurs avantages et leurs inconvnients.
Les offres ddies
De plus en plus nombreux sont les prestataires de service en ligne qui proposent des
solutions de commerce lectronique prtes lemploi. Ces solutions sarticulent en
gnral autour dune offre dhbergement mutualis (cest--dire sur le mme ser-
veur que dautres clients) et dun outil de cration de boutique en ligne plus ou moins
volu.
Ce dernier outil vous proposera le plus souvent de crer un catalogue de produits en
ligne et vous facilitera linterfaage avec diffrentes mthodes de paiement. Certains
prestataires peuvent mme aller jusqu offrir la mise en avant de vos produits sur quelques-
uns des rseaux de distribution en ligne les plus clbres (voir Figure 2.1).
MISE EN PLACE TECHNIQUE DUNE BOUTIQUE 16
Ce type doffre possde la fois des avantages et des inconvnients. Avantages :
Vous tes certain de la compatibilit de votre boutique en ligne avec lhbergement
que vous avez choisi. Les deux produits tant fournis par le mme prestataire.
Vous vous dispensez dapprendre certaines techniques de cration de site web.
Loutil de cration de boutique en ligne par votre hbergeur possdera, logiquement,
une interface intuitive et facile dutilisation.
Votre boutique disposera dune solution de paiement en ligne scuris fournie par
votre hbergeur.
Mais on peut citer les inconvnients suivants :
Le prix peut constituer un obstacle. En effet, les solutions de boutique en ligne
sadressent plutt une clientle professionnelle. Elles sont de ce fait rarement bon
march.
Vous prenez le risque de possder une boutique qui ne corresponde pas exactement
vos besoins. Les offres de ce type dhbergeur sont en effet standardises et lais-
sent peu de place linitiative personnelle. Un catalogue en ligne, voil tout ce que
vous aurez
Votre boutique sera prisonnire de votre hbergeur. Il est en effet rare quun pres-
tataire propose une solution qui soit facile migrer chez un concurrent.
Figure 2.1
PowerBoutique
propose une solution
de boutique en ligne
tout intgre.
17 BIEN CHOISIR SON HBERGEUR
Vous vous privez galement du plaisir de dcouvrir comment crer vous-mme
votre boutique en ligne.
Aussi efcaces quelles puissent tre, de telles offres sortent du cadre de cet ouvrage.
En effet, les connaissances techniques ncessaires la mise en place de votre boutique
avec ce genre doutil sont trs spciques et varieront dun hbergeur lautre.
Si votre choix se porte sur cette option, votre futur hbergeur possde trs certainement
tous les chiers daide ncessaires la comprhension de son outil de cration. vous
de les consulter.
Certains scripts PHP prts lemploi vous permettent galement de mettre en place votre bouti-
que sans avoir recours au codage la main. Cest le cas par exemple dOS Commerce (www.oscom-
merce.com).
Grce de nombreuses options de paramtrage (produits, niveaux de taxes, options), il est possible
de publier sa premire boutique en ligne en bnficiant de fonctions e-commerce avances : gestion
des promotions, affichage de listes de tops produits, cration de catgories, dune newsletter dinfor-
mation, gestion de plusieurs devises et des commandes internationales si vous le souhaitez
OS Commerce permet galement de proposer le paiement en ligne de vos articles, laide dun parte-
naire de paiement.
Lhbergement gnraliste
Seconde solution, si lappel un outil propritaire ne vous satisfait pas vraiment, vous
pouvez opter pour un hbergement plus gnraliste et construire vous-mme votre bou-
tique en ligne. Il sagira alors de btir une solution complte permettant de grer la fois
vos produits et les comptes de vos clients. Et non plus de remplir un modle de catalogue
dj dni.
Tout ce dont vous aurez besoin pour ce genre de ralisation est un hbergeur mutualis
classique (voir Figure 2.2) qui propose laccs un langage de cration de sites dyna-
miques et une base de donnes. Avec ces deux lments, plus quelques autres ind-
pendants de ce prestataire technique, vous pouvez trs bien vous offrir une boutique en
ligne.
Bien entendu, avant de vous lancer dans cette solution, pesez bien le pour et le contre :
Votre boutique en ligne rpondra exactement vos attentes, puisque cest vous-
mme qui laurez conue.
Le prix est souvent sans comparaison avec une offre ddie au e-commerce.
Oui, mais
Les options de paiement scuris et autres vrications seront interfacer par vos
soins. Nanmoins, rassurez-vous, il existe beaucoup de services en ligne prts
vous aider, moyennant une commission sur vos ventes.
Cette solution, si elle peut se rvler bien moins onreuse que le recours une solu-
tion ddie, va en revanche vous coter normment de temps. La construction dun
site e-commerce complet nest pas une mince affaire et demande une trs grande impli-
cation. Heureusement, le prsent ouvrage est l pour vous aider !
Avant de clturer ce court chapitre et dentrer dans le vif du sujet, un petit mot sur la
conguration logicielle ncessaire votre future boutique.
Tout dabord, lhbergeur de votre choix doit proposer le support intgral du langage
PHP et au moins une base de donnes MySQL. Ces deux points sont indispensables,
puisque cest sur cette architecture logicielle que va reposer la boutique que vous allez
construire dans les pages qui suivent.
En ce qui concerne lespace disque et la bande passante, ces deux options peuvent tre
rduites. Une boutique en ligne prend gnralement peu despace chez un hbergeur,
linterface graphique de la boutique et les images des produits la vente tant les prin-
cipales sources dencombrement du serveur. Ct bande passante, tout dpend de la fr-
quentation espre. Une page de boutique bien conue ne devrait pas peser plus de 100 ko.
Figure 2.2
En France, OVH propose
des offres dhbergement
mutualis.
19 BIEN CHOISIR SON HBERGEUR
La consommation totale de votre boutique en ligne ne devrait pas dpasser le gigaoctet
par mois.
Pensez toutefois rvaluer ce chiffre si le succs est au rendez-vous.
Reste connatre les services annexes dont vous souhaitez disposer : nom de domaine ?
streaming pour des extraits sonores ou vido ? Autant dlments qui dtermineront
encore votre choix Le mieux est de comparer les hbergeurs. En voici quelques-uns,
parmi les plus importants du march franais :
1 et 1 : www.1et1.fr
Amen : www.amen.fr
OVH : www.ovh.com
3
Mise en place dun serveur
de dveloppement
Comment fonctionne un site dynamique ?
La technologie PHP en dtail
Installation de WampServer 2.0 sur un systme Windows
Configuration de lenvironnement de dveloppement
Cration du profil de site dans Dreamweaver CS4
Une fois votre projet de boutique en ligne dni et votre hbergeur choisi en cons-
quence, vous allez pouvoir penser mettre en place un serveur de dveloppement
complet chez vous. Ce type de serveur est en effet indispensable dans le cadre du dve-
loppement de sites web en langage PHP et vous fera gagner un temps prcieux.
Pour mieux comprendre la ncessit de ce type de serveur, il est indispensable de savoir
comment fonctionne exactement le langage PHP et comment il sinterface avec une base
de donnes. Une fois ces dnitions techniques poses, vous dcouvrirez comment instal-
ler votre propre environnement de dveloppement, en loccurrence WampServer 2.0,
sur une machine quipe de Windows. Vous apprendrez galement procder aux pre-
miers rglages de cet environnement an quil corresponde exactement lhbergeur
que vous vous tes choisi pour votre site web.
Comment fonctionne un site dynamique ?
Mais, avant tout, savez-vous comment fonctionne rellement un site dynamique ?
Les avantages dun site dynamique
Contrairement aux pages personnelles, les sites commerciaux, professionnels ou insti-
tutionnels, grent une quantit importante de contenu (actualits, articles, ches
produits). Imaginez le travail que reprsenteraient ces types de sites sils taient
entirement constitus de pages HTML statiques.
Prenez lexemple dun site comme celui de la FNAC (voir Figure 3.1). Cela signierait
que la page descriptive de chaque livre et de chaque disque aurait fait lobjet dun mon-
tage part. Les milliers darticles proposs par le cyber-marchand demanderaient alors
des jours et des jours de travail pour tre prsents de manire correcte aux clients
potentiels.
De plus, chaque nouvel arrivage, il faut concevoir non seulement les pages correspon-
dantes ces nouvelles ditions mais galement toutes les pages existantes an que, par
exemple, la liste des ouvrages dun mme auteur soit jour. Autre petit dtail, la cra-
tion dun moteur de recherche ou du Caddie virtuel utilis par les clients devient quasi-
ment impossible ou demande tout au moins lutilisation de tellement de JavaScript quil
serait sans doute prfrable den abandonner lide.
Comment rsoudre alors ce casse-tte ? En utilisant les technologies de sites dynami-
ques, bien sr ! Celles-ci ne font plus appel de simples chiers HTML mais utilisent
de vritables langages de programmation interprts par le serveur qui hberge les
pages web. Ces langages permettent de comprendre des requtes faites par lutilisateur
(lafchage dune page, une recherche prcise), de chercher les rponses cette
requte dans une base de donnes et denvoyer ce mme visiteur le rsultat de ces
recherches sous forme de page web.
Figure 3.1
Le site de la FNAC
est entirement fond
sur la technologie ASP
de Microsoft.
23 MISE EN PLACE DUN SERVEUR DE DVELOPPEMENT
Les sites dynamiques, cest donc cela : la combinaison dun langage de programmation
(PHP, ASP) et dune base de donnes an de gnrer des pages web.
Depuis sa version MX, Dreamweaver possde toute une panoplie doutils permettant la
cration de sites web dynamiques : Liaisons, Comportements de serveur, Composants,
Actions Grce ces outils, on peut crer son propre site dynamique dans lune des
cinq technologies proposes : ASP, ASP.net, JSP, Adobe Cold Fusion et, bien entendu,
PHP !
Anatomie dun site dynamique
Avant de vous lancer tte baisse dans la cration dun site web dynamique laide de
Dreamweaver, il est important de comprendre comment fonctionnent exactement les
diffrentes technologies de cration de sites dynamiques.
Pour bien comprendre, prenez comme base le comportement dun site web statique,
cest--dire compos de pages HTML classiques.
Lorsque vous souhaitez afcher une page sur ce type de site, votre navigateur Internet
demande simplement au serveur dhbergement de lui envoyer le code HTML corres-
pondant cette page (voir Figure 3.2). Ce code HTML est du mme type que celui
que vous crez avec Dreamweaver, il est compos de texte, de liens, dappels des
images Lorsque votre navigateur rencontre la balise <img> correspondant une image,
il envoie nouveau une requte au serveur an de recevoir le chier image corres-
pondant.
Une fois la page et ses composants entirement chargs et afchs, le navigateur cesse
denvoyer des requtes aux serveurs jusqu votre prochain clic sur un lien. Lchange
entre votre ordinateur et le serveur se limite donc quelques requtes et quelques
chiers, le serveur se contentant denvoyer les chiers HTML, images ou multimdias
rclams.
Figure 3.2
Les requtes pour afficher
les pages dun site statique
sont simples.
DVD
ROM
Visiteur Serveur
web
Demande daffichage dune page
Rendu de la page demande
Quand vous naviguez sur des sites dynamiques, le fonctionnement est sensiblement dif-
frent. Lorsque vous souhaitez accder une page, votre navigateur envoie au serveur
ladresse de cette page (cette fois, il sagit non plus dun chier HTML mais dune page
crite en PHP), ainsi que quelques paramtres. Ces paramtres peuvent tre envoys au
serveur directement via lURL prsente dans le navigateur (cest le plus frquent) ou
provenir dun formulaire et tre envoys par une mthode POST, comme dans le cas
dun moteur de recherche.
Les mthodes POST et GET sont deux mthodes de communication entre un ordinateur client et un
serveur Internet. Le serveur reoit via le protocole HTTP des informations de lordinateur client.
Lorsquon utilise la mthode GET, les informations envoyes sont ajoutes lURL de la page deman-
de au serveur. Quand on utilise la mthode POST, les informations sont invisibles pour lutilisateur.
Elles sont envoyes de manire cache par le serveur. La mthode POST est en gnral associe aux
formulaires, la mthode GET la mise en place de liens dynamiques.
Une fois cette requte reue, le serveur interprte alors le contenu de la page dynamique
appele. Cette page contient des requtes vers une base de donnes dont les rsultats
dpendent des paramtres dj dnis. La page va donc chercher dans cette base les
textes et autres lments inclure dans la page (voir Figure 3.3). Le serveur runit
ensuite la page dynamique et les donnes provenant de la base de donnes an de crer
une page HTML classique.
Une fois cette page ralise, elle est envoye au navigateur an dtre afche sur votre
ordinateur comme une page classique. Le prochain appel une page dynamique provo-
quera les mmes requtes et mcanismes sur le serveur.
La technologie PHP en dtail
PHP nest en fait quun langage de cration de sites dynamiques parmi dautres. Dans
la mme famille de langage, on peut citer lASP (Active Server Pages), dvelopp par
Figure 3.3
Le serveur est trs sollicit lors de laffichage des pages dun site dynamique.
DVD
ROM
Visiteur Serveur
web
Demande de la page
Rendu de la page demande
Serveur
de base de
donnes
Requte des lments dynamiques
Donnes inclure dans la page
Microsoft, le JSP (JavaServer Pages), dvelopp par SUN, ou encore ColdFusion, proprit
de Adobe.
Prsentation gnrale
PHP (acronyme rcursif de PHP Hypertext Preprocessor) est la dernire technologie de
dveloppement de sites web dynamiques arrive sur le Net, mais pourtant pas la moin-
dre. Fond sur la licence GNU et donc totalement gratuit, PHP est, avec lASP, le
langage dynamique le plus utilis au monde. Il sagit comme lASP dun langage de
programmation part entire, hrit des C/C++.
Trs rpandu dans le monde de lhbergement Internet, PHP offre lavantage de pou-
voir fonctionner aussi bien sur une architecture Windows que sur Unix/Linux. Il vous
laisse donc le choix entre un grand nombre dhbergeurs pour laccueil de votre site
web. La cration dun environnement de dveloppement PHP sous Windows est gran-
dement facilite par la vivacit du monde du logiciel libre. En effet, une foule de pro-
grammes comprenant un serveur Apache, un interprteur PHP et un environnement de
base de donnes type MySQL sont disponibles sur Internet.
La mise en place dun environnement de dveloppement en PHP laide de WampServer 2.0 est
dtaille plus loin dans ce chapitre.
Si vous souhaitez consulter la documentation la plus complte possible sur PHP, le site
ofciel est tout indiqu : http://www.php.net (voir Figure 3.4).
PHP dans vos pages
Mais, concrtement, quoi ressemble du code PHP, une fois quil est intgr dans une
page ? Prenons un exemple trs simple, un code PHP uniquement destin afcher un
texte dans une page HTML. Le code source, tel quil sera interprt par le serveur,
ressemble cela :
<html>
<head>
<title>Premier script PHP</title>
</head>
<body>
<? print(Date("l F d,Y"));?>
</body>
</html>
Ce script PHP trs simple se contente dafcher la date actuelle sur la page, et rien
dautre. Comme vous pouvez le constater, le code PHP, modlis entre les balises
<? ?> ou <? php?>, sintgre parfaitement lintrieur des balises HTML classi-
ques. Il vous est donc inutile de coder en PHP lafchage entier dune page, contentez-
vous dutiliser ce langage de programmation pour dnir les lments dynamiques de
vos pages (dates, textes issus dune base de donnes), et conservez les bonnes vieilles
techniques du HTML pour le reste de la page !
Mme si la connaissance du HTML nest pas indispensable pour mener bien votre projet de
boutique en ligne, il peut se rvler trs utile pour vous de connatre les bases de ce langage.
Vous trouverez une dfinition de la norme HTML officielle sur le site du W3C (World Wide Web
Consortium, organisme charg de dfinir les standards utiliss sur le Net) la page suivante :
http://www.w3.org/MarkUp/.
Bien entendu, une majorit des commandes PHP que vous allez utiliser dans la suite de
cet ouvrage va tre directement rdige par Dreamweaver. Il est toutefois possible que,
pour certaines tches bien prcises, il soit plus rapide dutiliser un programme entire-
ment ralis la main quutiliser des codes prdnis par Dreamweaver. Dans ce cas,
vous trouverez dans ce livre le code en question et la manire dont il convient de linsrer
dans la page laide de Dreamweaver.
Figure 3.4
Le portail de PHP : http://www.php.net.
Si vous souhaitez malgr tout en savoir plus sur le langage PHP, sa syntaxe et ses possi-
bilits avances, sachez que de trs bons sites francophones existent pour expliquer ce
langage. Tels PHPFrance (http://www.phpfrance.com, voir Figure 3.5) ou PHPIndex
(http://www.phpindex.com).
Gardez en tte que, dans une page web, le code PHP est toujours encadr de balises <? et ?> ou
<?phpet ?>.
La version 5.0 de PHP est disponible depuis la n de lanne 2004. Elle est dsormais
adopte comme un standard par la majorit des crateurs de site. Parmi les nouveauts,
on en retiendra trois particulirement importantes, mme si leur impact sera limit dans
la cration de votre boutique en ligne :
Implmentation de SQLite. SQLite est un systme de gestion de base de donnes
embarqu directement dans PHP. Il permet pour des applications simples de se
dfaire de la contrainte dun serveur de base de donnes part entire. Avec cette
volution, on notera dailleurs que le support de MySQL est dsactiv dans la con-
guration par dfaut de PHP 5.
Figure 3.5
www.phpfrance.com, une bonne initiation au langage PHP.
Implmantation de SimpleXML. Le format XML devenant omniprsent sur le
Web et dans les systmes de gestion de contenu, PHP 5 intgre dsormais un
module de traitement et danalyse des donnes au format XML trs puissant.
Nouveau modle POO. Le modle Orient Objet, larchitecture mme du langage
PHP, a t fortement remani an dtre plus rapide et plus efcace. Bien entendu,
larchitecture de PHP 4.0 est toujours interprte par cette nouvelle version et la majo-
rit des scripts dvelopps dans les versions prcdentes reste valable pour PHP 5.
Avec Adobe Dreamweaver CS4 vous naurez pratiquement pas toucher au code PHP
de votre site. Mais gardez lensemble de ces rfrences en tte, elles vous seront utiles
si vous souhaitez ajouter des fonctionnalits avances votre site e-commerce par la
suite. Dreamweaver est limit pour la programmation et ne vous empchera pas de
temps autre de coder.
Les bases de donnes MySQL
Aussi puissant que soit PHP, il ne peut pas tout faire sur un site web ! Pour afcher un
prix, un titre ou un nom dauteur sur une page, il faut bien que linformation correspon-
dante soit stocke quelque part. Et ce quelque part, dans votre site, va tre une base de
donnes de type MySQL.
Pour les non-initis, voici une dnition sommaire dune base de donnes : elle permet
de stocker des informations de manire ordonne et structure. Une base est ainsi com-
pose de plusieurs tables, elles-mmes composes de colonnes et denregistrements,
une colonne correspondant un type dinformation et un enregistrement, une entit
prcise. Ainsi, dans le cadre de notre librairie en ligne, on peut imaginer quune table
contiendra lensemble des livres disponibles dans la boutique. Chaque enregistrement
correspondrait un livre en particulier, chaque colonne, une information prcise sur
ce livre, comme son titre, le nom de son auteur ou encore son prix (voir Figure 3.6).
Linformation ainsi stocke devient trs facilement rcuprable : pour connatre lauteur
dun livre, il suft de connatre le titre de ce dernier et de savoir que cest le nom de
lauteur que lon recherche. En croisant ces deux critres, linformation devient vidente.
Bien entendu, cette description est trs schmatique et, dans la pratique, une base de
donnes est bien plus complexe quun simple tableau. Il est en effet possible de raliser
des liaisons entre plusieurs tables, doptimiser les recherches, etc. Vous en dcouvrirez
bien plus sur les bases de donnes dans le chapitre suivant, o il sera question de crer
la base de donnes complte ncessaire la cration de votre boutique. Les notions plus
avances dindex ou de cls primaires seront abordes ce moment.
Dans cet ouvrage, vous allez utiliser une base de donnes de type MySQL. Il sagit
du type de base de donnes le plus souvent associ au langage PHP (voir Figure 3.7).
Il offre en outre lavantage dtre disponible chez la plupart des hbergeurs profession-
nels et dtre administrable directement par une interface web, grce des programmes
Figure 3.6
Une base de donnes
avec une structure trs
simple.
Figure 3.7
MySQL, le systme de base de donnes le plus souvent associ PHP.
comme phpMyAdmin (http://www.phpmyadmin.net) ou eSKueL (http://
www.phptools4u.com/scripts/eskuel/). Vous trouverez plus de renseignements sur ce
systme de base de donnes sur son site ofciel : http///www.mysql.com.
Dernire brique, un serveur Apache
PHP et MySQL ne pourraient pas fonctionner sil ny avait derrire eux un serveur
web. Un serveur, cest--dire un programme excut en permanence sur un ordinateur
et charg uniquement de rpondre aux requtes reues depuis les ordinateurs ext-
rieurs. La nature de la rponse formule dpendra en fait du type de serveur mis en
place.
Dans le cas dun serveur web, son rle est bien dni : envoyer via le protocole http des
chiers (pages web, images, sons) demands par diffrents clients par leur navi-
gateur. Pour votre site, sa tche va se compliquer. Il devra galement gnrer automati-
quement des pages HTML comprhensibles par les navigateurs des internautes laide
de scripts PHP et de donnes issues dune base MySQL.
Le serveur utilis est de type Apache. Il sagit dun systme de serveur libre et open-source
dvelopp par The Apache Software Foundation (http://www.apache.org, voir Figure 3.8).
Figure 3.8
The Apache Software
Foundation gre
lensemble des projets
de dveloppement
du serveur web
Apache.
Avec Microsoft IIS, il est le serveur web le plus utilis. Sa gratuit, le dynamisme de
sa communaut, son cot rduit en fait lun des systmes de choix pour les petits et
moyens projets, pour les systmes dhbergement mutualiss destins aux petites entre-
prises, et pour lhbergement et le dveloppement de votre boutique en ligne.
Vous allez dcouvrir comment mettre en place un serveur de dveloppement sur votre
ordinateur. Le but de ce serveur nest pas de fournir des informations des ordinateurs
extrieurs. Il simule le fonctionnement dun vritable serveur an que vous puissiez
dvelopper votre boutique en ligne dans les meilleures conditions possibles.
Installation de WampServer 2.0 sur un systme Windows
Pour dvelopper en toute srnit un site utilisant la technologie PHP, il vous faut met-
tre en place un serveur de dveloppement sur votre ordinateur. En effet, comme vous
venez de le voir, PHP est un langage interprt qui a besoin dun serveur spcique an
de pouvoir sexcuter. Hors de question donc de visualiser vos pages laide dun simple
navigateur Internet, comme vous le feriez avec des pages HTML classiques.
La solution pourrait alors tre dutiliser votre futur service dhbergement, qui, lui, sup-
porte le langage PHP. Cest bien entendu possible, mais cela peut vite se rvler fasti-
dieux ! En effet, mme si lutilisation de Dreamweaver pour la cration de vos scripts
rduit fortement les risques derreur dans ceux-ci, il vous faudra tout de mme tester
rgulirement vos pages an dtre sr dobtenir le rsultat escompt. Ce qui veut dire,
avant chaque vrication, transfrer vos pages chez votre hbergeur. La manipulation
risque de devenir vite pnible Imaginez que vous souhaitiez juste rgler lalignement
dune image ou dun texte : vous devriez procder une connexion avant chaque visua-
lisation !
Non, la solution la plus efcace est de mettre en place chez vous, sur votre ordinateur de
dveloppement, un serveur capable dinterprter le langage PHP, de stocker votre base
de donnes et donc dexcuter lensemble des programmes ncessaires votre site web.
Un serveur de dveloppement Apache/PHP/MySQL complet.
Prsentation et tlchargement
La mise en place dun serveur Apache compatible PHP et MySQL sur une machine de
type Windows ne pose dsormais plus de problme. Il existe sur Internet des packages
complets qui comprennent la fois un serveur Apache, un interprteur PHP et un ser-
veur de base de donnes MySQL. Ils sont trs simples installer sur nimporte quelle
version de Windows. Pour mettre en place votre serveur de dveloppement, vous allez
utiliser lun de ces packages.
Parmi les plus connus et les plus faciles demploi, on peut citer EasyPHP, disponible sur
http://www.easyphp.org, ou WampServer 2.0 (voir Figure 3.9), disponible quant lui
sur http://www.wampserver.com. Cest ce dernier que vous allez utiliser ici.
Tlchargez donc WampServer 2.0 sur son site ofciel, dans sa version Windows, et
prparez-vous linstaller.
Si vous disposez dun Mac, vous navez pas besoin dinstaller Apache. Le serveur web est livr avec le
systme OS X. Il vous suffira de lactiver en vous rendant dans la section Partage des Prfrences systme.
L, vous pourrez lancer Apache en activant tout simplement le Partage Web personnel.
Installation de WampServer 2.0
Une fois WampServer 2.0 tlcharg, son installation sur votre ordinateur ne prendra
que quelques minutes :
1. Double-cliquez sur le programme WampServer2.0a.exe que vous venez de tl-
charger. Linstallation du serveur dbute aussitt.
Figure 3.9
WampServer 2.0
est un serveur Apache
cl en main.
Lensemble des tapes qui suivent est ralis avec la version 2.0a de WampServer. lheure o vous
lirez ce livre et mettrez ces diffrentes tapes en application, une nouvelle version du logiciel sera
peut-tre disponible. Ces fonctionnalits auront probablement sensiblement volues, mais les princi-
pales fonctionnalits utilises ici resteront les mmes.
Attention, WampServer 2.0 ne peut en aucun cas servir de mise jour aux versions prcdentes de
Wamp5. Si vous possdiez dj un serveur de type Wamp sur votre ordinateur, prenez soin den sau-
vegarder les donnes (en copiant le dossier www de celui-ci et en exportant sa base de donnes
laide de MySQL) et de le dsinstaller avant de procder linstallation de WampServer 2.0.
2. Cliquez sur le bouton Next aprs les recommandations dinstallation prsentes sur
le premier cran, puis acceptez les conditions dutilisation du logiciel (I accept the
agreement).
3. Slectionnez le dossier dinstallation de WampServer 2.0. Par dfaut, celui-ci est
c:\wamp, mais libre vous den choisir un autre (voir Figure 3.10).
4. Choisissez ensuite si licne de lancement de Wamp doit apparatre dans la barre de
lancement rapide et sur le bureau de Windows. Cochez vos options. Un clic sur le
bouton Next et le rsum des options dinstallation safche alors. Cliquez une fois
encore sur le bouton Newt pour que linstallation dmarre effectivement.
5. Il reste quelques dtails de conguration. WampServer vous propose tout dabord
de dnir le navigateur par dfaut qui sera lanc lors de vos accs linterface
du serveur. Il sagit en gnral du navigateur que vous avez dj slectionn en
tant que prfrence dans Windows. WampServer vous demande ensuite les coor-
donnes de votre serveur mail ainsi que ladresse de lexpditeur de vos messages
Figure 3.10
O allez-vous installer
WampServer 2.0 ?
(voir Figure 3.11), au cas o vous intgreriez des fonctionnalits mail dans vos
dveloppements. Prcisez alors les coordonnes habituelles de votre bote mail.
6. Une fois linstallation termine, WampServer 2.0 dmarre automatiquement. Il est
immdiatement accessible via les icnes de la barre des tches de Windows.
WampServer 2.0 est architectur autour dun serveur PHP 5.0. Il se peut que vous rencontriez quel-
ques problmes en utilisant des scripts PHP 4 sur votre serveur de dveloppement. Pensez toujours
vrifier les versions compatibles de vos scripts avant de les insrer sur votre site.
Mise en marche des serveurs
Lorsquil est en cours dexcution, WampServer est prsent dans la barre des tches de
Windows, sous la forme dune petite icne en bas droite (voir Figure 3.12).
Cest depuis cette icne que vous pouvez accder lensemble des commandes du ser-
veur. Dun simple clic gauche, vous droulez un menu de commandes assez complet
(voir Figure 3.13).
Figure 3.11
WampServer a besoin
de vos coordonnes mail
pour finaliser sa confi-
guration.
Figure 3.12
Votre serveur est en cours
dexcution.
WampServer 2.0 est scuris dans sa configuration par dfaut. Les accs votre serveur de dvelop-
pement ne sont autoriss qu partir de la machine o ce serveur est en cours dexcution. Cette limi-
tation est symbolise par un petit cadenas sur licne dexcution de WampServer dans la barre des
tches de Windows. Si vous souhaitez donner accs au serveur sur lensemble de votre rseau local,
vous devrez slectionner la commande Put online dans le menu principal de WampServer. Le cadenas
disparat alors de licne et le serveur devient accessible sur les autres ordinateurs de votre rseau,
simplement en saisissant ladresse IP de lordinateur de dveloppement dans un navigateur Internet.
Vous pouvez ainsi effectuer les principales oprations ncessaires la maintenance de
votre serveur Apache :
Pour le redmarrer. Par exemple en cas de changement de sa conguration, utilisez la
commande Apache/Service/Restart Service.
Pour redmarrer le service MySQL. Utilisez la commande MySQL/Service/Res-
tart Service. De la mme faon, vous pouvez interrompre ces services laide des
commandes Apache/Service/Stop Service et MySQL/Service/Stop Service.
Pour accder la conguration HTTP. Utilisez la commande Apache/httpd.conf.
Le chier de conguration du serveur souvre alors dans le Bloc-Notes de Win-
dows. Dautres chiers de conguration sont accessibles de la mme faon dans le
sous-menu Cong les.
Pour accder la page daccueil. Slectionnez la commande Localhost.
Pour accder loutil de gestion de votre base de donnes. Slectionnez php-
MyAdmin.
Figure 3.13
Les diffrentes commandes
de votre serveur Wamp-
Server.
Dautres commandes sont bien entendu disponibles, mais celles-ci ne vous seront gure utiles dans la
gestion quotidienne de votre service de dveloppement. Pour en savoir plus, un petit tour sur laide
en ligne de WampServer 2.0 est le bienvenu. Cette aide est disponible dun clic droit sur licne du
serveur en slectionnant la commande Help File. Libre vous galement de demander un peu daide
sur la FAQ officielle du site (http://www.wampserver.com/faq.php) ou sur le forum officiel du
serveur : http://www.wampserver.com/phorum/list.php?f=1 (voir Figure 3.14).
Configuration de lenvironnement de dveloppement
WampServer 2.0 est install sur votre ordinateur, mais cela ne veut pas dire que linstal-
lation de votre serveur de dveloppement soit termine. Il vous faut encore congurer
correctement celui-ci. En effet, pour que vous ayez le moins de problmes possible
lors de la mise en ligne de votre boutique, il faut que votre serveur de dveloppement
ressemble au maximum votre hbergement nal. Nom des bases de donnes, iden-
tiant et mot de passe de ladministrateur tous ces paramtres doivent tre per-
sonnaliss an de correspondre votre futur hbergement. Ainsi, une fois votre site
diffus dans sa version nale, aucun changement ne sera ncessaire pour le rendre op-
rationnel.
Figure 3.14
Les forums de Wamp
rpondront bien
des questions.
Nommage de la base de donnes
Commencez donc par vous assurer du nommage de votre base de donnes.
Cliquez sur licne dactivation de WampServer 2.0, prsente dans la barre des tches
de Windows, et slectionnez la commande phpMyAdmin. Il sagit du gestionnaire de
base de donnes install par dfaut avec WampServer 2.0. Ce logiciel va vous permet-
tre, tout moment, de travailler sur votre base de donnes et dy dnir de nouveaux
utilisateurs, bases, tables phpMyAdmin souvre alors dans votre navigateur par dfaut
(voir Figure 3.15).
Par dfaut, votre serveur Wamp ne contient que deux bases de donnes : mysql et
information_schema qui sont utilises pour la gestion de votre serveur de base de donnes.
vitez le plus possible de toucher aux bases mysql et information_schema. Elles sont utiles au bon
fonctionnement du serveur, et la moindre altration de leurs donnes peut provoquer une panne de
celui-ci. phpMyAdmin possde une interface permettant de modifier chacun des paramtres de votre
serveur de base de donnes. Prfrez donc lutilisation de cette interface aux manipulations directes
des bases de configuration !
Figure 3.15
phpMyAdmin,
linterface de gestion
des bases MySQL
la plus rpandue.
Vous allez crer une nouvelle base MySQL sur votre serveur de dveloppement. La mani-
pulation est simple :
1. Sur la page daccueil de phpMyAdmin, saisissez le nom de votre nouvelle base de
donnes dans le champ Crer une base de donnes, prsent au centre de lcran.
Ce nom doit correspondre au nom de la base dni chez votre hbergeur.
2. Une fois le nom saisi, cliquez simplement sur le bouton Crer (voir Figure 3.16)
pour que la base soit effectivement cre.
3. La nouvelle base de donnes est alors disponible dans la navigation principale de
phpMyAdmin. Vous pouvez la consulter laide du menu droulant disponible dans
la colonne de gauche de linterface. Votre nouvelle base apparat au milieu des
autres (voir Figure 3.17).
Figure 3.16
Crez votre nouvelle base
de donnes.
Figure 3.17
Votre nouvelle base
de donnes a t cre
avec succs.
Dfinition des utilisateurs
Une fois votre nouvelle base de donnes dnie, il vous faut crer un utilisateur ddi
cette base. La cration de cet utilisateur rpond un but simple : pour accder la base
de donnes prsente chez votre hbergeur, vous disposez dun identiant de connexion
et dun mot de passe bien prcis. Il vous faut possder exactement les mmes identiant
et mot de passe sur votre serveur de dveloppement. Et ce an de faciliter la mise en
ligne de votre boutique, une fois son dveloppement termin.
Pour crer votre nouvel utilisateur, revenez la page daccueil de phpMyAdmin laide
de licne Accueil (en forme de maison), situe en haut de la colonne gauche du logiciel.
Puis :
1. Sur la page daccueil de phpMyAdmin, cliquez sur le lien Privilges, se trouvant
dans le menu central le plus gauche, le septime lien. La liste de tous les utilisateurs
dj dnis apparat alors (voir Figure 3.18).
2. Cliquez sur le lien Ajouter un utilisateur, prsent en dessous de la liste des utilisateurs
existant. Une nouvelle page se charge alors qui contient le formulaire de cration
des utilisateurs MySQL.
3. Dans ce formulaire, slectionnez Local dans la liste droulante Serveur. Lutilisa-
teur que vous allez crer va en effet accder au serveur MySQL depuis lordinateur
qui hberge celui-ci (voir Figure 3.19).
La plupart des hbergeurs PHP/MySQL ne permettent laccs la base de donnes lie lespace
dhbergement quen local. Cest--dire partir de cet espace dhbergement lui-mme. Cest pourquoi
votre serveur de dveloppement est configur de cette faon galement.
Figure 3.18
Voici les utilisateurs
SQL existant dj.
4. Saisissez ensuite un nom dutilisateur dans le champ Nom dutilisateur et le mot de
passe associ dans le champ Mot de passe. Ces deux paramtres doivent correspondre
exactement ceux fournis par votre hbergeur !
5. Conrmez ce mot de passe dans le champ Entrer nouveau. Conservez ces infor-
mations, vous en aurez besoin lors de la conguration de vos accs la base de donnes
dans Dreamweaver. Ne cliquez pas sur Gnrer.
6. Dans le bloc doption Base de donnes pour cet utilisateur, cochez la case Donner
les privilges passe-partout ("%") an que ce nouvel utilisateur puisse accder
lensemble des bases de donnes de votre serveur de dveloppement. Mme si ces
droits ne sont pas totalement identiques sur votre hbergement nal, vous gagnerez
en souplesse dutilisation en choisissant cette option.
7. Cochez ensuite lensemble des cases correspondant la dnition des privilges de
lutilisateur. Vous donnerez ainsi votre nouvel utilisateur lautorisation deffectuer
nimporte quelle opration sur votre base de donnes.
Utilisez le lien Tout cocher prsent en haut de la liste pour gagner un peu de temps.
Figure 3.19
Le formulaire de cration
des utilisateurs MySQL.
8. Une fois lensemble de ces paramtres dni, cliquez sur le bouton Excuter, prsent
en bas du premier formulaire.
Le nouvel utilisateur est alors cr avec succs. An quil soit actif, il vous faut remettre
jour les droits du serveur MySQL. Pour cela, cliquez sur longlet Privilges sur la
page de conrmation de cration de lutilisateur puis slectionnez le lien Recharger les
privilges, tout en bas de la page, pour mettre jour votre serveur (voir Figure 3.20).
Une fois base de donnes et utilisateur dnis, votre serveur de dveloppement devrait
dsormais tre identique celui disponible chez votre hbergeur.
Cration du rpertoire de dveloppement
Dernire tape : la cration du rpertoire de dveloppement. Vous allez crer, dans le
dossier racine de votre serveur, un nouveau dossier qui contiendra lensemble des pages
et chiers utiliss par votre site web. Pour cela, rendez-vous simplement, laide de
lexplorateur de Windows, dans le dossier racine de votre serveur (c:\wamp\www\ dans
la conguration par dfaut de WampServer 2.0) et crez-y un dossier reprenant le nom
de votre projet, par exemple c:\wamp\www\maboutique\.
Cration du profil de site dans Dreamweaver CS4
Votre serveur de dveloppement est en place, vous voil maintenant prt crer un prol
de site dans Dreamweaver CS4.
Prsentation rapide de Dreamweaver
Adobe Dreamweaver est le logiciel leader de la cration graphique de sites web depuis
quelques annes. Mis au point en 1998 par la socit amricaine Macromedia, rachete
en 2004 par Adobe, ce programme est au dpart un simple diteur HTML Wysiwyg.
Figure 3.20
Pensez recharger les
privilges de votre serveur
afin que votre nouvel
utilisateur soit valide !
Il est utilis pour la cration graphique de sites web, et la gnration automatique du
code HTML partir dlments visuels. La cration dun site basique laide de
Dreamweaver ne demande pas plus de connaissances techniques que la rdaction dune
lettre dans un traitement de texte comme Microsoft Word.
Au cours des annes, ses fonctionnalits de base ont fortement volu. On trouve dsor-
mais lensemble des fonctions indispensables la cration dun site web moderne.
Depuis sa version 2.0, Dreamweaver permet la gnration automatique de programmes
JavaScripts qui ajoutent beaucoup dinteractivit. Depuis sa version MX, on peut gale-
ment crer des sites web dynamiques architecturs autour de langage serveur tels PHP,
ASP, JSP ou ColdFusion.
Adobe Dreamweaver CS4, sorti en 2008, est en ralit la dixime version du logiciel
disponible pour le grand public. Cest laide de cette version que vous allez raliser
votre boutique en ligne dans les chapitres qui vont suivre.
Lassistant Profil de sites
Dans Dreamweaver, le prol de site vous permet de regrouper plusieurs pages comme
faisant partie dun mme site. Ainsi, vous dveloppez non pas plusieurs pages spares
sans rapport entre elles mais un site complet o chacune des pages est lie une autre
de faon logique.
Cette faon de fonctionner apporte bien des avantages : plus besoin de vous inquiter sur la
faon de lier les pages entre elles, Dreamweaver peut construire lui-mme lensemble
des liens prsents lintrieur dun mme site. Il devient de la mme manire vident
de "mutualiser" des procdures qui seront utiles pour chacune des pages du site, comme
la connexion la base de donnes ou la cration dune barre de navigation. Ces l-
ments peuvent tre communs tout le site et ntre ainsi dvelopps quune seule fois
pour toutes.
Les inconvnients et les contraintes poss par lutilisation dun prol de site sont en
contrepartie bien maigres : obligation de travailler sur un mme espace sur votre ser-
veur de dveloppement et de possder tous vos chiers (pages, mais galement images,
vidos) cet endroit.
Pour mettre en place ce prol, Dreamweaver CS4 propose un assistant complet (appel
mode lmentaire). Pour crer un nouveau prol de site, vous pouvez choisir loption
Crer > Site Dreamweaver dans le panneau de dmarrage de Dreamweaver ou slec-
tionner la commande Site > Grer les sites dans le menu principal de Dreamweaver et
cliquer sur le bouton Nouveau > Site dans la bote de dialogue qui apparat.
La fentre Dnition du site souvre alors (voir Figure 3.21).
La premire tape consiste donner un nom au prol de site que vous souhaitez crer.
Le plus simple est dutiliser ici le nom du site en question. Renseignez pour cela le
champ Comment voulez-vous appeler votre site ? avec ce nom et ladresse que vous
allez utiliser pour lhbergement de votre boutique en ligne, puis cliquez sur le bouton
Suivant.
Localisation du serveur de dveloppement
Les prochaines tapes de la cration du prol concernent exclusivement la cration de
sites dynamiques. Elles consistent prciser le type de technologie de cration de sites
dynamiques que vous allez utiliser, ainsi qu localiser les serveurs de dveloppement
et lemplacement denregistrement des chiers.
1. Cochez la case Oui, je veux utiliser une technologie de serveur an dinformer Dream-
weaver que vous souhaitez mettre en place un site dynamique. Puis slectionnez
Figure 3.21
Premire tape
de la dfinition dun site.
PHP MySQL dans la liste droulante Quelle technologie de serveur ? qui apparat
alors (voir Figure 3.22). Cliquez sur le bouton Suivant pour continuer la dnition
de votre prol de site.
2. Localisez prsent le serveur de dveloppement. Cochez la case Modier et tester
localement (mon serveur dvaluation est situ sur cet ordinateur) (voir
Figure 3.23). De cette faon, la cration et la prvisualisation de vos pages se feront
au mme endroit. Aucun transfert ne sera ncessaire avant de vous assurer que vos
pages sont correctement conues.
3. Prcisez ensuite le chemin de votre espace de dveloppement sur votre disque dur
dans le champ O voulez-vous stocker les chiers sur votre ordinateur ? Il sagit du
dossier www situ dans le dossier dinstallation de WampServer 2.0 sur votre ordi-
nateur.
Vous pouvez vous aider du bouton Parcourir, prsent sur la droite du champ texte,
pour localiser prcisment le dossier de dveloppement sur votre poste de travail.
Une fois cela fait, cliquez sur le bouton Suivant.
Figure 3.22
Toutes les technologies
disponibles dans Dream-
weaver sont l !
Deux autres options sont disponibles quant la localisation du serveur de test.
Modifier localement, puis tlcharger vers le serveur distant dvaluation signifie que
vous souhaitez crer vos pages sur votre machine de travail mais que le test de ces pages se fera sur
un serveur distant (votre hbergeur, par exemple). Cette solution nest utilisable que si vous disposez
dun serveur de dveloppement sur votre ordinateur et que votre base de donnes ne soit disponible
quune fois en ligne.
Modifier directement sur le serveur distant dvaluation laide du rseau local signifie
que vos fichiers de travail, ainsi que votre serveur de dveloppement, sont localiss sur un autre ordi-
nateur accessible depuis votre rseau local. Vos pages seront donc cres directement sur cette
machine distante, et les tests des contenus dynamiques seffectueront eux aussi depuis cet ordinateur.
4. Saisissez maintenant dans le champ Quelle URL voulez-vous utiliser pour naviguer
jusqu la racine de votre site ? ladresse daccs votre serveur de dveloppement
(voir Figure 3.24). Avec WampServer 2.0, cette adresse commence par http://local-
host/, suivi du nom du dossier de dveloppement que vous venez de crer (par
exemple http://localhost/maboutique/ sans oublier le / nal). Si le serveur de test
Figure 3.23
O se trouve votre serveur
de dveloppement ?
est distant, il sagira alors de ladresse de ce serveur distant, suivie ventuellement
de quelques dossiers.
Vous pouvez utiliser le bouton Test de lURL, aprs vous tre assur que votre serveur
est bien en cours dexcution, an de vrier que ladresse saisie soit accessible. Si
cest le cas, une bote de dialogue portant le message Le test du prxe dURL a russi
apparatra (voir Figure 3.25). Dans le cas contraire, le message afch est : Dream-
weaver ne peut utiliser le prxe saisi pour afcher les donnes dynamiques Ceci
peut signier que vous avez effectu une erreur lors de la saisie de ladresse ou que
votre serveur de dveloppement nest pas en cours dexcution. Si votre serveur nest
pas en cours dexcution, cela signie que Wamp nest pas lanc ou que les serveurs
sont teints. Pour ce dernier cas, il vous suft de cliquer sur licne de Wamp puis sur
Restart All Services
Le plus simple pour sassurer de cette adresse reste de la saisir dans un navigateur Internet aprs stre
assur que le serveur est en cours dexcution.
Figure 3.24
Dfinissez prsent la
faon daccder votre
serveur de dveloppement.
Connexion au serveur distant
Les dernires tapes de la cration du prol de site concernent la connexion votre service
dhbergement. Ces diffrents paramtres permettront Dreamweaver de se connecter
votre serveur distant an de publier, le moment venu, vos chiers chez votre hbergeur ;
et, ainsi, rendre disponible votre boutique tous !
1. Choisissez le mode daccs au site distant (voir Figure 3.26). Dreamweaver permet
la connexion un site en utilisant les technologies RDS, WebCAV ou SourceSave.
Figure 3.25
Votre serveur de dvelop-
pement existe rellement.
Figure 3.26
Les paramtres
dune connexion FTP.
Mais les solutions les plus frquemment utilises sont la connexion via FTP et via
le rseau local. Dans le premier cas, vous devrez fournir ladresse du serveur FTP,
votre nom dutilisateur et votre mot de passe ainsi que le chemin denregistrement
du site. Dans le cas dune connexion via le rseau local, Dreamweaver demande
simplement le chemin daccs du site via ce rseau.
En cas de connexion FTP, Dreamweaver vous donne la possibilit de tester les paramtres de connexion
fournis laide du bouton Tester la connexion. Vous gagnerez du temps et ne commencerez pas
travailler avec un site distant inaccessible.
2. Prcisez ensuite si vous voulez utiliser les possibilits dextraction et darchivage
de Dreamweaver. Ces fonctionnalits sont trs utiles en cas de travail plusieurs sur
un mme site Internet.
Les fonctions darchivage et dextraction, ainsi que lensemble des fonctionnalits de travail en colla-
boration, ne seront pas dtailles dans cet ouvrage. Gardez simplement en tte quelles permettent
de marquer un fichier prcis quand celui-ci est en cours de modification par lun de vos collaborateurs.
Ce marquage vite les interfrences dans le travail collaboratif.
3. Dreamweaver vous rsume ensuite lensemble des paramtres dtermins pour le
site en cours (voir Figure 3.27). Si lun deux est faux, utilisez le bouton Prcdent
jusqu ltape correspondante pour le modier. Si tout est bon, cliquez sur le bouton
Terminer. Le site est alors cr.
La cration du site peut prendre quelques instants si plusieurs fichiers sont dj prsents dans votre
rpertoire local. Dreamweaver cre en effet une mmoire cache contenant toute larborescence du
site afin doptimiser laffichage des cartes du site par la suite.
Une fois le prol de site complet cr dans Dreamweaver, votre serveur de dveloppement
est oprationnel. Il est maintenant temps de vous intresser dun peu plus prs votre
base de donnes.
Figure 3.27
Ces paramtres
sont-ils corrects ?
4
Spcifications et cration
de la base de donnes
Spcification des pages dun site web
Ralisation des maquettes
Dfinition de la structure de la base de donnes
Cration des tables dans phpMyAdmin
Remplissage des tables MySQL
Connexion la base de donnes dans Dreamweaver CS4
Votre serveur de dveloppement est dsormais en place ? Fidle en tout point au service
dhbergement qui abritera votre futur site de commerce en ligne ? Parfait ! Cest donc
le bon moment pour laisser totalement tomber votre clavier et votre ordinateur et de
vous armer dun bon stylo et dune feuille de papier. La prochaine tape de votre travail
va vous demander plus de rexion que de technique. Il sagit de spcier lensemble
des pages de votre site web.
Cette tape de spcication consiste dtailler, le plus possible, lallure et le compor-
tement gnral de votre site web. Quelles sont les pages qui composent ce dernier ?
Quelles sont les informations afches sur chacune de ces pages ? Comment ces pages
sont-elles lies ? Ce sont quelques-unes des questions auxquelles vous allez devoir
rpondre an de pouvoir commencer de manire sereine le dveloppement de votre site
web. En effet, de ces spcications va dpendre lensemble de la structure de votre site
et de la base de donnes qui va lalimenter.
Un exemple simple. Sur la page qui prsente chacun de vos produits, vous allez afcher
le titre du livre prsent, ainsi que son rsum, son prix, sa date de parution et
dautres informations sur louvrage en question. Il semble naturel que toutes ces infor-
mations, relatives un livre prcis, soient trouvables avec le moins de travail possible et
donc rassembles en un seul et mme endroit. Toutes ces informations seront donc logi-
quement enregistres dans une mme table de votre base de donnes. Elles seront ainsi
rcuprables en une seule requte.
Comme vous le voyez dans ce cas, la structure de votre base de donnes dpend direc-
tement des informations que vous souhaitez afcher sur les pages de votre site ; et donc
de spcications prcises. Gardez en tte que, si vous oubliez un dtail dans ces spci-
cations, il se peut que votre base de donnes soit entirement reconstruire ! Ainsi, du
mme coup, toutes les pages que vous auriez pu raliser et qui interrogent cette base.
Cela peut reprsenter beaucoup de temps perdu
Dans ce chapitre, vous allez donc dcouvrir les spcications prcises de votre boutique
en ligne. Celles-ci ne sont pas ges. Libre vous dy apporter vos modications
Mais noubliez pas que ces modications auront un impact sur la structure future de
votre site web et de sa base de donnes !
Pour renouer avec la technique, vous dcouvrirez ensuite comment structurer et
crer la base de donnes qui dcoule de ces spcications et, enn, comment com-
plter votre prol de site Dreamweaver en interfaant celui-ci avec votre base de
donnes.
Spcification des pages dun site web
Mais comment procder ce dlicat travail de spcication ?
Dans le monde du Web, il nexiste pas de mthode ge pour effectuer cette tche,
limportant tant que celle-ci soit scinde en tapes claires. On en distinguera deux
principales :
Dnition de larborescence du site. Premire tape cruciale qui sert dnir la
liste complte des pages qui seront prsentes sur votre site et la faon dont celles-ci
seront lies entre elles. Une fois cette tape ralise, vous devez dj savoir com-
ment vos futurs clients volueront sur le site et galement combien de pages vous
allez devoir crer.
Conception des pages. Dcoulant directement de larborescence, cette tape va
consister dtailler lensemble des lments prsents sur les pages. On y prcise
galement la faon dont ces lments sont afchs : sagit-il de textes issus dune
base de donnes ou de textes xes ? Tous les comportements dynamiques prsents
sur la page doivent aussi tre spcis : laction de chaque bouton, de chaque lien
Cest sans doute le travail le plus long de vos spcications.
53 SPCIFICATIONS ET CRATION DE LA BASE DE DONNES
Arborescence du site
Le site de-commerce que vous allez construire va possder une structure relativement sim-
ple. Cela ne lempchera pas de prsenter aux visiteurs des fonctionnalits avances.
Pour simplier le travail li larborescence du site, on peut diviser celui-ci en trois
parties :
Les pages de catalogue prsentant lensemble des livres disponibles dans la boutique.
Les pages dachat permettant au client de crer un compte sur le site et dy passer
une commande.
Enn, lespace client, permettant celui-ci de revenir une fois une commande
effectue et de vrier ltat de la livraison. On rangera galement dans cette cat-
gorie les pages permettant au client de modier ses coordonnes.
Libre vous dajouter aux spcifications prsentes ci-aprs de nouvelles pages ou fonctionnalits.
Les pages web dcrites dans les sections suivantes constituent uniquement larmature de base dune
boutique en ligne. On peut y adjoindre beaucoup dlments supplmentaires !
Gardez simplement lesprit que la moindre modification ou le moindre ajout ce profil peut entra-
ner dimportantes modifications dans le modle de base de donnes que vous allez dfinir par la
suite. Assurez-vous bien que celui-ci est toujours en cohrence avec le site web que vous souhaitez
crer !
Catalogue
La section Catalogue de votre site nest pas la plus difcile dnir, mais cest lune
des plus importantes, puisquelle doit convaincre vos visiteurs de devenir des clients.
Son organisation est plutt simple :
Depuis la page daccueil de votre boutique, qui prsente plusieurs produits et catgories,
vos futurs clients vont pouvoir accder diverses pages ou sections :
La che directe dun produit, si celui-ci est mis en vidence sur la page daccueil de
votre site.
Un mini-annuaire prsentant des catgories de produits simples, et ce sur deux
niveaux seulement. Dans le cadre de notre librairie en ligne, le premier niveau pour-
rait tre Bureautique, Cration web, Graphisme et le second, Word, Excel, Dream-
weaver, Photoshop.
Une page de rsultat de recherche afchant les diffrents ouvrages trouvs suite
une recherche effectue sur la page daccueil du site.
Une fois ces premiers liens prciss, il convient de dnir galement les liens qui partent
de ces trois pages.
Depuis la che produit, on pourra accder plusieurs autres pages : revenir la
page daccueil, afcher lensemble des ouvrages crits par le mme auteur, afcher
lensemble des ouvrages traitant du mme thme (ce qui revient afcher de nouveau
lannuaire sur une section prcise) ou effectuer une nouvelle recherche.
Depuis le mini-annuaire, on pourra accder la che dtaille dun ouvrage. Mais
galement revenir la page daccueil ou rechercher un nouveau produit.
Depuis la page de rsultat de la recherche, les options seront peu prs les mmes :
che dtaille dun livre, page daccueil ou nouvelle recherche.
Enn, depuis la liste des ouvrages dun auteur en particulier, on pourra afcher les
ouvrages en question, revenir la page daccueil ou une fois encore effectuer une
recherche.
Cette navigation, une fois schmatise, donne le rsultat visible la Figure 4.1.
Comme vous pouvez le constater, il est alors possible daccder aux diffrents ouvrages
proposs par la librairie en ligne par une multitude de chemins diffrents : sujet, auteur,
accroches ditoriales directes. Le principal restant que le visiteur trouve toujours
louvrage pour lequel il est venu.
Dautres pages sajoutent celles listes ici : laide en ligne de votre boutique et les dif-
frentes informations lgales ncessaires louverture dun commerce en ligne, par
exemple. Ces pages sont le plus souvent gres de manire xe, crites en HTML simple
et ne ncessitent pas de conception dynamique avance. Cela ne signie pas quelles
Figure 4.1
La structure de la section
Catalogue.
Page d'accueil
Rsultat
de recherche
Annuaire
Description d'un ouvrage
Bibliographie
d'un auteur
doivent tre absentes des spcications. Elles sont simplement laisses de ct dans ce
chapitre et seront abordes de manire plus approfondie au Chapitre 11.
Pour importante quelle soit, la page daccueil de votre site e-commerce ne sera pas aborde en pro-
fondeur dans cet ouvrage. Nous nous attacherons surtout dtailler les mcanismes qui permettent
de crer lensemble des accs aux produits, depuis la recherche jusquaux liens contextuels.
Il existe en effet une multitude de faons de crer une page daccueil pour un site de commerce en
ligne : prsenter uniquement les catgories darticles disponibles, mettre en avant divers articles de
manire alatoire ou en fonction de lactualit, voire concevoir une page daccueil personnalise sui-
vant le profil du client qui sy connecte. Un ouvrage entier serait ncessaire pour parcourir lensemble
de ces possibilits. Inspirez-vous des autres boutiques, parmi les plus connues, pour concevoir la page
daccueil de votre boutique. Et utilisez les conseils techniques de cet ouvrage afin de gnrer des
contenus dynamiques
Pages dachat
Une fois la partie catalogue conue, ltape suivante est de penser le processus dachat
de celle-ci. La logique de ce processus est simple (voir Figure 4.2).
Depuis la page de description dtaille dun ouvrage, vos visiteurs vont pouvoir devenir
des clients et procder lachat dun des livres proposs. Deux options soffrent alors
aux visiteurs :
Sils feuillettent votre catalogue douvrage en tant que simples visiteurs, ils devront
alors sidentier (sils sont dj clients chez vous) ou crer un compte client. Pour
cela, un formulaire de connexion leur sera propos, ainsi quun lien vers la page de
cration des comptes client.
Figure 4.2
Le processus
de commande
de vos livres.
Description d'un ouvrage
Panier
Paiement
Facturation
Validation de
la commande
Cration
d'un compte
Si les visiteurs sont dj connects votre boutique, cest--dire quils ont dj uti-
lis un formulaire de connexion pour remplir leur panier, un lien Acheter sera direc-
tement prsent sur la page de description des ouvrages, permettant lajout direct du
livre au panier. Dautres contrles sont galement effectus au mme moment, an
de sassurer que les clients najoutent pas par inadvertance un mme article plusieurs
fois leur panier. Lensemble de ce processus est dtaill plus loin.
Une fois ces tapes franchies, le client arrivera sur une page de validation de son panier
(contenant lensemble des articles slectionns) et passera ensuite au paiement de sa
commande.
Le processus dachat est aussi simple que cela.
Dans notre exemple de boutique, lensemble des procdures de facturation est sous-trait un ser-
vice externe, de type PayPal ou CyberMut. En effet, la mise en place dune plate-forme de paiement
scurise demande des mthodes et des moyens techniques et financiers qui dpassent largement
les limites de cet ouvrage. Le volume de revenu gnr par une boutique personnelle ne justifie que
rarement ce genre dinvestissement.
Espace client
Lespace client de votre boutique en ligne est des plus simples. Il ne comprendra que
trois pages (voir Figure 4.3) :
Une page daccueil souhaitant par exemple la bienvenue au client sur lespace qui
lui est propre. Cette page sera accessible depuis toutes les pages de la boutique,
aprs un formulaire didentication identique celui utilis lors de lachat dun ouvrage
sur la boutique.
Une page de modication des donnes personnelles permettant au client de
changer dadresse e-mail, dadresse physique ou de numro de tlphone entre
deux commandes.
Une page de suivi des commandes retraant lhistorique des commandes effectues
par une seule et mme personne, quel que soit le statut de ces commandes.
Figure 4.3
Lespace client de votre
boutique tient en trois
pages !
Accueil de l'espace client
Historique des
commandes
Modification des
donnes personnelles
Ces trois pages sont lies entre elles de manire simple : la page daccueil permet
daccder chacune des pages suivantes, celles-ci possdant un lien de retour laccueil
de lespace client.
Outils dadministration
Les quelques pages dcrites dans larborescence ci-dessus sufront faire vivre votre
boutique : vos clients pourront sans problme trouver un ouvrage, le commander et
savoir tout moment si cette commande a bien t expdie. La base dun site de commerce
en ligne !
Reste que vous, en tant que Webmaster de cette boutique, aurez sans doute besoin de
quelques informations complmentaires. Quelles sont les commandes expdier en
urgence ? Combien de clients ont pass une commande aujourdhui ? Quel est le total
de votre chiffre daffaires du jour ? Pour rpondre ces questions, vous aurez
concevoir une interface dadministration trs complte, regroupant toutes ces infor-
mations.
Les interfaces dadministration et de reporting sont souvent les grandes oublies des
spcications de sites web. Elles sont pourtant indispensables la bonne marche dun
site web. Dans le cadre de votre boutique, quelques pages trs simples peuvent sufre :
la liste des commandes passes dans la journe ;
la liste des commandes non encore expdies ;
un formulaire de changement de statut des commandes, an dinformer le client de
son expdition ;
un formulaire dajout, de modication et de suppression douvrages ;
un formulaire dajout de catgories et de sous-catgories lannuaire.
Ces cinq pages sont une base pour linterface dadministration de votre boutique.
Scurit avant tout ! Les pages dadministration ne doivent en aucun cas tre lies au reste de votre
boutique. Elles doivent en revanche tre protges dans leur accs par un mot de passe. Vous serez,
dans tous les cas, le seul accder ces pages !
Spcification des pages
Un petit dessin vaut souvent bien mieux quun grand discours.
Dans les pages qui suivent, vous allez retrouver les spcications prcises de chacune
des pages de votre boutique en ligne. Ces spcications seront prsentes sous la forme
dune maquette rapide de la page sur laquelle chacun des lments sera comment et
dtaill. Vous pourrez ainsi connatre le comportement et le mode dafchage de chacun
des lments de vos pages.
En plus de ces schmas, vous trouverez pour chacune des pages son adresse prcise
dans larborescence. Cette adresse sera rdige de faon absolue, en rfrence
ladresse de la page daccueil. Par exemple, si votre boutique est accessible par lURL
http://www.maboutique.com, la page spcie /espace_client sera physiquement acces-
sible par ladresse http://www.maboutique.com/espace_client.
Noubliez pas que les spcifications de vos pages web doivent dfinir toutes les informations utiles
la cration de celles-ci. Cest--dire les lments dynamiques, les textes, les images, mais galement les
lments invisibles telles les balises <meta> et <title>, qui serviront plus tard au rfrencement de
votre boutique.
Dans les pages qui suivent, ces balises de rfrencement sont dtailles pour chacune des pages du
site. On gardera en mmoire que les donnes crites en italique doivent tre gnres de faon dyna-
mique lors de laffichage de la page en question. Par exemple, titre de louvrage sera remplac par le
titre rel de louvrage dtaill sur la page en question. Dans le mme ordre dide, le terme mabouti-
que.com sera remplacer par le nom rel de votre boutique en ligne.
Catalogue
Les pages de catalogue de votre site sont au nombre de quatre. Sur chacune de celles-ci,
un formulaire de connexion au site est prsent.
Comme prcis plus haut, la page daccueil de votre boutique en ligne ne va pas tre spcifie
dans les pages qui suivent. Diffrents conseils pour la cration de celle-ci seront prsents dans les
chapitres suivants, au fur et mesure de la ralisation de votre boutique en ligne laide de Dream-
weaver CS4.
DESCRIPTION DUN ARTICLE
Vous lavez sans doute dj compris, la page de description dun article est vritable-
ment la page centrale de votre boutique. Cest celle-ci qui doit convaincre votre futur
client dacheter larticle en question. Elle doit donc contenir le maximum dinformations
sur louvrage quelle dtaille (voir Figure 4.4) : titre, auteur, prix, sommaire dtaill et
rsum de luvre sont un minimum.
URL : /detail.php.
<title> : Auteur - Titre : achetez-le sur maboutique.com.
<meta keywords> : Titre, Auteur, Rubrique Annuaire 1, Rubrique Annuaire 2.
<meta desc> : 200 premiers signes du Rsum.
Ces quatres points sont les mta, des informations invisibles aux clients mais qui per-
mettent une gestion des mots cls recherchs par les sites de rfrencement tel Google.
Pour chaque page, ces mta sont expliciter, nous verrons comment le faire au Chapi-
tre 15.
LURL est le lien vers lequel les dtails du livre en question seront publis.
<title> est la mta qui permet de changer le nom de la page sur laquelle se trouve
notre client. Par exemple, ici, le client se trouvant sur le livre Les Misrables de Victor
Hugo, lira en haut de sa page " Victor Hugo Les Misrables : achetez-le sur mabouti-
que.com ".
<meta keywords> regroupe les informations importantes du livre (auteur, titre) et
les rubriques lies cet ouvrage (Rubrique Annuaire 1, Rubrique Annuaire 2)
qui permettront de proposer des liens vers dautres ouvrages similaires ou apparte-
nant la mme rubrique. Ces rubriques seront dnir ultrieurement. De plus,
toujours pour une question de rfrencement, veillez ce que ces champs soient trs
complets.
Figure 4.4
La page de description
dun article contient le
maximum de donnes
sur celui-ci.
ANNUAIRE
Lannuaire se scinde en deux pages, rsumant tous les thmes disponibles dans votre
boutique en ligne (voir Figure 4.5) : la premire page afche un premier niveau darbo-
rescence (grands thmes comme Bureautique, Internet), la seconde dtaille les cat-
gories prsentes sur un thme particulier (Access, Word dans la catgorie
Bureautique).
URL : /annu.php.
<title> : Tous les livres informatiques sont sur maboutique.com.
<meta keywords> : Librairie, Librairie en ligne, Livres informatiques, Ouvrages
informatiques.
<meta desc> : Tous les livres informatiques sont sur maboutique.com.
Une fois une catgorie slectionne par votre visiteur, une page de rsultat apparat,
listant les dix premiers ouvrages traitant du sujet slectionn, afchs par date de paru-
tion (voir Figure 4.6). Si plus de dix ouvrages sont disponibles, une barre de navigation
permet daccder aux dix rsultats suivants sur la mme page.
URL : /listannu.php.
<title> : Trouvez tous les livres sur Rubrique Annuaire sur maboutique.com.
<meta keywords> : Rubrique Annuaire, Librairie, Librairie en ligne, Livres infor-
matiques, Ouvrages informatiques.
<meta desc> : Trouvez tous les livres sur Rubrique Annuaire sur maboutique.com.
Figure 4.5
La page principale de
lannuaire se contente de
lister les catgories dispo-
nibles sur le site.
FICHE AUTEUR
La liste des ouvrages par auteur sapparente la page de dtail dune catgorie
dannuaire. Elle liste simplement les dix premiers ouvrages, par date de parution, crits
par un mme auteur (voir Figure 4.7). De la mme faon, si plus de dix livres sont
disponibles, une navigation spciale permettra de visualiser les dix ouvrages suivants.
URL : /auteur.php.
<title> : Trouvez tous les livres de Auteur sur maboutique.com.
<meta keywords> : Auteur, Librairie, Librairie en ligne, Livres informatiques,
Ouvrages informatiques.
<meta desc> : Trouvez tous les livres de Auteur sur maboutique.com.
Figure 4.6
Le dtail dune catgorie
dannuaire est en fait la
liste des ouvrages dispo-
nibles.
Figure 4.7
La fiche auteur se
compose en fait
dune liste douvrages.
RSULTAT DUNE RECHERCHE
Dernire page de la section catalogue, la page de rsultat de recherche liste les dix
ouvrages selon la date de parution, dont le titre ou le rsum contient les mots cls
recherchs. Elle afche galement les deux catgories dannuaire qui collent la
recherche effectue. Sa structure est donc trs simple, identique aux pages auteur et
annuaire dcrites prcdemment (voir Figure 4.8).
URL : /recherche.php.
<title> : Trouvez tous les livres sur Mot cl sur maboutique.com.
<meta keywords> : Mot cl, Librairie, Librairie en ligne, Livres informatiques,
Ouvrages informatiques.
<meta desc> : Trouvez tous les livres sur Mot cl sur maboutique.com.
Pour chacune des pages que vous comptez ajouter, la ralisation dune maquette dtaille, comme
celles prsentes ci-dessus, est indispensable. Cest le cas galement pour laide ou les sections lgales.
Ces spcifications dtailles seront prsentes au Chapitre 11.
Inscription et commande
Les spcications deviennent cruciales lorsquon touche des pages o le client peut
effectuer une interaction : connexion, cration dun compte, commande. Ici, les pages
doivent tre encore plus dtailles que dans la section catalogue. Elles doivent lister, en
plus des informations classiques, lensemble des cas derreur que le client peut rencontrer :
connexion impossible, donnes non valides lors de linscription. Ce travail de fourmi est
Figure 4.8
Les rsultats dune recher-
che sur votre boutique.
indispensable et doit tre imprativement effectu avant le dbut de ralisation des
pages.
Pour lensemble des pages suivantes, les informations de rfrencement (titre, mots
cls et description) ne seront pas dtailles. En effet, ces sections tant rserves aux
utilisateurs connects, les moteurs de recherche ne pourront pas accder ces pages.
Leur rfrencement est donc bien souvent inutile.
CONNEXION AU SITE
La page de connexion au site permet votre visiteur de se connecter an de passer une
commande, mais galement daccder, par un simple lien, la page de cration de
compte (voir Figure 4.9).
URL : /signup.php.
Un seul message derreur sera ncessaire sur cette page : celui qui illustre lchec de
lidentication sur le site :
La connexion a chou. Veuillez vrifier votre identifiant ainsi que votre mot
de passe.
Le formulaire de connexion votre boutique nest pas seulement disponible depuis une
page spcique de votre site, il sera galement insr sur lensemble des pages de cata-
logue. Ainsi, vos visiteurs pourront se connecter depuis nimporte quelle page an
deffectuer un achat plus rapidement.
Figure 4.9
Lidentification sur votre
boutique tient en deux
champs de formulaire.
CRATION DUN COMPTE
La page de cration de compte se prsente sous la forme dun grand formulaire listant
toutes les donnes indispensables la cration du compte sur votre boutique (voir
Figure 4.10) : e-mail, mot de passe, nom et prnom, adresse physique
URL : /create.php.
Sur ce formulaire, beaucoup derreurs peuvent se rencontrer : adresse e-mail dans un
format non valide, champs obligatoires non renseigns Vous allez devoir trouver un
message derreur prcis dans chacun de ces cas et prvoir son mode dafchage
lcran.
PANIER DU CLIENT
Le panier du client va contenir lensemble des articles en cours de commande, cest--
dire tous ceux qui nont pas encore t valids par le client. Cette page de panier permet
au client de modier la quantit dobjets commands, de modier son panier en y suppri-
mant des ouvrages et surtout de valider sa commande.
La page du panier contient galement une section de conseil dachat : elle afchera en
fonction de la composition du panier une liste dautres articles recommands, choisis
en fonction des paniers dj valids par les clients prcdents (voir Figure 4.11).
URL : /panier.php.
Figure 4.10
Toutes ces informations
sont ncessaires
la cration dun compte
sur votre boutique.
Espace client
Dernire section de votre boutique dont vous devez concevoir les pages : lespace
client. Cette section ne contient que trois pages trs simples raliser.
PAGE DACCUEIL
La page daccueil de lespace client safche ds que le visiteur se connecte votre
boutique. Elle se compose de deux liens (voir Figure 4.12), lun dirig vers la modica-
tion des donnes personnelles du client, lautre, vers le suivi des commandes effectues.
Figure 4.11
Le panier du client saffi-
che simplement sous la
forme dun tableau.
Figure 4.12
Deux liens composent la
page daccueil de lespace
client.
DONNES PERSONNELLES
Le formulaire de modication des donnes personnelles sapparente celui utilis
pour la cration du compte client. Il prsente les mmes champs, mais ceux-ci sont
prremplis par les donnes correspondant au client connect. Le client a ainsi la
possibilit de modier tout moment ses donnes personnelles. Lors de ces ven-
tuelles modications, les contrles de validit sont les mmes que ceux effectus lors
de la cration du compte (voir Figure 4.13). Les mmes messages derreur sont donc
utiliss.
RSUM DES COMMANDES
Le rsum des commandes, enn, se prsente sous la forme dun tableau trs simple
dtaillant la liste de toutes les commandes passes par le client (voir Figure 4.14), le
contenu de celles-ci et leur statut (expdie ou non).
Un clic sur lune de ces commandes permet den afcher le dtail : articles commands,
prix lpoque, statut et date de la commande.
Noubliez pas de concevoir galement, sur le mme modle, les outils dadministration. Sils sont
moins cruciaux ils ne seront en effet utiliss que par vous-mme , il vous faut tout de mme prvoir
lensemble de leurs fonctionnalits.
Figure 4.13
Le formulaire de modifi-
cation des donnes
personnelles est semblable
celui utilis pour la
cration des comptes.
Ralisation des maquettes
Une fois ces spcications prcises ralises, lancez-vous sur ordinateur ! laide de
Photoshop, Fireworks ou de nimporte quel autre logiciel de cration graphique, essayez
de reproduire ces schmas sur cran, en y adaptant la charte graphique de votre choix
(voir Figure 4.15). Cest maintenant que les contraintes techniques vont apparatre.
Figure 4.14
Toutes les commandes
passes par un mme
client.
Figure 4.15
Une premire maquette
avant mme de lancer
un diteur HTML.
Par exemple, noubliez pas que la majorit des internautes utilise encore une rsolution
de 1024 768 pixels voire plus grande pour regarder le rseau. Limitez donc vos pages
750 pixels de large. De la mme faon, essayez de dcouper votre maquette en zones
rectangulaires prcises. Si vous narrivez pas tracer des cadres autour de vos zones de
texte ou de votre navigation, il vous faudra encore faire quelques compromis au niveau
des alignements. La mise en forme en HTML en sera facilite.
Dfinition de la structure de la base de donnes
Le travail de rexion nest pas ni. La ralisation des maquettes graphiques de votre
boutique ntait quun petit intermde avant une plus grosse partie de conception.
Maintenant que vous connaissez lagencement des donnes sur les pages de votre
boutique, vous allez devoir en dduire la structure complte dune base de donnes.
La base de donnes relie votre site dynamique constitue son cur. Tout le contenu du
site est stock dans les tables de votre base, organis de faon logique. Une base de don-
nes est constitue de tables qui sont assimilables des tableaux regroupant les infor-
mations relatives une entit particulire. Par exemple, on peut imaginer que la base de
donnes de la FNAC comprend une table des livres dans laquelle sont stocks la rf-
rence du livre, le titre, lditeur, la collection, lauteur, le prix, le nombre de pages
Ces donnes sont les colonnes ou champs de la table, tandis que chaque ligne corres-
pond un livre (voir Figure 4.16).
Les diffrentes tables sont relies entre elles par des liens logiques qui font quune base
de donnes forme un ensemble cohrent. Une table des diteurs peut par exemple
regrouper les donnes dun diteur. Elle est alors relie celle des livres par linterm-
diaire de la rfrence lditeur qui est faite dans la table des livres. On appelle ces
liens logiques entre plusieurs tables des cls trangres. Elles permettent de lier un livre
et son auteur tout en allant chercher les informations de lauteur dans la table
shop_auteur. Nous verrons ceci plus en dtail au Chapitre 5.
Figure 4.16
Les donnes dune base
se dcomposent en
colonnes et en lignes.
Communication entre le site et la base de donnes
Le site dynamique et la base de donnes communiquent au moyen de requtes qui sont
des demandes dinformation ou des demandes daction envoyes du site vers la base de
donnes. Le langage de communication utilis est le SQL (Structured Query Language),
qui comprend peu dinstructions et qui est intuitif.
chaque chargement dune page dun site dynamique, celui-ci envoie vers la base
de donnes une requte SQL de slection qui permet de rcuprer les donnes
afcher.
La mise jour de la base de donnes se fait de la mme faon. la validation dun for-
mulaire, par exemple, une requte de mise jour envoie les nouvelles donnes vers la
base de donnes.
Conseils gnriques la conception de la base de donnes
Avant de vous lancer dans la ralisation de votre base de donnes, armez-vous dun
papier et dun crayon, et prenez le temps de la concevoir, en gardant lesprit ces quelques
conseils :
vitez la redondance dinformation dune table lautre. Si une donne gure dans
plusieurs tables la fois, vous multipliez les accs inutilement chaque fois que vous
devez la mettre jour.
Les tables et les liens entre celles-ci doivent tre simples et naturels, pour ne pas
obtenir une base de donnes trop complexe. Ne multipliez pas linni vos tables,
et rappelez-vous que plus une base de donnes est complexe, plus elle est difcile
maintenir et utiliser.
Munissez chaque table dune cl primaire, le plus souvent un simple numro, per-
mettant didentier de faon unique chaque ligne de la table. Ces numros qui iden-
tient chaque lment de la base de donnes sont faciles passer en paramtre
dune page une autre. Ils sont gnralement appels id.
Pensez galement que chaque requte envoye vers la base de donnes est coteuse en
temps de rponse. Pensez donc optimiser les accs la base, cest--dire ne pas trop
envoyer de requtes au serveur, minimiser ce nombre de requte.
Un index sur une colonne dune table est un moyen doptimiser les performances des
requtes portant sur cette donne. Lindexation dune colonne dune table acclre les
requtes de slection mais ralentit les requtes de mise jour, car la base de donnes
doit mettre jour son index chaque cration ou suppression denregistrement dans
la table. Najoutez donc des index que sur les colonnes les plus sollicites par vos
requtes.
Base de donnes de la boutique en ligne
En prenant en compte tous les lments dnis ci-dessus, spcications et conseils
thoriques, vous devriez tre capable de crer un modle de donnes optimis pour
Il nexiste bien entendu pas de modle absolu et unique Dans les pages suivantes,
vous trouverez un modle de base optimis pour le type de boutique que nous avons
dni. Libre vous, toutefois, dessayer de concevoir un autre modle si celui-ci vous
semble plus vident.
Dans les tableaux suivants, sont prciss les noms de champs utiliser pour votre base
de donnes, ainsi que les types de format utiliss, avec ventuellement des attributs
spciaux.
Table Livres
La table shop_livres va contenir lensemble des informations relatives un ouvrage en
particulier (voir Tableau 4.1). La table contiendra 10 champs dtaills :
Tableau 4.1 : Structure de la table shop_livres
Champs Type Valeurs Attributs Extra
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
unsigned auto_increment
x Identiant unique
de louvrage
isbn varchar
10 x Numro ISBN de
louvrage, utilis
comme numro
de rfrence
categorie int
11
unsigned
x Identiant de la
premire rubri-
que dannuaire
correspondant
louvrage
sous_categorie int
11
unsigned
x Identiant de la
seconde rubrique
dannuaire
correspondant
louvrage
Attention, par dfaut les champs de type Date des bases de donnes MySQL sont stocks au format
amricain (AAAA-MM-JJ). Vous devrez passer par des scripts de conversions en PHP pour afficher ces
donnes au format europen.
Table Auteurs
La table shop_auteurs contient les informations relatives un auteur en particulier
(voir Tableau 4.2). Elle permettra de grer plus facilement lafchage de la bibliographie
complte dun auteur dans les pages de catalogue de votre boutique.
titre text
Titre de louvrage
prix_ht float
Prix hors taxe de
louvrage
prix_ttc float
Prix toutes taxes
comprises de
louvrage
parution datetime
Date de parution
de louvrage
resume text
Rsum de
louvrage
auteur int
11
unsigned
x Identiant de
lauteur de
louvrage
Tableau 4.1 : Structure de la table shop_livres (suite)
Cl
primaire
Cl
index
Cl
unique
Commentaire
Tableau 4.2 : Structure de la table shop_auteurs
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
de lauteur
nom varchar
64 Nom de lauteur
prenom varchar
64 Prnom de
lauteur
Tables Categories et Sous-categories
Lannuaire thmatique des ouvrages est stock dans deux tables diffrentes :
shop_categories (voir Tableau 4.3) et shop_sous_categories (voir Tableau 4.4). La
premire contient le premier niveau de lannuaire, la seconde, le deuxime niveau.
Chacune des sous-catgories est lie la catgorie principale par un identiant
parent.
Tableau 4.3 : Structure de la table shop_categories
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
de la catgorie
dannuaire
libelle varchar
64 Intitul de la
catgorie
dannuaire
Tableau 4.4 : Structure de la table shop_sous_categories
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant uni-
que de la sous-
catgorie
dannuaire
libelle varchar
Intitul de la
sous-catgorie
dannuaire
parent int
11
unsigned
x Identiant de la
catgorie
dannuaire
parente
Table Clients
La table shop_client va servir stocker lensemble des donnes relatives un client
particulier de votre boutique (voir Tableau 4.5).
Tableau 4.5 : Structure de la table shop_client
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
du client
mail varchar
64 x Adresse e-mail
du client, utilise
comme identi-
ant unique sur le
site
nom varchar
64 Nom du client
prenom varchar
64 Prnom du client
telephone varchar
10 Numro de tl-
phone du client
mdp varchar
32 Mot de passe du
client, informa-
tion crypte avant
son stockage en
base de donnes
ad_ligne1 varchar
64 Premire ligne de
ladresse physi-
que du client
ad_ligne2 varchar
64 Seconde ligne de
ladresse physi-
que du client
ad_cp varchar
5 Code postal de
ladresse physi-
que du client
ad_ville varchar
64 Ville de ladresse
physique du client
Table Panier
La table shop_panier sert stocker, de manire temporaire, lensemble des articles en
cours de commande par un client prcis (voir Tableau 4.6). Elle est lie la table
shop_client par lidentiant de celui-ci et la table shop_livres par le numro ISBN de
louvrage.
Table Commande et Ligne de commande
Une fois une commande effectivement valide, lensemble des articles de la table
shop_panier est transfr dans la table shop_ligne_commande (voir Tableau 4.8), qui
contient tous les articles commands par un client en particulier. Un nouvel enregis-
trement est galement cr dans la table shop_commande (voir Tableau 4.7), qui
contient toutes les donnes gnriques relatives une commande : client, date, tat de
lexpdition Les enregistrements correspondants sont alors supprims de la table
shop_panier an dviter une seconde commande malheureuse du mme client, sur la
mme liste darticles.
Tableau 4.6 : Structure de la table shop_panier
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
de la ligne de
panier
client varchar
64 x Adresse e-mail du
client remplissant
le panier actuel
article int
10
unsigned
Identiant de
larticle ajout au
panier
quantite int
10
unsigned
Nombre darticles
du mme genre
ajout au panier
Tableau 4.7 : Structure de la table shop_commande
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
de la commande
client varchar
client remplissant
le panier actuel
date date
Date de com-
mande
total_ht float
Total hors taxe de
la commande
total_ttc float
Total toutes taxes
comprises de la
commande
expedition char
1 tat dexpdition
de la commande
Tableau 4.8 : Structure de la table shop_ligne_commande
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
de la ligne de
commande
commande int
10
unsigned
x Identiant de la
commande
contenant la ligne
de commande
article int
10
unsigned
x Numro ISBN de
larticle com-
mand
prix_ht float
Prix HT de larti-
cle command au
moment de la
commande
prix_ttc float
Prix TTC de larti-
cle command au
moment de la
commande
total_ht float
Total HT
Tableau 4.7 : Structure de la table shop_commande (suite)
Cl
primaire
Cl
index
Cl
unique
Commentaire
La table shop_propositions du Tableau 4.9 est facultative. Elle fournit vos clients des
propositions douvrages achets par dautres lecteurs et qui seraient susceptibles de les
intresser. Elle pourra tre afche sur la mme page que les articles correspondant aux
achats des autres clients ou simplement sur la page panier de vos clients.
La structure de base de donnes dcrite ci-dessus nest quun exemple, dautres structures sont possibles.
Toutefois, cest elle qui sera employe dans les exemples des prochains chapitres.
Cration des tables dans phpMyAdmin
La base de donnes conue, cest rellement le plus gros travail qui est ralis. La cra-
tion physique de cette dernire dans linterface de phpMyAdmin nest quune partie de
plaisir.
Rendez-vous donc dans linterface de phpMyAdmin : cliquez sur licne dactivation
de Wamp5, prsente dans la barre des tches de Windows, et slectionnez la commande
phpMyAdmin. phpMyAdmin souvre alors dans votre navigateur par dfaut (voir
Figure 4.17).
Dans la liste des bases de donnes disponibles sur votre serveur, dans la colonne gauche
de phpMyAdmin, slectionnez la base que vous avez cre dans le chapitre prcdent et
qui correspond limage du futur service dhbergement de votre boutique en ligne.
total_ttc float
Total TTC payer
pour larticle com-
mand
quantite int 11 Nombre dexem-
plaires de larti-
cle command
Tableau 4.8 : Structure de la table shop_ligne_commande (suite)
Cl
primaire
Cl
index
Cl
unique
Commentaire
Tableau 4.9 : Structure de la table shop_propositions
Cl
primaire
Cl
index
Cl
unique
Commentaire
article1 int
10 x
article2 int
10 x
quantite int
10
La liste des tables disponibles sur cette base apparat alors. De fait, cette liste doit tre
vide (voir Figure 4.18).
Il va falloir crer chacune des tables dcrites plus haut :
1. Saisissez le nom de votre nouvelle table du champ Nom de la section Crer une
nouvelle table sur la base de la page (voir Figure 4.19).
Figure 4.17
PhpMyAdmin, linterface de gestion des bases MySQL la plus rpandue.
Figure 4.18
Aucune table nexiste
actuellement dans votre
base de donnes.
2. Saisissez ensuite le nombre de champs que doit contenir cette table dans le champ
Nombre de Champs qui suit.
3. Validez ces choix laide du bouton Excuter.
Pensez prfixer vos tables, cest--dire utiliser une chane de caractres commune au dbut du
nom de chaque table servant une mme application. Par exemple, dans le cadre de votre boutique,
vos tables SQL peuvent se nommer shop_livres, shop_commande, shop_client Si vous souhaitez
mettre en ligne plusieurs sites sur le mme serveur de base de donnes, vous naurez ainsi pas de
problme en utilisant deux tables avec le mme nom.
Arrive ensuite lcran de dnition des diffrents champs de votre table (voir
Figure 4.20). Chaque ligne du tableau doit tre remplie selon le tableau des champs
dnis prcdemment.
1. Saisissez dans la colonne Champ le nom de chacune des donnes stocker.
2. Dans le champ Type, dnissez le type de donnes utiliser pour chacun de vos
champs. Pour les donnes de types chanes de caractres, on utilise alors en gnral
Figure 4.19
Prcisez ici le nom de la
table crer, ainsi que le
nombre de champs qui la
composent.
Figure 4.20
La dfinition relle de la table seffectue ici.
le type TEXT ; pour les donnes numriques, le type INT (entiers) ou FLOAT
(valeurs dcimales).
Le systme de base de donnes MySQL possde un grand nombre de types de donnes. Si vous
voulez en savoir plus sur ceux-ci, consultez laide en ligne du site officiel de MySQL : http://
dev.mysql.com/doc/mysql/en/column-types.html.
3. Dans les champs Attributs, slectionnez UNSIGNED pour vos donnes de type
numrique. Cet attribut vous permet de spcier que les nombres utiliss dans ce
champ ne peuvent pas tre ngatifs. Dans le mme esprit, rglez le paramtre Null
sur not null si vous souhaitez que certains de vos champs soient imprativement
remplis. MySQL interdira alors de laisser ces champs vides lors de la cration dun
nouvel enregistrement.
Pensez galement paramtrer lidentiant unique de votre table sur
auto_increment dans le champ Extra. Ce rglage permettra de dnir automatique-
ment une nouvelle valeur, suprieure dune unit celle prcdemment utilise,
pour le champ index de votre table. Vous aurez ainsi la certitude que votre index
unique est rellement unique.
4. Enn, passez la dnition des index et des cls uniques de votre table. Vous dispo-
sez pour cela de trois cases cocher situes la suite du champ Extra. On y trouve,
dans lordre, la cl primaire, lindex et lidentiant unique. Cochez les cases corres-
pondant ces trois champs en fonction de la dnition des tables effectues plus
haut dans ce chapitre (voir Figure 4.21).
Les trois donnes Cl primaire, Index et Identifiant unique ont chacune une fonction bien parti-
culire : la cl primaire est la donne autour de laquelle sorganise toute larchitecture de votre table
de donnes. Cest elle quil sera fait rfrence ds quune opration (recherche, mise jour, effacement)
sera effectue sur la table.
Figure 4.21
La dfinition des index
et autres cls dans
phpMyAdmin.
Les champs marqus comme index servent optimiser les recherches dans la table. Lidentifiant uni-
que spcifie quant lui quun seul enregistrement dans votre table peut contenir une valeur spcifi-
que dans ce champ. Cela peut se rvler trs pratique si vous ne souhaitez pas quune requte puisse
retourner plusieurs rsultats.
5. Cliquez enn sur le bouton Sauvegarder pour valider lensemble des paramtres de
cration que vous venez de dnir. Une fois lcran de conrmation afch (voir
Figure 4.22), votre table de donnes est effectivement cre.
Vous allez maintenant pouvoir procder de la mme faon pour lensemble des tables
de donnes ncessaires la bonne tenue de votre projet. Cette tape de la cration de
votre site est un peu laborieuse, mais elle est indispensable. Prenez donc soin de la ra-
liser correctement.
Quelques lignes de code valent parfois mieux quune longue explication. Voici donc lensemble des
commandes MySQL utilises pour crer la base de donnes quutilisera votre boutique en ligne.
Attention toutefois, les instructions ci-aprs sont valables pour une version 4.1.8 et suprieure de
MySQL. Si la version que vous utilisez est antrieure, certaines commandes et certains attributs
peuvent tre incompatibles.
Pour utiliser ces codes, recopier-les dans un bloc-notes que vous sauvegarderez avec
lextention .sql. Puis dans phpMyAdmin de Wamp, crer une nouvelle base de don-
nes (appele-la "boutique" par exemple) puis cliquer sur importer et choississez
votre chier .sql. PhpMyAdmin soccupe du reste. Votre base de donnes est prte
tre utilise.
-- phpMyAdmin SQL Dump
-- version2.11.6
-- http://www.phpmyadmin.net
--
-- Serveur: localhost
-- Gnr le: Ven 04 Septembre 2009 18h21
-- Version du serveur: 5.0.51
-- Version de PHP: 5.2.6
Figure 4.22
Votre nouvelle
table est cre.
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Base de donnes: `boutique`
--
-- --------------------------------------------------------
--
-- Structure de la table `shop_auteurs`
--
CREATE TABLE `shop_auteurs` (
ìd` int(10) unsigned NOT NULL auto_increment,
`nom` varchar(64) NOT NULL,
`prenom` varchar(64) NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
-- --------------------------------------------------------
--
-- Structure de la table `shop_categories`
--
CREATE TABLE `shop_categories` (
`libelle` varchar(64) NOT NULL,
PRIMARY KEY (ìd`)
-- --------------------------------------------------------
--
-- Structure de la table `shop_client`
--
CREATE TABLE `shop_client` (
`mail` varchar(64) NOT NULL,
`nom` varchar(64) NOT NULL,
`prenom` varchar(64) NOT NULL,
`telephone` varchar(10) NOT NULL,
`mdp` varchar(32) NOT NULL default,
àd_ligne1` varchar(64) NOT NULL,
àd_ligne2` varchar(64) NOT NULL,
àd_cp` varchar(5) NOT NULL,
àd_ville` varchar(64) NOT NULL,
PRIMARY KEY (ìd`),
UNIQUE KEY `mail` (`mail`)
-- --------------------------------------------------------
--
-- Structure de la table `shop_commande`
--
CREATE TABLE `shop_commande` (
`client` varchar(64) NOT NULL,
`date` date NOT NULL,
`total_ht` float NOT NULL,
`total_ttc` float NOT NULL,
èxpedition` char(1) NOT NULL,
PRIMARY KEY (ìd`),
KEY `client` (`client`)
-- --------------------------------------------------------
--
-- Structure de la table `shop_ligne_commande`
--
CREATE TABLE `shop_ligne_commande` (
`commande` int(10) unsigned NOT NULL,
àrticle` int(10) unsigned NOT NULL,
`prix_ht` float NOT NULL,
`prix_ttc` float NOT NULL,
`quantite` int(11) NOT NULL,
`total_ht` float NOT NULL,
`total_ttc` float NOT NULL,
PRIMARY KEY (ìd`),
KEY àrticle` (àrticle`),
KEY `commande` (`commande`)
-- --------------------------------------------------------
--
-- Structure de la table `shop_livres`
--
CREATE TABLE `shop_livres` (
ìsbn` varchar(10) NOT NULL,
`categorie` int(11) unsigned NOT NULL,
`sous_categorie` int(11) unsigned NOT NULL,
`titre` text NOT NULL,
`prix_ht` float NOT NULL,
`prix_ttc` float NOT NULL,
`parution` date NOT NULL,
`resume` text NOT NULL,
àuteur` int(11) unsigned NOT NULL,
PRIMARY KEY (ìd`),
UNIQUE KEY ìsbn` (ìsbn`),
KEY `categorie` (`categorie`),
KEY `sous_categorie` (`sous_categorie`),
KEY àuteur` (àuteur`)
-- --------------------------------------------------------
--
-- Structure de la table `shop_panier`
--
CREATE TABLE `shop_panier` (
`client` varchar(64) NOT NULL,
àrticle` int(10) unsigned NOT NULL
`quantite` int(10) unsigned NOT NULL,
PRIMARY KEY (ìd`),
KEY `client` (`client`,àrticle`)
-- --------------------------------------------------------
--
-- Structure de la table `shop_propositions`
--
CREATE TABLE `shop_propositions` (
àrticle1` int(10) unsigned NOT NULL,
àrticle2` int(10) unsigned NOT NULL,
`quantite` int(10) unsigned NOT NULL,
KEY àrticle1` (àrticle1`,àrticle2`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
-- --------------------------------------------------------
--
-- Structure de la table `shop_sous_categories`
--
CREATE TABLE `shop_sous_categories` (
`libelle` varchar(64) NOT NULL,
`parent` int(11) unsigned NOT NULL,
PRIMARY KEY (ìd`),
KEY `parent` (`parent`)
Remplissage des tables MySQL
Une fois lensemble de vos tables cr, il vous faut encore remplir ces tables avec quelques
donnes.
Pour cela, rendez-vous sur la page daccueil de votre base de donnes (voir
Figure 4.23), celle-ci indique quil existe dsormais plusieurs tables dans votre base.
Cliquez sur le lien Insrer des donnes pour accder au formulaire de saisie. Il se pr-
sente sous la simple forme dune page, reprenant chacun des champs de votre table et
prsentant face lui un formulaire de saisie HTML (voir Figure 4.24).
Inutile de remplir les champs correspondant aux donnes auto-incrmentes (le champ id). Ceux-ci
sont automatiquement renseigns par le systme MySQL.
Figure 4.23
Ce tableau rsume lensemble des tables existantes dans votre base de donnes.
Figure 4.24
Compltez ce formulaire
pour ajouter un nouvel
enregistrement votre
table.
Vous pouvez simplement crer un article en entrant textes et valeurs numriques dans
chaque champ de la table. Validez ensuite votre article en appuyant sur Insrer. Proc-
dez ainsi pour tous vos articles. Compltez de cette faon lensemble des tables de votre
base de donnes lies au catalogue (shop_livres et shop_auteurs, ainsi que les deux
bases servant lannuaire : shop_categories et shop_sous_categories) de la faon la plus
cohrente possible. Par exemple, les identiants utiliss pour un auteur dans la table
Livres doivent rellement correspondre un enregistrement de la table Auteurs.
Pour voir vos articles, cliquez sur Afcher le contenu partir de la page principale. Une
fois quils sont afchs, un tableau les rpertorie. Grce au lien Modier, droite des
colonnes de chaque article, vous pouvez modier tel ou tel article en revenant au formu-
laire de saisie.
Votre base de donnes est dsormais oprationnelle sur votre serveur de dveloppement. Mais quen
est-il de lhbergeur final de votre site web ? Deux options soffrent vous : reprendre une par une les
tapes de cration de la base de donnes dcrites dans les dernires pages, ou exporter la base cre
sur le serveur de dveloppement et la rimporter ensuite chez votre hbergeur. Si vous choisissez
cette dernire solution, voici les tapes suivre.
Rendez-vous tout dabord sous longlet Exportation, prsent dans la page de rsum de votre base de
donnes, sur votre serveur de dveloppement. Dans cette page, assurez-vous que les cases STRUC-
TURE et DATA sont bien coches puis cliquez sur le bouton Go. Vous obtiendrez alors, dans un nou-
veau champ de formulaire, la suite des requtes SQL ncessaire la cration de votre base de
donnes telle quelle existe sur votre serveur de dveloppement (voir Figure 4.25).
Figure 4.25
Le formulaire dexpor-
tation dune base de
donnes dans php-
MyAdmin.
Pour utiliser ces commandes chez votre hbergeur, vous naurez qu vous connecter son interface
de gestion web, y choisir longlet Query et copier les requtes obtenues dans le champ SQL-query
on database Une fois le bouton Submit Query enfonc, votre base de donnes est alors cre
lidentique.
Connexion la base de donnes
dans Dreamweaver CS4
Retour Dreamweaver pour la dernire tape de la gestion de votre base de donnes.
Il va sagir de crer une connexion entre votre futur site dans Dreamweaver et votre
base de donnes sur le serveur de dveloppement.
Une connexion nest rien dautre quun canal de communication entre vos pages
dans Dreamweaver et votre base de donnes. Pour chaque site dynamique, il vous
faudra ainsi indiquer Dreamweaver la faon dont vos pages devront sadresser
votre base de donnes, an que celles-ci puissent extraire de cette base les diffrentes
donnes afcher.
La mthode utiliser pour crer une connexion dpend la fois du langage dynami-
que utilis dans votre site et du type de base de donnes utilis. Mais, une fois la
connexion cre, la faon den exploiter les donnes dans vos pages sera toujours la
mme. Voyez ici comment crer une connexion depuis votre site PHP vers votre base
MySQL.
Tout dabord, crer une nouvelle page dans votre prol de site Dreamweaver. En
effet, lditeur est incapable de mettre en place une connexion si aucune page nest
actuellement ouverte dans son interface. Vous allez donc crer votre premire page
blanche.
Cration dune page blanche
Le prol de votre site web a dj t cr. Les lments centraux votre plate-forme de
dveloppement Dreamweaver sont donc en place. Il ne vous reste qu crer votre toute
premire page pour entrer dans le vif du sujet.
Au dmarrage de Dreamweaver, justement, un cran souvre qui vous propose soit
dditer lune des dernires pages cres avec le logiciel, soit de crer une page blanche
utilisant lune des technologies supportes par lditeur de Macromedia (voir
Figure 4.26). Sur cette fentre, slectionnez la cration dune nouvelle page utilisant la
technologie PHP, Crer > PHP.
Une nouvelle page blanche souvre alors dans votre diteur web. Vous allez pouvoir
dbuter ldition relle de cette page.
Pour les autres pages de votre site, vous pourrez utiliser la commande Fichier > Nouveau pour crer
les pages suivantes.
Le panneau Bases de donnes
Les connexions, quel que soit leur type, sont toujours gres en un seul endroit : le
panneau Bases de donnes. Pour afcher ce panneau, utilisez la commande Fentre >
Bases de donnes ou appuyez simultanment sur les touches Ctrl+Maj+F10 de votre
clavier.
Figure 4.26
Choisissez une
nouvelle page
de type PHP.
Le panneau Bases de donnes est disponible dans le groupe de panneaux Application
(voir Figure 4.27).
Ce panneau na quune seule fonctionnalit : crer et supprimer des connexions entre
vos sites web et les bases de donnes.
Le groupe Application contient lensemble des panneaux ncessaires la mise en place de sites dyna-
miques dans Dreamweaver CS4. Ces panneaux sont : Bases de donnes, Liaisons, Comportements de
serveur et Composants.
Cration dune connexion pour un site PHP
La mise en place dune connexion avec une base MySQL dans le cadre du dveloppement
dun site PHP est lune des manipulations les plus simples qui soient.
Rendez-vous dans le panneau Bases de donnes puis :
1. Cliquez sur le bouton (+) en haut de la petite fentre et slectionnez la commande
Connexion MySQL dans le menu qui apparat alors (voir Figure 4.28).
2. La fentre Connexion MySQL souvre alors (voir Figure 4.29). Celle-ci contient un
formulaire dont chaque champ correspond une information de connexion la base de
donnes. Remplissez tout dabord le champ Nom de connexion avec le nom que vous
souhaitez utiliser pour cette connexion tout au long du dveloppement de votre site.
Figure 4.27
Cest le panneau
Bases de donnes qui
permet la dfinition
des connexions.
Ajouter une connexion
Supprimer une connexion
Rafrachir la liste des connexions
Liste et dtail
des connexions
existantes
Choisissez de prfrence un nom reprsentatif du type de connexion cr, comme le
nom de la base de donnes utilise.
3. Saisissez dans le champ Serveur MySQL ladresse du serveur de base de donnes
auquel votre site doit se connecter. Si cest votre propre machine qui sert de serveur
de dveloppement, saisissez simplement localhost.
4. Saisissez dans les champs Nom de lutilisateur et Mot de passe lidentiant et le
mot de passe que vous avez dnis plus tt, lors de la cration de votre base de donnes
MySQL.
5. Remplissez prsent le champ Base de donnes avec le nom de la base de donnes
que vous souhaitez utiliser avec votre site. Libre vous dutiliser le bouton Slec-
tionner pour localiser la base de donnes souhaite dans la liste des bases dispo-
nibles sur votre serveur (voir Figure 4.30).
6. Une fois tous les champs de la bote Connexion MySQL renseigns, cliquez sur le
bouton Tester an de vous assurer que la connexion avec votre base fonctionne cor-
rectement. Si cest le cas, une bote de dialogue comprenant le message Connexion
tablie safche (voir Figure 4.31).
7. Enn, cliquez sur le bouton OK pour valider la connexion ainsi dnie.
Une fois la connexion valide, celle-ci apparat alors sous le nom que vous lui avez
choisi dans le panneau Bases de donnes (voir Figure 4.32).
Figure 4.28
Seule la connexion une
base MySQL est possible
pour un site PHP.
Figure 4.29
La dfinition complte
de votre connexion se
droule ici.
Fichier de connexion
Lorsquune connexion est cre pour un site, un chier de connexion apparat dans
larborescence de celui-ci (voir Figure 4.33).
la racine du dossier de travail de votre site, vous trouverez ainsi un dossier Connexions.
Celui-ci contient autant de chiers que le nombre de connexions que vous avez cres
pour votre site.
Figure 4.30
Voici lensemble des
bases de donnes
accessibles sur votre
serveur de dvelop-
pement.
Figure 4.31
Tous les paramtres de
connexion semblent
corrects.
Figure 4.32
Votre nouvelle
connexion est dfinie
et oprationnelle.
Chacun des chiers porte le nom de la connexion qui lui correspond, lextension corres-
pondant la technologie utilise pour crer celle-ci (.php dans notre cas).
Figure 4.33
Un fichier de connexion
est cr dans larbores-
cence de votre site.
5
Cration dun catalogue en ligne
Fonctionnement thorique
Dfinition de jeux denregistrements
Insertion de contenu dynamique
Aperu des donnes
Finalisation de la page de description
Mise en place de la page Auteur
Dtail de lannuaire
Note sur les comportements de serveur
Si votre intrt principal est lutilisation de Dreamweaver pour la construction dun site
dynamique, vous touchez dsormais au cur du sujet. Dans ce chapitre, et dans tous
ceux qui vont suivre, vous allez dcouvrir comment utiliser lditeur HTML dAdobe
pour mettre rapidement en place des contenus dynamiques. Premire tape : lensemble
des pages de catalogue de votre boutique en ligne. Viendront ensuite, dans dautres cha-
pitres, le moteur de recherche, laccueil des clients, la gestion du panier et tous les
autres lments indispensables la bonne tenue de votre site.
Mais concentrons-nous tout dabord sur les pages de catalogue. Mme si ce chapitre ne
prsente que des fonctionnalits simples, il est cependant important de ltudier avec
attention. En effet, Dreamweaver CS4 utilise des processus tablis pour grer le contenu
dune base de donnes et permettre son afchage dans des pages web. Ces processus se
dcomposent en tapes simples : cration dune nouvelle page, mise en place dun ou
de plusieurs jeux denregistrements plus ou moins complexes, utilisation des donnes
issues de ces jeux dans la page. Pour simples que soient ces tapes, elles demandent tout
de mme une certaine rigueur et un peu de mthode. Ce sont ces mthodes que vous allez
dcouvrir, les unes aprs les autres, dans ce chapitre.
Lexemple principal de ce chapitre est la page de description dtaille dun ouvrage.
Pour les pages suivantes, nous nous contenterons de dcrire succinctement le contenu
du jeu denregistrements crer et de dtailler uniquement les nouvelles manipulations
ncessaires la cration de la page.
Commenons donc par crer la page centrale de votre boutique en ligne : la description
dtaille dun article (voir Figure 5.1).
Fonctionnement thorique
Avant de vous lancer dans la cration relle de votre page, un peu de thorie est encore
ncessaire. Promis, ce ne sera pas long !
Il sagit ici de comprendre lutilisation des paramtres dURL dans un site de type PHP.
Pour afcher la description de nimporte quel ouvrage de votre boutique, vous nallez
utiliser quune seule page relle, comme vous avez dj pu le comprendre daprs
lexplication de la technologie PHP/MySQL. Mais comment faire savoir votre page
quel est exactement louvrage afcher, parmi tous ceux prsents dans la base de donnes ?
Un paramtre doit tre dni pour spcier le livre en question. En PHP, mais gale-
ment dans les autres technologies de cration de sites web dynamiques, ce genre de
paramtre est pass dans lURL mme de la page afcher. Par exemple, pour afcher
louvrage dont lidentiant unique est 12, il sufra dappeler la page de description
dtaille de la faon suivante :
http://www.maboutique.com/livre.php?id=12
Figure 5.1
La page de description
dun ouvrage, version
finale !
95 CRATION DUN CATALOGUE EN LIGNE
De cette faon, lidentiant unique de louvrage afcher sera disponible dans la page
web tout moment, sous la dnomination de id. Il est alors facile de construire
lensemble des jeux denregistrements utiliss sur la page en utilisant ce paramtre.
Vous allez le voir tout de suite !
Dfinition de jeux denregistrements
La dnition de jeux denregistrements est au cur de la gestion des donnes dynami-
ques dans Dreamweaver CS4. Cest partir de ces jeux denregistrements que les donnes
dynamiques sont accessibles dans le logiciel et donc utilisables sur une page web.
Il sagit en effet de dnir quelles informations doivent tre extraites de votre base de
donnes pour tre insres dans votre page.
Mais, avant de se lancer dans la cration du premier jeu denregistrements, un petit tour
du panneau Liaisons simpose (voir Figure 5.2).
Figure 5.2
Le panneau Liaisons sert
la dfinition des jeux
denregistrements.
Langage dynamique utilis
Ajouter un jeu d'enregistrements
Supprimer un jeu d'enregistrements
Rafrachissement du
jeu d'enregistrements
Jeu d'enregistrements
Insertion de donnes
dynamiques sur la page
Liste des champs
disponibles dans le jeu
Le panneau Liaisons
Ce panneau sert grer lensemble des donnes disponibles dans votre base. Cest
partir de celui-ci que vous allez crer, modier ou supprimer vos jeux denregistrements.
Cest galement depuis celui-ci que vous allez, le plus souvent, insrer des donnes
dynamiques dans vos pages.
Le panneau Liaisons est afch dans le groupe de panneaux Application. Il est accessible
depuis la commande Fentre > Liaisons dans le menu principal de Dreamweaver ou
tout simplement laide des touches Ctrl+F10 de votre clavier.
Cration dun jeu denregistrements simple
La mise en place dun jeu denregistrements peut la fois tre trs facile et trs com-
plexe, suivant les paramtres que vous devez utiliser pour rduire la quantit de champs
et denregistrements utiliser.
De la bonne conception de vos jeux denregistrements dpendra souvent la performance de votre
site web. Songez bien que plus vous importez de donnes lors de cette tape, plus le nombre
dappels votre base de donnes sera important, plus les pages seront longues crer sur le serveur.
Limitez donc les donnes utiliser au minimum.
Choix des tables et des colonnes
Pour crer un jeu denregistrements, il faut tout dabord que votre serveur de dve-
loppement soit activ et que la connexion entre votre site et la base de donnes soit
cre.
Dans Dreamweaver, gardez en mmoire quun jeu denregistrements est toujours asso-
ci une page prcise. Avant de vous lancer dans la cration du jeu denregistrements,
prenez le temps de crer un nouveau document PHP vierge laide de Dreamweaver et
nommez celui-ci livre_details.php. Pour sauver une page, faites Fichier > Enregistrer
sous ou le raccourci clavier Ctrl+S. Une fois ces prrequis remplis, la cration en elle-
mme nest pas complique :
1. Si ce nest dj fait, afchez le panneau Liaisons laide de la commande Fentre >
Liaisons.
2. Cliquez sur le bouton Ajouter un jeu denregistrements (+), prsent en haut gau-
che du panneau, et slectionnez la commande Jeu denregistrements (Requte) dans
le menu correspondant.
Les autres commandes disponibles depuis le panneau Liaisons seront dtailles au fur et mesure de
leur utilisation dans les chapitres suivants.
3. La bote de dialogue Jeu denregistrements apparat aussitt (voir Figure 5.3). Cest
dans celle-ci que se fait la dnition effective du jeu denregistrements.
La cration dun jeu denregistrements est galement possible via le bouton Jeu denregistrements
de la fine barre doutils au-dessus du nom du fichier en cours dans Donnes (sixime bouton).
4. Saisissez dans le champ Nom le nom que vous souhaitez donner votre jeu denre-
gistrements. Cest laide de ce nom quil sera accessible plus tard dans le panneau
Liaisons. Veillez ce que ce nom reprsente bien le contenu du jeu denregistrements.
Pour la page de description dtaille, choisissez par exemple article.
Si vous tes appel utiliser des jeux denregistrements identiques sur plusieurs pages, veillez leur
donner le mme nom. Vous y gagnerez en cohrence et en rapidit de dveloppement.
5. Dans la liste droulante Connexion, slectionnez la connexion partir de laquelle
Dreamweaver devra crer le jeu denregistrements. Cette liste reprend lensemble des
connexions cres pour le prol de site en cours. Slectionnez donc la connexion au
serveur de dveloppement que vous avez cre la n du chapitre prcdent.
Figure 5.3
Tous les paramtres
ncessaires la cration
dun jeu denregistrements
sont l.
Si la connexion en question nexiste pas encore, vous pouvez cliquer sur le bouton Dfinir pour crer
celle-ci ds maintenant. Une bote de dialogue de gestion des connexions souvre alors. Cliquez sur le
bouton Dfinir pour ouvrir le panneau de cration de la connexion, diffrent suivant la technologie
utilise. La cration de la connexion est dtaille dans le chapitre prcdent.
6. Slectionnez ensuite, dans la liste droulante Table, la table dans laquelle se trou-
vent les enregistrements que vous souhaitez utiliser. Cette liste droulante afche
par dfaut le nom de toutes les tables disponibles partir de la connexion prc-
demment choisie. Pour trouver les informations ncessaires la cration de la page
de description dtaille, vous devez vous servir de la table shop_livres.
Si vous souhaitez utiliser des donnes issues de deux tables diffrentes dans une mme page, il vous
faudra crer un jeu denregistrements pour chacune delles. Si les donnes issues de plusieurs tables
doivent rpondre des critres de slection communs, il vous faudra faire appel au mode de cration
Avanc des jeux denregistrements, dtaill plus loin dans ce chapitre.
7. Une fois la table choisie, la zone Colonnes de la fentre Jeu denregistrements se
met jour pour prsenter la liste des champs disponibles dans la table en question.
Il vous faut alors slectionner les colonnes que vous allez utiliser sur votre page.
Deux possibilits soffrent vous :
Si vous souhaitez utiliser la totalit des colonnes de la table, cochez simplement
la case Colonnes : Toutes, prsente juste au-dessus de la liste des champs dispo-
nibles.
Si vous souhaitez nutiliser quune partie des champs prsents dans la table,
cochez la case Colonnes : Slectionnes. La liste des champs disponibles devient
active. Slectionnez alors les champs voulus en cliquant sur le nom de ceux-ci
tout en maintenant la touche Ctrl du clavier enfonce (voir Figure 5.4).
Dans le cas de votre page de description, tous les champs de la table shop_livres
sont ncessaires. Cochez donc la case Colonnes : Toutes an que toutes ces donnes
soient disponibles dans votre jeu denregistrements.
Figure 5.4
Il est possible de nutiliser
que quelques champs
dune table dans un jeu
denregistrements.
Faites attention vos choix lors de la slection des colonnes. Si votre base de donnes contient beau-
coup dinformations et que vous souhaitiez tout de mme en utiliser toutes les colonnes, vous ralen-
tirez normment votre site.
Avec ces quelques paramtres, vous avez dores et dj dni un jeu denregistrements
basique. Il vous sufrait de cliquer sur le bouton OK de la fentre Jeu denregistrements
pour en achever la cration. Le jeu denregistrements en question apparatrait alors dans
le panneau Liaisons sous la forme de la liste des colonnes disponibles dans celui-ci
(voir Figure 5.5).
Toutefois, tel quil est dni ici, votre jeu denregistrements nest pas exploitable pour
la cration de votre page de description dtaille. Comme expliqu au dbut de ce cha-
pitre, lafchage de la page doit tre soumis un paramtre : lidentiant unique de
lenregistrement correspondant louvrage afcher. Ce paramtre doit tre pris en
compte lors de la cration de votre jeu denregistrements. Vous allez donc devoir faire
appel un ltre.
Mise en place dun filtre
Un ltre se fonde sur la correspondance entre une valeur arbitraire et les valeurs de cer-
taines colonnes de la table. Cela permet, comme ici, de slectionner un ouvrage unique
dans une table rpertoriant plusieurs centaines de livres. La dnition dun ltre peut
aider augmenter la vitesse dexcution dun site dynamique. Sur une base de
Figure 5.5
Votre premier jeu
denregistrements
est oprationnel.
2 500 enregistrements, un simple ltre permet parfois de nen conserver quune
dizaine, voire quun seul. Alors, nhsitez pas les utiliser - !
La mise en place dun ltre sur un jeu denregistrements se droule dans la mme bote
de dialogue que la cration du jeu denregistrements :
1. Dans la premire liste droulante de la partie Filtre, slectionnez le champ de la
table qui doit servir de base votre ltre (voir Figure 5.6). Pour notre page, il sagit
du champ id.
Il nest pas indispensable quun champ soit slectionn dans votre jeu denregistrements pour tre
utilis comme critre de filtre.
2. Slectionnez ensuite, dans la liste droulante situe sur la droite de la liste des
champs, loprateur que vous souhaitez utiliser pour dnir votre ltre (voir
Figure 5.7). Plusieurs oprateurs sont disponibles :
des oprateurs arithmtiques : gal (=), Diffrent (<>), Suprieur (>), Suprieur
ou gal (>=), Infrieur (<) et Infrieur ou gal (<=) ;
des oprateurs de comparaison de chanes : Commence par, Fini par et Contient.
Cest loprateur gal (=) qui va nous servir ici dnir la correspondance entre
lidentiant pass en URL et louvrage slectionner dans la base de donnes.
Figure 5.6
Slectionnez dabord
la colonne sur laquelle
portera le filtre.
Figure 5.7
Slectionnez ensuite
loprateur utilis
dans votre filtre.
3. Dans la troisime liste droulante de la zone Filtre, situe en dessous du champ uti-
lis, slectionnez le type de donnes avec lequel ce champ doit tre compar (voir
Figure 5.8). Dreamweaver propose ici tous les types de donnes qui peuvent tre
utiliss pour la programmation de sites dynamiques.
Si vous ntes pas familier avec la programmation de sites web dynamiques, le
tableau suivant dcrit chacun des types de donnes disponibles lors de la mise en
place dun ltre (voir Tableau 5.1).
Dans le cadre de la cration de la page de description des ouvrages, vous allez uti-
liser un paramtre dURL contenant lidentiant unique de louvrage afcher.
Slectionnez donc ce type de donnes dans la liste droulante.
Figure 5.8
Dans ce cas prcis, votre
filtre se fondera sur une
valeur bien dfinie.
Tableau 5.1 : Types de donnes disponibles pour la mise en place dun filtre
Types de donnes Description
Paramtre dURL Le ltre est cr en fonction de la valeur dune variable disponible dans lURL de la
page (par exemple sous la forme mapage.php?variable=1).
Variable de formulaire La valeur de comparaison du ltre est dnie par la valeur dun champ de formulaire
classique envoy depuis la page prcdente du site.
Cookie La valeur de comparaison est stocke dans un cookie sur lordinateur du visiteur de
votre site.
Variable de session La valeur de comparaison est une variable de session, cest--dire une variable d-
nie suivant lidentit de la personne connecte votre site. Une variable de session
existe tant que la session est ouverte, cest--dire tant quun utilisateur dni est
connect sur les pages de votre site. Pour en savoir plus sur les sessions, consultez
la documentation disponible sur le site ofciel de PHP. Vous utiliserez ce type de
variable lors de la cration de lespace client plus loin dans cet ouvrage.
Variable de serveur La valeur de comparaison dpend dune variable disponible sur le serveur qui
hberge votre site. Il peut sagir du type de serveur mais galement dinformations
issues du visiteur comme le navigateur ou le systme dexploitation utilis par celui-
ci.
Valeur entre La valeur de comparaison est non pas une variable mais une valeur xe dnie une
fois pour toutes lors de la cration du ltre.
4. Une fois le type de valeur de comparaison dni, saisissez dans le dernier champ
texte de la zone Filtre le nom de la variable ou la valeur utiliser pour le ltre.
Assurez-vous que cette variable existe rellement et que sa valeur est compatible
avec le type de champ dni plus haut.
Il va sagir ici du paramtre dURL id. Cest donc ce nom que vous devez saisir
dans le dernier champ de la cration de ltres.
Aucun tri nest ncessaire ici, laisser la liste droulante Trier sur aucun.
Test des jeux denregistrements
tout moment de sa cration, vous pouvez tester votre nouveau jeu denregistrements.
Pour cela, cliquez simplement sur le bouton Tester, prsent sur la droite de la bote de
dialogue Jeu denregistrements. Dans le cadre dun jeu denregistrements sans ltre, la
fentre Tester linstruction SQL souvre alors et afche simplement la totalit des
donnes (champs et enregistrements) qui seront accessibles depuis votre jeu denregis-
trements (voir Figure 5.9).
Si les donnes extraites grce votre jeu denregistrements contiennent plus de 25 enregistrements,
utilisez les boutons 25 Suivant et 25 Prcdent afin de voyager dans la liste des enregistrements dispo-
nibles et de voir la totalit de ceux-ci.
Figure 5.9
Voici les donnes
qui seront accessibles
laide de votre jeu
denregistrements.
Si les donnes du test vous conviennent, cliquez simplement sur le bouton OK pour fermer
la fentre de test et revenir la fentre cration du jeu.
Si votre jeu denregistrements fait lobjet dun ltre fond sur un paramtre dURL ou
sur un autre type de variable (Cookie, Session, Formulaire), une tape supplmen-
taire est ncessaire au test du jeu. La demande de test dbute par lafchage de la fen-
tre Fournissez une valeur de test, cest--dire, dans notre cas, lidentiant unique de
lun des ouvrages disponibles dans votre base de donnes (voir Figure 5.10). Cette
fentre vous demande de saisir une valeur pour la variable de comparaison.
Une fois cette valeur saisie dans le champ Valeur de test, cliquez sur le bouton OK pour
valider celle-ci. La fentre de test souvre alors, afchant comme son habitude les
enregistrements correspondants au ltre et la valeur dnis (voir Figure 5.11).
Il ne vous reste alors qu fermer la fentre de test et cliquer sur le bouton OK de la
fentre Jeu denregistrements pour valider le jeu denregistrements. Celui-ci apparat
alors dans le panneau Liaisons (voir Figure 5.12).
Voil, vous venez de dnir un jeu denregistrements simple, fond sur un ltre. Gardez
lesprit que la cration de jeux denregistrements est la base de nimporte quelle
page dynamique conue laide de Dreamweaver. Il existe bien entendu des moyens
Figure 5.10
Quelle valeur doit
avoir votre variable
de comparaison ?
Figure 5.11
Les enregistrements
correspondant
votre filtre.
plus complexes pour crer des jeux denregistrements. Vous les dcouvrirez plus loin
dans ce chapitre.
Insertion de contenu dynamique
La cration dun jeu denregistrements nest quune tape dans la cration de votre page
de catalogue. Pour linstant, celle-ci est dailleurs toujours vide. Vous allez donc y
remdier en insrant une une les informations relatives un ouvrage de votre bouti-
que. Pour cela, vous allez dcouvrir les mthodes dafchage de donnes dynamiques
dans Dreamweaver.
Donnes dynamiques
Linsertion dune seule donne dun jeu denregistrements est lune des oprations les
plus simples lors de la cration de sites dynamiques avec Dreamweaver.
Pour insrer simplement une donne isole sous la forme quelle possde dans votre
base de donnes, procdez comme suit :
1. Assurez-vous avant tout de possder une page blanche et quun jeu denregistrements
lui est bien associ.
2. Placez le point dinsertion dans la fentre principale (fentre blanche sans code) de
Dreamweaver, lendroit o vous souhaitez que la donne dynamique soit afche.
Par exemple, pour le titre de louvrage, placez simplement le point dinsertion tout
en haut de la page.
Figure 5.12
Lenregistrement est dfini
avec le filtre.
3. Slectionnez dans le panneau Liaisons la donne insrer sur la page (voir
Figure 5.13). Pour la slectionner, dployez simplement le contenu du jeu denre-
gistrements que vous venez de crer laide du bouton (+), prsent sur la gauche de
celui-ci. Tous les champs de votre table de donnes disponibles dans ce jeu denre-
gistrements apparaissent alors dans le panneau Liaisons. Il vous suft de cliquer sur
la donne que vous souhaitez utiliser, par exemple Titre.
4. Cliquez simplement sur le bouton Insrer, prsent en bas droite du panneau
Liaisons.
Le document est alors mis jour. Au point dinsertion se trouve maintenant le nom de
la donne afcher, entour daccolades et dun halo bleut (voir Figure 5.14).
Il ne vous reste qu effectuer toutes les oprations de mise en forme et de mise en page
ncessaires la prsentation de ce contenu.
Vous pouvez galement slectionner la donne afficher dans le panneau Liaisons et la faire glisser
jusqu son emplacement final dans la fentre principale de Dreamweaver. Le rsultat est le mme
qu laide du bouton Insrer.
Figure 5.13
Slectionnez la donne
afficher sur votre page.
Figure 5.14
La donne dynamique
est bien insre dans
la page.
De manire trs simple, vous venez dafcher sur votre page web le titre dun ouvrage
issu dune base de donnes et choisi en fonction dun paramtre pass dans lURL de
votre page. Flicitations, vous venez rellement de crer votre toute premire page
dynamique !
Vous pouvez maintenant complter la che dtaille de louvrage laide des autres
informations disponibles dans le jeu denregistrements (Prix, Numro ISBN, Date de
parution, Rsum). En revanche, le nom de lauteur et les catgories dannuaire corres-
pondant louvrage feront lobjet de requtes spciales, plus loin dans ce chapitre.
Mais, avant darriver ce point, peut-tre souhaitez-vous galement afcher sur votre
page la couverture du livre qui y est dtaill ? Vous allez pour cela dcouvrir lutilisation
des donnes dynamiques lintrieur des objets de Dreamweaver !
Dfinition dynamique dune image
Vous vous en doutez, les donnes disponibles par lintermdiaire dun jeu denregistre-
ments ne sont pas uniquement utilisables pour lafchage sur une page web. Elles peu-
vent tre utilises pour bien dautres usages, comme le passage de paramtres dans un
lien ou le choix dynamique dune image afcher.
Justement, vous allez maintenant procder lafchage de la couverture de votre
ouvrage sur sa page de description. Avant de procder la mise en place de cet af-
chage dans Dreamweaver, une mise au point est ncessaire : assurez-vous de disposer,
sur votre serveur de dveloppement et dans un dossier prvu cet usage, de lensemble
des couvertures des ouvrages disponibles dans votre boutique. Chacune de ces images
devra tre nomme de faon prcise, en utilisant comme nom de chier lidentiant
unique de lenregistrement correspondant louvrage en question.
Par exemple, si le livre qui possde lidentiant 1 dans la table shop_livres de votre
base de donnes est Le Campus Dreamweaver CS4, le chier correspondant la cou-
verture de ce livre devra se nommer 1.jpg (ou .gif) sur votre serveur de dvelop-
pement. Et ainsi de suite pour lensemble des livres disponibles dans votre base de
donnes.
Linsertion dune image avec une source de donnes dynamique nest pas trs complique :
1. Placez le point dinsertion dans la fentre principale de Dreamweaver, lendroit
o vous souhaitez insrer votre image.
2. Cliquez sur le bouton Images prsent dans la section Commun de la barre de navi-
gation de Dreamweaver. La fentre Slectionnez la source de limage souvre alors.

3. Dans cette fentre, cochez la case Source de donnes, prsente sous la barre de titre.
La liste des champs disponibles dans les diffrents jeux denregistrements de la
page apparat alors (voir Figure 5.15).
4. Slectionnez dans cette liste le champ qui contient le nom de limage source insrer.
Il sagit ici du champ id.
5. Si le nom de limage ncessite lutilisation dun format particulier, par exemple un
passage en minuscule, slectionnez ce format dans la liste droulante Format, pr-
sente sous la liste des champs. Vous pouvez alors contrler la syntaxe dcriture du
nom de limage dans le champ URL, prsent tout en bas de la fentre.
6. Vous pouvez galement complter la donne dynamique slectionne par nimporte
quelle donne xe. Dans notre cas, le nom du chier image contenant la couverture
de louvrage est en fait id.jpg, la partie .jpg tant xe. Compltez donc le champ
URL avec cette extension de chier, la suite du code utilis par Dreamweaver
pour extraire les donnes dynamiques du jeu denregistrements.
Si les images se trouvent dans un sous-dossier prcis de votre architecture, nommez simplement ce
sous-dossier en tte du champ URL. Par exemple, pour une image stockes dans un dossier image,
vous obtiendrez le code suivant : images/<?php echo $row_article [id];?>.jpg.
Figure 5.15
Slectionnez le champ
correspondant au nom
de limage.
7. Une fois toutes ces options slectionnes, cliquez sur le bouton OK pour les valider
et insrer limage dans la page courante.
8. Une bote de dialogue safche vous permettant de nommer vos images. Le Texte
secondaire est le nom de limage qui apparatra si limage est mal charge. Ce
champ est important car il permet aux aveugles de se rprer sur votre page. Si vous
souhaitez avoir un large public et respecter les normes de la mise en page web, il est
fortement conseill de bien nommer ses images. Pour le faire dynamiquement et
non la main, voici le code de votre image dynamique :
<img src="<?php echo $row_article[id]; ?>.jpg" alt="<?php echo
$row_article[titre]; ?>" title="<?php echo $row_article[titre]; ?>" />
Licne Image qui apparat alors dans Dreamweaver est accompagne dun petit clair,
preuve que sa source est dnie dynamiquement (voir Figure 5.16).
Cette mthode peut galement tre utilise pour dfinir dynamiquement la cible dun lien, la source
dune animation ou de nimporte quel objet insr dans vos pages par Dreamweaver.
Cette mthode prsente toutefois un lger inconvnient.
Comme vous pouvez le constater, Dreamweaver est incapable de dnir la taille de
votre image, alors quil le fait dordinaire avec les images xes lorsquelles sont ins-
res dans vos pages. Les champs L et H de Proprits restent donc vides dans le cas
dune image dnie dynamiquement (voir Figure 5.17).
Figure 5.16
Limage dynamique
est en place.
Figure 5.17
Les dimensions de limage
sont laisses vides par
Dreamweaver.
Toutefois, si lensemble des pages de votre boutique est dni laide dun gabarit xe,
les images contenant les couvertures des ouvrages prsents doivent toutes avoir les
mmes dimensions. Vous pouvez donc saisir ces dimensions dans les champs L et H de
Proprits quand limage dynamique est slectionne. Cela vous facilitera de toute
faon la mise en page.
Aperu des donnes
Une bonne partie du travail de cration de votre page de description est faite ! Vous avez
peut-tre envie de dcouvrir ds maintenant le rsultat de ces manipulations. Pour cela,
deux mthodes soffrent vous : visualiser vos pages dans votre navigateur ou directement
dans linterface de Dreamweaver.
Une seule obligation avant de procder cette visualisation : sauvegardez votre travail !
Dans les deux cas, si vous souhaitez visualiser le contenu dynamique de vos pages, assurez-vous tout
dabord davoir un serveur de dveloppement en cours dexcution sur votre ordinateur.
Aperu dans le navigateur
Pour visualiser vos pages dans votre navigateur, cliquez sur le bouton Fichier/Aperu
dans le navigateur dans la Barre de navigation, prsente en haut de la fentre principale
de Dreamweaver. Slectionnez ensuite, dans le menu qui apparat, le navigateur que
vous souhaitez utiliser pour visualiser vos donnes (voir Figure 5.18).
Sinon vous pouvez cliquer sur licne en forme de plante, situe au centre dans la
fentre soit de code, soit de cration, soit de fractionner.
Une nouvelle fentre de navigateur souvre alors, qui afche la page en cours de dve-
loppement telle que la verront vos futurs visiteurs (voir Figure 5.19). Un dtail, toute-
fois : pour safcher correctement, votre page de description douvrages doit recevoir
en paramtre lidentiant unique de louvrage afcher. Compltez donc, dans la barre
Figure 5.18
Slectionnez le navi-
gateur utiliser.
dURL de votre navigateur, ladresse de la page en question par son paramtre. En
loccurrence : ?id=1, pour afcher le tout premier ouvrage de votre base de donnes.
En PHP, le passage darguments via lURL dune page seffectue de la faon suivante :
Le premier attribut est prcd dun ?, juste aprs le nom de la page afficher. On crit tout
dabord le nom de la variable qui le reprsente, puis la valeur attribue, les deux donnes tant
spares par un signe =.
Les attributs suivants sont crits la suite, spars chacun par le symbole & et selon la mme
syntaxe nom=valeur.
Vous dcouvrirez ainsi la fiche dtaille de louvrage slectionn.
Aperu dans Dreamweaver
Pour afcher les donnes de vos jeux denregistrements dans Dreamweaver, assurez-
vous tout dabord que la page visualiser est bien ouverte dans votre logiciel de cration
web.
Cliquez ensuite sur le bouton Afchage en direct, prsent en haut de la fentre princi-
pale. La fentre principale de Dreamweaver se rafrachit alors pour afcher lensemble
des donnes appeles par votre page (voir Figure 5.20).
Pendant laffichage des donnes dynamiques, Dreamweaver prsente ces donnes sur un fond
jaune. Il indique de cette faon que ces donnes sont verrouilles et non modifiables par lutili-
sateur.
Figure 5.19
Un aperu des ensembles
de pages dans votre
navigateur favori.
Comme pour laperu du rsultat dans votre navigateur, votre page de description a
besoin dun paramtre prcis an de savoir quel enregistrement afcher. Vous aurez
alors besoin de paramtrer laperu dans Dreamweaver an de vous rendre rellement
compte du fonctionnement de votre page.
Si aucun paramtre nest fourni Dreamweaver lors de laffichage de laperu, celui-ci utilise la valeur
par dfaut dfinie lors de la cration du jeu denregistrements.
Si le ltre de votre jeu denregistrements utilise un paramtre dURL, vous pouvez
lenvoyer laperu de la manire suivante :
1. Cliquez sur Afchage en direct, puis sur Paramtres de demande HTTP (voir
Figure 5.21).
2. Ajouter une demande dURL en cliquant sur le (+). Dans le champ Nom mettez id
et en Valeur 2 (voir Figure 5.22). Si plusieurs paramtres sont ncessaires, tapez-les
Figure 5.20
Passage du mode cration laffichage en direct des donnes dynamiques dans Dreamweaver.
Figure 5.21
Les paramtres de votre
page passent par cette
barre doutils.
la suite les uns des autres en les sparant par le symbole &. Validez alors le formu-
laire en cliquant sur OK.
3. Une fois les paramtres saisis, cliquez sur le bouton Actualiser le mode cration qui
est reprsent par une che bleue qui tourne sur elle-mme ou tapez sur F5.
La fentre principale de Dreamweaver se rafrachit alors pour afcher les donnes
correspondant aux paramtres dURL saisis. Si cela ne fonctionne pas bien, annuler
le mode Afchage en direct puis ractiver-le. Cette fois-ci votre page safche nor-
malement.
Pour quitter le mode Aperu et revenir ldition de vos pages, cliquez nouveau sur le
bouton Afchage en direct.
Finalisation de la page de description
Vous venez davoir un aperu de votre premire page dynamique. Content du rsultat ?
Pourtant, la tche est loin dtre termine. Sur cette page manquent encore deux don-
nes indispensables : le nom de lauteur du livre, ainsi que les catgories de lannuaire
dans lequel il est rang. Pour obtenir ces informations, vous allez devoir utiliser deux
nouveaux jeux denregistrements, cette fois plus complexes que celui dni, pour
retrouver les informations de base de votre livre. Dcouvrez maintenant le mode de
cration avanc des jeux denregistrements.
Figure 5.22
Compltez lURL de votre
page avec les paramtres
ncessaires.
Cration avance de jeux denregistrements
Les tapes dtailles jusquici permettaient de crer facilement un jeu denregistre-
ments simple. En effet, en utilisant ces mthodes, vous ne pouviez extraire les donnes
que dune seule table la fois et nutiliser quun seul critre de ltre ou de tri la fois.
Pour afcher le nom de lauteur dun ouvrage de votre catalogue, vous allez devoir uti-
liser deux tables en mme temps : la table shop_livres, pour trouver lidentiant de
lauteur dont le livre est actuellement afch, et la table shop_auteurs, pour retrouver
les nom et prnom de cet crivain en question. Ce type de requte nest pas ralisable
laide du mode de cration simple des jeux denregistrements. Vous allez donc devoir
utiliser le mode Avanc.
Lutilisation du mode de cration Avanc des jeux denregistrements demande de srieuses connais-
sances en langage SQL (Structured Query Language) et sur ses variantes utilises avec les diffrentes
technologies de cration de sites dynamiques. Pour tous les exemples utiliss dans cet ouvrage, les
requtes SQL mettre en place dans le mode de cration Avanc seront dtailles. Si, toutefois, vous
souhaitez obtenir dautres informations par le biais dune requte SQL, reportez-vous au site officiel de
MySQL pour obtenir plus dinformation sur la syntaxe prcise de ces requtes : www.mysql.com.
Slection de la connexion
Pour crer un jeu denregistrements en mode Avanc, procdez comme suit :
1. Cliquez sur le bouton Ajout dun jeu denregistrements du panneau Liaisons (+).
Une fois la fentre Jeu denregistrements ouverte, cliquez sur le bouton Avance
pour basculer celle-ci en mode Avanc (voir Figure 5.23).
Figure 5.23
La cration de jeux
denregistrements,
version avance.
En mode Avanc, le bouton Avance se nomme dsormais Simple, il permet de revenir au mode
de cration classique des jeux denregistrements.
2. Dans le champ Nom, saisissez le nom que vous souhaitez donner votre jeu denre-
gistrements. Cest par ce nom que celui-ci sera accessible dans le panneau Liaisons
par la suite. Auteur semble un nom adquat pour le jeu denregistrements qui nous
intresse actuellement.
3. Dans la liste droulante Connexion, slectionnez la connexion partir de laquelle
vous souhaitez crer le jeu denregistrements. Si cette connexion nexiste pas
encore, vous pouvez la crer ds prsent en utilisant le bouton Dnir, prsent sur
la droite de la liste.
Construction de la requte SQL
Il vous faut maintenant construire votre requte. Dreamweaver propose pour cela plu-
sieurs aides la cration. Celles-ci peuvent vous faciliter la tche dans la mesure o
elles dispensent parfois de la saisie manuelle dune requte SQL entire. Elles garantis-
sent galement la cohrence de la requte et vous permettent de ne pas oublier une table
en cours de route.
Toutefois, pour la requte SQL qui nous intresse ici, ces aides ne sont que dun trs
maigre secours. Elles vont vous servir mettre en place la base de la requte. Vous
la complterez au clavier par la suite, suivant les instructions donnes un peu plus
loin.
Pour construire la base de votre requte de faon logique, procdez de la faon sui-
vante :
1. Dans la zone lments de base de donnes se trouve lensemble des lments
disponibles dans la connexion slectionne. Dployez la section Tables, puis
dans celle-ci la table de laquelle vous souhaitez extraire des donnes,
shop_auteurs. Slectionnez le champ que vous souhaitez intgrer au jeu denre-
gistrements puis cliquez sur le bouton SELECT, prsent sur la droite de la liste
(voir Figure 5.24).
Figure 5.24
Choisissez les champs
intgrer dans la requte.
Le dbut de la requte se construit alors dans la fentre SQL (voir Figure 5.25).
Si vous souhaitez slectionner la totalit des champs dune table, slectionnez simplement le nom
de la table en question dans la liste lments de base de donnes avant de cliquer sur le bouton
SELECT.
2. Recommencez la premire tape pour chacun des champs auxquels vous souhaitez
pouvoir accder depuis votre jeu denregistrements. Ces champs peuvent tre issus
de tables diffrentes.
Pour la requte qui nous intresse, vous allez pour linstant vous contenter de trouver
lidentiant unique de louvrage dont vous souhaitez connatre lauteur. Slectionnez
donc le champ id de la table shop_livres.
3. Maintenant, il vous faut mettre en place les ltres utiliser dans le jeu denregistre-
ments. Pour cela, slectionnez tout dabord dans la liste lments de base de don-
nes le champ qui servira de base au ltre. Puis cliquez sur le bouton WHERE pour
ajouter ce champ votre requte. Ce champ est une fois de plus lidentiant unique
de louvrage dcrit : la donne id de la table shop_livres.
4. Saisissez dans la zone SQL loprateur que vous souhaitez utiliser pour le ltre, la
suite du nom de champ que vous venez dinsrer.
Pour connatre les oprateurs autoriss dans les requtes SQL, reportez-vous la documentation de la
variante de SQL utilise par la technologie avec laquelle vous dveloppez votre site.
5. Si votre ltre est fond sur une valeur absolue, lquivalent de la valeur entre dans
la cration simple des jeux denregistrements, saisissez cette valeur la suite de
loprateur dans la zone SQL. Si, au contraire, le ltre est fond sur une variable, il
vous faudra crer celle-ci. Pour cela :
Cliquez sur le bouton (+), prsent en dessous de la zone SQL. La fentre de cration
des variables (Ajouter un paramtre) souvre alors (voir Figure 5.26).
Figure 5.25
Votre requte est en
cours de construction.
6. Dans le champ Nom de cette nouvelle fentre, saisissez le nom de la variable que
vous souhaitez crer. Par exemple idURL. Prcisez ensuite dans le champ Type le
type de donnes utilis pour cet argument, ici Integer.
7. Dans le champ Valeur par dfaut, saisissez la valeur par dfaut de cette variable.
Cest--dire la valeur utiliser lorsque aucune valeur dynamique nest trouvable.
Dans le champ Valeur dexcution, saisissez le nom de la variable qui doit donner sa
valeur au ltre. Il sagit ici de prciser la variable de formulaire, dURL ou de ses-
sion avec la syntaxe propre au langage que vous utilisez pour le dveloppement de
votre site.
Dans notre cas, il sagit de rcuprer la variable id passe dans lURL de la page de
description. On utilisera donc la syntaxe PHP permettant la rcupration des varia-
bles dURL : $_GET[id]. En PHP, le mot cl $_GET suivi du nom de nimporte
quelle variable saisi entre crochets et guillemets permet de rcuprer la valeur de
nimporte quelle variable dURL. Gardez cela en mmoire, cela vous sera trs utile
par la suite.
8. Une fois ces trois paramtres dnis, il vous suft de cliquer sur le bouton OK pour
que la variable nouvelle dnie apparaisse dans le tableau Variables de la fentre
Jeu denregistrements (voir Figure 5.27).
9. Dans la zone SQL, saisissez la suite de loprateur le nom de la variable que vous
venez de crer. Rptez les tapes 3 9 si vous souhaitez inclure dautres ltres
votre requte.
Mais, dans notre cas, ce seul ltre est ncessaire.
Figure 5.26
Si votre requte ncessite
lutilisation de variables,
vous passerez par cette
fentre pour les sites PHP.
Figure 5.27
Votre variable est dfinie.
Vous pouvez galement appliquer un critre de tri votre requte. Pour cela, slectionnez le champ
concern dans la liste lments de base de donnes et cliquez sur le bouton ORDER BY pour ajouter
ce champ comme critre de tri votre requte (voir Figure 5.28).
Mise en place dune jointure
Pour linstant, votre requte SQL se contente de retrouver lidentiant douvrage pass
en paramtre dURL dans la table shop_livres. Rien de trs glorieux !
Cest que, pour retrouver les informations relatives lauteur de louvrage, il va vous
falloir procder la mise en place dune jointure. Et ce type de construction de
requte SQL nest pas assist par linterface de Dreamweaver. Mais quest-ce quune
jointure ?
Il sagit de rapatrier les donnes de deux tables diffrentes, alors que le critre de ltre
utilis ne peut tre appliqu qu une seule de ces tables. Lexemple est ici agrant : on
cherche un nom dauteur depuis un identiant douvrage. Ces identiants douvrage ne
sont pas stocks dans la table shop_auteurs. Vous allez donc devoir mettre en place une
jointure. Cest--dire utiliser une donne faisant le lien entre lenregistrement de la
table shop_livres et les informations de la table shop_auteurs. Ce lien est effectu
grce la correspondance de donnes entre le champ id de la table shop_auteurs et le
champ auteur de la table shop_livres.
Premire modication effectuer dans votre requte, prcisez les champs de la table
shop_auteurs que vous souhaitez utiliser. Il sagit des champs id, nom et prnom. Sai-
sissez donc ces noms de champs, en prcisant bien la table dont ils sont extraits, dans la
section SELECT de votre requte. Celle-ci doit alors ressembler :
SELECT shop_livres.id, shop_auteurs.id, shop_auteurs.nom, shop_auteurs.prenom
FROM shop_livres WHERE shop_livres.id = idURL
Le champ id de la table shop_auteurs sera utilis par la suite pour lier le nom de lauteur la liste
complte des ouvrages quil a crits. Cet id sera pass en paramtre, de la mme faon que lidenti-
fiant unique de louvrage crit est pass en paramtre de la fiche dtaille.
Figure 5.28
Votre requte contient
la fois des critres de filtre
et de tri.
Ainsi, les donnes relatives lauteur seront disponibles dans le jeu denregistrements
issu de cette requte. Reste faire la jointure entre les donnes de lauteur et louvrage
afch. Pour cela, on utilise la commande INNER JOIN du langage SQL. Elle se prsente
sous la forme suivante :
INNER JOIN table ON critre_de_lien
o table correspond la table de laquelle sont extraits les nouveaux champs,
et critre_de_lien sert dnir les champs quivalents dune table lautre. Ainsi, dans
le cas de nos auteurs, la section INNER JOIN de la requte aura la forme suivante :
INNER JOIN shop_auteurs ON shop_auteurs.id = shop_livres.auteur
Ce qui donne la requte complte suivante :
SELECT shop_livres.id, shop_auteurs.id, shop_auteurs.nom, shop_auteurs.prenom
FROM shop_livres INNER JOIN shop_auteurs ON shop_auteurs.id =
shop_livres.auteur WHERE shop_livres.id = idURL
Il existe plusieurs manires deffectuer des jointures en MySQL. La syntaxe INNER JOIN utilise ici nest
que lune delles. Dautres sont disponibles, documentes dans la rfrence officielle de MySQL.
Seule solution pour obtenir cette requte dans le mode de cration Avanc de Dream-
weaver : la saisir la main. Une fois cette requte complte, nhsitez pas la tester et
vrier que le rsultat obtenu est cohrent. Noubliez pas que, lors dun test effectu
en mode Avanc avec un ltre, cest la valeur par dfaut de ce ltre qui est utilise.
Si vous oubliez ce dtail, le rsultat peut vous surprendre.
Votre requte est logiquement termine. Si les rsultats obtenus lors du test vous convien-
nent, cliquez sur le bouton OK de la fentre Jeu denregistrements pour valider le jeu
denregistrements et ajouter celui-ci au panneau Liaisons.
Si vous savez exactement quelle est la requte SQL que vous souhaitez excuter afin de crer votre
jeu denregistrements, saisissez-la simplement dans le champ SQL de la fentre. Pensez tester atten-
tivement cette requte avant denregistrer le jeu qui en rsultera.
Affichage du nom de lauteur
Une fois le jeu denregistrements dni, linsertion du nom de lauteur sur la page de
description nest plus quune formalit. Comme pour lensemble des champs issus de la
table shop_livres, faites simplement glisser les informations Nom et Prnom issues de
votre nouveau jeu denregistrements jusqu lendroit de la page o vous souhaitez afcher
ceux-ci (voir Figure 5.29).
Si vous trouvez des incohrences dans une page que vous visionnez dans Dreamweaver,
rfrez-vous toujours au visionnage dans un navigateur qui rte beaucoup mieux ce
que verront vos futurs clients.
Si vous vous souvenez bien des spcications de site dnies dans le chapitre prc-
dent, le nom de lauteur afch sur la page de description dun ouvrage doit permettre
daccder la liste de tous les livres crits par ce mme auteur. Vous allez donc devoir
dnir, sur ce texte, un lien dynamique vers la page auteur.php, en envoyant celle-ci
lidentiant unique de lauteur afch. Rien de plus simple !
Passage de paramtres dans un lien
Pour passer un paramtre avec un lien, la manipulation est simple :
1. Slectionnez tout dabord le texte que vous souhaitez transformer en lien dans votre
document. Il peut sagir dun texte xe aussi bien que dun texte gnr dynamique-
ment. Dans Proprits, qui se situe en bas de votre cran, cliquez sur le bouton
Rechercher le chier, prsent ct du champ Lien qui a la forme dun petit dossier.
La bote de dialogue Slectionner un chier souvre alors (voir Figure 5.30).
2. Dans cette bote de dialogue, slectionnez tout dabord le chier vers lequel doit
pointer votre lien. Dans notre cas, auteur.php, mme si cette page nexiste pas
encore sur le site. Dans ce cas, saisissez simplement son nom.
Figure 5.29
Le nom de lauteur, intgr la page.
3. Une fois le chier choisi, cliquez sur le bouton Paramtres, prsent en bas
droite de la bote de dialogue. La fentre de dnition des paramtres souvre alors
(voir Figure 5.31).
4. Dans la colonne Nom, saisissez le nom du paramtre envoyer. Ce nom doit tre le
mme que celui dni dans le ltre du jeu denregistrements de la page de destination.
Nous appellerons ce paramtre id.
5. Slectionnez le champ Valeur, cliquez sur le bouton en forme dclair prsent dans
ce champ. Cest maintenant la bote de dialogue Donnes dynamiques qui souvre
(voir Figure 5.32).
Figure 5.30
Slectionnez le fichier
vers lequel doit pointer
votre lien.
Figure 5.31
Quels paramtres
allez-vous fournir
votre prochaine page ?
6. Slectionnez dans la liste des colonnes du jeu denregistrements celle dont vous
souhaitez passer la valeur en paramtre : le champ id du jeu denregistrements
Auteur. Si vous le dsirez, vous pouvez galement choisir un format particulier
pour cette valeur dans la liste droulante Format.
Si la valeur que vous passez en paramtre est susceptible de contenir des caractres spciaux ou des
espaces, veillez ce que ceux-ci ninterfrent pas avec ladresse de la page. Choisissez donc un format
de type Encode - URL Encode afin dviter les conflits.
7. Une fois le choix du champ effectu, cliquez sur le bouton OK pour valider celui-ci.
Si plusieurs paramtres sont ncessaires, rptez les tapes 4 7 pour chacun deux.
8. Une fois ce paramtre dni, cliquez sur le bouton OK de la fentre Paramtres
pour lajouter au lien dni. Il ne vous reste qu fermer la bote de dialogue Slec-
tionner an que le lien soit dnitivement cr.
Vous pouvez pour linstant tester lafchage du nom de lauteur sur la page. Pour cela,
utilisez les techniques de test dcrites plus haut. Vous verrez le nom de lauteur safcher
pour chacun des livres de votre catalogue.
Figure 5.32
Quelle donne
allez-vous utiliser ?
Affichage des catgories dannuaire
Lafchage des catgories dannuaire auxquelles appartient louvrage dcrit sur la page
actuelle suit la mme logique que lafchage du nom de lauteur. Il sagit de placer sur
la page un lien prcisant, par exemple, "Dcouvrez les autres ouvrages traitant de :
Dreamweaver". Ce lien renvoie vers la liste de tous les ouvrages traitant du mme sujet,
cest--dire dont lun des identiants de catgorie dannuaire correspond la catgorie
slectionne (voir Figure 5.33).
Nous verrons plus loin comment mettre en place ces pages reprenant tous les ouvrages rangs dans
une catgorie ou tous les ouvrages dun mme auteur.
Vous laurez compris, pour mettre en place ces liens, vous allez devoir procder la
cration avance de deux jeux denregistrements, un par catgorie laquelle correspond
louvrage. Ces jeux devront, laide dune jointure, rapatrier les libells en identiant
chacune des deux catgories auxquelles appartient louvrage dcrit.
Les requtes construire se prsentent sous la forme suivante.
Jeu denregistrements Categories :
SELECT shop_categories.libelle, shop_livres.id, shop_categories.id
FROM shop_livres INNER JOIN shop_categories ON shop_categories.id
=shop_livres.categorie WHERE shop_livres.id=idURL
Jeu denregistrements Sous-Categories :
SELECT shop_sous_categories.libelle, shop_livres.id, shop_sous_categories.id
FROM shop_livres INNER JOIN shop_sous_categories ON
shop_sous_categories.id=shop_livres.categorie
WHERE shop_livres.id=idURL
idURL a pour valeur par dfaut 1 et comme valeur dexcution $_GET[id] comme
pour les jeux denregistrements prcdents.
Une fois ces jeux construits, il vous sufra dafcher les donnes shop_cate-
gories.libelle et shop.sous_categories.libelle sur la page de description de
Figure 5.33
Les catgories dannuaire
sont affiches sur la page.
louvrage et de passer en paramtre le champ shop_categories.id ou shop.sous_cate-
gories.id la page listannu.php.
Pour cela, suivez la mme mthode que celle dtaille pour la mise en place du nom de
lauteur.
Mise en place de la page Auteur
Une fois la page de description dtaille dun ouvrage termine, vous avez touch la
majorit des systmes dafchage de donnes dynamiques de Dreamweaver CS4. Vous
tes dsormais capable de crer un jeu denregistrements et den afcher des donnes
sur une page. Vous pouvez galement utiliser ces donnes pour dnir dynamiquement
un lment de votre page ou envoyer un paramtre une page distante par linter-
mdiaire dun lien.
Toutes ces mthodes vont tre utilises pour crer la page prsentant lensemble des
ouvrages dun mme auteur (voir Figure 5.34). Toutes ces mthodes, plus quelques
autres.
Figure 5.34
Lensemble des ouvrages
dun mme auteur.
Commencez donc par la cration dune nouvelle page blanche utilisant la technologie
de site dynamique PHP. Puis crez vos jeux denregistrements.
Cration des jeux denregistrements
Pour afcher la liste des ouvrages dun mme auteur, deux jeux denregistrements vont
tre ncessaires :
Le premier, nomm Auteur, va reprendre les nom et prnom de lauteur en question
an de les afcher en haut de la page.
Le second, nomm Livres, va reprendre la liste des ouvrages de cet auteur, trie par
date de parution.
La mise en place de ces jeux denregistrements est trs simple.
Extraction du nom de lauteur
Pour le jeu Auteur, vous ne devriez pas avoir besoin de beaucoup daide :
1. Ouvrez la fentre de cration de jeux denregistrements en mode Simple (voir
Figure 5.35).
2. Choisissez Auteur comme nom du jeu denregistrements et slectionnez votre
connexion par dfaut en tant que source.
3. Slectionnez la table shop_auteurs comme table source et conservez la slection
de toutes les colonnes de cette table.
4. Enn, mettez en place un ltre sur le champ id, celui-ci devant tre gal au paramtre
dURL id.
Figure 5.35
Cration dun jeu
denregistrements
en mode Simple.
Votre jeu denregistrements Auteur est dni. Vous navez plus qu insrer ses donnes
sur votre nouvelle page.
Liste des livres de lauteur
La liste des ouvrages de lauteur va, elle, demander un peu plus de travail. En effet,
contrairement tous les jeux denregistrements que vous avez crs jusquici, celui-ci
est susceptible de renvoyer plusieurs enregistrements en mme temps. En effet, rien
nempche un auteur dcrire plusieurs livres.
Il va donc falloir dcider dans quel ordre ces enregistrements doivent tre afchs.
Cest le but de la fonction de tri.
Mais, tout dabord, crez la base de votre jeu denregistrements :
1. Ouvrez la fentre de cration de jeux denregistrements en mode Simple.
2. Choisissez Livres comme nom du jeu denregistrements et slectionnez votre
connexion par dfaut en tant que source.
3. Slectionnez la table shop_livres comme table source et conservez la slection de
toutes les colonnes de cette table.
4. Enn, mettez en place un ltre sur le champ auteur, celui-ci devant tre gal au
paramtre dURL id.
Dfinition de lordre des enregistrements
La dnition de lordre des enregistrements a toujours lieu dans la fentre Jeu denre-
gistrements, laide des champs de formulaire disponibles sous la zone Filtre (voir
Figure 5.36).
Pour appliquer un ordre votre jeu denregistrements, procdez comme suit :
1. Dans la premire liste droulante de la section Trier de la fentre Jeu denregis-
trements, slectionnez la colonne de votre table suivant laquelle vous souhaitez
effectuer le tri. Il sagira ici de la date de parution, le champ Parution de la table
shop_livres.
Figure 5.36
La dfinition de lordre
des enregistrements
a lieu dans la fentre
de dfinition du jeu.
Il nest pas indispensable quun champ soit slectionn dans votre jeu denregistrements pour tre
utilis comme critre de tri.
2. Slectionnez dans la seconde liste droulante le type dordre que vous souhaitez
appliquer la colonne slectionne : croissant ou dcroissant. Nous procderons ici
de manire dcroissante.
Il ne vous reste qu tester le jeu denregistrements laide du bouton Tester de la fen-
tre Jeu denregistrements an de vous assurer que vos enregistrements apparaissent
bien dans lordre voulu.
Si cest le cas, validez alors le jeu denregistrements laide du bouton OK. Celui-ci
apparat alors dans le panneau Liaisons.
Rgions rptes
Lafchage de la liste des livres dun mme auteur va faire appel une nouvelle fonction-
nalit de Dreamweaver : les rgions rptes. Les rgions rptes permettent dinsrer
plusieurs enregistrements la suite sur une seule page. Pour bien comprendre leur fonc-
tionnement, il est important de revenir au fonctionnement des jeux denregistrements.
Les jeux denregistrements permettent dextraire dune table de votre base de donnes
une srie denregistrements, suivant certains critres de ltre. Lorsque vous utilisez un
objet de type Texte dynamique pour insrer lun des champs dun jeu denregistre-
ments, vous nafchez en fait que la donne correspondant au premier enregistrement
disponible dans le jeu, ce premier enregistrement dpendant bien entendu des critres
de ltre et de tri appliqus au jeu. Si vous insrez une seconde fois un objet Texte dyna-
mique comprenant le mme champ, vous ne ferez que rpter linformation du premier
enregistrement une seconde fois (voir Figure 5.37).
Figure 5.37
Deux textes dynamiques
la suite = deux fois la
mme donne !
Si vous souhaitez afcher les donnes correspondant aux deux premiers enregistre-
ments, il va vous falloir utiliser une rgion rpte. En plaant un objet de type Texte
dynamique lintrieur dune rgion rpte paramtre pour afcher les deux premires
donnes, vous obtiendrez le rsultat souhait (voir Figure 5.38).
En pratique, pour insrer une rgion rpte sur votre page, procdez comme suit :
1. Si ce nest dj fait, insrez dans votre page les contenus dynamiques que vous sou-
haitez intgrer dans une rgion rpte (Titre avec son lien vers la page de description
de louvrage, Date de parution, Prix, toutes ces donnes issues du jeu denregis-
trements Livres). Vous pouvez galement vous occuper de la mise en page de ces
contenus avant dintgrer la rptition la page.
Pour crer un lien sur le titre qui vous envoie directement sur la page descriptive de
cet ouvrage, faites comme prcdement. Surlignez le titre, dans Proprits, en bas,
dans lien cliquez sur licne Dossier. Dans URL, mettez le chier Destinataire, ici
livre_details.php, puis cliquez sur Paramtres. Dans Nom, mettez id et dans Valeur,
laide de licne clair, choississez id du jeu denregistrements Livres.
Figure 5.38
Avec une rgion rpte,
les donnes des deux
enregistrements sont bien
affiches.
2. Slectionnez dans la fentre principale de Dreamweaver lensemble des contenus
que vous souhaitez rpter, ici nous pouvons selectionner toutes les informations
sur les livres crits par un mme auteur.
3. Cliquez sur le bouton Rgion rpte, prsent dans la section Donnes dans le n
menu du haut, huitime bouton (voir Figure 5.39).
4. Dans la liste droulante Jeu denregistrements, slectionnez le jeu denregistrements
sur lequel se fondent les contenus de la rgion rpte. Cest--dire Livres.
Les donnes utilises dans une rgion rpte ne peuvent venir que dun seul jeu denregistrements
la fois !
5. Slectionnez combien de fois la rgion doit tre rpte sur la page. Pour cela,
cochez loption X Enregistrements la fois et compltez la zone de texte correspon-
dante avec le nombre denregistrements souhait ; 10 dans notre cas.
Si vous voulez afcher la totalit des enregistrements disponibles, slectionnez
simplement loption Tous les enregistrements.
6. Cliquez sur le bouton OK pour valider la rgion.
La zone prcdemment slectionne est maintenant entoure dun liser gris portant la
mention Rpter. Il dnit ainsi les limites de la rgion rpte que vous venez de mettre en
place.
En passant en mode Afchage en direct, vous pourrez constater que la zone en question
est bel et bien rpte selon les options que vous avez choisies (voir Figure 5.40).
Pour modifier une rgion rpte, il faut faire appel au comportement de serveur qui dfinit celle-ci.
Lutilisation des comportements de serveur est dtaille un peu plus loin dans ce chapitre.
Figure 5.39
La dfinition dune rgion
rpte est trs simple.
Navigation page page
La page que vous venez de mettre en place afche les dix derniers ouvrages dun
auteur. Mais que se passe-t-il si lauteur en question a crit plus de dix livres ? Ces
ouvrages plus anciens sombrent dans le nant
Pour pallier ce problme, Dreamweaver offre diffrents objets de navigation page
page et de numrotation des enregistrements. La navigation page page se compose de
quatre liens (voir Figure 5.41), afchs ou non suivant la section du jeu denregistrements
que vous tes en train de parcourir :
Un lien vers la premire page, celle qui contient le premier enregistrement du jeu
slectionn. Ce lien nest pas afch quand ce premier enregistrement est afch.
Un lien vers la page prcdente. Celui-ci nest pas afch lorsque vous parcourez la
premire page du jeu denregistrements.
Un lien vers la page suivante (les X prochains enregistrements du jeu). Ce lien nest
pas afch si aucun enregistrement ne suit ceux actuellement afchs.
Un lien vers la dernire page, cest--dire les X derniers enregistrements du jeu. Ce
lien nest pas afch si ces derniers enregistrements sont prsents sur la page.
Figure 5.40
La rgion est bel et bien
rpte.
Figure 5.41
Une navigation page
page en action !
Linsertion dune navigation page page sur votre site provoque une modification profonde des jeux
denregistrements qui y sont dfinis, ceci afin de pouvoir raliser la sparation de ces jeux en plusieurs
pages. Prenez garde ne perdre aucune donne lors de la mise en place de cette navigation.
Pour insrer une navigation page page sur votre site, procdez comme suit :
1. Dans la fentre principale de Dreamweaver, placez le point dinsertion lendroit
o vous souhaitez voir apparatre la barre de navigation.
2. Dans la barre doutils Insertion > Objets de donnes > Pagination du jeu denregis-
trements, et slectionnez la commande Barre de navigation du jeu denregistrements
dans le menu qui apparat alors (voir Figure 5.42).
3. Dans la fentre Barre de navigation du jeu denregistrements, slectionnez le jeu
denregistrements dont dpendra la navigation en question, dans la liste droulante
Jeu denregistrements. la Figure 5.43), il sagit de Livres.
4. Slectionnez ensuite lapparence que vous souhaitez donner la navigation : liens
de type texte (cochez la case Texte) ou graphiques (cochez la case Images). Si vous
choisissez cette seconde option, assurez-vous davoir bien sauvegard vos pages
avant dinsrer la barre de navigation.
5. Une fois ces options dnies, cliquez sur le bouton OK pour valider linsertion de la
barre.
Figure 5.42
Les diffrentes options
de cration dune navi-
gation page page.
Figure 5.43
Choisissez le type de navi-
gation page page que
vous souhaitez.
Celle-ci apparat alors lendroit dsir (voir Figure 5.44). Passez en aperu dans votre
navigateur pour vrier quelle vous emmne bien denregistrement en enregistrement.
La navigation page page peut galement tre utilise si aucune rgion rpte nexiste sur le docu-
ment actuel. Elle mnera alors vers la mme page mais renseigne avec lenregistrement suivant.
Cela peut se rvler trs pratique pour crer une navigation entre les diffrentes pages dune
mme rubrique.
Il est galement possible dinsrer chacun des liens de la barre de navigation page
page indpendamment. Pour cela, il suft de :
1. Slectionner sous le bouton Pagination du jeu denregistrements le type de lien que
vous souhaitez utiliser (Dplacer vers la premire page, Dplacer vers la page
prcdente, Dplacer vers la page suivante, Dplacer vers la dernire page).
2. Prciser ensuite dans la bote de dialogue qui souvre le jeu denregistrements dont
dpend ce nouveau lien (voir Figure 5.45) puis cliquer sur le bouton OK.
Le lien en question est alors insr lendroit voulu. Il ne vous reste qu le tester en
aperu dans votre navigateur.
Figure 5.44
La barre de navigation
page page est en place.
Figure 5.45
De quel jeu va dpendre
le lien Page suivante.
Numrotation des enregistrements
Autre possibilit de Dreamweaver CS4, allant de pair avec la navigation page page :
linsertion dune numrotation des enregistrements.
Ce type dobjet permet dafcher le nombre total denregistrements disponibles dans le
jeu utilis, ainsi que la position dans ce jeu des premiers et derniers enregistrements
afchs sur la page actuelle (voir Figure 5.46). Ceci peut tre trs utile pour amliorer
lergonomie de listes particulirement longues et aider les visiteurs trouver plus faci-
lement leurs marques sur votre site.
Bien entendu, ce type dobjet na un sens rel que si vous utilisez des rgions rptes
sur votre page. Dans le cas contraire, la position des premiers et derniers enregistre-
ments aura toujours pour valeur la position de lenregistrement unique afch
lcran.
Pour mettre en place une numrotation des enregistrements, procdez de la manire sui-
vante :
1. Dans la fentre principale de Dreamweaver, placez le point dinsertion lendroit
o vous souhaitez insrer le bloc de numrotation.
2. Cliquez sur la che descendante accompagnant le bouton Afcher le nombre
denregistrements et slectionnez loption tat de navigation du jeu denregistrements
dans le menu qui apparat (voir Figure 5.47).
Figure 5.46
La numrotation des
enregistrements aide se
reprer dans une longue
liste de donnes.
3. Dans la fentre tat de navigation du jeu denregistrements (voir Figure 5.48),
slectionnez simplement le jeu denregistrements auquel sapplique la numrotation.
Puis cliquez sur OK pour valider linsertion.
La barre de numrotation est alors insre lendroit voulu. Pour la tester, passez sim-
plement en mode Aperu dans Dreamweaver (voir Figure 5.49).
Comme pour la navigation page page, chacun des lments de la barre de numro-
tation est disponible indpendamment. Vous pouvez ainsi insrer sur votre page le nombre
total denregistrements existant dans un jeu donn ou le numro de celui actuellement
afch.
Pour cela :
1. Slectionnez simplement le type dlment insrer (Enregistrement de dbut,
Enregistrement de n, Nombre total denregistrements) dans le menu disponible
sous le bouton Afcher le nombre denregistrements.
2. Puis prcisez dans la fentre qui souvre le jeu denregistrements servant de base au
comptage (voir Figure 5.50) et validez en cliquant sur le bouton OK.
Figure 5.47
Insrez une barre de
numrotation complte.
Figure 5.48
Quel jeu denregis-
trements voulez-vous
accompagner dune
barre de numrotation ?
Figure 5.49
La numrotation
est oprationnelle.
Le champ de numrotation est alors afch sous la forme dun texte dynamique. Vous
pouvez tester sa pertinence en passant simplement en mode Afchage en direct dans
Dreamweaver.
Dtail de lannuaire
La structure mme de lannuaire de votre boutique oblige la cration de deux pages :
Les catgories de produits, issues de la table shop_categories sont afches en perma-
nence dans la navigation de la boutique et donnent accs une premire page nomme
cat.php et listant lensemble des sous-catgories de cette rubrique. Ainsi, dans la cat-
gorie Informatique, vous y retrouverez une simple liste des grands thmes informati-
ques de la boutique tels Dreamweaver, Photoshop, Flash La cration de cette page ne
ncessite en ralit que deux jeux denregistrements. Le premier est destin retrouver
la catgorie mre slectionne en fonction dun paramtre dURL. Vous avez dj mis
en place ce type de requte plusieurs fois dans ce chapitre.
Un deuxime jeu denregistrements liste les sous-catgories correspondantes, issues de
la table shop_sous_categories laide dune requte simple du type :
SELECT * FROM shop_sous_categories WHERE parent = idURL
Dans laquelle idURL reprsente encore une fois un identiant disponible dans lURL
de la page.
La page de sous-catgorie est destine lister directement les ouvrages traitant dun
sujet prcis. La mise en place de ces pages de dtail de lannuaire rpond exactement
la mme logique que la page rassemblant lensemble de luvre dun auteur.
Les manipulations pour crer la page listant les ouvrages sont donc quasiment iden-
tiques celles utilises pour la mise en place de la liste des livres dun auteur (voir
Figure 5.51).
Vous aurez simplement besoin de deux jeux denregistrements supplmentaires. Le pre-
mier est destin retrouver le titre de la sous-catgorie afcher en fonction de lURL.
Figure 5.50
Slectionnez
le jeu adquat.
Le second afchera le nom de la catgorie parente an de faciliter la navigation dans la
boutique.
Si vous avez compris les chapitres prcdents, vous pourez aisement raliser ces quel-
ques pages. De plus, cela constitue un bon entranement si vous souhaitez ajouter
dautres pages personnelles. Si vous ny arrivez pas, nous vous invitons vous rfrer
aux codes sources qui se trouvent sur le site Pearson (http://www.pearson.fr/livre/
?GCOI=27440100291780#). Il vous suft dextraire larchive boutique.zip situe dans
Boutique Demo et douvrir le chier qui vous intresse avec un bloc-notes ou Dream-
weaver.
Note sur les comportements de serveur
Derrire chacune des manipulations que vous avez effectues dans ce chapitre se
cachent en fait des comportements de serveur. Cest de cette faon que Dreamweaver
nomme lensemble des scripts destins lafchage et lutilisation de donnes dyna-
miques.
Figure 5.51
Une des pages
dannuaire finales.
Le panneau Comportements de serveur
Le panneau Comportements de serveur (voir Figure 5.52) se trouve dans le groupe de
panneaux Base de donnes et Liaisons. Il est accessible par la commande Comporte-
ments de serveur du menu Fentre de Dreamweaver (ou par le raccourci clavier
Ctrl+F9).
Il vous est toujours possible dajouter un comportement de serveur une page en cliquant
sur le bouton dajout prsent en haut gauche du panneau Comportements de serveur.
Il vous faudra alors choisir dans le menu qui apparat le type de comportement insrer
puis le paramtrer laide de la bote de dialogue adquate.
Vous obtiendrez alors un rsultat identique celui que vous avez dj obtenu en utilisant
les diffrents outils de la section Donnes de la barre doutils de Dreamweaver.
Modification dun comportement de serveur
Le panneau Comportements de serveur peut tout de mme tre utile pour modier un
contenu dynamique dj insr sur une page, telle la frquence de rptition dune
rgion rpte.
Pour modier un comportement de serveur dj dni :
1. Slectionnez dans la fentre principale de Dreamweaver la zone correspondant au
comportement en question. Il peut sagir dun simple texte ou de lensemble des
contenus existants lintrieur dune Rgion. Le comportement de serveur li
Figure 5.52
Le panneau Compor-
tements de serveur.
Ajout d'un comportement de serveur
Liste des comportements
de serveur dj dfinis
Langage utilis
Suppression d'un comportement de serveur
cette slection apparat alors en surbrillance dans le panneau Comportements de
serveur (voir Figure 5.53).
2. Double-cliquez alors sur le comportement en question pour faire apparatre la bote
de dialogue utilise pour sa dnition.
3. Faites les modications voulues dans cette bote de dialogue puis validez ces modi-
cations en cliquant sur le bouton OK de celle-ci.
Le comportement de serveur est alors modi. Il ne vous reste qu tester la page pour
vous en assurer.
Figure 5.53
Cest ce comportement
quil faut modifier.
6
Installation dun moteur
de recherche
Cration du formulaire
Les actifs
Page de rsultat
Avec lensemble des pages de description douvrage et de catalogue que vous avez cr
dans le chapitre prcdent, vos visiteurs devraient tre capables de trouver nimporte
quel ouvrage propos par votre boutique. Ils peuvent en effet accder ceux-ci via la
page daccueil de votre site, en consultant la liste complte des livres dun mme auteur
ou en slectionnant le thme de leur choix dans lannuaire thmatique mis leur dispo-
sition. Que demander de plus ?
Peut-tre un moteur de recherche
Cette fonctionnalit offre lavantage de donner une rponse immdiate vos visiteurs,
sans quils aient naviguer plusieurs minutes dans votre boutique avant de trouver
larticle de leur choix. Il leur suft de saisir un mot cl pour obtenir directement toutes
les rubriques dannuaires et les livres qui pourraient correspondre leur recherche.
Pratique !
De votre ct, la mise en place dun moteur de recherche va vous permettre daborder
de faon simple lutilisation de champs de formulaire dans Dreamweaver et, surtout,
lutilisation des variables issues de ceux-ci dans les pages de rsultats. Jusquici, ds
que vous souhaitiez transfrer une donne dune page lautre de votre site web, vous
utilisiez les paramtres dURL an de retrouver, par exemple, un identiant sur une
page suivante. Pour la cration de votre moteur de recherche, il va vous falloir mettre en
place une autre mthode.
Le moteur de recherche tant galement un lment susceptible dtre utilis nimporte
o sur votre site, cest galement loccasion pour vous de voir lutilisation des actifs
dans la cration dun site laide de Dreamweaver
Lutilisation des actifs sur un site dynamique
Dans ce chapitre, vous allez donc abondamment utiliser les actifs. Les actifs sont un
systme de gestion centralise du code. Ils permettent denregistrer dans un chier
indpendant une section de page et de la rutiliser sur nimporte quelle page de votre
site web. Limmense avantage de ce systme est la synchronisation automatique qui est
alors prise en charge par Dreamweaver.
Dans ce chapitre, cest le formulaire de recherche dans son intgralit que vous
allez raliser sous forme dactifs. Celui-ci sera enregistr dans un chier part,
puis intgr dans chacune des pages, ou chacun des modles de page, de votre bou-
tique en ligne. Si vous souhaitez modier la prsentation du formulaire, vous
naurez qu rectier le chier central ainsi enregistr. Toutes les pages qui lutili-
sent seront alors mises jour automatiquement. Cest lune des fonctionnalits la
plus pratique de Dreamweaver CS4 lorsque lon gre un site dune taille un tant soit
peu importante.
Les actifs possdent toutefois certaines limites qui peuvent savrer handicapantes dans
le cadre de la cration dun site dynamique. Pour parler un peu techniquement, les actifs
sont une portion du corps de vos pages web, cest--dire une section de son code HTML
compris entre les balises <body> et </body>. Ces deux balises dnissent, en HTML, le
contenu qui doit rellement tre afch dans la fentre du navigateur. Elles se limitent
donc lintgration des lments visibles (textes, images, formulaires, lments de
mise en forme) de votre page.
Il existe en HTML une autre balise importante nomme <header> et qui sert intgrer
les informations den-tte de vos pages, entre autres, les mtadonnes qualiant la page
(balise de titre, balises META). La balise <header> contient galement les program-
mes JavaScript (les comportements) ou PHP (comme la dnition des jeux denregis-
trements), ncessaires au bon droulement de la page.
Le contenu de cette balise den-tte nest pas gr par les actifs de Dreamweaver. Il
vous est donc impossible de dnir une action, un jeu denregistrements ou un compor-
tement de serveur dans ce type de chier. Cette caractristique des actifs ne vous posera
pas de problmes pour la mise en place de votre moteur de recherche. En revanche, elle
peut vous handicaper pour la mise en place de la connexion client prsente au prochain
chapitre. Gardez en tte que vous devrez mettre en place les scripts de connexion
des utilisateurs sur chaque page de votre site, et non sur lactif central que vous
raliserez alors.
141 INSTALLATION DUN MOTEUR DE RECHERCHE
Cration du formulaire de recherche
Toute recherche sur le Net passe par la saisie dinformations dans un champ de formu-
laire. Commencez donc par crer ce champ de formulaire !
Cration physique du formulaire
La cration physique dun formulaire dans Dreamweaver est trs simple. En effet, le
logiciel de Macromedia possde lensemble des outils ncessaire la cration facile et
rapide de formulaires HTML.
Commencez tout dabord par crer un document vierge. Ce document servira de base
votre formulaire. Il sera plus tard converti en lment de bibliothque an dtre utilis
dans les diffrentes pages de votre site web.
1. Si ce nest dj fait, afchez la section Formulaires de la barre doutils de Dream-
weaver (voir Figure 6.1).
2. Dans cette barre doutils, cliquez sur lobjet Formulaire, le premier sur la gauche.
Cet outil se charge dajouter le cadre du formulaire votre page, sous la forme dun
rectangle rouge pointill (voir Figure 6.2).
Dreamweaver CS4 possde des options daccessibilit beaucoup plus pousses que ses versions pr-
cdentes. Le logiciel dAdobe vous propose dsormais de complter diffrents champs de textes alterna-
tifs pour chaque lment de formulaire que vous insrerez sur votre page. Prenez bien soin de complter
ces informations mme si elles ne rentrent pas prcisment dans la dfinition de votre boutique.
Figure 6.1
La barre doutils Formu-
laire de Dreamweaver.
Figure 6.2
Formulaire ? Par !
Elles contribueront rendre votre commerce en ligne accessible aux personnes souffrant de han-
dicap.
Ainsi, dans les navigateurs pour dficients visuels, les textes alternatifs que vous aurez choisis seront
lus aux internautes. Ceux-ci pourront alors simplement connatre lensemble des donnes ncessaires
leur inscription sur votre boutique mme si ces informations napparaissent pas clairement sur vos
pages.
3. Cliquez maintenant sur le bouton Champ de texte, situ juste ct du bouton
prcdent. Un champ de formulaire de type Texte est ajout votre page, au
niveau du point dinsertion (voir Figure 6.3). Dreamweaver ouvre alors une
fentre. Remplissez le champ id et tiquette, motcle par exemple. Et validez
cette fentre.
4. Enn, cliquez sur le bouton Bouton (sur la droite de la barre doutils) an dinsrer
le bouton de validation de la recherche. De mme, ne remplissez cette fois-ci que le
champ id avec la valeur Envoyer. La base de formulaire est en place (voir
Figure 6.4).
Figure 6.3
Champ Texte ? Par !
Figure 6.4
Bouton de validation ? Par !
Nommage des lments
Il existe une autre mthode pour nommer les lments dun formulaire :
1. Dans la fentre ddition de Dreamweaver, slectionnez tout dabord le cadre du
formulaire. Vous pouvez pour cela vous aider du slecteur de balise, prsent en
bas de la fentre ddition principale, et cliquer dans celui-ci sur la balise
<form>.
2. Dans Proprits, compltez le champ id, prsent en bas de lcran (voir Figure 6.5),
par un nom plus explicatif, comme Recherche.
3. Slectionnez prsent le champ de type Texte prsent dans votre formulaire et, de
la mme faon, renommez celui-ci motcle.
4. Enn, slectionnez le bouton de validation, prsent ct de votre champ Texte.
Pour celui-ci, dans Proprits, modiez la valeur du paramtre Valeur et remplacez-
la par Chercher. Il sagit en fait du texte afch sur le bouton.
Vriez quAction coche bien sur Envoy le formulaire. Cette action permet de for-
mater le bouton pour quil valide lensemble des donnes prsentes dans le formu-
laire que vous lui avez associ.
Action !
Une fois les lments de votre formulaire de recherche nomms de faon cohrente, il
ne vous reste qu dnir laction que va effectuer ce formulaire. Pour cela :
1. Slectionnez nouveau la balise <form>, qui dnit lensemble de votre formulaire.
Cest en effet celle-ci qui contient les lments propres lexpdition des donnes
saisies par lutilisateur.
Figure 6.5
Pensez nommer de faon cohrente vos formulaires !
2. Dans Proprits, reprez le champ Action (voir Figure 6.6). Dans ce champ, saisissez
ladresse de votre future page de rsultat des recherches (recherche.php). Saisissez de
prfrence ce nom en utilisant un chemin absolu, cela facilitera lutilisation du formu-
laire depuis les lments de bibliothque de Dreamweaver.
Les liens relatifs permettent daller vers une page selon la position de la page actuelle. On se sert donc
de lemplacement de la page qui contient le lien pour dfinir la destination. Il est alors impratif que
la page de destination se trouve sur le mme serveur et dans la mme arborescence que la page
source. Par exemple :
site/test.php pointe vers le fichier test.html du sous-rpertoire site situ dans le mme
rpertoire que la page actuelle.
../test.php pointe vers un fichier contenu dans le rpertoire parent (symbolis par les ..).
../site/test.php remonte dun rpertoire pour se rendre dans le sous-rpertoire site et afficher
la page test.html.
Les liens absolus ne dpendent pas de la position de la page source. Cest le cas des liens externes,
mais rien ne vous interdit de les utiliser sur votre propre site la place de liens relatifs. Dans tous les
cas, il suffit dindiquer la totalit de ladresse du document : http://www.maboutique.com/
auteur.php.
Figure 6.6
Slectionnez ici la page
qui affichera les rsultats
de la recherche.
3. Veillez ce que la liste droulante Mthode, dans Proprits, reste bien sur POST. Cela
signie que les donnes seront envoyes de manire transparente la page de rsultat,
et non pas suivant la mthode GET, qui, elle, utilise lURL de la page !
Votre formulaire de recherche est dsormais termin, vous allez pouvoir enregistrer
celui-ci en tant qulment de bibliothque an de vous en servir nimporte o sur votre
boutique !
Sur Internet, il existe deux mthodes pour envoyer des donnes dune page vers une autre :
La mthode GET consiste passer ses informations via lURL de la page de destination, comme
vous lavez dj fait lors de la cration du catalogue.
La mthode POST consiste, elle, passer ces informations de manire transparente pour
lutilisateur, comme cest le cas quand les donnes proviennent dun formulaire.
Dans les deux cas, les donnes sont rcuprables dans la page de destination laide dune variable
PHP classique, utilisable ensuite nimporte o sur votre page.
Les actifs
Dans Dreamweaver CS4, le terme actifs regroupe en fait les lments grs par le pan-
neau Actifs. Ce panneau regroupe lensemble des mdias disponibles pour la cration
dun site web (Images, Vido, mais galement Liens ou Couleurs). Il fonctionne la
faon dune librairie dlments (au sens informatique du terme) et permet de retrouver
trs facilement un mdia insrer sur la page.
Parmi ces types de mdias, il y a ce que Dreamweaver appelle la bibliothque, symbo-
lise par un livre ouvert. Il sagit dun regroupement de "portions de code", cest--dire
de sections de pages cres par vos soins et rutilisables souhait dune page lautre
de votre site web. Pourquoi en effet redvelopper un moteur de recherche sur plusieurs
pages, alors quun simple glisser/dposer sufrait linsrer rapidement sur chacune
des pages de votre site web, une fois celui-ci conu ?
Pour apprendre grer les bibliothques de Dreamweaver, vous allez devoir, tout
dabord, connatre le panneau Actifs.
Le panneau Actifs
Cest dans le panneau Actifs que vous allez pouvoir procder la cration de vos diffrents
lments de bibliothque (voir Figure 6.7).
Dans Dreamweaver, les actifs sont en fait des lments de bibliothque utilisables dans plusieurs
pages de votre site et modifiables de faon centrale.
Pour afcher le panneau Actifs, slectionnez la commande Fentre > Actifs.
Il se compose de quatre lments principaux :
une barre de boutons permettant de choisir le type de mdia afcher ;
une liste des diffrents lments disponibles pour le type de mdia choisi ;
un aperu de llment actif dans la liste ;
une barre de bouton permettant la gestion, la modication ou linsertion des actifs.
La liste des diffrents lments possde plusieurs caractristiques : nom, taille et chemin complet (par-
fois aussi le type de fichier). Vous pouvez trier les lments de la liste suivant la caractristique de
votre choix. Pour cela, cliquez simplement sur longlet correspondant (voir Figure 6.8).
Figure 6.7
Le panneau Actifs permet
la gestion des actifs,
des bibliothques
et des modles.
Figure 6.8
Les lments des actifs
peuvent tre classs selon
diffrents critres.
Cration dun lment de bibliothque
Pour crer un nouvel objet dans la bibliothque dun site, vous pouvez partir dun docu-
ment vierge ou dj existant. Les objets dune bibliothque se dnissent partir dune
slection dans une page.
Pour crer un objet dans une bibliothque :
1. Ouvrez le panneau Actifs laide de la commande Fentre > Actifs de la fentre
Document.
2. Slectionnez dans la fentre principale de Dreamweaver llment de la page qui va
devenir un objet de la bibliothque (voir Figure 6.9). Dans le cas actuel, cest la
totalit du formulaire de recherche quil vous faut slectionner.
3. Une fois cette slection faite, cliquez sur le bouton Nouvel lment de la bibliothque
du panneau Actifs qui se situe tout en bas de cette fentre. Dreamweaver ajoute alors
la liste des objets un nouvel objet appel Sanstitre que vous renommez recherche
(voir Figure 6. 10).
Figure 6.9
Slectionnez les lments
de la page que vous
souhaitez convertir en
lments de bibliothque.
Figure 6.10
Cliquez sur le bouton
Nouvel lment de la
bibliothque. Dream-
weaver ajoute un objet
Sanstitre la liste des
objets dj prsents.
4. Renommez lobjet que vous venez de crer an de le retrouver facilement lors
dune utilisation ultrieure. Pour cela, cliquez simplement sur le nom de cet objet
an quil devienne ditable. Vous pouvez alors le changer votre guise.
La slection que vous aviez effectue apparat dsormais en surbrillance (jaune par
dfaut) et nest plus modiable dans le document (voir Figure 6.11). Pour modier cet
lment, vous devrez modier lobjet de la bibliothque.
Lajout dun lment peut aussi passer par les menus de la fentre Document.
1. Slectionnez dans la fentre Document lensemble des lments que vous souhaitez
voir devenir un objet.
2. Slectionnez la commande Modier > Bibliothque > Ajouter un objet dans la
bibliothque.
3. Renommez lobjet que vous venez de crer an de le retrouver facilement lors
dune utilisation ultrieure.
La slection que vous venez de convertir apparat avec la mme surbrillance que prc-
demment et nest plus modiable directement dans le document.
Les lments de bibliothque sont stocks sur le disque dur de votre machine lintrieur du site que
vous btissez. Ils sont prsents dans un dossier Library sous forme de fichiers possdant lextension
Lbi.
Insertion dun lment de bibliothque dans une page
Avant de sattaquer la cration de la page de rsultat de votre moteur de recherche, un
petit point sur lutilisation des lments de bibliothque dans Dreamweaver simpose.
Histoire de pouvoir rellement faire ce que vous souhaitez de votre formulaire de
recherche !
Figure 6.11
La slection, devenue un
lment de bibliothque,
apparat dsormais en
surbrillance dans les
pages HTML.
Une fois quon a dni des objets en bibliothque, il est trs facile de sen resservir sur
autant de pages quon veut. Pour insrer un lment de bibliothque dans une page :
1. Ouvrez le panneau Actifs laide de la commande Afcher > Bibliothque de la
fentre Document.
2. Slectionnez lobjet que vous souhaitez insrer dans votre page et faites-le glisser
dans la fentre Document (voir Figure 6.12).
3. Le pointeur de la souris se transforme alors en point dinsertion. Faites glisser
lobjet jusqu lendroit voulu dans la page et lchez le bouton de la souris.
4. Lobjet est insr dans votre page et apparat en surbrillance.
Il vous est dornavant impossible de modier cette partie de la page directement. Pour
y effectuer une modication, vous devrez modier lobjet de la bibliothque lui-mme
ou redonner la zone un caractre modiable en la dtachant de la bibliothque.
Pour dtacher une partie dune page de sa bibliothque :
1. Cliquez du bouton droit sur lobjet que vous souhaitez rendre modiable.
2. Dans le menu contextuel qui souvre alors, slectionnez la commande Sparer de
loriginal (voir Figure 6.13). Dreamweaver vous informe alors que la liaison avec la
bibliothque sera coupe pour cet objet.
Figure 6.12
Faites glisser le nom de
lobjet jusqu son point
dinsertion dans la page.
Figure 6.13
Slectionnez la commande
Sparer de loriginal pour
dtacher un lment de
son quivalent dans la
bibliothque.
3. La zone napparat alors plus en surbrillance, vous pouvez la modier de la mme
manire que toute autre partie de la page (voir Figure 6.14).
La portion de page que vous venez de rendre modiable nest dsormais plus attache
son objet dorigine dans la bibliothque. De ce fait, si vous dcidez de modier lobjet
dans la bibliothque, cette portion de la page ne sera pas affecte.
Vous pouvez galement rendre un objet modifiable en le slectionnant et en cliquant sur le bouton
Dtacher de loriginal dans Proprits.
Mise jour des lments de bibliothque
Une fois un lment dni dans une bibliothque et insr dans plusieurs pages dun
site, il reste bien entendu possible de le modier.
Modification dun lment de bibliothque
Les lments de bibliothque se modient de la mme manire quun document HTML
classique.
Pour effectuer des modications sur un objet :
1. Afcher le volet Bibliothque du panneau Actifs.
2. Slectionnez dans la liste des diffrents objets prsents celui que vous souhaitez
modier, puis cliquez sur le bouton Modier en bas de la fentre du panneau Actifs.
Une nouvelle fentre Document souvre alors, contenant lobjet que vous dsirez
diter (voir Figure 6.15).
3. Effectuez les modications voulues sur lobjet. Vous navez ici accs qu un
nombre restreint de fonctions. Seules les options de mise en page ou dimporta-
tion ne mettant pas en jeu les balises den-ttes sont concernes par ces modi-
cations.
Figure 6.14
Une fois redevenu modi-
fiable, le texte napparat
plus en surbrillance et
nest plus attach la
bibliothque.
4. Enregistrez lobjet laide de la commande Fichier > Enregistrer et fermez la fen-
tre Document. Dreamweaver vous informe que les modications que vous venez
deffectuer peuvent avoir des consquences sur le site tout entier (voir Figure 6.16).
5. Si vous souhaitez que Dreamweaver vrie lensemble des pages de votre site local
et mette jour les pages utilisant llment de bibliothque que vous venez de
modier, cliquez sur Oui. Dans le cas contraire, il vous faudra rappeler Dream-
weaver de faire cette mise jour plus tard.
6. La vrication et la mise jour de lensemble des pages du site local peuvent pren-
dre un temps variable suivant le nombre de chiers prsents dans le site. Une fois
cette mise jour termine, Dreamweaver afche la bote de dialogue Mettre jour
les pages comprenant un rapport complet, qui prcise, entre autres, le nombre de
pages vries, le nombre de pages mises jour et la dure totale de lopration
(voir Figure 6.17).
Figure 6.15
Une fois ouvert dans une
fentre ddition, un l-
ment de bibliothque se
prsente comme une
page classique. Cette der-
nire ne peut toutefois
pas contenir dinforma-
tions telles quune cou-
leur de fond, des
comportements ou des
feuilles de style.
Figure 6.16
Aprs chaque modifica-
tion dun objet, Dream-
weaver vous invite
mettre jour lensemble
des pages du site.
7. Cliquez sur le bouton Terminer pour fermer la bote de dialogue Mettre jour les
pages.
La modication de lobjet que vous venez deffectuer a t rpercute sur lensemble
du site.
Mise jour dune page
Si vous navez pas effectu la mise jour automatique lorsque vous avez chang un l-
ment de bibliothque, vous pouvez dcider de leffectuer pour une seule page
nimporte quel moment.
La mthode utiliser pour mettre jour les lments de bibliothque dune page est semblable
celle utilise pour mettre jour les modles. Profitez-en pour faire ces deux mises jour sur vos sites
ou vos fichiers au mme moment.
Pour mettre jour les objets dune page :
1. Ouvrez cette page dans la fentre Document laide de la commande Fichier >
Ouvrir.
2. Slectionnez dans la fentre Document la commande Modier > Bibliothque >
Mettre jour la page en cours.
3. Dreamweaver se charge de modier la page ouverte et de mettre jour les diffrents
lments de bibliothque quelle contient.
Figure 6.17
Une fois lensemble des
mises jour effectu, un
rapport complet permet
de savoir combien de
fichiers ont subi des modi-
fications.
Mise jour dun site
Si vous avez apport de gros changements vos lments de bibliothque et que vous
navez pas utilis les mises jour automatiques, vous pouvez galement mettre jour
votre site complet laide dune commande unique.
Pour mettre jour les lments de bibliothque dun site :
1. Slectionnez la commande Modier > Bibliothques > Mettre jour le site. La
fentre Mettre jour les pages safche alors (voir Figure 6.18).
2. Cochez la case lments de la bibliothque dans la liste Mettre jour.
3. Slectionnez dans la liste droulante Regarder dans si vous souhaitez mettre
jour lensemble des pages du site ou seulement les pages utilisant un objet bien prcis
de la bibliothque.
Si vous choisissez de mettre jour un site complet, assurez-vous de slectionner le
bon site dans la seconde liste droulante.
Si vous choisissez la deuxime option, prcisez dans la deuxime liste droulante
de quel objet il sagit.
4. Cochez la case Afcher le journal pour avoir un compte rendu des diffrentes mises
jour effectues lors de la manipulation.
Figure 6.18
Cochez la case lments
de la bibliothque pour
mettre jour les objets
dans lensemble du site.
5. Cliquez sur le bouton Dmarrer pour commencer la mise jour des chiers. Suivant
le nombre de chiers prsents dans le site utilisant les lments de bibliothque, sa
mise jour peut prendre un certain temps.
6. Une fois les mises jour termines, Dreamweaver afche leur journal, qui prcise
le nombre de chiers vris et modis.
7. Cliquez sur Terminer pour fermer la fentre Mettre jour les pages.
Page de rsultat
Le formulaire de recherche devrait tre oprationnel. Mais le seul moyen de rellement
sen assurer est de raliser une page de rsultat pour celui-ci. Cette page de rsultat
va tre gnre automatiquement, en fonction du mot cl envoy par le moteur de
recherche.
Elle va afcher deux types de rsultats :
les deux premires catgories dannuaire contenant le mot cl recherch ;
les dix premiers ouvrages dont le titre ou la description contiennent le mot cl
saisi.
Vous laurez compris, pour obtenir cela, vous allez devoir raliser deux jeux denregis-
trements !
Jeux denregistrements
Avant de crer vos jeux denregistrements, commencez par crer une page vierge et
enregistrer celle-ci comme tant la page de rsultat.
Catgories dannuaire
Pour retrouver lintrieur de nos catgories et sous-catgories le mot cl, nous allons
utiliser un jeu denregistrements complexe. Nous allons vrier que pour chaque
libell, le mot cl du formulaire se trouve dans celui-ci.
Un jeu denregistrements complexe se construit grce au mode de cration Avanc des
jeux denregistrements. Il nest pas ncessaire de revenir sur linterface de celui-ci.
Normalement, votre requte nale devrait ressembler :
SELECT *
FROM shop_categories
WHERE shop_categories.libelle LIKE %motcle%
pour les catgories "POST" et "$POST"o motcle, un texte, est cette fois une variable
de formulaire dnie laide du mot cl $_POST[motcle] et de la valeur par dfaut
NULL. La mthode $POST sert rcuprer dans une page une donne expdie depuis
un formulaire prsent dans la page prcdente. Cest--dire de votre formulaire de
recherche.
Une fois ce jeu denregistrements valid, lafchage des rsultats de la requte sur la
page tient de la routine.
Pour le jeu denregistrements complexe de sous-catgorie, suivez cette dmarche en
crivant sous_categorie :
SELECT *
FROM shop_sous_categories
WHERE shop_sous_categories.libelle LIKE %motcle%
Ouvrages
La mise en place du jeu denregistrements destin retrouver les ouvrages correspon-
dant votre recherche va utiliser galement un jeu denregistrements complexe. Lide
est, comme pour lafchage des ouvrages correspondant une catgorie dannuaire vu
au chapitre prcdent, de faire une recherche sur plusieurs champs de la table
shop_livres simultanment. Cette recherche va seffectuer la fois sur les champs Titre
et Description de la table Livres.
De mme pour les catgories dannuaire que nous venons de chercher, la requte desti-
ne retrouver les livres va se fonder sur un oprateur de type Contient et non pas sur
une galit. Il est en effet rare que la description ou le titre dun ouvrage corresponde
un simple mot cl.
La construction du jeu denregistrements complexe est la mme qu la section prc-
dente. Votre requte nale devrait ressembler :
SELECT * FROM shop_livres WHERE shop_livres.titre LIKE %motcle% OR
shop_livres.resume LIKE %motcle% ORDER BY shop_livres.parution DESC
o motcle est cr de la mme manire que les jeux denregistrements categorie et
sous_categorie.
Linstruction ORDER BY utilise dans la requte construite ci-dessus permet de trier les diffrents enre-
gistrements trouvs par date de parution du livre quils concernent. Cest de cette faon que lon
rdige un critre en tri en langage SQL.
Les deux requtes construites ici permettent deffectuer une recherche sur une cat-
gorie douvrage ou sur les titre et rsum dun ouvrage. Vous pouvez facilement ten-
dre les comptences de ce moteur en ajoutant divers jeux denregistrements la page
de rsultat. Ainsi, pour que cette recherche gnrique puisse ventuellement faire
apparatre une liste dauteurs, crez un jeu denregistrements contenant une requte
du type :
SELECT * FROM shop_auteurs WHERE shop_auteurs.nom LIKE %motcle% OR
shop_auteurs.prenom LIKE %motcle% ORDER BY shop_auteurs.nom DESC
Utilisez ensuite les donnes issues de cette requte pour crer une nouvelle section
"Auteur" dans la page de rsultat.
Affichage des rsultats sur la page
Pour afcher les rubriques dannuaire et les ouvrages correspondant la recherche de
vos visiteurs, vous allez utiliser deux rgions rptes :
La premire va contenir le libell des rubriques dannuaires correspondant la
recherche. Chacune delles sera lie sur la page annu.php avec en paramtre
lidentiant unique de catgorie qui lui correspond. Cette rgion sera rpte
deux fois.
La seconde rgion rpte contiendra les titres, les prix et le rsum des ouvrages
correspondant la recherche. Le titre de louvrage sera li la che de description
dtaille du livre, en utilisant son identiant unique en tant que paramtre. Cette
rgion sera rpte dix fois, an dafcher les dix premiers livres correspondant la
recherche (voir Figure 6.19).
Il vous est galement possible dy afcher le nom de lauteur du livre. Dans ce cas, vous
devrez, lors de la cration de votre jeu denregistrements, ajouter une jointure vers la
table shop_auteurs votre requte. De cette faon, vous pourrez retrouver les champs
Nom et Prnom de cette table et les lier la page listant lensemble des uvres de cet
auteur.
Figure 6.19
Deux rgions rptes
suffisent la cration de
la page de rsultats.
Mais que faire si la requte en question ne retourne aucun rsultat ? Il vous faudra alors
afcher un message derreur sur la page de rsultat, spciant quaucun produit ne cor-
respond la requte effectue, et masquer par la mme occasion la grille de rsultat
devenue inutile. La manipulation est assez simple, et grandement aide par linterface
de Dreamwaver. Vous allez faire appel, pour cela, des rgions conditionnelles. Ce
sont, linstar des rgions rptes, des zones de la page qui ne peuvent safcher qu
certaines conditions : un jeu denregistrements vide, une donne inexistante Vous
allez donc procder simplement :
1. Au-dessus de lensemble de champs de rsultat de votre page, insrez simplement
une ligne de texte correspondant votre message derreur. Par exemple : "Il ny a
pas de rsultat pour votre requte" (voir Figure 6.20).
2. Slectionnez ensuite cette ligne de texte, et choisissez loption Afcher si le jeu
denregistrements est vide dans Donnes > Afcher la rgion de la barre doutils de
Dreamweaver (voir Figure 6.21)
Figure 6.20
Le message derreur
saffiche dabord comme
un texte classique.
Figure 6.21
Les options de champs
conditionnels sont dispo-
nibles ct des rgions
rptes.
3. Puis, dans la fentre Afcher si le jeu denregistrements est vide, slectionnez le jeu
denregistrements qui conditionne justement lafchage de la zone. Ici, cest le
jeu Rsultats (voir Figure 6.22).
4. Votre message derreur apparat alors, entour dun cadre nomm Afcher si
signe que son afchage est conditionn ltat dun jeu denregistrements.
Procdez de la mme manire, mais cette fois avec un champ de type Afcher si le jeu
denregistrements nest pas vide, pour conditionner lafchage des rsultats de la
recherche. Lensemble des rsultats et leur navigation ne seront alors afchs que si
votre requte renvoie effectivement des produits. Vous pouvez ensuite procder de la
mme manire pour tous les types de donnes afcher.
Une fois la page de rsultat ralise et sauvegarde, insrez votre formulaire de recher-
che sur lune des pages de votre site. Celui-ci sera alors oprationnel et vous pourrez le
tester sur votre serveur de dveloppement. Bien entendu, assurez-vous de possder suffi-
samment de donnes dans votre base avant de procder ce test !
Le moteur de recherche que vous venez de crer est assez basique. Il se contente dun seul mot cl,
quil recherche indistinctement dans une srie de donnes de votre base. Il est possible de crer un
formulaire de recherche avance permettant vos visiteurs de rechercher une donne dans un
champ prcis de votre base de donnes (Titre, Description, Auteur). Construire ce type de formu-
laire de recherche est plus complexe et ncessite une relle programmation PHP et MySQL, plutt que
lutilisation de Dreamweaver. Il sagira en effet de construire dynamiquement une requte SQL, en
fonction des champs de formulaire renseigns par le visiteur. Ce type de requte ne peut donc pas
tre ralis via les jeux denregistrements de Dreamweaver
Figure 6.22
Choisissez le jeu qui
conditionnera laffichage.
7
Accueil des clients et ouverture
des comptes
Les clients dans la base de donnes
Sessions PHP
Cration dun client laide des assistants
Connexion, dconnexion des utilisateurs
La section Client du site
Reconnatre un utilisateur dans une zone non restreinte
Intgration du formulaire de connexion
Toutes les pages de votre boutique que vous avez dveloppes au cours des deux
derniers chapitres taient destines lafchage des livres la vente. Il serait peut-
tre temps de vous intresser dun peu plus prs vos visiteurs et vos futurs
clients !
Mais de quoi ont-ils exactement besoin, ces futurs clients ?
Avant tout, ils ont besoin de pouvoir crer un compte personnel sur votre site. De cette
faon, ils pourront vous fournir toutes les informations ncessaires au traitement des
commandes quils vont passer sur votre boutique. Ce compte comprend un ensemble de
coordonnes dj dnies lors de la cration de la base de donnes utilise par votre
boutique, au Chapitre 4 de cet ouvrage : nom, prnom, adresse, numro de tlphone,
etc. La cration du compte de chaque client va passer par un formulaire spcial dans
lequel vos visiteurs vont saisir leurs informations personnelles. charge pour vous de
bien complter votre base de donnes avec ces donnes et de vous assurer quun client
ne peut sinscrire deux fois sur votre boutique. Dreamweaver permet de grer assez
facilement ce genre de dtail.
Plus compliqu, vous allez devoir galement identier vos clients lorsquils viendront,
plus tard, passer une commande. Cette identication va passer par un formulaire de
connexion qui va tre prsent sur toutes les pages de votre site. Ainsi, si vos utilisateurs
souhaitent se connecter sur leur compte an dy passer une commande, ils pourront le
faire tout moment. Bien entendu, il vous faudra prvoir, en annexe de ce formulaire de
connexion, un lien de dconnexion permettant au client de quitter sa connexion en
cours. Une simple mesure de scurit si lordinateur quil utilise est situ dans un
endroit public, comme un Webcaf.
Dernire tape de laccueil des clients, la mise en place dun compte Client sur le site.
Cest la partie /account/ de votre boutique. Cette section est uniquement rserve aux
clients qui se sont dj inscrits sur votre boutique. Elle permet par exemple de modier
les informations personnelles (adresse) dun client ou de consulter lhistorique de ses
commandes.
Tout cela a lair bien compliqu, mais rassurez-vous ! Dreamweaver possde, en gn-
ral, les outils quil faut pour mettre en place facilement ce genre dinterface, grce des
objets ddis laccueil et la connexion des membres sur un site web. Suivez le
guide !
Les clients dans la base de donnes
Avant de vous lancer dans la ralisation de vos pages web, un petit rappel sur la table de
donnes que vous allez utiliser pour vos clients. Celle-ci est dcrite dans le tableau ci-
aprs.
Tableau 4.5 : Structure de la table shop_client
Cl
primaire
Cl
index
Cl
unique
Commentaire
id int
10
x Identiant unique
du client
mail varchar
client, utilise
comme identi-
ant unique sur le
site
nom varchar
64 Nom du client
prenom varchar
64 Prnom du client
telephone varchar
10 Numro de tl-
phone du client
mdp varchar
32 Mot de passe du
client, informa-
tion crypte avant
son stockage en
base de donnes
161 ACCUEIL DES CLIENTS ET OUVERTURE DES COMPTES
Gardez bien en tte trois donnes dans cette table :
id est la cl primaire de la table Client dans votre base de donnes. Il sert distin-
guer chacun des enregistrements de la table et sassurer que celle-ci est cohrente.
mail est utilis comme identiant unique sur le site lui-mme. Cest--dire que
vous allez interdire deux de vos clients de possder la mme adresse e-mail. Cette
restriction semble plutt logique, sachant que ladresse e-mail est la donne la plus
personnelle que lon puisse trouver dans la base.
mdp, enn, contient le mot de passe que le client aura choisi pour sidentier sur
votre boutique. Ce mot de passe sera stock en clair dans la base de donnes et
vri chaque fois quun client tente de se connecter sur lune des pages de votre
boutique.
Nous avons pris le parti de ne pas crypter le mot de passe du client dans la boutique en ligne cre
ici. Cette solution offre un avantage certain : il est possible de redonner au client, tout moment, son
mot de passe en extrayant celui-ci de la base de donnes. En effet, un mot de passe crypt avec les
mthodes PHP courantes ne peut pas tre dcrypt. Cest dailleurs tout son intrt. Linconvnient de
ce stockage en clair, cest quil vous faudra tre certain du niveau de scurit fourni par votre hbergeur
pour lui confier ces mots de passe.
Si toutefois vous souhaitez que le mot de passe de vos clients soit crypt avant son insertion dans la
base de donnes, vous devrez obligatoirement greffer du code PHP dans votre page Dreamweaver.
En effet, Dreamweaver nest pas capable de grer tout seul le cryptage des informations. Vous devrez
galement penser modifier lensemble des requtes dinsertion et de consultation de la base de
donnes, quand il sagira de vrifier ou de renseigner le mot de passe du client. Un cryptage ne peut
en effet pas tre insr la vole dans une requte SQL, mme complexe.
ad_ligne1 varchar
64 Premire ligne de
ladresse physi-
que du client
ad_ligne2 varchar
64 Seconde ligne de
ladresse physi-
que du client
ad_cp varchar
5 Code postal de
ladresse physi-
que du client
ad_ville varchar
64 Ville de ladresse
physique du client
Tableau 4.5 : Structure de la table shop_client (suite)
Cl
primaire
Cl
index
Cl
unique
Commentaire
Sessions PHP
Comme prcis dans lintroduction de ce chapitre, les pages contenues dans le dos-
sier /account/ ne seront accessibles que si le visiteur montre patte blanche. Pour la
consultation des autres pages, la connexion na rien dobligatoire.
Toutefois, il peut tre trs utile de savoir tout moment si un visiteur sest identi ou
non sur vos pages. En effet, dans ltat actuel de votre site, vous ne proposerez lachat
immdiat dun article qu un utilisateur qui sest identi. Pour les simples visiteurs, le
lien dachat est remplac par une bote de connexion et une invitation la cration dun
compte sur le site.
Pour permettre ce fonctionnement, vous allez utiliser les sessions PHP. Les sessions,
cest un ensemble de variables systme gres par PHP et qui permettent didentier un
utilisateur, de savoir si celui-ci est connect et surtout de connatre son identit.
Dreamweaver gre de manire quasiment transparente les sessions PHP. Il met gale-
ment disposition du crateur de site un ensemble de variables de session permettant de
reconnatre lutilisateur actuellement connect et donc de rechercher des lments propres
celui-ci dans votre base de donnes. Pratique !
Mais, pour efcace quil soit dans ce traitement, Dreamweaver CS4 possde encore
quelques petites failles quil vous faudra contourner la main. Vous verrez cela le
moment venu.
Cration dun client laide des assistants
Dreamweaver CS4 possde un grand nombre dassistants lorsquil sagit de crer rapi-
dement des pages manipulant du contenu dynamique. Cest en faisant appel lun de
ces assistants que vous allez crer le formulaire dinscription votre boutique en ligne.
Bien entendu, quelques modications y seront ncessaires an dobtenir le meilleur
rsultat possible.
Assistant de formulaire dinsertion denregistrement
Les formulaires dinsertion denregistrement permettent dajouter des donnes une
table existante, sans pour autant utiliser linterface classique de gestion de votre base de
donnes (voir Figure 7.1). La cration de ce type de formulaire dans Dreamweaver
passe par un assistant et ne prend que quelques instants.
La cration rapide dun formulaire dinsertion passe par une seule bote de dialogue
dans laquelle vous allez dnir la fois les caractristiques du formulaire et celles du
mode dinsertion des donnes. Pour crer un formulaire dinsertion, commencez par
crer une nouvelle page dynamique dans Dreamweaver et nommez celle-ci signin.php
la racine de votre site.
Cette page ne doit pas ncessairement tre associe un jeu denregistrements. Elle
doit cependant faire partie de votre site dynamique et utiliser la connexion dnie dans
ce prol de site.
Une fois cette nouvelle page cre, procdez de la manire suivante :
1. Dans Insertion, cliquez sur Objet de donnes puis, situe sur la droite de licne
Insrez un enregistrement, et slectionnez la commande Assistant de formulaire
dinsertion denregistrement dans le menu qui apparat (voir Figure 7.2).
Figure 7.1
Le formulaire de cration
de compte, une fois en
place.
Figure 7.2
Slectionnez lassistant
dans la liste des objets
dinsertion.
2. La bote de dialogue Formulaire dinsertion denregistrement souvre alors (voir
Figure 7.3). Cest dans cette fentre que vous allez dnir le comportement et
lapparence de votre formulaire dinsertion.
3. Dans la liste droulante Connexion, prsente en haut de la bote de dialogue, slec-
tionnez la connexion correspondant la base de donnes que vous souhaitez mettre
jour.
4. Dans la liste droulante Table, slectionnez, parmi celles accessibles sur votre
connexion, la table qui sera mise jour par lintermdiaire de votre formulaire.
Dans notre cas, il sagit de la table shop_client.
5. Dans le champ Aprs linsertion, allez , saisissez le nom de la page vers laquelle
lutilisateur sera redirig une fois linsertion dun enregistrement effectue. Cette
page peut dj exister ou tre cre par la suite. Dans le cadre de votre boutique,
cette page de conrmation que nous crerons juste aprs ce formulaire contiendra
un message du type "Votre compte a t cr avec succs", complt dun lien
menant la page daccueil de votre boutique (voir Figure 7.4).
Figure 7.3
Le formulaire dinsertion
dcoulera de ces infor-
mations.
Figure 7.4
Pensez concevoir la
page de confirmation
de cration de compte.
6. Maintenant, congurez lensemble des champs de votre table qui vont devoir tre
renseigns, laide de la liste Champs du formulaire. Par dfaut, cette liste
reprend toutes les donnes de la table que vous avez dj slectionne (voir
Figure 7.5).
Pour personnaliser le futur formulaire dinsertion, slectionnez dans la liste
Champs du formulaire la premire colonne mettre jour, puis :
Prcisez dans le champ tiquette le terme qui apparatra au ct du champ de for-
mulaire pour cette donne. Par dfaut, il sagit du nom de la colonne de votre
table de donnes, mais libre vous de dnir un terme plus explicite. Par exem-
ple, la donne mdp de votre table aura avantage possder "Mot de passe"
comme tiquette.
Dans la liste Afcher en tant que, slectionnez le type de champ de formulaire
qui doit tre utilis pour la saisie de la donne en question. Dans le cadre de la
cration dun compte utilisateur, seul le mot de passe diffre dans son format
dafchage ainsi que celui de lid. Vous devrez slectionner un lment de type
Mot de passe pour le premier et un type Champ cach pour le second. Les autres
donnes se contenteront dun champ de type Texte.
Slectionnez ensuite le type de donnes avec lequel la donne mise jour doit
tre envoye la base de donnes. Ce choix seffectue dans la liste droulante
Envoyer en tant que Par dfaut, ce choix est dni suivant le type de chacun
des champs de votre table, tel que vous lavez dni lors de la cration de celle-
ci. Il est prfrable de laisser cette information telle quelle est gnre automati-
quement par Dreamweaver.
Dernier point, si vous souhaitez quune valeur par dfaut soit dj prsente dans
le formulaire lors de lafchage de celui-ci, saisissez celle-ci dans le champ
Valeur par dfaut. Si elle nest pas modie, cest cette valeur qui sera envoye
la base de donnes.
Figure 7.5
Le formulaire de base est
construit partir des don-
nes de la table mettre
jour.
7. Une fois le premier champ dni de cette faon, slectionnez le suivant dans la liste
Champs du formulaire et recommencez avec celui-ci ltape 6. Vous pouvez ainsi
personnaliser lensemble du formulaire de mise jour que vous allez crer.
8. Si certains champs de la liste Champs du formulaire sont inutiles, vous pouvez
supprimer ceux-ci du formulaire laide du bouton Supprimer une colonne (),
prsent en haut gauche de cette liste. Autre mthode : vous pouvez supprimer
le champ id du formulaire. En effet, vous avez dni, lors de la cration de la
base de donnes, que ce champ est auto-incrment. Il sera donc automatique-
ment renseign par MySQL lors de linsertion dun nouvel enregistrement dans
la table.
9. De la mme faon, libre vous de rintgrer une colonne dj supprime laide du
bouton Ajouter une colonne (+), prsent galement en haut gauche de la liste. Une
fentre souvre alors avec la liste des champs de la table slectionne qui ne sont
pas encore prsents dans la liste Champs du formulaire (voir Figure 7.6). Slection-
nez simplement dans cette liste le champ ajouter et validez laide du bouton OK.
La donne en question est ajoute la liste Champs du formulaire juste la suite du
champ slectionn auparavant.
10. Si vous souhaitez modier lordre sous lequel les champs du formulaire appara-
tront dans la page nale, utilisez les deux boutons Dplacer vers le haut (che
haute) et Dplacer vers le bas (che basse), prsents en haut droite de la liste
Champs du formulaire. Vous pouvez ainsi dplacer le champ Mot de passe an que
celui-ci soit plac juste en dessous de ladresse e-mail. Ces deux donnes tant cru-
ciales pour la cration du compte, il est logique quelles soient rassembles lors de
celle-ci.
Figure 7.6
ajouter au formulaire
parmi ceux encore dispo-
nibles.
11. Une fois le formulaire totalement dni, cliquez sur le bouton OK pour crer effec-
tivement celui-ci.
Aprs un petit dlai, Dreamweaver afche dans sa fentre principale le formulaire
dinsertion denregistrement (voir Figure 7.7).
Si vous ntes pas certain des paramtres fournir pour la cration de votre formulaire
dinscription, reportez-vous au tableau suivant.
Figure 7.7
Le formulaire dinsertion
est termin.
Tableau 7.2 : Paramtrage du formulaire dinscription votre boutique en ligne
Champ de la table tiquette
Type de champ
de formulaire
Type de donnes
mail
Adresse Mail Texte Texte
mdp
Mot de passe Mot de passe Texte
nom
Nom Texte Texte
prenom
Prnom Texte Texte
ad_ligne1
Adresse Texte Texte
ad_ligne2
Adresse (complment) Texte Texte
ad_cp
Code postal Texte Texte
ad_ville
Ville Texte Texte
telephone
Numro de tlphone Texte Texte
Le champ id est absent de ce tableau. Il est en effet non pas renseign par le formulaire
mais gnr automatiquement par MySQL lors de la cration de lenregistrement.
Lors de la cration dun formulaire dinsertion, Dreamweaver soccupe de la cration des comporte-
ments de serveur lis la mise jour mais galement de la mthode denvoi des donnes partir du
formulaire. Vous pouvez vous en rendre compte en affichant Proprits correspondant au formulaire :
celui-ci est dj rempli (voir Figure 7.8).
Finalisation du formulaire
Le formulaire nal est prsent sous la forme dun tableau HTML de deux colonnes, la
premire prsentant les tiquettes, la seconde, les champs de formulaire. Libre vous
de modier cette mise en page et mme, ventuellement, de dplacer lensemble des
champs en dehors du tableau. Veillez simplement ne pas supprimer de donnes dyna-
miques, pour la bonne cohrence de votre page.
Lors de la cration dun formulaire denregistrement ou de mise jour de donnes, Dreamweaver
ajoute automatiquement quelques champs cachs au formulaire dj prsent. Ces champs contien-
nent des donnes dynamiques destines guider Dreamweaver dans les procdures de mise jour.
Veillez ne surtout pas les supprimer.
Parmi les modications que vous pouvez effectuer an de rendre le formulaire dins-
cription encore plus fonctionnel, pensez par exemple appliquer les restrictions de
taille correspondant celle des champs de la base de donnes.
Par exemple, le code postal ne pouvant pas excder 5 caractres, utilisez le champ Nb
max. de caract. de Proprits (voir Figure 7.9) pour instaurer cette limitation ds la saisie.
Vous viterez ainsi des erreurs dues une tentative dinsertion de mauvaises donnes
dans votre base.
Pensez galement modier le texte afch sur le bouton de validation de linscription
an quil soit plus parlant pour vos visiteurs. Pour cela, utilisez le champ Valeur de
Proprits une fois le bouton slectionn (voir Figure 7.10).
Figure 7.8
Dreamweaver soccupe lui-mme de la dfinition de la mthode denvoi.
Dernier contrle que vous pouvez mettre en place : la vrication en amont de prsence
de toutes les informations ncessaires la cration dun compte utilisateur. Cela impli-
que de savoir quels champs ont t laisss vides par le visiteur et lesquels dentre eux
taient indispensables.
La mise en place de cette vrication passe par la mise en place dun comportement statique
propre Dreamweaver : Valider le formulaire.
Les comportements, prsents dans Dreamweaver depuis la premire version du logiciel, sont en fait
une bibliothque dactions JavaScript prdfinies. Ils permettent, comme ici, de vrifier le contenu
dun formulaire ou de crer des effets de roll-over, des animations, dinteragir sur des lments multi-
mdias et bien dautres choses encore.
Utilisez ce comportement de la faon suivante :
1. Slectionnez la balise <form>, qui encadre le formulaire dinscription prsent sur
votre page, grce au slecteur de balises.
2. Ajoutez laction Valider le formulaire laide du bouton Ajouter une action du pan-
neau Comportements, situ dans Fentre ou laide de Maj+F4 (voir Figure 7.11).
La bote de dialogue Valider le formulaire souvre alors (voir Figure 7.12).
3. Slectionnez un par un les champs de votre formulaire et, pour chacun deux,
cochez la case Ncessaire dans la bote de dialogue. Dreamweaver afchera
alors un message derreur la validation du formulaire si ces champs sont laisss
vides.
Figure 7.9
Pensez personnaliser votre formulaire avec tous les attributs disponibles.
Figure 7.10
Renommez les boutons quand ceux-ci en ont besoin.
4. Slectionnez ensuite le champ Mail et cochez la case Adresse e-mail de la zone
Accepter. Cette option vrie si la chane saisie dans le champ est bien une adresse
e-mail. Elle vrie seulement la mise en forme de ladresse et ne permet en aucun
cas de savoir si ladresse est valide.
5. Cliquez sur le bouton OK pour valider vos choix et faire disparatre la fentre Valider
le formulaire.
6. Assurez-vous que laction Valider le formulaire est bien associe lvnement
onSubmit dans le panneau Comportements (voir Figure 7.13).
Figure 7.11
Slectionnez le compor-
tement Valider le formu-
laire.
Figure 7.12
La bote de dialogue
Valider le formulaire.
Si lutilisateur entre dans un des champs du formulaire une valeur qui nest pas accepte
par la procdure de test, il verra alors apparatre une bote de dialogue lui indiquant
lerreur (voir Figure 7.14).
Le message derreur affich par le comportement Valider le formulaire de Dreamweaver est loin dtre
le plus clair possible. Vous pouvez modifier celui-ci en corrigeant la fonction JavaScript
MM_validateForm(), prsente dans le code source de votre page. Commencez donc par remplacer
les termes anglais insrs par le logiciel par des phrases plus franaises.
Pour cela, utilisez le mode ddition du code disponible dans Dreamweaver, laide des boutons
Code ou Fractionner, prsents en haut de la fentre ddition principale.
Vrification des doublons
Votre tche nest pas encore nie. Bien sr, vous possdez dsormais un formulaire
dinscription votre site, et les donnes de celui-ci sont bel et bien insres dans votre
base de donnes. Mais il manque un petit quelque chose Rien ne garantit actuellement
que deux utilisateurs ne sinscrivent pas avec la mme adresse e-mail.
Bien entendu, si vous laissez ce formulaire en ltat, linsertion de deux enregistrements
possdant le mme champ e-mail provoquera une erreur MySQL, du fait mme de
Figure 7.13
Le comportement
est bien en place.
Figure 7.14
Si la validation du formu-
laire nest pas correcte,
lutilisateur voit alors
apparatre une bote de
dialogue lui indiquant
lerreur quil a commise
en remplissant le formu-
laire.
lunicit du champ dans la base. Mais il y a certainement moyen de faire mieux que
cela !
Vous allez greffer votre formulaire une vrication de nom de lutilisateur. Cest lune
des fonctions prdnies par Dreamweaver dans le cadre de la gestion des utilisateurs
sur un site web !
Tous les objets de gestion des utilisateurs se trouvent sous le menu droulant Authentification de luti-
lisateur dans la rubrique Objet de donnes du panneau Insertion.
1. Slectionnez lobjet Vrier le nouveau nom dutilisateur dans le panneau Insertion >
Objet de donnes > Authentication de lutilisateur. La fentre du mme nom
souvre alors (voir Figure 7.15).
2. Dans le champ Champ nom dutilisateur, slectionnez le nom du champ de formu-
laire qui correspond lidentiant de connexion du nouvel utilisateur. Il sagit ici du
champ Mail.
3. Dans le champ Si existe dj, aller , saisissez ladresse de la page vers laquelle sera
redirig le nouvel inscrit sil a choisi un identiant dj utilis. Nous allons le redi-
riger vers la page dinscription elle-mme, en ajoutant un message derreur celle-ci.
4. Cliquez sur le bouton OK pour valider.
Le contrle est en place, et linsertion de doublon dans votre base de donnes est dsor-
mais impossible. Il ne vous reste qu grer lerreur gnre par une tentative de doublon
par un message dans la page dinscription.
Lors de lchec de la cration dun enregistrement pour cause de doublon, Dream-
weaver ajoute un paramtre lURL de la page dchec que vous avez slectionne.
Ce paramtre sappelle requsername et contient la valeur doublon. Il est donc
facile dafcher un message derreur, uniquement condition que ce paramtre
existe. Vous allez pour cela insrer directement du code PHP dans votre page
Dreamweaver :
Figure 7.15
qui fera lobjet dune
vrification.
1. Saisissez tout dabord, en haut du formulaire dinscription, le message derreur qui
devra safcher.
2. Placez prsent le point dinsertion juste devant ce message derreur et passez
Dreamweaver en afchage de type fractionn. Vous avez dsormais accs au code
source de vos pages dans la partie suprieure de la fentre ddition du logiciel (voir
Figure 7.16).
Dreamweaver permet de modifier directement le code source dune page. Vous vous servirez massi-
vement de cette possibilit dans les chapitres qui viennent.
Le logiciel propose pour cela un mode fractionn qui affiche en haut de la fentre ddition le code
source de votre page et en bas, sa version Wysiwyg, dont vous vous servez depuis le dbut de cet
ouvrage.
Pour saisir directement du code, cliquez simplement dans la partie "Code" de la fentre ddition,
lendroit o votre fragment de code doit tre insr, et saisissez celui-ci. Pour valider vos modifi-
cations, pensez revenir dans la section Wysiwyg, vos corrections y seront alors visibles.
Figure 7.16
Le mode fractionn vous donne accs au code source de votre page.
3. Insrez le code suivant juste avant votre message derreur dans le code source de la
page :
<?php if (isset($_GET[requsername])) {?>
Ce morceau de code contient isset, une instruction trs pratique. En effet, elle
vrie que largument entre ses parenthses existe bien. Si $_GET[requser-
name] a une valeur (si lutilisateur existe dj) alors le morceau de code permet
lafchage de votre message dalerte. Alors que si $_GET[requsername]
nexiste pas (ds la premire connexion la page dinscription) le message nappa-
ratra pas.
4. Insrez galement cette courte portion de code juste aprs le message derreur. Elle
a pour but de fermer linstruction de type if dnie ci-dessus.
<?php }?>
Vous pouvez galement passer par la barre doutils PHP de Dreamweaver pour insrer ce type dins-
truction. Mais, au regard de la taille de ces modifications, le clavier semble cette fois plus rapide que
la souris.
Il ne vous reste qu sauvegarder votre page, de crer celle qui afchera le message
"Votre compte a bien t enregistr" et de faire un test. Essayez donc de crer un nou-
veau compte utilisateur laide de ce formulaire, puis jetez un coup dil votre base
de donnes. Le nouveau client devrait sy trouver !
Essayez galement de crer un compte avec doublon an de vrier que lafchage de
votre message derreur est bien gr. Si cest le cas, vous venez de terminer votre
processus dinscription.
Connexion, dconnexion des utilisateurs
Mais pourquoi avez-vous cr des utilisateurs ? An de pouvoir identier ceux-ci sur
lensemble du site et ainsi, plus tard, savoir qui associer une commande Et vous
avez encore du chemin avant darriver ce rsultat. Certes, vos utilisateurs sont crs,
mais ils ne peuvent hlas pas encore se connecter sur votre site. Nous allons y remdier.
Connecter lutilisateur
Commenons par la connexion dun utilisateur. Pour sidentier, vos clients vont devoir
saisir dans un formulaire leur adresse e-mail et le mot de passe qui correspond leur
compte.
Afin de pouvoir utiliser ce formulaire de connexion sur toutes les pages de votre site, nous vous sug-
grons de dvelopper celui-ci dans un lment de bibliothque, de la mme manire que lavait t
le moteur de recherche dans le chapitre prcdent.
Toutefois, gardez en tte quun lment de bibliothque ne peut pas contenir dinformations relatives
len-tte de vos pages ni donc de script PHP. Les procdures didentification devront donc tre ajou-
tes la main sur chacune de vos pages laide de la mthode dcrite ci-aprs.
Dans un nouveau document, crez un formulaire simple compos de quatre lments : le
cadre du formulaire (nomm login), un champ de texte pour la saisie de ladresse e-mail
de lutilisateur (nomm mail), un champ de type Mot de passe pour la saisie du mot de
passe (nomm mdp) et enn un bouton de validation de la connexion (voir Figure 7.17).
Une fois ces lments prsents et correctement nomms, linsertion de lobjet Connecter
lutilisateur peut dbuter :
1. Slectionnez lobjet Connecter lutilisateur dans le panneau Donnes > Authenti-
cation de lutilisateur. La bote de dialogue du mme nom souvre alors (voir
Figure 7.18).
Figure 7.17
Avant de mettre en place
le script de connexion,
un formulaire doit tre
prsent sur la page.
Figure 7.18
Comment doit-on
identifier lutilisateur ?
2. Slectionnez tout dabord dans le champ Obtenir lentre du formulaire, le nom
du formulaire que vous venez de mettre en place. Vous signiez ainsi, au cas
o vous possderiez plusieurs formulaires dans votre page, lequel sert lidenti-
cation.
3. Slectionnez ensuite, dans les champs Champ nom dutilisateur et Champ mot de
passe, les deux zones correspondant ces donnes dans le formulaire que vous
venez de crer.
4. Slectionnez, dans la liste Valider laide de la connexion, la connexion qui servira
joindre la table des clients que vous avez cre dans votre base de donnes.
5. Slectionnez ensuite la table des clients dans la liste droulante Tableau, et
compltez les champs Colonne nom dutilisateur et Colonne mot de passe avec
les deux colonnes correspondant ces informations dans votre table (mail et
mdp).
6. Compltez prsent les deux champs Si la connexion russit, aller et Si la connexion
choue, aller avec les adresses des pages de conrmation de la connexion ou de
refus de la connexion.
Vous pouvez localiser ces pages facilement laide des boutons Parcourir, prsents
sur la droite de chacun des champs.
Nous vous conseillons, en cas dacceptation de la connexion, de rediriger votre visiteur vers la page
mme sur laquelle il tait en train de naviguer. Vous verrez un peu plus loin dans ce chapitre com-
ment savoir quun utilisateur est bien connect sur le site. Mais, dans tous les cas, prvoyez une page
derreur en cas de refus de connexion.
7. Dnissez enn si la connexion donne droit un niveau dutilisation particulier.
Cette option pourrait vous permettre de grer des niveaux daccs sur votre site et
ainsi de dnir des administrateurs et des clients simples. Nous nutiliserons pas ces
fonctionnalits dans la boutique, cochez donc simplement la case Restreindre
laccs en fonction de Nom dutilisateur et mot de passe.
Une fois toutes ces donnes dnies, il ne vous reste qu cliquer sur le bouton OK pour
valider le processus didentication. Votre formulaire de connexion est en place. Libre
vous de linsrer sur nimporte quelle page de votre site ; par exemple sur la page de
description dtaille dun ouvrage (voir Figure 7.19).
Que faire si lutilisateur oublie son mot de passe ? Deux solutions soffrent vous : soit rinitialiser un
nouveau mot de passe et lenvoyer au client par mail, soit lui envoyer simplement un mail de rappel
contenant son mot de passe initial. Dans les deux cas, les donnes devront exclusivement tre
envoyes ladresse mail saisie pour la cration du compte client de dpart, pour des raisons de scu-
rit videntes.
Dconnecter lutilisateur
Pour dconnecter un utilisateur, la mthode est encore plus simple. Une page blanche
peut sufre.
1. Crez donc une nouvelle page blanche la racine de votre site et nommez celle-ci
logout.php.
2. Slectionnez lobjet Dconnecter lutilisateur dans le panneau Insertion > Objets de
donnes > Authentication de lutilisateur. La bote de dialogue de dconnexion
souvre alors (voir Figure 7.20).
Figure 7.19
Lidentification, intgre
au catalogue du site.
Figure 7.20
La dfinition dune proc-
dure de dconnexion est
des plus simples.
3. Dans le champ Se dconnecter quand, cochez loption Chargement de page.
4. Dans le champ Une fois termin, aller , slectionnez la page o lutilisateur doit
arriver une fois la dconnexion russie. Vous pouvez utiliser le bouton Parcourir
an de localiser celle-ci plus facilement. Le plus simple est denvoyer votre client
vers une page lui conrmant sa dconnexion (voir Figure 7.21).
5. Cliquez sur OK pour valider la procdure de dconnexion.
Si vous souhaitez que vos utilisateurs puissent se dconnecter, vous naurez qu crer
un lien vers cette page. Ils seront alors automatiquement dconnects du site son char-
gement.
Il est galement possible de dfinir que la dconnexion dun utilisateur ait lieu lorsque celui-ci clique
sur un certain lien ou un certain bouton dune page. Pour cela, slectionnez loption Lien cliqu dans
la bote de dialogue Dconnecter lutilisateur et choisissez dans la liste droulante attenante le lien
qui aura cette fonction.
La section Client du site
Inscription, connexion, dconnexion, votre panoplie doutils au service du client
stoffe. Il est dsormais temps de passer la mise en place de la partie centrale de
laccueil de celui-ci. Vous allez btir, trs simplement, dans les pages suivantes les deux
premires pages de la section client de votre boutique.
La premire page va servir de tableau de bord. Elle possdera une srie de liens
vers le panier actuel du client, son historique de commande, ses informations
personnelles
La seconde page proposera au client la modication de ces informations personnelles.
Figure 7.21
Un message de confir-
mation est toujours le
bienvenu.
Cration dune page accs restreint
Commenons par la page daccueil de la section Client.
Cette page, appellons-la index.php, ne contient en fait quune srie de liens quil vous
est trs facile de mettre en place :
un premier lien nomm "Votre panier", vers le panier actuel du client (/account/
panier.php) ;
un deuxime, nomm "Vos informations personnelles", li un formulaire permettant
au client de modier tout moment ses coordonnes ;
un dernier, intitul "Vos commandes", attach une page rsumant lensemble
des commandes passes par le client depuis son inscription votre boutique en
ligne.
Deux de ces pages (le panier et le rcapitulatif des commandes passes) seront abordes dans lun
des chapitres suivants de cet ouvrage.
Enn, dans la navigation de la page se devra dtre prsent un lien de type Dconnexion,
assurant au client la possibilit de se dconnecter du site tout moment.
Comme vous pouvez le constater, cette page nest pas des plus difciles mettre en
place. Quelques minutes avec linterface de Dreamweaver devraient largement y
sufre.
Reste rendre cette page uniquement accessible aux clients connects. Pour cela, vous
allez utiliser lun des objets dnis par dfaut par Dreamweaver : Restreindre laccs
la page. Avec cet objet, vous pouvez non seulement vrier quun utilisateur est bien
identi avant de lui afcher le contenu dune page mais galement le rediriger vers un
formulaire didentication dans le cas contraire. Lutilisation de cet outil est des plus
simples :
1. Slectionnez lobjet Restreindre laccs la page dans le panneau Insertion >
Objets de donnes > Authentication de lutilisateur. La bote de dialogue du mme
nom souvre alors (voir Figure 7.22).
2. Laccs au panneau Client est uniquement rserv aux clients authentis. Cochez
donc la case Restreindre en fonction du nom dutilisateur et mot de passe.
Dreamweaver offre galement la possibilit de limiter laccs une page de votre site web en fonc-
tion dun niveau daccs dfini dans la table shop_client de votre base de donnes. Ainsi, vous pour-
riez imaginer une section Administration de votre site web laquelle seuls vous et vos collaborateurs
aurez accs. Cette mthode nest pas utilise dans cet ouvrage, mais gardez en tte quelle existe bel
et bien.
3. Compltez le champ Si laccs est refus, aller avec la page vers laquelle seront
redirigs les visiteurs non identis (ou nayant pas les droits ncessaires la visua-
lisation de la page). Dans le cadre de votre boutique, le plus simple reste de rediri-
ger vos visiteurs vers une page proposant la fois la connexion au site (dans le cas
de clients existants) et la cration dun nouveau compte client (dans le cas de sim-
ples visiteurs). Cette page est assez facile mettre en place. Elle reprend lensemble
des lments de gestion des comptes clients prsents au dbut de ce chapitre (voir
Figure 7.23).
4. Validez lensemble des options choisies et sauvegardez la page en cours.
Votre page est dsormais protge et nest accessible quaux clients authentis. Pour
vous en convaincre, rendez-vous sur celle-ci laide de votre navigateur habituel, sur
votre serveur de test. Ladresse de cette page est logiquement http://localhost/account/
index.php. Vous devriez tre redirig vers la page de connexion que vous avez dnie
en cas daccs refus.
Si vous vous connectez sur cette page laide dun compte client dj disponible dans
la base, vous pourrez revenir la page daccueil de votre compte trs facilement. Celle-
ci safchera alors sans problme (voir Figure 7.24).
Figure 7.22
qui laccs cette page
doit-il tre rserv ?
Mise jour des informations personnelles du client
Seconde page que vous allez crer dans ce chapitre, le formulaire destin la modication
des donnes personnelles de votre client. Cette page est des plus simples crer !
Vous allez pour cela utiliser lobjet Formulaire de mise jour des enregistrements. Il
fonctionne de manire pratiquement identique lobjet dinsertion denregistrement
que vous avez utilis lors de la cration du compte client au dbut de ce chapitre (voir
Figure 7.25).
Figure 7.23
Proposez une page de
connexion/cration de
compte indpendante
pour vos visiteurs.
Figure 7.24
La connexion est
accepte, vous voici
connect votre espace
client.
Ce type dobjet afche dans diffrents champs de formulaire les donnes dj prsentes
dans votre table de donnes. Lutilisateur peut alors en modier le contenu directement
dans ce formulaire et envoyer ces modications la base de donnes.
La cration dun formulaire de mise jour suit les mmes principes que celle dun for-
mulaire dinsertion. Elle ncessite nanmoins quelques informations supplmentaires
dans la mesure o, avant la mise jour, les donnes de la table doivent dj tre afches
sur la page.
Crez une nouvelle page utilisant la technologie PHP et associez cette page un jeu
denregistrements contenant lensemble des champs que vous souhaitez mettre jour
laide du formulaire de mise jour.
Pour crer ce jeu denregistrements, vous avez besoin dutiliser les variables de session
disponibles dans Dreamweaver, cest--dire ladresse e-mail utilise par votre client
pour sa connexion. Utilisez la mthode habituelle de cration des jeux denregistre-
ments et slectionnez lensemble des colonnes de la table shop_client avec comme
critre de ltre les paramtres suivants :
mail gal la variable de session MM_Username.
MM_Username est une variable de session cre automatiquement par Dreamweaver lors de la
connexion dun utilisateur laide des mthodes disponibles dans le logiciel et lors de la mise en
place dune restriction daccs sur certaines de vos pages. Elle est automatiquement renseigne avec
lidentifiant de connexion utilis par vos clients. Seul inconvnient, elle nest pas disponible dans les
pages dont laccs nest pas restreint comme vous le verrez plus loin dans ce chapitre.
Figure 7.25
Un formulaire de mise
jour ressemble comme deux
gouttes deau un formu-
laire denregistrement.
Cette requte simple permet dobtenir lensemble des informations disponibles pour un
client connect, suivant son adresse e-mail. Une fois ce jeu denregistrements dni, la
cration du formulaire de mise jour est chose simple :
1. Dans le panneau Insertion > Objets de donnes > Mettre jour lenregistrement,
slectionnez lobjet Assistant de formulaire de mise jour des enregistrements (voir
Figure 7.26).
2. La bote de dialogue Formulaire de mise jour des enregistrements souvre alors
(voir Figure 7.27), elle est semblable celle utilise pour la cration dun formu-
laire dinsertion.
3. Slectionnez tout dabord la connexion utiliser pour votre formulaire puis, dans le
champ Table, la table qui sera mise jour partir de celui-ci. Dans le champ Jeu
denregistrements, slectionnez le jeu charg de rcuprer les donnes qui seront
afches dans le formulaire avant mise jour : il sagit ici de la table shop_client et
du jeu denregistrements que vous avez cr il y a quelques instants.
Figure 7.26
Slectionnez lobjet
Assistant de formulaire
de mise jour des enre-
gistrements.
Figure 7.27
Slectionnez la table
et les donnes quil
faudra mettre jour.
4. Indiquez ensuite quel champ fait ofce de cl unique dans la table que vous souhai-
tez mettre jour (dans notre cas, le champ id). Si cette cl est dnie dans votre
table comme une valeur numrique, assurez-vous que la case Numrique, prsente
droite du champ Cl unique, est bien coche.
Cette cl est indispensable an que Dreamweaver soit certain de mettre jour le
bon enregistrement dans la table de destination.
5. Dans le champ Aprs la mise jour, aller , slectionnez la page qui sera afche
aprs que lutilisateur aura effectu la mise jour dun enregistrement. Vous pou-
vez facilement retrouver celle-ci laide du bouton Parcourir, prsent en n du
champ. Slectionnez par exemple la page daccueil de la section Client de votre
boutique.
6. Dtaillez prsent, laide de la liste Champs du formulaire et des champs sui-
vants, les colonnes qui devront tre mises jour laide de votre formulaire. La per-
sonnalisation de celui-ci suit le mme principe que la personnalisation du
formulaire dinsertion. Pour vous aider, le Tableau 7.3 rcapitule les valeurs donner
ces diffrents champs de formulaire.
Seule diffrence, la valeur par dfaut de chaque colonne est ici dj renseigne par
une formule du type <%=(Update.Fields.Item("nom_de_la_variable_
de_chaque_colonne").Value)%>. Cette formule signie que Dreamweaver af-
chera dans le champ de formulaire lancienne valeur de lenregistrement slec-
tionn, celle-ci tant issue du jeu denregistrements dj slectionn.
Tableau 7.3 : Paramtrage du formulaire de mise jour des informations
personnelles du client
Champ de la table tiquette
Type de champ
de formulaire
Type de donnes
mail
Adresse Mail Texte Texte
mdp
Mot de passe Cach Texte
nom
Nom Texte Texte
prenom
Prnom Texte Texte
ad_ligne1
Adresse Texte Texte
ad_ligne2
Adresse (complment) Texte Texte
ad_cp
Code postal Texte Texte
ad_ville
Ville Texte Texte
telephone
Numro de tlphone Texte Texte
Gardez bien en tte que TOUS les champs de votre table doivent tre prsents dans le formulaire, y
compris ceux que vous ne souhaitez pas voir modifier par votre client. Dans le cas contraire, Dream-
weaver renseignera dune valeur vide les champs manquants. Ce qui peut se rvler une catastro-
phe Pensez donc toujours placer les champs que vous ne souhaitez pas afficher dans un champ
de formulaire cach !
7. Une fois lensemble de ces champs dni et le formulaire personnalis, cliquez sur
le bouton OK pour valider la cration du formulaire de mise jour.
Aprs quelques secondes, Dreamweaver afche le formulaire nal dans sa fentre prin-
cipale (voir Figure 7.28). Il ne vous reste qu modier la mise en page de celui-ci et
le tester.
Vous possdez dsormais les bases ncessaires la mise en place de lespace Client de
votre boutique en ligne. En utilisant les diffrentes techniques dj dcrites (inscription,
connexion, identication), vous pouvez facilement multiplier les pages daccs restreint
sur votre site. Mais quelques points restent encore aborder
Reconnatre un utilisateur dans une zone non restreinte
Vous venez de mettre au point une zone daccs restreint trs efcace sur votre site web.
Ce systme vous permet de connatre un client tout moment condition que la page
sur laquelle il navigue soit rserve son accs. Que se passe-t-il si vous voulez utiliser
des donnes du client pour une page publique ? Pour, par exemple, nafcher le formu-
laire de connexion la boutique que si votre client nest pas encore identi ?
Dreamweaver ne gre pas, par dfaut, les variables de session PHP en dehors des pages
daccs restreint. La variable MM_Username est par exemple inaccessible depuis la page
Figure 7.28
Le formulaire de mise
jour des enregistrements
est en place.
de description dtaille dun ouvrage. Pour vous en convaincre, essayez simplement
dinsrer celle-ci dans votre page depuis le panneau Jeux denregistrements et testez le
rsultat sur votre serveur dvaluation. Aucun texte ne sera afch lemplacement
choisi
Il vous faut donc forcer lgrement les choses et imposer Dreamweaver douvrir les
variables de session en toutes circonstances. Cela passe par une modication directe
dans le code source de votre page.
Utilisez pour cela le mode fractionn de lafchage de Dreamweaver et insrer la simple
ligne suivante au tout dbut de votre page :
<?php session_start();?>
Ce code PHP sert uniquement activer les variables de session sur votre page. Sil est
prsent au dbut dune page, ces variables seront alors directement accessibles sur
lensemble de la page. Vous pourrez donc savoir tout moment si un utilisateur est
connect ou non
Intgration du formulaire de connexion
Une fois les variables de session actives, il devient facile de les interroger Mme si
cela vous demande encore quelques bidouillages laide de code PHP.
Pour intgrer votre formulaire de connexion la page de description dtaille des
ouvrages, procdez de la faon suivante :
1. Utilisez les lments de bibliothque que vous avez dnis au tout dbut de ce cha-
pitre (pour le formulaire de connexion et le lien de dconnexion de votre boutique)
et insrez ceux-ci la suite lun de lautre sur votre page, lendroit o ils doivent
nalement apparatre (voir Figure 7.29).
Pensez galement ajouter les diffrents objets destins rendre oprationnel ce
formulaire.
2. Placez le point dinsertion de Dreamweaver juste devant le formulaire didentication
et passez dans la fentre de code de Dreamweaver.
3. Juste devant la balise douverture <p> qui prcde le formulaire proprement parler,
insrez ce code :
<?php if (!isset($_SESSION[MM_Username])) {?>
Ce qui donne :
<p><?php if (!isset($_SESSION[MM_Username])) {?>
<form id="form1" name="form1" method="post" action
En PHP, la fonction isset() sert savoir si une variable est bel et bien dfinie dans la page actuelle.
La condition ngative applique ici vous permet de savoir que la variable de session MM_Username
nexiste pas. Et, donc, quaucun client nest connect. Il vous faut donc afficher le formulaire de
connexion dj cr.
4. Placez maintenant le point dinsertion derrire la balise </p> suivant le formulaire
didentication et insrez le code PHP suivant :
<?php }?>
<?php if (isset($_SESSION[MM_Username])) {?>
5. Enn, reprez la balise </p> mettant n au lien de dconnexion prsent sur la page
et insrez sa suite le code :
<?php }?>
6. Noubliez pas de sauvegarder votre page !
Vous venez de dnir une condition PHP que lon pourrait rsumer de la faon suivante :
Si aucun client nest connect (MM_Username nexiste pas), alors afficher le
formulaire de connexion.
Si un client est connect (MM_Username existe), alors afficher le lien de
dconnexion.
Le code nal de votre formulaire de connexion doit ressembler cela :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<li>
<h2>Espace Clients</h2>
<?php if (!isset($_SESSION[MM_Username])) {?>
<ul>
Figure 7.29
Deux lments distincts
sont prsents reste
savoir lequel afficher
<form action="" method="post" name="login" id="login">
<p>adresse mail:
<input name="email" type="text" id="email">
<br>
mot de passe:
<input name="mdp" type="password" id="mdp">
<input type="submit" name="Submit" value="Se connecter">
</p>
</form>
</ul></li>
<?php } else {?>
<ul>
<p><a href="../account/index.php">Mon espace client</a> <br>
<a href="../logout.php">Se dconnecter</a></p>
</ul>
</li><?php }?>
Vous pouvez rutiliser cette technique pour afcher le formulaire de connexion sur toutes
les pages de votre catalogue douvrage.
Parmi les incohrences de Dreamweaver, on notera son utilisation parfois erratique des sessions. Si
vous souhaitez afficher des donnes relatives un client sur une page livre daccs, vous devez obli-
gatoirement activer les variables de session par vous-mme laide de la commande PHP
session_start(). En revanche, ds que vous faites appel sur une page un objet impliquant
lidentification dun client, Dreamweaver se charge lui-mme dactiver les variables de session. En
fonction de la faon dont vous crez vos pages, les variables de session peuvent donc tre actives
deux fois dans la mme page : une fois par vous-mme, une seconde par Dreamweaver. Si le code en
rsultant nest pas optimal, limpact sur le comportement final de votre site est nul.
8
Grer les commandes des clients
Un peu de thorie
Modification de la page de description
Cration du panier
Validation de la commande
Page de validation
Rsum des commandes
Plus encore quun catalogue de produits ou que la collecte dinformations clients, le
processus de commande est rellement le cur de votre boutique en ligne. Cest en
effet grce lui que vous raliserez vos bnces et que votre boutique se montrera
fonctionnelle ou non.
Depuis la dmocratisation du commerce en ligne, le principe de la section dachat
dune boutique sest quelque peu standardis. Cette section doit comprendre un panier,
zone de traitement temporaire des achats qui permet au client de revenir sur ces choix et
de stocker ses achats potentiels entre deux visites, et une zone de validation, vritable
passage en caisse.
Ce sont ces deux zones que vous allez construire ici.
Un peu de thorie
Avant de vous lancer dans la ralisation concrte de votre processus de commande, un
peu de thorie simpose. La mise en place du panier client et la validation complte des
commandes est un processus complexe qui demande une description dtaille. Lopra-
tion dmarre ds la page de description dun ouvrage, au moment o le client dcide de
passer lachat.
Modification du descriptif des produits
Deux options soffrent vous pour lentre dun article dans le panier depuis la page de
description dtaille des ouvrages : afcher un bouton de commande quelles que soient
les circonstances et identier les clients par la suite, ou noffrir la possibilit dacheter
quaux clients connects.
Pour des raisons pratiques, cest cette seconde option qui va tre choisie dans cet
ouvrage. La page de description dun livre va donc devoir tre modie de la faon
suivante :
Si le client nest pas encore identi sur le site, lui proposer un formulaire de
connexion. Cela a dj t ralis dans le chapitre prcdent.
Si le client est identi et ne possde pas larticle courant dans son panier, lui pro-
poser un lien Acheter qui ajoute automatiquement louvrage en question dans son
panier. Techniquement, cela se traduit par linsertion dun enregistrement dans la
table shop_panier, contenant la rfrence de larticle en question et lidentiant
unique du client connect.
Si le client est connect et possde dj larticle dans son panier, linformer que cet
article est dj dans son panier, et lui offrir la possibilit de modier la quantit
darticles commands par lintermdiaire dun simple lien.
La mise en place de ces trois options va vous demander un peu de code PHP propre,
quelques jeux denregistrements et un peu de HTML. Mais rien de bien mchant,
rassurez-vous !
Gestion du panier
Le panier du client est une page part. Elle afche lensemble des articles prsents dans
le panier du client connect. Cette page nest dailleurs disponible que si le client est
effectivement identi sur votre boutique en ligne et fait partie de sa section Client.
Pour chaque article prsent dans le panier et donc ajout au moyen du lien prsent sur
la page de description dtaille, deux actions sont possibles :
modier la quantit darticles commands ;
supprimer un article du panier.
En plus de ces actions, la page du panier afchera dynamiquement le prix total
payer pour chacun des articles, suivant la quantit commande et la somme totale du
panier.
191 GRER LES COMMANDES DES CLIENTS
Pour des raisons pratiques, aussi bien pour vous que pour le client, un panier est li un identifiant
de client et non pas une session particulire. Cela permet de conserver le contenu du panier dans
la base de donnes entre deux visites de votre client, mme si celui-ci neffectue aucune validation.
Linconvnient est que, pour ajouter un article au panier, vos clients doivent dj tre authentifis, ce
qui impose les modifications de la page de description dcrites plus haut.
Validation du panier
Un lien sur la page du panier permet la validation du panier courant du client. Cette
validation est valable pour lensemble des articles prsents dans le panier du client, qui
passent alors en statut darticles commands.
Techniquement, la validation du panier est effectue par une page ddie cet usage.
Cette page effectue trois oprations la suite :
1. Cration dun nouvel enregistrement dans la table Commande. Cet enregistrement
contient lidentiant unique du client, la date de commande effective ainsi que la
somme totale payer avec et sans taxes. ce moment, lidentiant unique de com-
mande est gnr, permettant de distinguer chacune des commandes passes sur la
boutique.
2. La premire ligne du panier est lue dans la base de donnes et copie dans la table
shop_ligne_commande. Larticle est alors considr comme faisant lobjet dune
commande ferme. Cette ligne est complte par le prix unitaire de larticle et le prix
total de la ligne de commande en cas denvoi group. Ces deux informations sont
renseignes laide des valeurs hors taxe et toutes taxes comprises.
3. Enn, lenregistrement correspondant larticle en cours est effac de la table
shop_panier an de ne plus faire lobjet dune prochaine commande de faon acci-
dentelle. Ces deux dernires oprations sont effectues pour chacun des articles
prsents dans le panier au moment de la commande.
Une fois ces trois oprations effectues, la commande peut tre considre comme valide.
Son rsum est donc afch sur le compte personnel du client.
Le reste est une histoire de paiement, abord au chapitre suivant, et de logistique.
Le traitement appliqu ici sappelle traitement par lot ou traitement batch. Il consiste appliquer
une mme action plusieurs enregistrements la suite, sans quaucune action de lutilisateur ne
soit ncessaire. Ce type de traitement nest pas grable directement laide de Dreamweaver. Dans
la logique de dveloppement du programme, chaque action sur une base de donnes doit tre lie
une action de lutilisateur Vous allez donc devoir coder la main la migration des articles du panier
vers la table de commande. Heureusement, le script utiliser est dtaill dans les pages suivantes.
Modification de la page de description des articles
Si vous avez suivi toutes les modications apportes la page de descriptif des articles
dans le chapitre prcdent, celle-ci doit dsormais se comporter de la manire suivante :
Si aucun client nest connect, un formulaire de connexion apparat (voir
Figure 8.1).
Si un client est dj connect la boutique, seul un lien de dconnexion est afch.
Reste mettre en place les autres comportements ncessaires lachat dun objet par
vos clients. Traitons tout dabord le cas le plus complexe : votre client doit valider son
achat.
Mise en place dun lien Acheter
Vous vous en doutez, le lien qui valide lachat dun livre sur votre boutique est loin
dtre un simple lien. Il sagit dajouter votre table shop_panier une ligne complte
associant le client connect actuellement larticle quil est en train de visualiser. Pour
cela, comme pour tout ajout dans une table de votre base de donnes laide de Dream-
weaver, vous allez devoir utiliser un formulaire complet.
Les donnes ncessaires
Mais faisons tout dabord le tour des donnes qui sont ncessaires la table
shop_panier. Il vous faut renseigner dans celle-ci :
Lidentiant du client effectuant la commande actuelle. Cet identiant est en fait
son adresse e-mail, unique dans votre base de donnes et rcuprable de faon trs
simple grce aux variables de session initialises par Dreamweaver.
Lidentiant de larticle ajout au panier. Trs simple trouver galement, puisque
cest cet identiant, pass dans lURL de la page, qui dtermine larticle afch
actuellement.
Figure 8.1
Permettre la connexion
des clients nest quune
premire tape.
La quantit darticles commands. Par dfaut, les ajouts darticles au panier se
feront par quantit de 1 uniquement. Il est en effet rare quun client commande une
cinquantaine dexemplaires du mme livre en une seule fois.
Lidentifiant unique de la ligne du panier ne sera pas renseign partir du formulaire. En effet,
vous avez dfini celui-ci comme tant auto-incrment lors de la cration de votre base de don-
nes. Une valeur, unique, lui sera donc automatiquement attribue lors de la cration de la ligne
dans la table.
Mise en place du formulaire
Les trois donnes dnies plus haut doivent donc tre prsentes dans le formulaire
dachat. Mais, comme vous pouvez vous en douter, elles nont pas tre afches sur
votre page. En effet, votre client na rien faire dun identiant darticle ou dune quan-
tit quil ne peut changer.
Votre formulaire va donc principalement se fonder sur des champs cachs.
1. laide de loutil Formulaire de la barre doutils Formulaires de Dreamweaver,
commencez par insrer un nouveau formulaire sur votre page et nommez celui-ci
Achat. Ce formulaire doit se trouver dans la section "Connect" de votre page,
cest--dire entre les codes <?php if (isset($_SESSION[MM_Username]))
{?> et <?php}?>, que vous avez ajouts la page la n du chapitre prc-
dent.
2. Dans ce formulaire, insrez trois champs de formulaire de type Champ masqu.
Son icne se situe dans la barre doutils, juste ct de celle destine crer un
champ visible. Nommez ceux-ci conformment aux valeurs du Tableau 8.1.
La valeur par dfaut du champ client correspond donc la variable de session
MM_Username. Celle du champ Article, la colonne id du jeu denregistrements Livre,
dj utilis pour afcher les dtails de louvrage plus haut dans la page.
Tableau 8.1 : Composition du formulaire dachat dun article
Nom Type Valeur par dfaut
client Champ masqu
<?php echo $_SESSION[MM_Username];?>
article Champ masqu
<?php echo $row_Livre[id];?>
quantit Champ masqu
1
3. Ajoutez votre formulaire un objet du type Bouton et personnalisez-le en lui donnant
Acheter comme valeur dtiquette (voir Figure 8.2).
Une fois ces diffrents lments en place, votre formulaire dachat est en place (voir
Figure 8.3). Il ne vous reste plus qu lui appliquer le comportement adquat an de
mettre jour la table shop_panier.
Validation du formulaire
La mise en place de la validation du formulaire passe par un comportement de type
Insrer un enregistrement :
1. Slectionnez lobjet Insrer un enregistrement dans Insersion > Objets de donnes
de Dreamweaver. La bote de dialogue correspondante souvre alors (voir
Figure 8.4). Vous connaissez celle-ci puisque vous lavez dj utilise pour le formu-
laire dinscription de vos clients votre boutique.
Figure 8.2
Dfinissez le texte qui
apparatra sur le bouton
dachat laide du champ
tiquette.
Figure 8.3
Votre formulaire dachat se
compose principalement
de champs masqus.
Figure 8.4
Linsertion dun enregis-
trement passe par une
simple bote de dialogue.
2. Dans la liste droulante Envoyer les valeurs partir de, slectionnez le formulaire
Achat que vous venez de crer.
3. Dans la liste Connexion, slectionnez la connexion par dfaut utilise par votre
boutique.
4. Choisissez la table shop_panier dans la liste Insrer dans la table. Vous allez en
effet ajouter lensemble des donnes de votre formulaire cette table an de crer
une nouvelle entre dans le panier de votre client.
5. Assurez-vous ensuite que la section Colonnes de la bote de dialogue est bien ren-
seigne comme le stipule le Tableau 8.2. Cette section permet de dnir quel champ
de formulaire correspond exactement quelle colonne de votre table de donnes. Si
vous obtenez "Quantite narrive pas obtenir de valeur", il faut juste cliquer sur la
ligne puis dans Valeur lier le bon champ cach la ligne. Dans lexemple, il faut lier
la ligne quantite au champ cach nomm quantit (le dernier cre). Et ainsi de
suite, pour tous les autres champs.
6. Aprs linsertion de lenregistrement dans la base de donnes, prcisez que le client
doit tre redirig vers la page account/panier.php, il faut crer un nouveau dossier
appel account pour que cela fonctionne sans problme. Cette page, construite plus
loin dans ce chapitre, reprend la totalit des articles prsents dans le panier du client
actuel et permet la transformation de celui-ci en commande ferme.
7. Validez lensemble de ces options an que lajout darticles au panier soit enn
possible.
La premire partie du processus de commande dun article est enn en place. Mais
quelques modications sont encore ncessaires la page de description des articles
avant de vous attaquer la gestion complte du panier client.
Tableau 8.2 : Correspondance entre votre formulaire et la table shop_panier
Colonne de la table Champ de formulaire Type de donnes
Id
Aucun
client
client texte
article
article entier
quantite
quantit entier
Lien vers le panier
Que faire si le client actuel possde dj, dans son panier, larticle actuellement afch
lcran ?
Vous pouvez toujours proposer nouveau lachat de celui-ci et augmenter la quantit
darticles prsents dans le panier du client en fonction de ses validations successives.
Une solution plus polie serait toutefois dinformer votre client que cet article est dj
prsent dans son panier et de guider celui-ci vers cette page de panier o il pourra librement
changer la quantit douvrages commands (voir Figure 8.5).
Pour cela, un simple lien suft. Sa cration ne demande dailleurs que quelques
secondes :
1. En dessous du formulaire de commande que vous venez de crer, saisissez un texte du
type "Cet article est dj dans votre panier, cliquez ici pour en modier la quan-
tit commande". Assurez-vous de bien effectuer un saut de paragraphe entre le
formulaire dachat et ce texte, cest important pour la suite des oprations.
2. Ajoutez ce texte un simple lien envoyant vers la page account/panier.php de votre
site (voir Figure 8.6).
Pour linstant, ce lien est visible tout le temps mais nous allons voir comment faire un
afchage conditionnel la section suivante.
La mise en place dun renvoi vers votre panier est aussi simple que cela.
Figure 8.5
Cet article est dj pr-
sent dans votre panier.
Figure 8.6
Dfinissez simplement un lien laide de Proprits.
Mise en place de laffichage conditionnel
Reste dterminer quand lon doit afcher le formulaire de commande et quand on af-
che le lien direct vers le panier du client. Comme dj prcis, le lien safche lorsque
le panier du client contient dj larticle actuellement afch lcran.
Le moyen de connatre cette information ? Crer un jeu denregistrements ddi :
1. Crez un nouveau jeu denregistrements sur votre page et nommez celui-ci Panier.
Ce jeu denregistrements va faire appel deux critres de ltre distincts : lidenti-
ant unique du client et le numro de larticle actuellement afch. Une telle dnition
nest possible quen mode Avanc. Passez donc la bote de dialogue Jeu denregis-
trements en mode Avanc (voir Figure 8.7).
2. Slectionnez la connexion par dfaut de votre site dans la liste droulante Connexion,
prsente en haut de la bote de dialogue.
3. Saisissez la requte suivante dans le champ SQL :
SELECT id
FROM shop_panier
WHERE client = paramclient AND article = paramarticle
4. Comme vous pouvez le constater, cette requte fait appel deux variables (param-
client et paramarticle) quil vous faut dnir dans le tableau Variables, situ
sous la ligne de requte. Nous ne reviendrons pas ici sur la mthode de cration des
Figure 8.7
La dfinition de jeux
denregistrements en
mode Avanc.
variables, elle a dj t aborde dans les chapitres prcdents de cet ouvrage. D-
nissez donc ces deux variables en suivant les indications du Tableau 8.3.
5. Validez enn votre jeu denregistrements Panier (voir Figure 8.8). Celui-ci devrait
contenir lidentiant de la ligne de panier correspondant larticle actuel, pour le
client actuellement connect. Si cette ligne existe bel et bien.
Vous avez dsormais le moyen de savoir quelle partie de votre page afcher suivant le
client qui est connect. Reste lutiliser. Vous allez pour cela utiliser les rgions condi-
tionnelles de Dreamweaver :
1. Slectionnez tout dabord la totalit du formulaire de commande prsent sur votre
page. Assurez-vous bien que, dans le slecteur de balises, la balise <form> est elle
aussi slectionne (voir Figure 8.9).
Tableau 8.3 : Variables du jeu denregistrements Panier
Nom Type Valeur par dfaut Valeur courante
Paramclient text
0
$_SESSION[MM_Username]
Paramarticle Integer
0
$_GET[id]
Figure 8.8
Le jeu denregistrements
Panier apparat dans le
panneau Liaisons de
Dreamweaver.
Figure 8.9
Slectionnez la balise
Form correspondant la
validation de lachat.
2. Dans la barre doutils Insertion > Objets de donnes > Afcher la rgion si, slec-
tionnez lobjet Afcher si le jeu denregistrements est vide, prsent dans le groupe
dobjets Afcher la rgion (voir Figure 8.10).
3. Dans la bote de dialogue Afcher si le jeu denregistrements est vide (voir
Figure 8.11), slectionnez le jeu denregistrements qui sert de base cette condition
et validez ce choix. Dans notre cas, il sagit du panier dni plus haut.
4. Lensemble du formulaire dajout au panier se retrouve alors entour dun halo gris
tiquet Afcher si Signe que la rgion conditionnelle est bien applique votre
slection (voir Figure 8.12).
5. De la mme faon, slectionnez le lien "Cet article est dj dans votre panier, cliquez
ici pour en modier la quantit commande" que vous avez dni plus haut, et
Figure 8.10
Les objets de type
Afficher la rgion
permettent de mettre
en place des affichages
conditionnels.
Figure 8.11
Slectionnez le jeu denre-
gistrements dont dpend
laffichage de votre texte.
Figure 8.12
Cette rgion ne sera
affiche que si le jeu
denregistrements
Panier est vide.
appliquez celui-ci un objet du type Afcher si le jeu denregistrements nest pas
vide. Cet objet se trouve dans le mme groupe Afcher la rgion.
6. Slectionnez encore une fois le jeu denregistrements Panier comme critre daf-
chage et validez cette option.
7. Votre lien se retrouve lui aussi entour dun halo gris tiquet Afcher si (voir
Figure 8.13).
Lutilisation de ces deux rgions conditionnelles sur votre page, associes aux condi-
tions codes en PHP utilises au chapitre prcdent, permet de contrler lafchage de
votre page de description des articles en toutes circonstances.
Vos clients peuvent dsormais ajouter facilement des livres leur panier !
Cration du panier
Une premire tape, et non des moindres, vient dtre franchie dans la gestion de votre
processus de commande. Mais le travail est encore long. Vos clients peuvent dsormais
ajouter des livres leur panier. Bien ! Mais ils ne peuvent pas encore contrler le contenu
de celui-ci.
Vous allez prsent mettre en place la page panier.php. Avec cette page, vos clients
vont pouvoir :
visualiser lensemble des articles prsents dans leur panier ;
prendre connaissance du prix de chacun des articles de ce panier ;
prendre connaissance de la somme totale que reprsente ce panier ;
modier la quantit de chaque article command ;
supprimer lun des articles du panier ;
valider dnitivement le panier pour en faire une commande.
Figure 8.13
Aucun moyen de distinguer
les diffrents types de
rgions conditionnelles.
Comme vous le voyez, la tche nest pas mince (voir Figure 8.14) !
Affichage dune ligne de panier
Le meilleur moyen est de procder par tape. Afchons tout dabord une seule ligne du
panier actuel, avec les donnes suivantes :
titre de larticle ;
prix de larticle ;
quantit ;
prix total de la ligne de panier (soit le prix de larticle multipli par la quantit).
Pour obtenir lensemble de ces informations, vous allez devoir utiliser une requte
SQL un peu plus complexe que celles dnies jusqu prsent. Cette requte devra
non seulement extraire des informations depuis deux tables diffrentes, et donc faire
appel une jointure comme vous lavez dj vu, mais galement calculer dynamique-
ment des informations. Pour cela, vous allez faire appel aux oprateurs numriques
de SQL.
Mais commenons par la cration du jeu denregistrements proprement parler :
1. Commencez par crer une nouvelle page blanche sur votre site web et sauvegardez
celle-ci sous le nom de panier.php dans le dossier Account de votre site web.
2. Appliquez cette page un objet du type Restreindre laccs la page, suivant les
mmes paramtres que ceux utiliss pour la section Client du site dans le chapitre
prcdent. La page de panier nest en effet afchable que si un client est connect
votre site.
3. Crez un nouveau jeu denregistrements nomm Panier et connectez celui-ci la
connexion par dfaut de votre site.
Figure 8.14
Un panier bien rempli.
4. Passez en mode Avanc pour la cration de votre jeu denregistrements, et saisissez
la requte suivante dans le champ SQL de la bote de dialogue Jeu denregis-
trements :
SELECT shop_panier.*, shop_livres.titre, shop_livres.prix_ttc,
(shop_livres.prix_ttc*shop_panier.quantite) AS total_ttc,
(shop_livres.prix_ht*shop_panier.quantite) AS total_ht
FROM shop_panier INNER JOIN shop_livres ON shop_panier.article=shop_livres.id
WHERE client = paramclient
La jointure dnie ici (INNER JOIN) sert trouver les informations relatives
louvrage command (titre, prix hors taxe et toutes taxes comprises) dans la table
shop_livres, en se servant de la correspondance avec lidentiant unique de
louvrage prsent dans la ligne de panier.
Les deux lignes (shop_livres.prix_ttc*shop_panier.quantite) AS
total_ttc et (shop_livres.prix_ht*shop_panier.quantite) AS total_ht
servent calculer le prix total de la ligne de panier laide dune simple multiplication
(loprateur *). Les rsultats de ces multiplications sont stocks dans deux nouvelles
variables nommes total_ttc et total_ht laide de la fonction SQL AS.
Lensemble des commandes utilises ici lors de la cration des jeux denregistrements fait appel des
commandes SQL classiques. Pour en savoir plus sur celles-ci, vous pouvez consulter la documentation
en ligne de MySQL : http://dev.mysql.com/doc/mysql/en/index.html (voir Figure 8.15).
Figure 8.15
Une aide complte sur
la technologie MySQL.
5. Compltez le jeu denregistrements obtenu avec la dnition de la variable Param-
client utilise comme ltre, suivant le Tableau 8.4.
6. Validez enn ce jeu denregistrements. Vous disposerez alors de toutes les donnes
ncessaires lafchage de chacune des lignes du panier.
SQL ou PHP ? Le calcul du prix total dune ligne de commande peut seffectuer partir des deux
langages. Mais, en tenant compte de la faon dont fonctionne Dreamweaver, il est beaucoup plus
simple de calculer nimporte quelle donne afficher depuis un jeu denregistrements que tenter
dinsrer un code PHP devant exploiter les donnes de ceux-ci. Cest pourquoi, ici, les donnes
total_ttc et total_ht ont t incluses dans les requtes SQL de cration des jeux denregis-
trements.
Pour afcher ces lignes, lopration est des plus simples : localisez dans le jeu denre-
gistrements que vous venez de crer les donnes que vous souhaitez afcher (titre de
larticle, prix unitaire, quantit et prix total) et faites glisser ces donnes depuis le
panneau Liaisons jusque sur votre page (voir Figure 8.16).
Si vous testez la page ainsi conue dans votre environnement de test, vous verrez appa-
ratre la premire ligne du panier en cours (voir Figure 8.17).
Tableau 8.4 : Variable du jeu denregistrements Panier
Nom Type Valeur par dfaut Valeur courante
Paramclient text
0
$_SESSION[MM_Username]
Figure 8.16
La premire ligne du
panier, dfinie dans
Dreamweaver.
Figure 8.17
La premire ligne du
panier, en action !
Modification de la quantit darticles
Votre client connat prsent larticle qui compose la premire ligne de son panier.
Mais il ne peut pas encore en changer la quantit commande. Pour cela, vous allez
devoir faire appel un formulaire de mise jour denregistrements.
Comme vous lavez dj vu dans le cadre de la mise jour des donnes dun client, cha-
cune des donnes que vous souhaitez mettre jour dans votre table de donnes doit
exister dans le formulaire qui va servir cette mise jour, y compris et surtout lidentiant
unique de lenregistrement mettre jour.
Une fois ce prrequis compris, la mise au point dun formulaire destin modier la
quantit darticles est une opration simple :
1. Crez tout dabord un nouveau formulaire sur votre page, laide de loutil Formu-
laire du groupe Formulaires de la barre doutils de Dreamweaver, et nommez celui-
ci Quantite. Pour des facilits de mise en page, incluez dans ce formulaire les diff-
rentes informations que vous avez dj afches sur la page de panier : nom de
larticle, prix, quantit La cration de la page de panier nale en sera grandement
facilite.
2. Dans ce formulaire, crez un champ de type Texte et nommez-le Quantite. Associez
ce champ la valeur par dfaut Quantit de lenregistrement Panier courant. Pour
cela, dans le champ Valeur init., cliquez sur licne en forme dclair et choisissez
quantite du Jeu denregistrements.Cest grce ce champ de formulaire que vos
clients vont pouvoir modier la quantit dobjets commands en mme temps, sim-
plement en en modiant la valeur et en validant de nouveau celle-ci (voir
Figure 8.18).
3. Crez une srie de champs de formulaire masqus contenant les autres informations
ncessaires la mise jour de lenregistrement en question et donc de la quantit.
Trois champs masqus sont ncessaires : id (contenant lidentiant unique de la
ligne de panier modier), client (contenant ladresse e-mail du client effectuant
la commande) et article (contenant lidentiant unique de larticle command).
Figure 8.18
Un champ texte pour modifier la quantit darticles.
Ces trois informations sont rcuprables depuis le jeu denregistrements Panier
(voir Figure 8.19).
Au nal, votre formulaire doit correspondre au Tableau 8.5.
4. Ajoutez un bouton de validation votre formulaire et appliquez comme lgende
celui-ci "Mettre jour la quantit".
5. Il ne vous reste qu mettre en place la procdure de mise jour de la base de don-
nes. Pour cela, utilisez lobjet Mise jour de donnes de Dreamweaver, qui se
nomme Mettre jour lenregistrement, que vous connaissez dj. Spciez bien
dans la fentre de cration de la procdure de mise jour que vous utilisez le formu-
laire Quantite pour mettre jour la table shop_panier avec les correspondances
dtailles dans le Tableau 8.6.
Figure 8.19
Les autres champs du formulaire se doivent dtre cachs.
Tableau 8.5 : Composition du formulaire de mise jour de quantit
id
Champ masqu
<?php echo $row_Panier[id];?>
client
Champ masqu
<?php echo $row_Panier[client];?>
article
Champ masqu
<?php echo $row_Panier[article];?>
quantit
Champ texte
<?php echo $row_Panier[quantite];?>
Tableau 8.6 : Correspondance entre votre formulaire et la table shop_panier
id
id entier
client
client texte
article
article entier
quantite
quantit entier
6. Spciez que la page afcher une fois lopration termine est la mme que celle
afche actuellement, cest--dire panier.php. En effet, une fois la mise jour de
lenregistrement effectue, les bonnes donnes seront de nouveau disponibles dans
la table shop_panier, et lon pourra donner la possibilit au client de modier la
quantit commande dun autre article ou de valider lintgralit de son panier (voir
Figure 8.20).
7. Validez lensemble de ces paramtres pour que le processus de mise jour du
panier soit en place. Vous pouvez alors le tester sur votre serveur de dveloppement.
Suppression dun article
La construction de votre page de panier avance grands pas. Vos clients peuvent dsor-
mais modier la quantit dun mme article quils commandent. Pensez galement
leur laisser la possibilit de supprimer un article sils nen veulent plus dans leur panier.
Pour cela, commencez travailler sur votre page de panier :
1. Crez, la suite de votre bouton de modication de quantit, un texte du type "Sup-
primer cet article".
2. Sur ce texte, ajoutez un lien menant une page nomme suppr_panier.php, toujours
hberge dans le dossier /account/ de votre boutique. En paramtre de ce lien, pen-
sez ajouter lidentiant unique de la ligne de panier afche actuellement et donc
extraite du jeu denregistrements Panier.
Au nal, votre lien devrait avoir la syntaxe suivante :
suppr_panier.php?id=<?php echo $row_Panier[id];?>
Figure 8.20
La cration du formulaire
de mise jour de la quan-
tit est bientt termine.
Votre page de panier est alors correctement modie pour la suppression darticles.
Il vous faut crer une page supplmentaire qui va se charger deffectuer elle-mme la
suppression :
1. Crez une nouvelle page PHP dans Dreamweaver et nommez-la suppr_panier.php.
Enregistrez-la dans le dossier /account/ de votre boutique.
2. Dans cette page, vous allez insrer un objet du type Supprimer lenregistrement.
Cet objet se trouve dans la barre doutils Insertion > Objets de donnes. Cliquez
donc sur son icne pour ouvrir la bote de dialogue de suppression des enregistrements
(voir Figure 8.21).
3. Dans la liste droulante Vrier au pralable si la valeur est dnie, slectionnez le
type Paramtre dURL et compltez ce paramtre avec la variable id. Cest en effet
en vous fondant sur cette variable passe en URL que vous allez savoir quel enre-
gistrement effacer dans votre table de donnes. Cest pour cela que vous avez cr
vos liens avec un paramtre dans la page de panier.
4. Slectionnez ensuite la connexion qui vous relie la table shop_panier dans votre
site Dreamweaver (champ Connexion) et la table shop_panier dans le champ
Table. Cest bien dans cette table que vous allez supprimer lenregistrement voulu.
5. Dans le champ Colonne de la cl primaire, slectionnez id (la cl primaire dnie
lors de la cration de la table) et cochez la case Numric an de prciser que cette
donne est bien une valeur numrique. Cela vitera les confusions au moment de
leffacement.
6. Il est maintenant temps de dnir lidentiant de lenregistrement effacer : il
sagit du paramtre dURL id dni plus haut. Slectionnez donc Paramtre dURL
dans la liste droulante Valeur de la cl primaire et compltez le champ texte attenant
avec le nom de ce paramtre : id.
Figure 8.21
Cette bote de dialogue
permet de supprimer des
enregistrements suivant
des paramtres dfinis.
7. Enn, prcisez la page vers laquelle votre client doit tre redirig une fois leffa-
cement de larticle effectu. Slectionnez ici panier.php puis validez la bote de
dialogue.
Ainsi, une fois la page enregistre, le comportement sera le suivant : pour effacer un
article de son panier, votre client cliquera simplement sur le lien "Supprimer du panier"
lui correspondant. Il sera alors redirig vers la page suppr_panier.php, page qui se char-
gera de supprimer effectivement larticle de la table Panier. Une fois cette opration
faite elle ne dure quune fraction de secondes, le client retrouve alors son panier,
amput de larticle quil a voulu supprimer.
La gestion de votre panier avance grands pas !
Affichage de la totalit du panier
Vous avez dsormais la possibilit de modier la quantit darticles commands dans
votre panier, voire de supprimer dun seul clic un article que vous ne dsirez plus. Seul
inconvnient pour linstant : un seul article safche sur votre page. Si votre panier
contient plusieurs ouvrages, vous ne pouvez donc voir que le premier valid.
La prochaine modication sur la page panier.php va donc consister y afcher lensem-
ble des articles prsents dans le panier. Par la mme occasion, vous allez galement af-
cher le cot total du panier an que votre client sache combien il devra payer avant de
conrmer sa commande.
Vous vous en doutez peut-tre dj, lafchage de lensemble des articles contenus dans
le panier passe par la mise en place dune rgion rpte sur votre page :
1. Slectionnez sur votre page le formulaire contenant la fois les informations rela-
tives la ligne de commande, les champs de changement de quantit et le lien de
suppression dun article (voir Figure 8.22).
2. Dans la barre doutils Insertion > Objets de donnes, slectionnez lobjet Rgion
rpte. La bote de dialogue de cration dune rgion rpte safche alors (voir
Figure 8.23). Vous connaissez dj celle-ci.
Figure 8.22
Lensemble de la slection va tre rpt sur la page.
3. Slectionnez le jeu denregistrements qui conditionne la rptition de la rgion.
En loccurrence Panier.
4. Slectionnez loption Tous les enregistrements an que la totalit du panier du
client soit afche lcran. Et ce quel que soit le nombre darticles que celui-ci
contient.
5. Validez ces options. Le formulaire que vous aviez slectionn se retrouve alors
entour dun halo gris portant la mention Rpter.
Si vous testez dsormais votre panier et que vous ajoutiez plusieurs articles celui-ci,
vous remarquerez quune ligne est afche pour chacun deux. Vous pouvez librement
modier la quantit darticles pour lune de ces lignes ou supprimer lune dentre elles
dun simple clic (voir Figure 8.24). Cest lune des grandes forces de Dreamweaver
CS4 que de pouvoir grer, en mme temps, les formulaires de mise jour de donnes et
les rgions rptes sans aucune confusion !
Reste encore une information afcher pour que votre panier soit rellement informatif
pour vos clients : le prix total de celui-ci. Pour obtenir ce prix, vous allez vous servir
dune requte SQL prcise, de la mme faon que vous avez trouv le prix global dune
quantit darticles commande.
1. Crez donc un nouveau jeu denregistrements en mode Avanc et nommez ce jeu
Total.
Figure 8.23
La mise en place dune
rgion rpte est des
plus simples.
Figure 8.24
Votre panier est presque fini.
2. Utilisez pour ce jeu la connexion que vous utilisez par dfaut sur votre site.
3. Dans le champ SQL, saisissez la requte suivante :
SELECT now() AS date, SUM(shop_panier.quantite*shop_livres.prix_ttc) AS
total_ttc, SUM(shop_panier.quantite*shop_livres.prix_ht) AS total_ht
FROM shop_panier INNER JOIN shop_livres ON shop_livres.id =
shop_panier.article
WHERE shop_panier.client = paramClient
GROUP BY shop_panier.client
4. Enn, dans les variables, dnissez une nouvelle variable nomme paramClient
dont la valeur par dfaut est 0 et la valeur effective, $_SESSION[MM_Username].
5. Validez ce nouveau jeu denregistrements. Celui-ci comprend donc trois valeurs
distinctes :
La date actuelle, calcule partir de la simple fonction MySQL now(), qui donne
automatiquement la date laquelle est effectue la requte.
Le total Hors-Taxe du panier en cours, calcul comme la somme (SUM) de tous
les prix hors taxe des articles multiplis par la quantit commande
(shop_panier.quantite*shop_livres.prix_ht).
Le total Toute-Taxe Comprise du panier, calcul de la mme faon, mais partir
du prix toutes taxes comprises de chacun des articles.
6. Pour afcher le cot total du panier actuel pour le client, il vous suft de faire glis-
ser la donne total_ttc de votre nouveau jeu denregistrements depuis le panneau
Liaisons de Dreamweaver jusqu lemplacement choisi sur votre page.
Dans cette requte sont prsents la fois les prix toutes taxes comprises et hors taxe. En effet, ces
deux informations sont ncessaires la cration dun enregistrement dans la table
shop_commande, lors de la validation du panier. Vous remarquerez que, par la mme occasion, on
rcupre galement la date actuelle laide dun now() AS date. Cette date sera galement utilise
pour remplir la table shop_commande en cas de validation du panier.
Votre panier est donc peu prs oprationnel. Il ne vous manque plus que la fonction
principale de celui-ci : la validation de lensemble des articles et la transformation dun
simple panier en une commande ferme !
Validation de la commande
La procdure de validation de la commande va vous demander beaucoup plus de tra-
vail que la mise en place du panier proprement dit. Si vous vous souvenez du schma
original de votre base de donnes, une commande est stocke dans deux tables diff-
rentes :
shop_commande sert enregistrer les donnes relatives une commande en parti-
culier, comme sa date dapplication, son total, le client qui la passe, etc.
shop_ligne_commande sert quant elle enregistrer chacun des articles de votre
commande avec les informations individuelles qui le concernent : prix, quantit,
identiant.
La validation de la commande va donc consister en deux tapes distinctes, traites par
deux pages distinctes : tout dabord crer lenregistrement dans la table
shop_commande avec les informations gnriques de la commande. Cette opration
va tre effectue ds la validation du panier, sur la page panier.php elle-mme. Ensuite,
transfrer lensemble des articles qui composent la commande de la table
shop_panier vers shop_ligne_commande, en y ajoutant au passage toutes les infor-
mations ncessaires (prix individuel et total, etc.). Cette opration va tre effectue sur
une seconde page, appele ds la validation du panier et qui sera nomme
traitement_commande.
Mais concentrons-nous tout dabord sur la premire tape de ce processus !
Bouton de validation sur panier.php
Vous commencez bien connatre Dreamweaver et savez dsormais que, pour insrer
nimporte quel enregistrement dans une table, il vous faut faire appel un formulaire.
Crez donc un nouveau formulaire tout en bas de votre page de panier et nommez celui-
ci Validation. Dans ce formulaire, vous allez crer un ensemble de champs masqus
correspondant chacune des informations ncessaires linsertion dun enregistrement
dans la table de commande. Ce formulaire suit les indications donnes par le
Tableau 8.7.
Tableau 8.7 : Composition du formulaire de validation du panier
date
Champ masqu
<?php echo $row_Total[date];?>
total_ttc
Champ masqu
<?php echo $row_Total[total_ttc];?>
total_ht
Champ masqu
<?php echo $row_Total[total_ht];?>
client
Champ masqu
<?php echo $_SESSION[MM_Username];?>
ce formulaire uniquement compos de champs masqus sajoute bien entendu un
bouton de validation que vous pouvez facilement crer laide de lobjet Bouton de la
barre dinsertion Formulaires. Modiez simplement ltiquette de ce formulaire an
quelle porte la mention "Valider lachat" (voir Figure 8.25).
Ajout de la commande la base de donnes
Une fois le formulaire construit, lajout de la commande la table shop_commande
correspondante nest quune formalit, que vous avez dj remplie plusieurs fois depuis
le dbut de cet ouvrage. Il sagit en fait dutiliser un objet du type Insrer un enregistrement
votre page, associ au formulaire que vous venez de crer :
1. Slectionnez lobjet Insrer un enregistrement dans la section Donnes de la barre
doutils de Dreamweaver. La bote de dialogue du mme nom souvre alors (voir
Figure 8.26).
2. Slectionnez le formulaire que vous venez de crer (Validation) dans le champ
Envoyer les donnes partir de
3. Slectionnez ensuite la connexion courante de votre site Dreamweaver dans la liste
droulante Connexion, ainsi que la table shop_commande dans la liste droulante
Table.
Figure 8.25
Un formulaire principale-
ment compos de
champs masqus.
Figure 8.26
Insrez lenregistrement
de la commande dans
votre base de donnes.
4. Il vous faut maintenant dnir la correspondance entre les champs de votre formu-
laire et les colonnes de la table de donnes slectionne. Cette correspondance est
dtaille dans le Tableau 8.8.
5. Compltez le champ Aprs linscription, aller par ladresse de la page de traite-
ment de la commande traitement_commande.php. Cette page va tre cre dans les
minutes qui viennent et est destine transfrer chacun des articles prsents dans le
panier du client vers la table shop_ligne_commande. Vous allez voir son fonction-
nement par la suite.
Il ne vous reste donc qu valider le contenu de la bote de dialogue et enregistrer la
page de panier ainsi modie. La cration dune nouvelle commande est, au moins en
partie, ralise.
Page de validation
Reste tout de mme mettre en place la plus grosse partie du processus. Il va sagir de
transfrer lensemble des articles commands depuis la table shop_panier vers la table
shop_ligne_commande et de faire correspondre ceux-ci la commande qui vient juste
dtre valide. Opration dlicate qui va vous demander un peu dastuce et beaucoup de
connaissances techniques.
Avant de se pencher dans le script utiliser, mieux vaut bien dtailler laction de la page.
En effet, vous allez devoir construire cette page par vos propres moyens, sans faire
appel aux jeux denregistrements et autres fonctionnalits avances de Dreamweaver.
Comme nous lavons dj expliqu, Dreamweaver CS4 est incapable de prendre en
charge des traitements par lot, cest--dire des oprations o chacune des tapes est non
pas gre par une action de vos visiteurs/clients, mais enchane automatiquement lune
aprs lautre. Vous allez donc devoir coder cette page de validation du panier par vos
propres moyens.
Tableau 8.8 : Correspondance entre le formulaire de validation dachat et la table
shop_commande
date
date date
total_ttc
total_ttc Numrique
total_ht
total_ht Numrique
client
client Texte
Les diffrentes tapes de ce transfert de donnes sont plutt simples comprendre :
1. Savoir quelle commande correspond lensemble des articles transfrer. Comme
le numro de commande est gnr automatiquement lors de la cration dun enre-
gistrement dans la page panier.php, impossible de transfrer celui-ci au moment de
la validation. Simplement parce que vous ne pouvez le connatre. Il va donc falloir
trouver le numro de commande dune autre faon : en cherchant le dernier enregis-
trement de la table shop_commande correspondant au client actuellement connect,
par exemple.
2. Lire les enregistrements de la table shop_panier un par un. De cette faon, vous
pourrez retrouver lensemble des articles commands par votre client en utilisant
simplement son identiant de connexion, stock lui aussi dans la table
shop_panier. Le systme de votre boutique est construit de telle faon que tous les
articles prsents dans le panier au moment de la validation font automatiquement
lobjet dun achat. Aucune erreur possible, donc !
3. Enregistrer chacune de ces lignes dans la table shop_ligne_commande. Rien de
sorcier, il sagit dune copie champ champ des donnes extraites de la table
shop_panier.
4. Recommencer les tapes 3 et 4 pour chacune des autres lignes de la table
shop_panier.
Le processus nest donc pas extrmement compliqu. Vous allez trouver dans les pages
suivantes sa traduction en terme de code PHP. Pour plus de "simplicit", ce code a t
ralis en respectant la syntaxe utilise par Dreamweaver lors de la construction des
jeux denregistrements et des comportements dinsertion. Insrez lensemble du code
suivant dans le corps de votre page Dreamweaver, entre les balises <body> et </body>
plutt que dans son en-tte, vous verrez pourquoi par la suite.
Crez donc une nouvelle page dans votre site, sous le dossier /account/, et nommez
celle-ci traitement_panier.php, comme spci prcdemment lors de la cration du
lien de validation. Le code commence ensuite.
Premire tape, rcuprer le dernier numro de commande attribu au client actuel.
Pour cela, on utilisera le type de commande utilis par Dreamweaver pour gnrer un
jeu denregistrements, aprs avoir ouvert la section PHP du code de la page :
<?php
if (isset($_SESSION[MM_Username])) {
mysql_select_db($database_MaBoutique, $MaBoutique);
$query_commande = sprintf("SELECT id
FROM shop_commande
WHERE client =".$_SESSION[MM_Username]."
ORDER BY id DESC");
$commande = mysql_query($query_commande, $MaBoutique) or die(mysql_error());
$row_commande = mysql_fetch_assoc($commande);
$totalRows_commande = mysql_num_rows($commande);
Seconde tape, rcuprer la premire ligne du panier correspondant au client actuel. En
fait, vous vous contenterez de btir la requte correspondante et de lexcuter plus tard.
Cette requte donne :
$query_panier = sprintf("SELECT shop_panier.*,
shop_livres.prix_ht,
shop_livres.prix_ttc,
shop_livres.prix_ht*shop_panier.quantite AS
total_ht,
shop_livres.prix_ttc*shop_panier.quantite AS
total_ttc
FROM shop_panier
INNER JOIN shop_livres
ON shop_livres.id=shop_panier.article
WHERE client = ".$_SESSION[MM_Username]."");
$panier = mysql_query($query_panier, $MaBoutique) or die(mysql_error());
On en prote toutefois pour trouver le nombre denregistrements total concern par
cette requte. Pour cela, on utilise la commande PHP mysql_num_rows(), capable de
donner le nombre denregistrements rsultant dune requte dj construite, en loccur-
rence celle stocke dans $panier.
On initialise la suite un compteur (nomm trs justement $compteur) destin retenir
le nombre de lignes dj traites et stopper le processus si tout le panier a t converti.
$totalRows_panier = mysql_num_rows($panier);
$compteur = 0;
La boucle de conversion commence alors. Elle se btit de la manire suivante.
Tant que la requte $panier renvoie une donne et que le compteur na pas atteint le
nombre total denregistrements, on insre le contenu extrait de la table shop_panier
dans la table shop_ligne_commande (requte $query_ligne_commande). On efface
ensuite la ligne de shop_panier que lon vient de traiter (requte
$query_suppr_panier) et lon incrmente le compteur dune unit, histoire de bien
traiter le prochain enregistrement lors du prochain passage dans la boucle.
En PHP, cela donne :
while ($row_panier = mysql_fetch_assoc($panier) and $compteur < $totalRows_panier)
{
$query_ligne_commande = sprintf("INSERT
INTO shop_ligne_commande (commande,
article, prix_ht, prix_ttc, quantite, total_ht, total_ttc) VALUES (%s, %s, %s,
%s, %s, %s, %s)",
GetSQLValueString($row_commande[id],
"int"),
GetSQLValueString($row_panier[article],
"int"),
GetSQLValueString($row_panier[prix_ht],
"double"),

GetSQLValueString($row_panier[prix_ttc], "double"),

GetSQLValueString($row_panier[quantite], "int"),

GetSQLValueString($row_panier[total_ht], "double"),

GetSQLValueString($row_panier[total_ttc], "double"));
$Result1 = mysql_query($query_ligne_commande, $MaBoutique) or
die(mysql_error());
$query_suppr_panier = sprintf("DELETE FROM shop_panier WHERE id=%s",
GetSQLValueString($row_panier[id], "int"));
$Result1 = mysql_query($query_suppr_panier, $MaBoutique) or die
(mysql_error());
$compteur = $compteur+1;
}
}
?>
Cest ici quune bonne aide la rdaction de code PHP peut vous tre utile. Pensez consulter le
portail officiel de langage (www.php.net/docs.php) afin dy trouver toute la documentation
ncessaire.
Pour fonctionner correctement, le script dcrit ci-dessus va avoir besoin dune fonction
dnie par Dreamweaver. Il sagit de GetSQLValueString, qui se charge de retrouver
la valeur dune variable dnie depuis un jeu denregistrements. Cette fonction est ins-
re automatiquement dans une page, ds que vous faites appel lafchage dune donne
dynamique dans Dreamweaver.
Comme sur la page actuelle, vous ne faites appel aucun jeu denregistrements au sens
o Dreamweaver les entend, il vous faut reprendre cette fonction par vous-mme.
Pour cela, copiez simplement lensemble du code suivant dans len-tte de votre page,
juste aprs le code correspondant la restriction daccs de la page.
<?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "",
$theNotDefinedValue = "")
{
$theValue = (!get_magic_quotes_gpc())? addslashes($theValue): $theValue;
switch ($theType) {
case "text":
$theValue = ($theValue!= "")? "" . $theValue . "": "NULL";
break;
case "long":
case "int":
$theValue = ($theValue!= "")? intval($theValue): "NULL";
break;
case "double":
$theValue = ($theValue!= "")? "" . doubleval($theValue) . "": "NULL";
break;
case "date":
$theValue = ($theValue!= "")? "" . $theValue . "": "NULL";
break;
case "defined":
$theValue = ($theValue!= "")? $theDefinedValue: $theNotDefinedValue;
break;
}
return $theValue;
}
?>
Une fois ces deux sections de code insres dans votre page, le traitement de la com-
mande devrait tre effectif.
Il ne vous reste plus qu complter cette page avec un petit message dattente, an
que votre client nait pas limpression dun bug et ne se retrouve pas devant une page
vide aprs la validation de sa commande. Par exemple "Veuillez patienter pendant le
traitement de votre commande". Placez ce message avant le code PHP dtaill plus
haut. De cette manire, il apparatra ds le chargement de la page et ne surprendra pas
le client.
Insrez galement deux liens, lun vers la page de rsum de commandes, lautre en
retour vers la boutique, juste aprs le script PHP de migration des donnes. De cette
faon, ils ne seront afchs quune fois le script excut. Aucun risque quun client
navorte le transfert cause dun clic trop htif.
Dernier dtail, insrez le code PHP suivant la toute n de votre page, aprs la balise
</html> :
<?php
mysql_free_result($panier);
mysql_free_result($commande);
?>
Ce code est destin librer la mmoire du serveur des enregistrements crs sur la
page ($panier pour les lignes de paniers slectionnes et $commande pour le numro
de la commande en cours). Vous y gagnerez en performance et viterez certains messages
dalerte de la part de votre serveur.
Si vous trouvez des erreurs dans le style :
Warning: mysql_select_db(): supplied argument is not a valid MySQL-Link
resource in C:\wamp\www\Boutique\account\traitement_commande.php on line 84
Cest que le nom de votre base de donnes nest pas le mme que dans lexemple.
Il vous suft daller aux lignes correspondante aux erreurs, ici ligne 84, et dy modier
le nom de la base de donnes qui est dans lexemple MaBoutique.
Rsum des commandes
La mise en place dune page de rsum des commandes nest ensuite plus quune for-
malit pour vous. Celle-ci peut se btir de la mme faon que les pages de catalogue de
votre site :
Crez une page daccueil contenant la liste de toutes les commandes effectues par le
client. Les donnes sont faciles trouver grce un jeu denregistrements cibl sur la
table shop_commande :
SELECT * FROM shop_commande WHERE client = idSession ORDER BY `date` DESC
Dans cette requte, la variable idSession correspond lidentiant du client connect
sur votre page, la variable de session $_SESSION[MM_Username] donc. partir de ce
jeu denregistrements, crez un tableau reprenant le numro de la commande, sa date de
commande et dexpdition et son montant total. Utilisez une rgion rpte pour af-
cher lintgralit des commandes tires de la requte. Un dernier bouton, envoyant vers
une page de dtail avec le numro de commande en attribut (type
detail_commande.php?id=<?php echo $row_Commandes[id];?>) et le tour est
jou (voir Figure 8.27).
Crez ensuite cette page de dtail nomme detail_commande.php, reprenant non seu-
lement les informations relatives la commande (extraite de la table shop_commande)
mais galement celles relatives chacun des articles commands, trouvables depuis un
jeu denregistrements sur la table shop_ligne_commande, ltr sur lidentiant unique
de commande pass en paramtre de la page.
Pour cela, deux jeux de requte donc. Le premier servant extraire les informations
relatives la commande passe en paramtre (identiant, total, date) :
SELECT * FROM shop_commande WHERE id = idURL
Ou idURL correspond une variable dURL du type $_GET[id]. Et enn, une seconde
requte destine trouver tous les articles prsents dans cette commande prcise :
SELECT shop_ligne_commande.*, shop_livres.titre FROM shop_ligne_commande INNER
JOIN shop_livres ON shop_ligne_commande.article = shop_livres.id WHERE
shop_ligne_commande.commande = idURL ORDER BY shop_ligne_commande.id ASC
Ou idURL correspond une fois encore une variable dURL du type $_GET[id]. Les
donnes de cette seconde requte seront prsentes dans un tableau et rptes laide
dune rgion rpte classique de Dreamweaver jusqu ce que toutes les donnes en
soient afches.
Figure 8.27
Toutes les commandes
dj passes par un
client !
9
Paiement et facturation
Il manque encore une pierre votre boutique en ligne : une solution de paiement.
tape indispensable, elle permettra vos clients de payer effectivement les articles
quils commandent et vous de recevoir les bnces tirs de la mise en ligne de
votre commerce. Reste donc trouver un moyen denregistrer les paiements de vos
clients.
Vous pouvez bien entendu envisager de crer le systme de paiement par vos propres
moyens. Pour cela, il vous faudra simplement une connexion scurise au moyen dun
certicat SSL (ce qui cote assez cher), un interfaage direct avec une banque ou avec
une plate-forme de paiement centralise grant les cartes bleues et autres cartes inter-
nationales et surtout beaucoup de patience pour grer limmense nombre de cas pouvant
arriver sur une interface de paiement. Mission presque impossible pour un webmaster
seul dans son coin.
Il existe pourtant des solutions beaucoup plus simples utiliser. Des socits de servi-
ces spcialises, comme PayPal en Europe, mettent disposition des webmasters une
interface de paiement complte, scurise et able. La seule chose faire pour vous est
denvoyer automatiquement ce prestataire la somme dbiter sur la carte bleue de vos
clients pour que le paiement soit trait.
Dans les pages qui suivent, vous allez dcouvrir comment utiliser ce type de presta-
taire dans le cadre de votre boutique en ligne. Vous allez voir, lopration est trs
simple !
PayPal, une solution de paiement en ligne
PayPal (voir Figure 9.1) est une plate-forme de centralisation de paiements en ligne
originaire des tats-Unis. PayPal appartient depuis 2002 au site denchres eBay.
Son but est de runir clients et acheteurs sur une mme plate-forme, proposant au pre-
mier un service de facturation et dacceptation de paiement centralis et personnalisable
et donc aisment adaptable nimporte quelle boutique. Et au second une plate-forme
de paiement en ligne scurise et reconnue. Les clients nont donc plus limpression de
payer en ligne, de manire incertaine, sur un service inconnu.
Figure 9.1
PayPal, une solution
centralise de paiement
en ligne.
223 PAIEMENT ET FACTURATION
PayPal trouve son modle conomique sur les commissions prleves sur chaque achat
en ligne. Les commissions ne sont pas prleves ct client, mais ct vendeur ce qui
rend le service payant, sans vraiment ltre. Si vous ne ralisez aucune vente, aucune
commission ne sera prleve.
Le systme PayPal se subventionne sur les paiements raliss sur votre boutique, sous la forme dune
commission. Le niveau de la commission dpend du nombre de versements raliss par mois sur la
boutique et du montant de chacun de ceux-ci. Pour plus dinformations, nhsitez pas consulter la
page suivante : https://www.paypal.com/fr/cgi-bin/webscr?cmd=_display-receiving-fees-
outside. Pensez donc calculer les prix de votre boutique en fonction de la commission de paiement
que vous devrez payer PayPal pour chaque opration effectue.
Une rserve donc sur ce mode de paiement. Dpass un certain volume mensuel de transactions, le
montant des commissions peut dsavantager certains Web commerants. Assurez-vous que le sys-
tme PayPal corresponde votre modle conomique et ne ralentira pas le dveloppement de votre
boutique.
Puis ouvrir son "compte bancaire" virtuel PayPal, quil alimente soit par virement, soit
par carte bancaire. Il mentionne le-mail du destinataire du paiement, vous en loccur-
rence, prcise la somme en jeu. Un e-mail mis par lacheteur vous notie que la
somme de la transaction est disponible. Depuis votre compte PayPal, il vous reste
activer le transfert de fonds pour que la somme en jeu soit dpose sur votre compte
bancaire.
Le service PayPal peut se caractriser en sept points :
1. Labsence dabonnement.
2. Labsence de contrat de VAD.
3. Le paiement en ligne sans saisir dinformations nancires.
4. Le cryptage des donnes condentielles.
5. La protection contre les paiements non autoriss.
6. Laccs en ligne, 24h/24, lhistorique des transactions.
7. La saisie de son adresse e-mail, pour valider une transaction commerciale et
envoyer au site de e-commerce, son paiement.
Inscription PayPal France
Cest donc la solution PayPal que vous allez utiliser pour recevoir le paiement des
clients de votre boutique en ligne. Pour mettre en place cette solution, il vous faut avant
tout possder un compte PayPal France.
Le systme PayPal existe dans de nombreux pays dans le monde. Si vous rsidez dans un autre pays
francophone (Suisse, Belgique), rendez-vous sur le portail correspondant votre pays de rsidence
pour crer un compte PayPal.
La cration de celui-ci ne vous prendra que quelques minutes :
1. Rendez-vous tout dabord sur la page daccueil du site PayPal France (www.pay-
pal.fr) et cliquez sur le lien Ouvrir un compte prsent en haut de la page daccueil
(voir Figure 9.2) pour accder au formulaire de cration de compte.
2. Trois versions de compte vous seront proposes mais seules les options "compte
Premier" et "compte Business" rpondent aux caractristiques dun site de e-com-
merce. Le choix entre ces deux solutions seffectuera aisment. La premire est
ddie aux e-commerants souhaitant exercer leur activit en leur nom propre. La
seconde rpond lhypothse o un site web marchand est lanc sous le nom dune
socit ou dun groupe. Il est noter que la solution Business acceptera tout type de
paiement quand loffre Premier se rvlera plus restrictive.
Aprs avoir slectionn une version de compte PayPal et pour poursuivre votre ins-
cription, veuillez slectionner en bas de page le pays dans lequel vous rsidez.
Enn, cliquez sur le bouton "Continuer".
3. Il vous faut ensuite saisir les donnes du futur titulaire du compte. (voir
Figure 9.4) Dans le formulaire prsent en haut de la page, trois donnes person-
nelles sont requises : le nom et ladresse du futur dtenteur de compte PayPal, qui
ont t "communiques votre tablissement bancaire", ainsi quun numro de
tlphone.
Figure 9.2
Le lien Ouvrir un compte permet louverture dun compte PayPal.
4. Dans la seconde partie de la page, rentrez les lments qui vous permettront une
connexion future au compte PayPal. Prcisez ce niveau ladresse e-mail et le mot
de passe que vous saisirez pour accder votre compte. Il vous est galement
demand dopter pour une question annexe et den dterminer la rponse. Dans
lhypothse o vous ne vous souviendriez plus de votre mot de passe, lors dune
connexion votre compte PayPal, celui-ci vous sera communiqu par e-mail.
5. Acceptez les conditions dutilisation et de rglement sur le respect de la vie prive
en cochant les deux cases Oui en ayant bien pris soin de lire ces conditions dutili-
sation prcdemment. Enn, recopiez le code de scurit afch tout en bas de la
page (voir Figure 9.5)
6. Il vous faut maintenant saisir vos coordonnes bancaires sur votre compte PayPal
(voir Figure 9.6). Dans la nouvelle page qui sest ouverte, slectionnez le type de
carte bancaire que vous possdez, puis saisissez son numro, sa date dexpiration
ainsi que son code de scurit.
Notez bien que cette page est entirement scurise et vous permet de saisir vos donnes en toute
scurit : ladresse de la page utilise bien le protocole https et un petit cadenas est prsent dans
linterface de votre navigateur Internet. Cliquez ensuite sur le bouton Ajouter une carte pour que
cette carte soit effectivement active sur votre compte.
Figure 9.3
Slectionnez le type de
compte PayPal que vous
souhaitez crer.
7. Dernire tape, conrmez ladresse e-mail utilise pour la cration de votre compte
PayPal. Pour dnitivement valider votre inscription, PayPal va vous adresser un
e-mail dans lequel se trouve un lien du type "Cliquez ici pour activer votre compte".
Cliquez donc sur ce lien pour activer effectivement votre compte et conrmer votre
adresse e-mail.
Clturer lopration en cliquant sur "ouvrir un compte" ; cest valid.
Figure 9.4
Deuxime tape,
les informations
personnelles.
Figure 9.5
Le code de scurit sert
sassurer que linscription
PayPal est bien ralise
par un tre humain.
Configuration de linterface de paiement
Vous voil dsormais dtenteur dun compte PayPal. Vous tes en mesure de le con-
gurer pour quil accepte les paiements provenant de votre boutique. La manipulation est
encore une fois fort simple :
1. Rendez-vous de nouveau sur la page daccueil du service PayPal France
(www.paypal.fr) et connectez-vous celui-ci laide du formulaire didenti-
cation situ en haut gauche de linterface. Une fois connect, vous serez automa-
tiquement redirig vers la section Mon compte du site (voir Figure 9.7)
2. Cliquez sur longlet Outils marchand, prsent en haut de la page, et, sur la page qui
safche alors, slectionnez le bouton Congurer PayPal facilement. Vous dbutez
alors la conguration.
3. Cliquez sur le lien Jutilise ma propre solution de boutique en ligne, prsent dans la
deuxime partie de la page (voir Figure 9.8)
4. PayPal afche alors la liste de tous les objets que le service propose pour vous faci-
liter le paiement en ligne. Dans cette liste, slectionnez lobjet Boutons acheter
maintenant et cliquez sur le lien Lancez-vous ! sur la page de description dtaille
de cet objet (voir Figure 9.9)
Figure 9.6
Vos informations bancaires
sont indispensables si
vous souhaitez recevoir
des paiements.
Figure 9.7
La section Mon compte
est la partie centrale de
votre espace PayPal.
Figure 9.8
Slectionnez le profil-
correspondant votre
boutique
Figure 9.9
Vous allez utiliser lobjet
Boutons acheter
maintenant pour valider
vos achats.
5. Le formulaire de cration de votre bouton dachat safche alors. Compltez celui-
ci de la faon suivante :
Service : saisissez ici le nom de votre boutique en ligne.
ID dobjet : saisissez ici un nom gnrique pour lensemble de vos commandes.
Prix de lobjet : saisissez un montant par dfaut, celui-ci sera remplac par un
montant rel une fois le bouton de paiement insr dans votre boutique en ligne.
Devise : gardez la mention Euros slectionne
6. Cochez la premire case de la section Choisissez un bouton pour votre site an
dutiliser lun des boutons fournis par PayPal sur votre page de panier.
7. Dcochez la case Crypter le bouton de paiement, an que le code source de celui-ci
reste ditable une fois insr dans Dreamweaver.
8. Cliquez sur le bouton Crer le bouton pour obtenir le code source du bouton que
vous venez de congurer. Celui-ci se prsente sous la forme suivante:
<form action="https://paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="webmaster@maboutique.com">
<input type="hidden" name="item_name" value="NomdObjet">
<input type="hidden" name="item_number" value=NumrodObjet">
<input type="hidden" name="amount" value=50.00">
<input type="hidden" name="no-wrote" value="1">
<input type="hidden" name="currency_code" value="EUR">
<input type="image" scr="https://www.paypal.com/fr_FR/i/btn/x-click-but23.gif"
border="0" name=submit" alt="Effectuez vos paiements via PayPal: une solution
rapide, gratuite et scurise!">
</form>
Intgration du lien de paiement au panier
Cest ce code que vous allez utiliser pour le paiement du panier du client, en en modi-
ant toutefois quelques lments. Ltape de paiement que vous tes en train de crer va
sajouter sur la page de traitement de la commande, au moment du transfert de lensemble
des lments de la table shop_panier vers shop_ligne_commande. Les modications
apporter sont minimes.
Souvenez-vous, la page de traitement de la commande comprenait un lien permettant
au client daccder son historique des commandes. Ce lien va disparatre pour laisser
place votre bouton de paiement :
1. Rouvrez la page traitement_commande.php laide de Dreamweaver et afchez le
code source de celle-ci (voir Figure 9.10).
2. Crez sur cette page un nouveau jeu denregistrements charg de retrouver la der-
nire commande passe par le client actuellement connect et den lister lensemble
des paramtres. Ce jeu denregistrements sera bti sur le mme type de requte que
celle destine retrouver le numro de commande vers lequel transfrer les articles
du panier. Il sera donc du type :
SELECT * FROM shop_commande WHERE client=paramClient ORDER BY id DESC;
o paramClient correspond lidentiant de session MM_Username.
3. Insrez la suite des traitements par lot prsents sur la page, en lieu et place des
liens vers lhistorique des commandes, le formulaire fourni par PayPal pour lint-
gration du lien dachat.
4. Modiez prsent le formulaire en question avec des lments issus du jeu denre-
gistrements que vous venez de crer. Vous pouvez ainsi corriger dynamiquement les
montants facturer ou les numros de commandes. Au nal, le code source de votre
formulaire devrait ressembler quelque chose du genre :
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="webmaster@maboutique.com">
Figure 9.10
Affichez le code source
de votre page afin dy
insrer le formulaire
de paiement.
<input type="hidden" name="item_name" value="Commande<?php echo
$row_commande[id];?>">
<input type="hidden" name="item_number" value="Client<?php echo
$row_commande[client];?>">
<input type="hidden" name="amount" value="<?php echo
$row_commande[total_ttc];?>0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="https://www.paypal.com/fr_FR/i/btn/x-click-but23.gif"
border="0" name="submit" alt="Effectuez vos paiements via PayPal: une
solution rapide, gratuite et scurise!">
</form>
Comme vous pouvez le constater, les valeurs des champs item_name, item_number
et amount sont remplaces par la rfrence de la commande facture, le numro
didentication du client et le montant effectif de la commande, tous trois issus du
jeu denregistrements de commande.
5. Il ne vous reste qu sauvegarder la page et tester celle-ci sur votre serveur dva-
luation : ajoutez quelques articles votre panier, validez celui-ci puis cliquez sur le
bouton daccs linterface de paiement que vous venez de crer. Vous devriez arriver
sur le site PayPal o vous est facture la somme voulue (voir Figure 9.11).
Figure 9.11
La facturation
est en place.
Retour votre boutique aprs paiement
La facturation est en place sur votre boutique. Mais, une fois le paiement termin, vos
clients ne sont plus redirigs vers votre boutique. Il vous faut encore modier votre
compte PayPal an que la redirection automatique soit mise en place.
1. Connectez-vous sur votre compte PayPal si ce nest dj fait et cliquez sur longlet
Outils marchands de votre compte.
2. Dans la liste des objets disponibles, slectionnez Renvoi automatique. La congu-
ration de cet objet tient en un simple formulaire (voir Figure 9.12).
3. Cochez la case Oui en haut de la page de conguration (question Renvoi automati-
que) et saisissez dans le champ URL de renvoi ladresse vers laquelle vous souhaitez
rediriger vos clients une fois le paiement termin. Il sagit de la page dhistorique
des commandes comme vous le faisiez auparavant.
4. En bas du panneau de conguration de votre compte PayPal, cliquez sur le bouton
Enregistrer an que vos informations de redirection soient correctement enregistres.
Si vous testez nouveau votre boutique en ligne, vous devriez tre automatiquement redi-
rig vers lhistorique de vos commandes une fois le paiement dune commande effectu.
Figure 9.12
Un seul champ de formu-
laire suffit la mise en
place dune redirection
automatique.
Vrification des paiements en attente dans PayPal
Linterface membre de PayPal vous permet de vrier trs facilement les paiements
effectus sur votre boutique. Ceux-ci sont rsums sur la page daccueil de votre
compte, visible juste aprs la connexion (voir Figure 9.13).
Un compte PayPal pouvant la fois servir la facturation de votre boutique et au paie-
ment sur dautres sites, votre page daccueil rsume lensemble des oprations effec-
tues avec le compte : crdits et dbits. partir de ce rsum, vous pouvez trs bien
retrouver les derniers paiements enregistrs sur votre boutique.
vous alors de vrier, en fonction des numros de commande et de client renseigns
plus tt, les commandes correspondantes. Et de prendre les mesures qui simposent
pour expdier celles-ci.
Gestion des factures
Quid des factures ? PayPal propose son propre systme de facturation en ligne permet-
tant denvoyer par e-mail une facture au client aprs chaque achat. Il peut nanmoins
tre aussi simple de raliser la facturation par vous-mme, partir des donnes prsen-
tes dans votre base de donnes. La facturation des comptes nest rien dautre quune
duplication de lhistorique des commandes dun client, sous une forme plus ofcielle et
avec quelques informations complmentaires (adresse du client, numro de commande,
date de dbit). Un document que vous pouvez trs bien raliser par vos propres
Figure 9.13
Lhistorique
de vos paiements
et facturations.
moyens dans Dreamweaver et proposer en ligne. Rien ne vous oblige en effet expdier
une facture par e-mail, vous avez simplement obligation de rendre celle-ci disponible
au client.
Les autres solutions de paiement
Bien entendu, PayPal nest pas la seule solution de paiement en ligne utilisable facile-
ment sur le Net. Dautres mthodes existent pour grer la facturation et le paiement de
En France, ces services sont proposs en majorit par des banques ou des organismes
aflis, pour leurs clients. Si vous disposez, par exemple, dun compte au Crdit
mutuel, vous pourrez utiliser les options de paiement scuris proposes par cette ban-
que et accessibles ladresse www.becm.fr (voir Figure 9.14). Les revenus gnrs par
votre boutique en ligne seront alors automatiquement verss sur le compte en banque
associ votre boutique, aprs validation des versements par la banque elle-mme.
Vous trouverez une prsentation dtaille de quelques systmes de paiement en ligne
proposs par les organismes bancaires franais au Chapitre 11.
Figure 9.14
Les outils de paiement
scuris du Crdit mutuel
prsents en dtail.
10
Mise en place dune plate-forme
dadministration
Votre boutique en ligne est prte recevoir ses premiers clients. Mais tes-vous rellement
prt la grer ?
Sur Internet, comme dans la vraie vie, une boutique doit tre vivante, proposer de nou-
veaux produits, effacer les anciens articles de son catalogue et parfois revoir ses prix la
hausse comme la baisse. Ce sera votre rle, en tant que grant de votre site e-commerce,
deffectuer ces diffrentes mises jour, plus ou moins rgulires.
Mais comment procder ? Si vous vous en tenez la boutique que vous venez de
crer, chaque modication du catalogue devra passer par une requte dans votre outil
de gestion de base de donnes habituel (phpMyAdmin ou autre). Cette mthode, qui
oblige user de requtes SQL pour chercher nimporte quel produit mettre jour,
est loin dtre pratique. Une vritable interface dadministration, incluse lintrieur
mme du site, permettrait une gestion de votre boutique beaucoup plus agrable et
efcace.
Dreamweaver CS4, avec ses options avances de gestion de formulaires HTML, permet
de raliser assez rapidement ce type dinterface dadministration, principalement
laide dassistants. En quelques minutes, vous devriez pouvoir mettre en place une
plate-forme dadministration complte, permettant la gestion (modication, ajout, effa-
cement) de vos produits et mme de vos clients.
Lensemble des interfaces dadministration que vous allez crer dans ce chapitre vont se
situer dans un nouveau rpertoire de votre boutique, que vous pourriez nommer, par
exemple, admin.
Quelle architecture et quelles fonctionnalits ?
Comme pour lensemble des pages de votre site, votre interface dadministration
doit faire lobjet dun travail de conception prcis et attentif. Peut-tre mme plus
encore que les autres pages, puisque de lefcacit de cette interface dpendra lef-
cacit avec laquelle vous grerez les produits, clients et commandes passes sur
votre boutique.
Il est donc conseill, une fois encore, de laisser quelques heures votre clavier de ct et
dutiliser feuille et stylo pour dnir larchitecture exacte de votre interface dadminis-
tration. Son interface et ses fonctionnalits dpendront grandement de type de biens que
vous vendrez et du type de fonctionnalits avances que vous aurez pu mettre en place
sur votre boutique en plus de celles dcrites dans cet ouvrage. Nanmoins, quelques
fonctionnalits vont trs vite savrer indispensables, telles :
La gestion du catalogue de produit. Votre interface dadministration vous permettra
dajouter, de modier ou de supprimer un produit de votre catalogue trs rapidement.
Dans une version avance de cette interface, vous pourriez galement consulter vos
stocks et signaler un produit en cours de rapprovisionnement de manire automatique.
La gestion des commandes en cours. Lister lensemble des commandes qui ont
t passes, en dtaillant la liste des produits quelles contiennent et les clients qui
elles sappliquent est la moindre des fonctionnalits. Vous aurez ainsi un tableau de
bord vous permettant de prparer les expditions de colis et de signaler aux clients
que les commandes sont bien parties.
La gestion des comptes clients. Si vous comptez utiliser les donnes de vos clients
dans une optique marketing (en accord avec les rgles de la CNIL), une interface
permettant de retrouver lensemble des clients dune zone gographique ou de grer
une liste dabonns est ncessaire. Ce type dinterface exploitera vos donnes
clients an de vous fournir un prol prcis de votre clientle.
Des donnes statistiques avances. Si les outils danalyse daudience vous per-
mettent de savoir le nombre de visiteurs que vous attirez (voir Chapitre 13), une
interface de statistique interne vous permet daccder des donnes plus stratgiques :
total des commandes sur le mois, toutes taxes comprises aussi bien que hors-taxes,
valeur du panier moyen, nombre de commandes enregistres, meilleures ventes
Autant dindicateurs qui peuvent vous aider aprs une bonne analyse rendre votre
boutique plus efcace.
Une zone de communication avec vos clients. Si vous avez mis en place un for-
mulaire de contact, il peut tre pertinent de le coupler avec une zone dactualit sur
les dernires nouveauts ou les ventuels dysfonctionnements de votre site. Vous
aurez ainsi un canal de communication privilgi avec vos clients et btirez une
relation de conance solide avec eux.
Ce chapitre dtaille la mise en place dune interface destine alimenter ou corriger des donnes
dans votre catalogue produit. Les sections servant voir ltat des commandes ou la liste de vos
clients ne sont pas dtailles en pratique ici pour des raisons de place. Mais ces lments dinterface,
que vous crerez sur votre boutique, utiliseront les mmes composants et les mmes types dobjets
que ladministration de vos produits. Vous disposez ici de la mthode pour mettre jour les donnes
de votre boutique, il ne vous reste qu lappliquer lensemble des lments de votre site.
237 MISE EN PLACE DUNE PLATE-FORME DADMINISTRATION
Les droits daccs
Autre question cruciale avant de se lancer : la question des droits daccs. Votre inter-
face dadministration est un espace priv auquel vous seul, et ventuellement quelques
collaborateurs, doivent avoir accs. Pensez ds le dpart dnir les droits daccs
inhrents cette interface an de pallier toute ventualit.
Vous partez en vacances ? Les commandes de votre boutique doivent tout de mme tre
honores et vos clients ne supporteront pas trois semaines dattente pour une simple
rponse leurs mails. Votre interface doit alors tre relativement ouverte et permettre
un accs distance, ou un accs un tiers, ds sa conception. Cest dans cette logique
que linterface dadministration ralise ici est conue : son accs est entirement gr
via un navigateur web et la cration dun nouveau compte administrateur avec mot de
passe ne demande que quelques minutes.
Mettre jour les fiches produits existantes
Premire partie de votre interface dadministration : la modication des produits pr-
sents dans votre catalogue. En pratique, cette fonctionnalit va tre couple avec une
interface de consultation des produits totalement indpendante du reste de la boutique.
Cela vous permettra dutiliser lensemble des assistants de cration de pages dynamiques
de Dreamweaver.
Lister les produits du catalogue
Pour crer la liste de vos produits et les pages de consultation correspondantes, vous
allez utiliser lassistant Ensemble de pages Principale-Dtails de Dreamweaver. Celui-
ci permet de crer deux pages : lune listant vos produits avec le minimum dinforma-
tions et une autre prsentant tous les champs de la table de donnes correspondant ce
produit.
Mais avant dutiliser cet assistant, il vous faut dabord crer une page vierge, qui servira de
page daccueil votre interface dadministration. Nommez-la index.php et enregistrez-
la dans le dossier admin que vous navez pas manqu de crer.
Associez cette page un jeu denregistrements simple reprenant lensemble des
champs et enregistrements de la table shop_livres. Ce jeu denregistrements servira de
base aux pages Principale-Dtails que vous allez maintenant crer.
Lassistant pages Principale-Dtails
Une fois le jeu denregistrements cr et votre nouvelle page sauvegarde :
1. Slectionnez loutil Ensemble des pages Principale-Dtails dans la section Donnes
de la barre doutils de Dreamweaver ou dans Insertion > Objets de donnes.
2. La bote de dialogue Insrer lensemble des pages Principale-Dtails souvre alors
(voir Figure 10.1). Cest dans cette fentre que vous allez dnir les diffrents para-
mtres de lensemble des pages. La premire partie de la bote de dialogue concerne
la page principale (cest--dire la page o apparatra la liste des livres de votre bou-
tique), tandis que la seconde se rapporte la page de dtail (les informations
dtailles de chaque ouvrage).
3. Slectionnez, dans la liste droulante Jeu denregistrements, le jeu denregistre-
ments que vous venez de crer. Cest partir de lui que doivent tre construites vos
pages.
4. La liste Champs de la page principale afche alors la liste des informations disponi-
bles dans le jeu denregistrements. Vous pouvez maintenant la modier en chan-
geant lordre dafchage des donnes ou en supprimant/ajoutant des champs.
Procdez comme suit :
Figure 10.1
Prt crer votre
ensemble de pages ?
Pour modier lordre dafchage des champs, slectionnez dans la liste Champs de
la page principale le champ que vous souhaitez dplacer. Cliquez ensuite sur le bou-
ton Dplacer vers le haut (la che montante en haut droite de la liste) pour
remonter ce champ dun cran dans la liste. Pour dplacer ce mme champ dun cran
vers le bas, utilisez simplement le bouton Dplacer vers le bas (en forme de che
descendante).
Pour faire disparatre un champ, slectionnez-le dans la liste Champs de la page
principale, puis cliquez sur le bouton Suppression () situ en haut gauche de
cette liste. Le champ disparat alors de la liste et ne sera plus afch dans la page
principale de lensemble de pages.
Pour ajouter un champ, cliquez sur le bouton Ajout (+) situ en haut gauche de la
liste. Une fentre Ajouter colonnes souvre alors, prsentant les colonnes qui ne
sont pas encore slectionnes (voir Figure 10.2). Cliquez sur la colonne que vous
souhaitez ajouter, puis sur le bouton OK de cette bote de dialogue. Le champ est
alors ajout la liste.
An davoir linterface la plus claire possible, utilisez le minimum de champs sur la
page principale de votre interface dadministration : Numro ISBN, Titre, Nom de
lauteur et ventuellement Prix devraient largement vous sufre pour identier
coup sr un article modier.
Vous ne pouvez afficher que les champs disponibles dans le jeu denregistrements slectionn. Si tous
les champs apparaissent dj dans la liste Champs de la page principale, un clic sur le bouton
Ajout (+) provoquera un message dalerte vous informant quaucun champ nest disponible laffi-
chage (voir Figure 10.3).
Figure 10.2
Pour ajouter un champ
laffichage, utilisez
cette nouvelle bote de
dialogue.
5. Dans la liste droulante Lier la page dinformations dtailles depuis, slection-
nez le champ qui permettra daccder la page dinformations dtailles. Cest
partir de ce champ que Dreamweaver crera un lien vers la page de dtail, qui
afchera les informations du produit en question. Le plus intuitif reste encore de
lier la page de dtail au titre de louvrage que vous souhaitez consulter. Vous pou-
vez galement envisager, une fois lassistant termin, dajouter un lien Consulter
sur la page principale ainsi cre, qui mnera directement la vue dtaille du
produit.
6. Dans le champ Passer la cl unique, slectionnez la donne qui sert de cl unique
pour votre jeu denregistrements. Cest logiquement la mme cl que celle que vous
avez cre dans la table de donnes qui sert de source au jeu denregistrements,
cest--dire id. Celle-ci sera passe en paramtre la page de dtail pour que les
donnes du bon enregistrement y soient afches.
7. Enn, choisissez le nombre denregistrements afcher sur la page principale. Si
votre boutique ne propose pas trop de rfrences, prfrez afcher la totalit du jeu
denregistrements (cochez la case Tous les enregistrements). Si, toutefois, vous
dsirez limiter le nombre des enregistrements afchs, cochez la case X Enregistre-
ments la fois et renseignez le champ correspondant avec le nombre denregistre-
ments afcher par page. Dreamweaver se chargera automatiquement de crer
plusieurs pages principales contenant autant denregistrements que spci, ainsi
que les liens entre ces diffrentes pages.
Si vous choisissez dafficher un nombre limit denregistrements, Dreamweaver ne crera quune
seule page principale, mais grera dynamiquement la liste des enregistrements afficher suivant
votre position dans la page. Cest l un des avantages de la cration de sites dynamiques : la limitation du
nombre de pages existantes pour un affichage semblable.
Cration de la page de dtail
La seconde partie de la bote de dialogue permet la cration de la page de dtail de
lensemble de pages (voir Figure 10.4).
Figure 10.3
Tous les champs du jeu
denregistrements sont
dj slectionns.
Les informations fournir sont sensiblement les mmes que lors de la cration de la
page principale :
1. Choisissez tout dabord le nom du chier qui correspondra la page de dtail de
lensemble de pages. Saisissez ce nom accompagn de son extension dans le champ
Nom de la page dinformations dtailles. Si vous souhaitez utiliser une page exis-
tante, vous pouvez simplement la localiser laide du bouton Parcourir disponible
droite du champ.
2. Crez ensuite la liste des champs du jeu denregistrements que vous souhaitez af-
cher sur la page de dtail. Pour cela, utilisez les options de la liste Champs de la
page dinformations dtailles comme vous lavez fait prcdemment pour la page
principale. Vous pouvez tout aussi facilement modier lordre dafchage des
champs ou supprimer/ajouter lun dentre eux.
Une fois toutes ces informations fournies, il ne vous reste qu cliquer sur le bouton OK
de la bote de dialogue pour crer effectivement lensemble de pages.
Aprs un court dlai, Dreamweaver afche deux pages dans sa fentre principale. La
premire correspond la page principale et contient la liste des enregistrements (voir
Figure 10.5), tandis que la seconde correspond la page de dtail (voir Figure 10.6).
Il ne vous reste plus qu enregistrer et personnaliser ces pages pour quelles corres-
pondent au mieux linterface graphique de votre site web.
Figure 10.4
Personnalisez prsent
la page de dtail.
Figure 10.5
La liste denregistrements
telle quelle apparat dans
Dreamweaver.
La toute premire partie de votre interface dadministration est en place. Les autres
fonctionnalits de votre interface vont trs facilement se greffer la page principale que
vous venez de crer, par lintermdiaire de liens supplmentaires.
Pour vous faciliter le travail de mise jour de vos produits, vous pouvez adjoindre un formulaire de
recherche votre interface dadministration. Pour cela, utilisez les mmes mthodes que celles dcrites au
Chapitre 6 de cet ouvrage.
Modifier un produit
An de pouvoir modier un produit de votre boutique, vous allez crer un formulaire de
mise jour des produits. Il sera accessible par lintermdiaire dun lien Modier, pr-
sent en face de chaque produit afch sur la page principale de votre outil dadministration,
que vous venez de crer.
Ajoutez ce lien comme un texte classique dans la Rgion rpte de la page principale
que vous venez de crer (voir Figure 10.7). laide de Proprits de Dreamweaver, liez
ce nouveau texte une page nomme modif.php et passant en paramtre celle-ci
lidentiant de lenregistrement modier. Une manipulation que vous avez dj effectue
bien des fois lors de la cration des pages de votre catalogue.
Figure 10.6
Le dtail dun enregistre-
ment, prt tre
enregistr !
Figure 10.7
Un lien supplmentaire sur
linterface dadministration
permettra la modification
des produits existants.
Une fois la page principale de votre interface dadministration sauvegarde, crez une
nouvelle page nomme modif.php et utilisez sur celle-ci lassistant de formulaire de
mise jour des enregistrements :
1. Associez cette nouvelle page un jeu denregistrements contenant lensemble des
champs de la table shop_livres en y plaant un ltre sur lid passer en paramtre
prcdement.
2. Dans le panneau Insertion, slectionnez lobjet Assistant de formulaire de mise
jour des enregistrements. Celui-ci se trouve dans la liste droulante Mettre jour
lenregistrement, dans la section Application (voir Figure 10.8).
3. La bote de dialogue Formulaire de mise jour des enregistrements souvre alors
(voir Figure 10.9). Elle est semblable celle utilise pour la cration dun formu-
laire dinsertion.
4. Slectionnez tout dabord la connexion utiliser pour votre formulaire. Puis, dans
le champ Table, choisissez la table shop_livres, qui sera mise jour. Dans le champ
Jeu denregistrements, slectionnez le jeu denregistrements que vous venez tout
Figure 10.8
Slectionnez lobjet Assis-
tant de formulaire de mise
jour des enregistrements.
Figure 10.9
Slectionnez la table
et les donnes quil
faudra mettre jour.
juste de crer, charg de rcuprer les donnes qui seront afches dans le formu-
laire.
5. Indiquez ensuite que le champ id fait ofce de cl unique dans la table. Cette cl est
indispensable pour que Dreamweaver soit certain de mettre jour le bon enregis-
trement dans la table de destination.
6. Dans le champ Aprs la mise jour, aller , slectionnez la page qui sera afche
aprs la mise jour dun enregistrement par lutilisateur. Protez de cette option
pour crer une page de conrmation de la mise jour du produit. Cette page devra
simplement contenir un lien permettant le retour la page daccueil de votre inter-
face dadministration.
7. Dtaillez prsent, laide de la liste Champs du formulaire et des champs sui-
vants, les colonnes qui devront tre mises jour laide de votre formulaire. La
valeur par dfaut de chaque colonne est ici dj renseigne par une formule du type
<%=(Update.Fields.Item("name").Value)%>. Cette formule signie que
Dreamweaver afchera dans le champ de formulaire lancienne valeur de lenregis-
trement slectionn, celle-ci tant issue du jeu denregistrements dj slectionn.
Assurez-vous simplement que la cl unique de votre table (id) ne puisse pas tre
modie.
8. Une fois lensemble de ces champs dnis et le formulaire personnalis, cliquez sur
le bouton OK pour valider la cration du formulaire de mise jour.
Aprs quelques secondes, Dreamweaver afche le document nal dans sa fentre prin-
cipale (voir Figure 10.10). Il ne vous reste qu modier la mise en page de ce formu-
laire de mise jour et le tester.
Figure 10.10
Le formulaire
de mise jour
des enregistrements
est en place.
Vous pouvez immdiatement tester ce formulaire en modiant les donnes de lun de
vos produits. La prise en compte des modications doit tre immdiate sur le catalogue
consultable par vos clients.
Supprimer un produit du catalogue
La suppression dun article du catalogue suit la mme logique que celle de mise jour
des enregistrements : lajout dun lien Supprimer sur la page principale de votre inter-
face dadministration, et la mise en place dune page effectuant rellement cette
suppression.
Pour ces deux oprations, vous pouvez vous inspirer de techniques dj utilises dans
cet ouvrage :
la cration du lien Modier de linterface dadministration, dans ce mme chapitre ;
la suppression dun article du panier de votre client, au Chapitre 8. Cela revient crer
une page suppr_article et y appliquer la commande Supprimer lenregistrement.
Il vous est toutefois possible dopter pour une mthode un peu moins barbare que la suppression
pure et simple dun produit de votre catalogue : sa dsactivation. Cette mthode vous impose dajou-
ter, la table shop_livres, un champ (nomm par exemple dispo), lequel ne contiendra quune
information boolenne (0 ou 1), destine faire savoir sil est possible de commander louvrage en
question ou non.
Si ce champ possde la valeur 1, louvrage est disponible comme nimporte quel autre. Si la valeur
est 0, louvrage nest plus disponible actuellement auprs de votre boutique et donc retir du catalogue.
La suppression dun article revient donc modifier la valeur de ce champ de 1 0.
Bien entendu, en utilisant cette mthode, vous devrez galement redfinir les jeux denregistrements
de votre catalogue afin que les livres dont le champ dispo est 0 ne soient jamais visibles pour vos
visiteurs.
Insrer de nouveaux produits
Liste, modication, suppression Il ne manque votre interface dadministration que
la possibilit dajouter de nouveaux produits. Cette nouvelle interface passe, elle aussi,
par lutilisation dun assistant fourni par Dreamweaver. Tout ce que vous avez faire est
de crer une nouvelle page vierge et dutiliser lassistant Formulaire dinsertion denre-
gistrements de la mme faon que vous lavez utilis lors de la cration des nouveaux
comptes clients au Chapitre 7 de cet ouvrage. Utilisez simplement, cette fois, la table
shop_livres comme table de rfrence.
Protection de linterface dadministration
Reste protger votre nouvelle interface dadministration des ventuels utilisateurs
indsirables. Son accs doit, en effet, tre bien gard par un mot de passe que vous seul
connaissez.
Pour optimiser au maximum la protection de votre interface, nous allons faire appel
une mthode issue directement de la conguration Apache de votre serveur dhberge-
ment. Cette mthode utilise deux chiers, nomms .htaccess et .htpasswd, qui contien-
nent les rgles de restriction daccs de votre interface ainsi que les noms et mots de
passe des utilisateurs autoriss.
1. laide de votre diteur de texte prfr, crez un nouveau document contenant le
code suivant :
AuthUserFile
/admin/.htpasswd
AuthGroupFile /dev/null
AuthName PasswdProtection
AuthType Basic
<Limit GET>
require user admin
</Limit>
2. Prenez simplement soin de remplacer ladmin de lavant-dernire ligne par le nom
dutilisateur que vous souhaitez utiliser pour vous connecter votre interface
dadministration. Si vous voulez autoriser laccs plusieurs utilisateurs, saisissez
leurs noms, les uns la suite des autres, aprs la mention require user.
3. Consultez galement la documentation de votre hbergeur an de connatre
exactement lemplacement de votre site sur son serveur Apache. En effet, le che-
min /admin/.htpasswd prsent la deuxime ligne de ce document ne correspond
pas lemplacement du chier de mots de passe de votre interface dadministration
sur votre site, mais son emplacement prcis sur le serveur Apache qui lhberge.
Cette information technique ne peut tre fournie que par votre hbergeur.
4. Sauvegardez le chier ainsi obtenu sous le nom .htaccess. Si votre version de Win-
dows nautorise pas lenregistrement de chiers dont le nom commence par un
point, utilisez un nom temporaire. Vous renommerez ce chier convenablement une
fois celui-ci transfr sur votre serveur dhbergement.
La cration du chier de mots de passe ne prend, elle aussi, que quelques secondes.
Dans un nouveau document texte, saisissez les noms dutilisateurs et leurs mots de
passe correspondants sous la forme :
utilisateur 1:mot de passe 1 crypt
utilisateur 1:mot de passe 1 crypt
Ce cryptage des mots de passe peut tre obtenu trs simplement laide doutils en
ligne, tel celui disponible cette adresse : www.ash.net/cgi-bin/pw.pl.
Saisissez-y simplement les noms dutilisateurs et mots de passe utiliser, le contenu du
chier de mots de passe correspondant vous est automatiquement fourni. Il ne vous
reste qu lenregistrer, laide dun diteur texte classique, sous le nom .htpasswd.
Une fois les deux chiers de protection raliss, vous navez plus qu les copier avec
le reste de votre boutique en ligne chez votre hbergeur.
Interdire laccs de votre interface dadministration aux visiteurs est crucial. En interdire laccs aux
moteurs de recherche est tout aussi important. Pensez donc protger lensemble de votre dossier
admin par un fichier robots.txt interdisant lindexation de celui-ci. La mthode de mise en place de
ce type de protocole est dtaille au Chapitre 15 ddi au rfrencement naturel.
Partie
LA RELATION CLIENT,
POINT CENTRAL DU
SITE E-COMMERCE
Le but de tout commerce est dtre vu. Pour assurer la promotion de votre site
web, lexploitation de diffrents leviers va tre ncessaire.
Lobjectif des parties venir est double. Dans un premier temps, vous apporter les
bases pour bien apprhender votre clientle, en comprendre les comportements et
asseoir correctement la relation client-web marchand, fondamentale la sant de
votre business. Dans un second temps, vous prsenter les cls du e-marketing et
les principes suivre pour booster son retour sur investissement.
Aborder les considrations CRM se justie dans la signication mme des trois lettres
du sigle : Customer Relationship Management ou Gestion de la Relation Client.
Avant de vous lancer dans la promotion de votre site, vous devez tre sr que son
contenu et sa conguration seront correctement perus par votre cible : votre future
clientle.
Lergonomie de votre site, linformation dispense, le positionnement et la prsen-
tation de vos produits doivent rpondre ses besoins et ses attentes. Votre site doit
la satisfaire.
Encore faut-il lavoir clairement identie, connatre le type de comportement
quelle peut avoir face aux produits et services que vous proposez.
Prenez le temps de vous poser les bonnes questions. Dressez un prol type de votre
future clientle. Vous connatrez alors les axes pour la satisfaire, ainsi que les l-
ments adquats pour personnaliser et faire voluer vos futures actions commerciales.
Dans les prochains chapitres vous trouverez quelques cls pour assurer limage
positive et srieuse de votre site, pour comprendre et mesurer le comportement de
tous visiteurs, tre mme de les dliser en un mot grer correctement la relation
avec votre clientle.
II
11
Un site scuris inspirant confiance
Au sommaire de ce chapitre :
Lobligation dinformation lgard de linternaute
Protger son site webmarchand
Utiliser les plates-formes de paiement bancaires
Souscrire une assurance : Fia-Net
Votre site peut tre esthtiquement parlant "beau", reposer sur un concept innovant
ou comporter des produits attractifs rpondant aux besoins dune grande part
dinternautes, il nest rien sil ninspire pas conance vos visiteurs. Ce sentiment
peut tre assur aisment si vous prsentez comme il se doit votre activit, votre
rme, lobjet de votre siteet si vous garantissez un processus de paiement able,
scuris.
Dans les premiers chapitres, vous avez mis en place un paiement scuris utilisant la plate-forme en
ligne Paypal. Facile daccs et de configuration, cette plate-forme a malheureusement le dsavantage
dtre assez loigne du modle dinterface propose habituellement par les boutiques en ligne. Son
utilisation peut alors drouter vos futurs clients.
Dans ce chapitre, vous allez voir comment utiliser les interfaces de paiement scuris proposes par
les tablissements bancaires en France. Ces interfaces offrent lavantage de sadosser des compagnies
financires solides et dont le nom parle au grand public. Elles renforcent donc dautant la confiance
que peuvent avoir les internautes en votre boutique en ligne.
Lobligation dinformation lgard de linternaute
La diffusion de votre site sur le Web va engendrer des relations contractuelles spciques.
La rencontre de votre offre commerciale et du besoin de linternaute va tre scelle par
une transaction "virtuelle".
Larticle 14 de la loi sur la conance dans lconomie numrique LCEN du 22 juin
2004 dnit le commerce lectronique comme "lactivit conomique par laquelle une
personne propose ou assure distance et par voie lectronique la fourniture de biens ou
de services".
LA RELATION CLIENT, POINT CENTRAL DU SITE E-COMMERCE 252
Si linternaute a slectionn votre site an dy effectuer un achat, une zone dombre
peut persister car il ne vous a jamais rencontr physiquement et peut se poser la ques-
tion de la vracit de votre entreprise. Son analyse du site et sa dcision nale dachat
dpendent troitement des informations que comporte votre site.
Vous devez donc lui apporter une information la plus complte possible an quaucun
doute ne persiste sur le srieux de votre activit et lexistence de votre entreprise.
La rglementation propre aux contrats de vente distance et la directive e-commerce du
8 juin 2000, transpose en droit interne par la loi pour la conance dans lconomie
numrique (LCEN) du 22 juin 2004, posent le cadre de lobligation dinformation
lgard des internautes.
Vous pouvez en prendre connaissance de faon exhaustive en consultant :
le siteMine.gouv.fr prsentant les rgles propres au droit des contrats de vente
distance (www.mine.gouv.fr/directions_services/dgccrf/documentation/
ches_pratiques/ches/b04.htm) ;
le site de lUnion europenne "http://ec.europa.eu/internal_market/e-commerce/
directive_fr.htm" vous donnant accs au texte intgral de la directive e-commerce
du 8 juin 2000 ;
le site www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=ECOX0200175L
pour le texte de la loi LCEN.
Figure 11.1
Minefi.gouv.fr : des fiches juridiques trs pratiques.
253 UN SITE SCURIS INSPIRANT CONFIANCE
Pour rsumer de telles rglementations, vous tes tenu de runir sur votre site les infor-
mations ci-aprs :
Donnes sur lentreprise. Elles regroupent lidentit de votre socit, ladresse
gographique du lieu o elle est tablie (elle sert notamment aux internautes
adresser leurs rclamations ou vous retourner leur commande), tout comme
ladresse du courrier lectronique permettant une mise en relation rapide. Votre site
devra galement comporter le numro de registre du commerce et des socits ou
celui dinscription au rpertoire des mtiers ou le numro de SIREN (pour lauto-
entrepreneur) accompagn de votre numro de dclaration auprs de la CNIL. De
telles donnes se retrouvent gnralement dans lencart "Mentions Lgales" dun
site.
Donnes sur les produits et services. Votre site doit dcrire au plus prs, les quali-
ts intrinsques de vos produits, la dure de validit, la teneur de vos services.
An que linternaute qui passe une commande, le fasse en toute connaissance de
cause.
Donnes tarifaires. Vous devez mentionner le prix de tout article ou service, toutes
taxes comprises en incluant les frais de livraison. Sur vos ches "produit" prcisez
si la tarication en cours sapplique sur un certain laps de temps (hypothse de
loffre promotionnelle, du dstockage, de la n de srie).
Donnes sur la transaction. Votre site doit comporter des informations "claires,
comprhensibles et non quivoques" sur les diffrentes tapes suivre pour conclure le
contrat.
Donnes sur les langues disponibles. Vous pouvez prsenter les langues dans les-
quelles votre site est disponible sur une page cache qui redirigera linternaute vers
la version de votre site choisie ou tout simplement sur la page daccueil de votre site
web.
Les messages derreur. Si linternaute ne saisit pas correctement une donne ou ne
remplit pas correctement un champ obligatoire du formulaire de commande, vous
devez prvoir lapparition dun message derreur. Il permettra linternaute diden-
tier rapidement lorigine de son erreur et dtre guid dans les changements raliser
an de continuer sans encombre son opration.
Donnes relatives la commande. Dnissez clairement comment une commande
peut tre rceptionne, sous quel dlai. Par la suite, conrmez la nature de cette
commande et ses modalits sous forme daccus de rception, qui sera renvoy
automatiquement par e-mail votre client.
Donnes relatives aux services aprs-vente, et garanties commerciales.
Les conditions gnrales de ventes (CGV). Indispensables tous commerces,
elles reprennent lensemble des clauses que signent vos clients au moment de pas-
ser un achat. Conditions dchanges et autres notions contractuelles, tout doit y tre
dtaill. Et ces dernires doivent tre valides par un juriste, avant dtre mises en
ligne.
Pour avoir un modle de CGV vous pouvez vous adresser la Chambre de Com-
merce et dIndustrie. Celle de Paris diffuse "les Conditions Gnrales de Vente
entre Professionnels" accessibles sur le site www.inforeg.ccip.fr/ches/pdf/
cgv_professionnels.pdf.
Utilisation des informations personnelles. Les possibilits dutilisation des don-
nes laisses par vos clients sont trs limites. La loi sur lconomie numrique,
prsente lAssemble nationale au printemps 2004, restreint par exemple des
envois de-mails ou lutilisation dune base de contacts par des partenaires ext-
rieurs votre site. Informez donc vos clients de vos dispositions vis--vis de cette
loi. Garantissez que leurs donnes personnelles ne seront pas exploites abusive-
ment et qu tout moment il leur sera possible dy accder an de raliser les cor-
rections souhaites (voir Figure 11.3 comportant des extraits de la lgislation du 6
janvier 1978 dite loi Informatique et Libert en matire de collecte de donnes
nominatives).
Figure 11.2
Anticipez les possibles
erreurs des internautes:
guidez-les grce aux
messages derreurs.
Figure 11.3
Extraits de la loi n78-17
du 6 janvier 1978.
Le droit de rtractation. Vos clients en bncient. Le site de la Direction gn-
rale de la concurrence, de la consommation et de la rpression des fraudes propose
une che relative aux "dlais de rtractation". Le dlai accord pour renoncer et
annuler lachat ralis se calcule partir de la rception du produit dans le cadre des
ventes distance. Linternaute devra "se rtracter par courrier recommand avec
accus de rception" dans les sept jours courant partir de la rception du produit
ou "de lacceptation de loffre pour les prestations de service." Il doit vous retourner
ses frais le produit command. partir de la date de rtractation vous aurez trente
jours maximum pour procder au remboursement, sans exiger dindemnits.
La protection du contenu du site. En toute hypothse, vous aurez lobligation
dapporter la preuve de la paternit de luvre : votre site webmarchand. Cela peut
se raliser sous diffrents modes :
Soyez prvoyant et anticipez tout problme en vous envoyant par courrier recom-
mand avec AR le listing de tous les lments du site protger. La date de ce
document attestera de loriginalit du site, si besoin est.
Exploitez la procdure denregistrement de lInstitut national de la proprit
industrielle en dposant le nom de votre site en tant que marque ou en enregistrant
tous les lments de votre site devant bncier dune telle protection.
Rappelez sur les pages de votre site que toute reproduction du contenu de votre
site sera rprhensible si elle na pas t soumise votre accord pralable (voir
Figure 11.4).
Figure 11.4
Une phrase simple
pour rappeler son droit
de proprit.
Les responsabilits. Dlimitez clairement le terrain o votre responsabilit peut
tre engage, les limites de garanties dans le cadre de lutilisation de votre site.
Faites-vous aider ce sujet par un conseiller juridique.
En respectant le droit linformation et en ayant recours un systme de paiement
scuris, vous possdez les cartes matresses pour gagner la conance des internautes.
Protger son site webmarchand
Lunivers du Net est encore fortement marqu par un sentiment permissif, libertaire.
Pour autant, les relations qui sy tissent sont encadres, entre autres par le droit de
lInternet, le droit des nouvelles technologies et le droit commun.
Le site que vous avez cr vous appartient. Vous pouvez tout moment en revendiquer
la paternit si dautres internautes venaient utiliser abusivement un ou plusieurs lments
de votre site.
Plusieurs de ces lments peuvent tre protgs et donner lieu des procdures pour
conrmer leur proprit, en dfendre lauthenticit et loriginalit.
La protection peut se porter sur votre nom de domaine, signe distinctif dune web
entreprise car il attribue une identit au site, lactivit qui y est exerce.
Juridiquement, le nom de domaine peut tre apprhend comme " lenseigne sous
laquelle une entreprise exploite sur le rseau Internet un tablissement virtuel auquel
une clientle peut sadresser pour obtenir des biens ou des services (cest la boutique
lectronique) ou sinformer de lactivit commerciale exerce par une entreprise."
(Source: G. Loiseau, Noms de domaine et Internet turbulences autour dun nouveau
signe distinctif, in Dalloz 1999, Chron. Page 245 et s.)
Il est tout fait possible de contrer toute reproduction et usage de son nom de domaine
via le droit des marques.
Concernant le nom de domaine, tout acteur du Net doit avoir en tte que la paternit du
nom est attribue celui ayant satisfait le premier aux formalits denregistrement.
Le droit au nom de domaine est reconnu au premier dposant. Il est donc important lors
de la cration de son site et avant tout hbergement de vrier que la dnomination
choisie "est libre de tout droit de proprit".
Si lextension de votre nom de domaine est .fr, le transfert des noms de domaine identi-
que au vtre mais en .eu, .net, .com peut tre demand. La charge de la preuve du bien-
fond dun tel transfert vous reviendra. Rfrez-vous dans une telle hypothse la pro-
cdure de lICANN (Internet Corporation for Assigned Names and Numbers) accessible
via ladresse http://www.icann.org/tr/french.html (voir Figure 11.5).
LICANN a t linstigateur en 1999 de "principes directeurs rgissant le rglement uniforme des litiges
relatifs aux noms de domaines" (voir Figure 11.6).
En cas de besoin reportez-vous la procdure dcrite au niveau de la page http://
www.icann.org/fr/udrp/#udrp du site de lICANN.
Lutilisation des lments visuels et graphiques sera encadre par le droit des marques
si vous avez ralis un dpt pralable auprs de lINPI.
Figure 11.5
LICANN : organisme offi-
ciel de gestion des noms
de domaine.
Figure 11.6
Procdure rglement
litiges ICANN.
Pour certains lments, le caractre original devra tre apport. Il en est ainsi pour le
code source de votre site. Certes il sagit dun langage de programmation, mais luvre
multimdia peut tre revendique sil apparat clairement que ce code a t rchi,
quil ne relve pas de "simples automatismes". Il faut avancer une part de crativit, un
caractre singulier. Le droit dauteur pourra alors tre actionn.
Utiliser les plates-formes de paiement bancaires
Le choix et la mise en place dune solution de paiement sont indispensables pour le
paiement des commandes et recevoir les bnces tirs de la mise en ligne de votre
commerce. Deux voies existent pour enregistrer les paiements en ligne : les offres ban-
caires et le systme PayPal. Pour renforcer la scurit des transactions bancaires, vous
pouvez avoir recours une assurance telle que Fia-Net.
Votre choix va tre inuenc par le modle conomique de votre activit.
savoir, combien de transactions devez-vous raliser dans le mois, sur une anne, pour
tre rentable ?
Votre chiffre daffaires est-il subordonn un faible volume de ventes darticles dont la
marge est importante ou un volume consquent de ventes darticles dont la marge est
minime ?
Avez-vous intrt choisir un systme scuris, reposant sur la souscription un abon-
nement annuel, ou un systme saccompagnant du prlvement dune commission sur
chaque transaction passe ?
Ngociez au mieux avec les tablissements bancaires et optez pour le mode de paie-
ment le plus simple et scuris, celui qui permettra lacte dachat spontan dinternautes
solvables !
Il existe de nombreux modles de paiement scuris. Celui retenu repose sur lapplica-
tion de logiciels et se distingue par la ncessit pour un internaute de saisir ou non en
ligne les lments cls didentication de sa carte bancaire.
La majorit des tablissements bancaires propose un package pour intgrer un site
e-commerce un systme de paiement associ une connexion scurise.
Les cartes virtuelles dont le numro est spcialement gnr pour une transaction donne, rentrent
galement dans ce schma.
Voici trois solutions scurises proposes par des groupes bancaires.
Loffre CM-CIC P@iement
Loffre CM-CIC P@iement du CIC (voir Figure 11.7) est prsente comme une solu-
tion de gestion des paiements par carte bancaire pour tout site de e-commerce. Elle peut
sidentier "comme un terminal de paiement lectronique utilis par les commerants
traditionnels".
Avant dopter pour cette solution, assurez-vous que votre site a pour hbergeur un
partenaire de la banque CIC an que les transactions puissent tre authenties.
Il faut aussi installer un terminal de paiement lectronique virtuel. Il est en effet nces-
saire dintgrer au serveur dhbergement un kit technique de paiement CIC (gratuit).
La premire tape pour souscrire loffre de CM-CIC P@iement consiste en la sous-
cription dun contrat avec une agence du groupe.
Vient ensuite la phase technique dintgration de la fonction dappel du systme scu-
ris. Elle sera relie la page de paiement de votre site. Linstallation ralise, votre
page comportera le bouton "paiement par carte bancaire". Ds quun internaute souhai-
tera valider sa commande et procder au paiement, il cliquera sur ce bouton puis saisira
Figure 11.7
Le CIC propose, comme les autres banques, sa solution de paiement en ligne.
les donnes de sa carte bancaire (numro, date dexpiration et cryptogramme). Le cen-
tre de traitement des transactions recevra ces paramtres, identiera ladresse lectroni-
que de la transaction bancaire ainsi que les lments de la carte. Il mettra une demande
dautorisation la banque du porteur de carte, et validera une telle opration (sil ny a
aucune objection).
Recourir CM-CIC P@iement vous ouvre droit un Extranet pour accder la liste
des transactions et en suivre le traitement (encaissements, impays, recouvrement).
La vrication automatique des donnes des cartes bancaires est assure. La banque
vriera que la carte ne fait lobjet daucune opposition en adressant systmatique-
ment avant toute validation, une demande dautorisation de paiement la banque du
porteur de carte.
Viennent ensuite le choix dun mode dencaissement, du TPEV, des devises acceptes
ainsi que la possibilit de souscrire lassurance Fia-Net, prsente en n de chapitre.
Si vous souscrivez loffre du CIC, vous devrez payer :
les frais dinstallations du terminal de paiement lectronique virtuel (TPVE) ;
les frais de location du TPVE ;
une commission.
Pour de plus amples informations sur les 4 packages proposs par le CIC ou pour tl-
charger la documentation technique et le kit technique de lopen source, rendez-vous
directement la page www.cmcicpaiement.fr/fr/index.html?origine=cic.
Loffre e.transactions du Crdit Agricole
Avant de souscrire loffre e-transactions, le Crdit Agricole vous demandera douvrir
un compte bancaire (dpt vue) auprs dune de ses agences.
Le fonctionnement du processus de paiement scuris reste inchang. Aprs installation
du systme de paiement E -transactions sur votre site, la gestion des cartes CB, Visa
et Mastercard sautomatise. Les donnes saisies par vos clients sont cryptes, selon le
protocole SSL, pour tre ultrieurement valides par le Crdit Agricole.
Le protocole Secure Socket Layer repose sur le cryptage des donnes sensibles de la carte bancaire
avant leur communication au serveur de paiement. La mise en place de ce protocole sillustre par la
prsence dun petit cadenas verrouill sur les pages de navigation de votre site web.
La souscription ce service saccompagne de linsertion du logo e-transactions sur les
pages de paiement de votre site web. Lobjectif est de rassurer les consommateurs en
leur permettant notamment de cliquer sur un lien qui les amnera vers une page de
prsentation du service e-transactions (voir Figure 11.8).
La prestation du Crdit Agricole sorganise autour de lacceptation des paiements de
vos clients avec demande systmatique dautorisation la banque du porteur. Vous
recevrez conscutivement une rponse du Crdit Agricole galement communique
lacheteur accompagne dun ticket de caisse.
Le Crdit Agricole vous assure des prestations montiques de vente distance sur Inter-
net, dune hotline dassistance pour mettre en place le service E-transactions, identie
et rpertorie les ux pour tous paiements par carte effectus sur votre site.
Vous connatrez galement le pays dorigine de la carte bancaire utilise lors dune
commande, dune gestion manuelle de vos encaissements avec possibilit de diffrer la
remise en banque an de coller avec votre gestion de stocks ou faire face un litige, de
lenvoi quotidien dun journal reprenant lensemble des transactions opres.
Le groupe bancaire procdera enn la promotion de votre site web sur celui de-transac-
tions avec intgration dun lien redirigeant directement vers votre site.
Figure 11.8
Loffre de paiement scu-
ris du Crdit Agricole.
En option, sont proposes, lacception des paiements mis par carte American Express,
ainsi que la gestion automatique des encaissements. Cette dernire option est vivement
recommande si vous devez enregistrer plus de 50 commandes par jour.
Les frais se dcomposent comme suit :
frais englobant linstallation du programme e-transactions, laccs une hotline, la
possibilit de grer manuellement ses encaissements et suivre le traitement des
transactions ;
abonnement mensuel ;
commission prleve sur les transactions ;
frais supplmentaires si vous optez pour le traitement automatis des encaissements ;
frais supplmentaires si vous souhaitez accepter les paiements par carte American
Express.
Pour de plus amples informations, rendez-vous directement sur le site : http://
www.e-transactions.crdit-agricole.fr/
Sogenactif de la Socit Gnrale
Pour ce qui est du fonctionnement, nous retrouvons les lments cls de toute solution
de paiement en ligne :
le cryptage SSL des numros et dates de n de validit des cartes de vos clients ;
la vrication systmatique du statut des cartes avec blocage immdiat de la transaction
si un incident est identi, (perte, vol, inexistence de la carte) ;
la prise en considration des paiements manant des cartes Visa et Mastercard.
Vous avez la possibilit de souscrire une option pour tendre le systme de paiement
scuris dautres cartes.
La Socit Gnrale met votre disposition un Extranet (voire Figure 11.9) pour suivre
toutes transactions effectues sur votre site. Elles sont reprises dans un journal prcisant
ltat des transactions (accepte/refuse), le code ISO du pays metteur de la carte ainsi
que le nom de la banque du porteur dune carte franaise.
Vous disposez galement :
dun historique des transactions ralises sur les 6 derniers mois (avec mention de
la priode, du type de paiement, du numro de commande) ;
du module de gestion des transactions distance (remise en banque diffre, rem-
boursement, possibilit de traiter les commandes ralises par tlphone, fax ou
courrier) ;
dune garantie contre les fraudes ventuelles, avec systme dalerte si par exemple
le mme numro dune carte bancaire tait prsent plusieurs reprises sur une
courte priode.
Les frais de la solution Sogenactif se dcomposent en des frais de raccordement, abon-
nement mensuel et commissions montiques.
Pour de plus amples informations, rendez-vous directement sur le site :
www.sogenactif.com/
Autres banques, autres solutions
Comme vous laurez constat, si le nom des solutions de paiement scuris change, la
teneur des offres bancaires rvle de nombreuses caractristiques techniques communes.
Vous pouvez prendre connaissance des autres offres, telles que la solution Mercanet de
BNP PARIBAS, SHERLOCKS du LCL en vous connectant directement sur leur site
ou loccasion dun rendez-vous avec un conseiller.
Figure 11.9
Sogenactif est lune des
plus anciennes solutions
de paiement en ligne
disponible en France.
Pour dcouvrir la solution Mercanet de la BNP PARIBAS (voir Figure 11.10) utilisez
lURL suivante : www.bnpparibas.net/banque/portail/entrepros/Fiche?type=fol-
der&identiant=PRO_Mercanet_20041102135447.
Loffre Sherlocks de LCL sera quant elle accessible partir du site http://profession-
nels.lcl.fr/sherlocks/.
Souscrire une assurance : Fia-Net
Le groupe Fia-Net (www.a-net.com/marchands) est spcialis dans la scurisation
des oprations sur Internet et la lutte contre les fraudes en ligne ; le tout associ une
assurance garantissant les risques dimpays. En effet, si Fia-Net valide une transaction
bancaire et quune fraude se rvle, vous serez rembours hauteur de 90 ou 100 %.
Fia-Net propose un systme danalyse des commandes ralises sur votre site en pre-
nant en considration plus de 70 critres tels que la "prsence du client en chiers
impays, lhistorique de son comportement sur plus de 800 sites marchands, la coh-
rence des informations du client". Une telle analyse permet didentier rapidement
les internautes mal-intentionns et de se prserver des fraudes.
Lassurance Fia-Net vous protge de lhypothse o une commande est passe sur votre
site, son paiement par carte bleue valid par votre banque, sa livraison effectue.
Figure 11.10
Mercanet, loffre
de BNP Paribas
Mais quelque temps plus tard, il vous est impossible dencaisser cette somme, car le
porteur de carte est insolvable, ou lorigine dun montage frauduleux.
Linvestissement dentre pour bncier de lassurance Fia-Net peut sauver votre chif-
fre daffaires. Cependant il est prciser quen raison du cot du service (dtaill en n
de dveloppement), celui-ci ne sera pas accessible tous ds la premire anne de
lancement de lactivit.
Le logo Fia-Net : un gage de scurit et de transparence
Le logo Fia-Net est un certicat garantissant lexistence du site de e-commerce, du
srieux du service apport. Le site web qui intgre la solution Fia-Net ses pages
accepte en contrepartie dtre totalement transparent lgard des internautes en se
soumettant la notation, aux commentaires de toute personne ayant ralis un achat sur
son site.
Lintrt du logo Fia-Net (voir Figure 11.11) sur votre site est double. Du ct e-com-
merant, il offre la garantie que toute personne sapprtant effectuer un achat sur votre
site est solvable.
Pour une Socit qui vient juste de se lancer et qui souffrirait dun manque de notorit,
les commentaires apports par ses prcdents clients, ainsi que les notations donnes
par Fia-Net, peuvent contribuer consolider son image.
Du ct internaute, le label Fia-Net prsent sur votre site renforce la conance des inter-
nautes dans les oprations quils y ralisent, accrot la scurit des paiements auxquels ils
procderont.
Figure 11.11
Un logo visible sur votre
page daccueil et la page
de paiement de votre site
web.
La prsence dune fiche descriptive de votre site
Aprs avoir cliqu sur le lien "Accdez la che de ce site", votre client potentiel peut
accder aux commentaires des prcdents acheteurs, leurs notations
Ont-ils t satisfaits du dlai de livraison ? Existe-t-il des critiques sur les caractristi-
ques des produits ? Sur les prix pratiqus ?... Une information assez dtaille est propo-
se an de conforter les internautes dans leur volont de raliser un achat en toute
scurit sur votre site.
Fia-Net rcolte de telles informations en adressant un questionnaire votre clientle
la date de livraison de toute commande passe.
Linterface Fia-Net
Linterface mise votre disposition (voir Figure 11.13) se compose dune premire sec-
tion consacre lanalyse de vos transactions avec un dcoupage en fonction des opra-
tions devant tre analyses, celles rvalues, celles traites. La deuxime section est un
tat de lavancement du contrle opr par lquipe Fia-Net. Les autres onglets de
linterface se rapportent aux statistiques, aux paramtres de votre compte et un support
daide.
Figure 11.12
La fiche du site
Lebagage.com.
La section relative lanalyse des transactions donne une visibilit totale des lments
ayant amen Fia-Net refuser une transaction. Linternaute est en effet identi au-del
des donnes de la carte bleue, trs souvent virtuelle, saisie an dacqurir un des produits
de votre site.
Les commandes passes sur votre site sont vries et valides si elles ne comportent
aucun danger pour votre activit.
Vous tes inform quand ladresse de domiciliation mentionne est ctive, de mme
dans le cas dune utilisation de prte-nom. Vous connatrez rapidement la relle identit
du "fraudeur". Lhistorique des achats douteux raliss sur dautres sites e-commerces
sera galement mentionn.
Ainsi quand Fia-Net valide une transaction, vous pouvez livrer vos produits en tant sr
que leur paiement est ou sera acquitt.
Au-del des transactions, votre Extranet Marchand, liste les points forts de votre site,
quapprcient les internautes par rapport vos concurrents. De telles donnes sont pr-
cieuses car elles vont vous permettre de connatre les sources de votre performance et
les corrections apporter votre site.
Parmi les diffrentes analyses dispenses, vous bncierez dune tude, reprsente
sous forme de graphe, identiant les facteurs dclenchant les achats.
Figure 11.13
Linterface Fia-Net
Quant au tableau "classement des sites participants" (voir Figure 11.14), il repose sur
un systme de notation sur 10. Il tablit un comparatif entre les caractristiques de votre
site, de vos produits et services, et, celles de sites concurrents faisant partie du rseau
Fia-Net.
Si par exemple, pour la rubrique "facilit de commande", votre moyenne tend plus vers
la note la plus basse, voire est la note la plus basse, vous devez repenser rapidement
votre cheminement dachat et processus de paiement. Vous trouverez dans la deuxime
partie du Chapitre 12, des ides pour faciliter la commande des articles. Nous pouvons
dores et dj vous conseiller dopter pour un processus de paiement avec le moins
dtapes possible an de ne plus perdre vos clients en cours de route.
Le cot de Fia-Net
Les prix de la garantie apporte par Fia-Net sont troitement lis votre chiffre daffai-
res. Pour obtenir un devis, veuillez vous connecter la page www.a-net.com/mar-
chands/devis.php
Figure 11.14
Tableau "classement
des sites participants".
12
Support et aide pour guider
le client lors de son achat
Limportance dune bonne ergonomie de site
Les cls pour rduire labandon de panier
Les rubriques daide et de contact
Pour renforcer la conance manant de votre site, vous devez chaque moment rassu-
rer les internautes, les guider au maximum. Expliquez-leur chacune des tapes pour
valider un achat, les processus mis en place sur votre site, en somme, la faon dont votre
boutique fonctionne.
Pour anticiper ou rduire les questions de votre clientle, lergonomie de votre site va se
rvler fondamentale, tout comme la simplicit de votre processus de commande. Vous
allez galement dcouvrir dans ce chapitre quintgrer des rubriques daide et de contact
peuvent simplier lapprentissage de votre site.
Limportance dune bonne ergonomie
Selon le Dico du Net (www.dicodunet.com), lergonomie se dnit comme la "recher-
che dune meilleure adaptation entre les fonctionnalits dun site Internet et ses utilisateurs."
Vous devez tudier et faire voluer lergonomie de votre site an de ne pas perdre
linternaute dans les diffrentes rubriques de votre site. Amenez-le apprcier votre site
et y revenir chaque fois quil a besoin dun des produits ou services que vous proposez
Gardez en tte quun site est "quali dergonomique quand il propose un mode de
navigation ais et intuitif permettant ses visiteurs une prise en main rapide de ses
fonctionnalits." (www.dicodunet.com/denitions/creation-Web/ergonomie.htm).
Pour un site de e-commerce le temps ncessaire pou concrtiser un acte dachat doit
tre le plus court possible. Par consquent, son ergonomie doit permettre linternaute
den "lire" rapidement les pages. Il faut que vos visiteurs puissent capter et mmoriser
linformation diffuse en survolant simplement vos pages. Ainsi il sait en un coup dil
o se rendre, il ny a pas de place pour lhsitation.
Dans un de ses changes avec les journalistes du Journal du Net (le JDN), la consultante
de BENCHMARK GROUP, Laure Sauvage, a prsent les axes suivre pour "amliorer
lergonomie de son site" et accrotre le nombre dachats passs.
Trop souvent, des sites e-commerces sont lancs sans que lon se soit pralablement
assur que leur contenu, leur prsentation taient clairement comprhensibles par la
cible convoite.
Et dans un sens, un tel lancement se fait au mpris des futurs clients. Ne prenez jamais
pour postulat que le fonctionnement de votre site sera automatiquement compris par
vos visiteurs.
Lergonomie de votre site doit tre en adquation avec votre public cible. Recevrez-vous plus de visites
dun public masculin, fminin ? Les internautes susceptibles dtre intresss par vos produits, services
sont-ils des adolescents, de jeunes actifs, des seniors ?
Ces simples questions vous permettront deffectuer le bon choix en termes de grosseur des caractres
de vos textes, le choix dune police plus ou moins dynamique, originale
Prsentez votre site votre entourage professionnel et/ou personnel, et ralisez un test
en reprenant les 5 facteurs de succs dun site web mis en avant par Jakob Nielsen.
Une telle opration vous permettra danticiper les problmes que pourraient rencontrer
les visiteurs de votre site.
La facilit dapprentissage et de comprhension. Prenez garde au vocabulaire et
au ton employs pour dcrire votre service, les caractristiques des produits vendus.
Soyez le plus simple possible. Tout internaute, mme le plus novice, doit tre capable
de comprendre linformation contenue dans vos pages web.
Lefcacit dutilisation. Les internautes doivent trouver rapidement ce quils
recherchent. Il est donc essentiel de faciliter leur prise de dcision en structurant
correctement linformation dispense, en limitant le nombre dtapes suivre pour
naliser un achat ou une prise de contact.
Comment prendre connaissance du contenu de pages Internet, des offres, services, informations qui
y sont prsents pour un internaute ne bnficiant pas dune bonne vision ?
Concevoir son site en recherchant une navigation des plus fluides, des plus efficaces peut galement
passer par une ergonomie la porte des internautes mal-voyants.
Il est tout fait possible de rendre son site e-marchand la porte dun public handicap. titre
dexemple, la charte graphique de votre site peut reposer sur des contrastes de couleurs, des jeux de
noirs et blancs. Vous pouvez insrer des ALT TEXT (texte alternatif) pour les images ou les vidos. Tout
visuel doit tre prsent en dtail pour que linternaute se reprsente aisment llment qui y est
contenu. Dans le processus dachat, vous pouvez guider votre client via des puces "call to action" de
271 SUPPORT ET AIDE POUR GUIDER LE CLIENT LORS DE SON ACHAT
taille suffisante pour lui permettre de payer en ligne, de confirmer une adresse de livraison ou lui
permettre un retour en arrire en cas dhsitation.
Une telle recherche daccessibilit ncessite de se demander quelles caractristiques les pages de
votre site doivent runir pour ne pas perdre linternaute dans un flot dinformations et de pop-pup
et lamener le plus vite possible ce quil recherche !
Dernire ide concernant vos produits. Imaginons que pour un produit donn les stocks soient pui-
ss. Sur de nombreux sites, le webmaster a recours une image floue pour marquer lindisponibilit.
Pour un public ne bnficiant pas dune bonne visibilit, un tel choix nest pas recommand. Il est
prfrable de retirer limage reprsentant le produit le temps du rassort.
De telles donnes sont prsentes clairement par le W3C. Les dernires recommandations datent du
11 dcembre 2008 : les WCAG2.0 ou Web Content Accessibility Guidelines dans leur deuxime ver-
sion. Vous les trouverez via ce lien : http://www.w3.org/TR/2008/REC-WCAG20-20081211/.
Petit historique, le concept daccessibilit du Web est n du projet WAI pour Web Accessibility Initiative
en 1996. Ce qui sous-tend un tel projet est la volont de donner la chance toute personne handi-
cape ou ge de se connecter, de disposer de tous les services du Web, de "percevoir, comprendre,
naviguer, interagir avec le Web, et y contribuer".
Pour le ct oprationnel, rfrez-vous la mthode Accessiweb mettant bien en avant les caractris-
tiques ergonomiques.
Dans la plupart des cas, il apparat plus simple de prendre en considration les critres daccessibilit
web ds le dpart, plus que dans le cadre dune refonte de site.
La facilit de mmorisation. ce titre, il est souvent recommand de ne pas aller
au-del de 7 onglets dans les barrettes de navigation de votre site. Son fonctionne-
ment et sa structure doivent tre aisment compris de vos visiteurs. Reproduire sur
toutes les pages le schma de navigation de la page daccueil facilitera la navigation
des internautes. Faites en sorte que les visiteurs puissent retrouver leurs automatis-
mes de navigation et se rappeler les oprations raliser quand bien mme ils ne
lutiliseraient pas pendant un certain temps.
Lutilisation sans erreurs. Elle peut tre assure en insrant des messages
derreurs quand un internaute rentre la mauvaise donne dans le formulaire de com-
mande, celui de longlet "Contactez-nous", ou tout simplement dans le champ accs
client. La prsence dun centre daide peut galement limiter les indcisions ou
incomprhensions. Il en est de mme du moteur de recherche intgr votre page
daccueil.
La satisfaction. Elle est ressentie suite la consultation des pages de votre site.
Cest laspect le plus subjectif qui englobe les quatre facteurs prcdents ainsi que
les considrations esthtiques.
Ces prconisations ont t rsumes dans le modle de page daccueil type de la
Figure 12.1.
Tous les lments importants se rapportant votre activit, votre socit et surtout votre
offre doivent tre automatiquement compris par les internautes.
Pour ce faire, vous pouvez opter pour un code couleur, un encadr spcique, une typo-
graphie, un positionnement dans la page. Dun coup dil, votre client doit faire la dif-
frence entres les informations connexes et celles rattaches larticle quil souhaite
acqurir.
Concernant la typologie utilise, sachez que tout texte soulign doit tre cliquable et mener vers une
information supplmentaire. Optez pour une couleur diffrente du reste du texte statique (le bleu est
gnralement utilis pour les liens hypertextes).
Toujours dans loptique dune meilleure lecture de vos pages, si elles sont longues
tlcharger ( viter), prvoyez via la fonction ALT TAG, un texte de substitution pour
vos images, le temps que tout contenu soit prsent linternaute.
Figure 12.1
Quelques cls pour assu-
rer le succs de votre site
web.
Mon Livre.net
Le choix dont vous avez toujours rv !
Accueil | Famille de Produits n1 | Famille de Produits n2 | Famille de Produits n3
Reprenez en bas de page lensemble des rubriques existant & incluez un lien vers le plan du site
Produits 1
Pour toute image
accompagnant vos
dveloppements et
prsentant vos produits /
services pensez intgrer
Lgende & ALT TAG dans
lhypothse o les images
seraient longues
tlcharger.
Prvoyez une seconde barre permettant linternaute de visualiser sa progression au sein du site, de retrouver
quelles tapes il a suivi pour trouver un produit / une information. Chaque tape doit tre cliquable si le visiteur souhaite
faire un retour en arrire.
Insrez ce niveau les
offres de paiement
disponibles
&
Le logo de lassurance
FiaNet si vous dcidez dy
souscrire.
Service 1
Service 2
Service 3
Service 4
Garantie 1
Garantie 2
Garantie 3
Prsentez
verticalement les
services & garanties
accompagnant lachat
de chaque produit.
Accueil
MON PANIER
0 articles
Produits 2 Produits 3 Produits 4 Produits 5 Produits 6
Ne dpassez jamais plus de 7 onglets de navigation afin de permettre linternaute de mmoriser rapidement la structure de votre site
EN QUELQUES LIGNES PRESENTEZ VOTRE ENTREPRISE,
LOBJECTIF / LE CONCEPT DE VOTRE SITE.
PRESENTATION DE VOS
OFFRES,
NOUVEAUTES &
PROMOTIONS.
Jakob Nielsen, le grand nom en matire dergonomie, a ralis une tude sur la visualisation dune
page web auprs de 232 internautes. Dans le cas dune page "produit" dun site de e-commerce, la
lecture prend la forme dun F englobant dans un premier temps la photo du produit et une fiche des-
criptive place directement sa droite. Les yeux se dplacent vers le bas de la page quand celle-ci pr-
sente plus amplement les caractristiques du produit (voir Figure 12.2). Il ressort galement de cette
tude que les utilisateurs se concentrent sur les informations prsentes sous la forme de liste synth-
tique.
Des fiches produits claires et faciles daccs
Tout texte accompagnant vos produits doit tre lisible. Il en est de mme de la qualit
des images reprsentant vos produits. Essayez dans la mesure du possible dintgrer
une fonction zoom et le visionnement du produit selon ses diffrentes facettes. Le minimum
tant une vue de face et une de derrire(voir Figure 12.3).
Vos produits doivent galement rester faciles daccs. Ceci peut se matrialiser par la
mise en place doutils permettant aux internautes daccder plus rapidement aux produits
et/ou aux renseignements quils recherchent.
Vous pouvez dliser votre clientle en rendant la prsentation des pages attractive, en
la faisant lgrement voluer de mois en mois. Par exemple, proposez mensuellement
des promotions, incluez des extraits darticles de presse prsentant vos produits, ventant
vos services, faites part des tmoignages de clients. Les visiteurs de votre site doivent
noter un changement.
Figure 12.2
La lecture en F
du contenu
dune page web.
Un site trop statique peut laisser penser une certaine inertie dans la gestion de votre
business et de votre relation client.
Les cls pour viter labandon de panier
Quoi de plus frustrant que de se trouver bloqu dans le processus dachat, sans pouvoir
identier lorigine du problme ! Le manque de clart et de simplicit de ce processus
peut vous faire perdre un client, alors que votre site contenait ce quil recherchait ! En
consquence, assurez-vous que laction de "passer commande" soit simple et rapide.
Vous ne devez ni lasser, ni dcontenancer linternaute par la nature et le nombre de
champs remplir pour valider tout paiement. Autre point souligner, sur chaque page
"produit", le lien ou bouton permettant de commander un article doit tre facilement
identiable. Cela peut vous sembler insigniant, mais les termes utiliss pour nommer
les boutons "dactions" inuent sur le bon droulement dune commande. Il est ainsi
courant dopter pour le concept de "panier" comprhensible de tous.
chaque ajout darticle, lintitul du bouton panier volue et prcise combien darticles
ont t slectionns.
Figure 12.3
Prsentez vos produits
sous diffrents plans.
Quand le choix de linternaute est arrt, il lui suft daller son panier pour naliser sa
commande.
Enn, laissez lopportunit aux clients indcis de supprimer des articles et den ajouter,
de modier la quantit par article et sans avoir lobligation de ressaisir lensemble de
leur commande.
Concentrons-nous sur les tapes du processus dachat. Pensez intgrer un chemine-
ment (pas plus de 4-5 tapes) au-dessus de lespace consacr la prise de commande.
Ainsi linternaute sait concrtement le nombre dtapes suivre pour valider dnitivement
son achat. Il sait o il en est. (voir Figure 12.4)
votre guise, vous pouvez dterminer quune commande doit tre clture dans un
certain laps de temps (15 minutes). Dans un tel cas, indiquez linternaute le temps
restant pour naliser son opration.
Concernant les champs du formulaire remplir par tout nouveau client, allez lessen-
tiel, faites court : nom, prnom, adresse et numro de tlphone car linternaute naime
pas dlivrer des informations trop personnelles. Il faut aller vite dans lidentication de
votre client.
Les intituls des champs remplir doivent tre simples, comprhensibles de tous. Pour
ce qui est de la date de naissance, prcisez dans les cases le modle de saisie attendue
par exemple : JJ/MM/AAAA. Vous pouvez galement opter pour un menu droulant.
Si vous prvoyez des champs supplmentaires dont la saisie sera facultative pour les
internautes, la hirarchisation existante doit se matrialiser par la prsence dastrisque
ct des champs fondamentaux. En bas du formulaire, reprsentez cet astrisque accom-
pagn de la lgende "Mention obligatoire".
Pour que la commande et le processus de paiement soient clturs, votre page de for-
mulaire doit comporter un bouton de soumission de taille mdium, dont lintitul peut
tre : "Envoyer", "Valider ma commande" ou "Acheter".
Figure 12.4
Le site venteprivee.com
mentionne clairement les
tapes suivre avant de
clturer sa commande.
noter que, si linternaute ne remplit pas correctement les champs de votre formulaire,
il ne doit pas pouvoir naliser lopration. Faites apparatre un message derreur spci-
fique ct de chaque champ erron. Exemple de messages derreur : "Veuillez prciser
votre adresse", "Mentionnez votre date de naissance sous le format JJ/MM/AAAA".
Pensez dgager vos clients habituels dune telle saisie en prvoyant une section "dj
client", reprenant les donnes nominatives et ladresse de livraison.
Enn, prenez en considration les commentaires de vos clients pour faire voluer en
douceur la prsentation de votre formulaire, les tapes du processus de paiement. Tout
site reste perfectible.
Les rubriques daide et de contact
Laide doit occuper une place prdominante et surtout tre prsente dans toutes les
pages. Votre client ne doit jamais se sentir abandonn lors dune tape de son achat et
doit tout moment savoir ce quil fait exactement.
Mais comment organiser laide de votre boutique, au juste ?
Foire aux questions
La mthode la plus simple pour vous est de faire appel une foire aux questions (FAQ,
Frequently Asked Questions, en anglais). Ce type de document se prsente sous la
forme dune suite de questions/rponses reprenant lensemble des interrogations que
lun de vos clients potentiels pourrait avoir, comme : "O sont stockes mes coordonnes
bancaires ?"
ce type de question, rpondez le plus clairement possible. Expliquez par exemple que
les coordonnes bancaires ne sont pas stockes sur votre site (cest dailleurs illgal),
mais que vous utilisez un partenaire extrieur, tel PayPal, pour grer lensemble des
oprations de paiement. Expliquez galement que cette solution est reconnue et scuri-
se. Donnez votre client les indices qui lui permettront de reconnatre une transaction
scurise dun autre type de transaction.
Cest le type de couple question/rponse que vous pourriez facilement construire.
Listez donc lensemble de ces couples et prsentez-les sous la forme dune page daide
complte. Si le nombre de questions/rponses obtenues est vraiment trs lev, pensez
crer une navigation par rubrique sur la section daide de votre site, an de guider
votre client vers la question qui lintresse rellement et de ne pas le perdre en cours de
route.
Parmi les questions les plus importantes, assurez-vous que vous touchez bien aux sujets
suivants :
mthodes de paiement acceptes ;
stockage et utilisation des informations bancaires ;
stockage et utilisation des informations personnelles ;
modes et dlais dexpdition ;
garanties ;
perte du mot de passe ;
utilisation du moteur de recherche.
Intgration de laide sur le site
Une fois lensemble des lments de votre FAQ crit, il ne vous reste qu les intgrer
Cette nouvelle rubrique doit tre insre dans la navigation gnrale de votre site web.
Un lien Aide sera ainsi accessible depuis toutes les pages.
Mais pensez galement fournir une aide contextuelle vos clients. Ceux-ci se pose-
ront des questions sur les mthodes de paiement utilisables au moment o ils devront
payer. Ils se poseront des questions sur les dlais de livraison au moment de valider leur
panier Prsentez-leur donc les rponses adquates au bon moment. En dessous de
chacune des pages critiques de votre boutique, prsentez par exemple les trois questions
les plus frquemment poses et les rponses qui y sont associes. Cela vitera bien souvent
vos clients de naviguer sur votre site la recherche dune rponse vidente.
La rubrique contact
Laide en ligne de votre site va rpondre la majorit des questions de vos clients. Mais
ne rvez pas, vous ne pouvez prvoir toutes leurs interrogations. Donnez-leur la possi-
bilit de vous poser des questions !
La solution la plus simple pour que vos clients entrent en contact avec vous est sans
contexte la cration dun formulaire de-mail. Prvoyez dans celui-ci les lments suivants :
nom du client ;
adresse e-mail du client ;
section concerne par la question (dans une liste prdnie par vos soins) ;
question proprement dite.
Synchronisez ce formulaire avec une adresse e-mail spcialement ddie cet usage.
Vous viterez ainsi le spam sur votre adresse de travail et aurez par la mme occasion
une vision claire de lensemble des soucis que rencontrent vos clients. Pensez relever
le contenu de cette bote aux lettres rgulirement et surtout rpondre vos clients.
Ils apprcieront ce contact direct et feront dautant plus conance votre site.
Protez galement des questions poses par vos clients pour mettre jour la FAQ. De
nombreuses questions viendront plusieurs fois, auxquelles vous navez pas forcment
pens auparavant !
Vous tes dsormais assur : chaque fois quun internaute visitera votre site, il saura
automatiquement o se rendre et comment passer sa commande. La dlisation de
votre clientle est introduite.
Passons maintenant ltape de lanalyse des frquentations de votre site web.
13
Statistiques de frquentation
et de vente
Google Analytics
Xiti.com
De nombreux outils existent pour comprendre le fonctionnement dune boutique ligne.
Ils vous aident connatre lorigine des visiteurs, leur comportement sur les diffrentes
pages de votre site. Des outils tels que Google Analytics ou Xiti vous permettent dana-
lyser plus posment le trac de votre site, de noter quune grande part dinternaute
nutilise pas le cheminement auquel vous pensiez pour concrtiser leur achat, dappren-
dre que les internautes dune rgion ou dune ville auront tendance acheter une
famille de produits plus quune autre
La mine dinformations manant de tels outils doit vous aider cibler votre offre, faire
voluer la conguration de votre site pour toucher encore plus dinternautes et les d-
liser. Ils sont une aide la prise de dcision marketing.
Google Analytics
Google Analytics est un outil de suivi de trac, danalyse des performances de vos
diverses campagnes e-marketing; en un mot un outil de tracking (voir Figure 13.1).
Il vous donne accs plus de 80 rapports adapts au commerce lectronique. Ils rpon-
dent aux questions qui portent sur le comportement classique des internautes, lidenti-
cation du nombre de pages consultes avant un achat
Figure 13.1
Google Analytics vous
aide mieux apprhender
les comportements des
internautes sur votre site.
En tenant compte des statistiques de Google Analytics vous pouvez aisment identier
le taux de rebond de votre site.
Google dnit le taux de rebond comme "la proportion selon laquelle un visiteur quitte
un site sans consulter dautres pages".
Il est important de comprendre pourquoi un internaute ne poursuit pas son action, ne
souhaite pas approfondir sa recherche ou consulter dautres sections quand il entre sur
votre site partir de la page daccueil.
Avec un tel outil vous tes en mesure didentier plus facilement les axes doptimisa-
tion ncessaires pour rendre le contenu de votre site plus attractif, en adquation avec
les attentes de votre clientle.
La mise en place
Pour bncier de Google Analytics connectez-vous ladresse www.google.com/ana-
lytics/fr-FR/.
Louverture dun compte est simple puisquelle se rsume mentionner lURL de votre
site et le nom de votre futur compte (voir Figure 13.2).
Une fois cette opration ralise cliquez sur Continuer an daccder la page compor-
tant le code de tracking nomm Google Analytics Tracking Code (GATC) placer soit
Figure 13.2
Louverture de votre compte Google Analytics.
281 STATISTIQUES DE FRQUENTATION ET DE VENTE
avant la balise </body> soit entre les balises <head> et </head> et aprs les balises
meta du code source des pages de votre site. (voir Figure 13.3).
Si votre site comporte des animations flash ou du code dynamique, Google a prvu une autre proc-
dure. Vous trouverez le guide dinstallation ladresse www.google.com/support/analytis/
?hl=fr.
La cration dun profil sur Google Analytics
Ajouter un prol sur Google Analytics ncessite dans un premier temps de rentrer dans
votre compte, puis, sur la page Prols de Site Web de cliquer sur le lien Ajouter un nouveau
prol (voir Figure 13.4).
Une fois votre nouveau prol nomm, vriez ltat du code : assurerez-vous de la prsence
du marqueur (de type UA-0000000-1) dans le code source du site.
Il est possible de dterminer des objectifs commerciaux, savoir un formulaire rempli,
une rservation faite, un achat conrm (voir Figure 13.5).
Pensez activer le marquage automatique de vos campagnes.
Une des dernires oprations dans la cration dun nouveau prol consiste dnir son
site comme site de commerce lectronique.
Figure 13.3
Copiez-collez le code de tracking Google Analytics sur les pages de votre site.
Quand toutes ces tapes ont t ralises, faites une simulation pour vous assurer que
tout fonctionne correctement (liens accessibles, bonne remonte de la conversion).
Ds le lendemain votre trac sera track.
Figure 13.4
Ajoutez et paramtrez
votre nouveau profil
Google Analytics.
Figure 13.5
La dfinition dobjectifs
commerciaux.
La gestion des informations
Votre interface Google Analytics (voir la Figure 13.6) rassemble dans ses rapports une
mine dinformations : les oprations ralises par vos visiteurs, le chiffre daffaires
dgag, les tendances de frquentation (les jours de plus grosse frquentation, le chemi-
nement des internautes avant de raliser un achat). La lecture de telles donnes est
aise, les rapports tant illustrs de graphiques.
Voici une prsentation synthtique de linformation disponible. Dans le menu en haut
gauche diffrents groupes de rapports sont mis disposition :
Rapports doptimisation du marketing. Ils vous permettent de suivre vos visi-
teurs uniques, de connatre le nombre de pages consultes, la dure moyenne des
visites de tout nouvel internaute.
Rapport relatif la dlit et au temps de latence. En croisant les informations
des rapports prcdents avec les statistiques mesurant la dlit et le temps de
latence vous pourrez dcider dorienter vos actions commerciales vers la dlisation
de votre clientle ou deffectuer des oprations pour en gagner une nouvelle.
Prsentation Gnrale Dirigeant. Illustre quant lui les sources ayant permis aux
internautes daccder votre site, le nombre de pages consultes quotidiennement
par lensemble de vos visiteurs (nouveaux clients ou clients dj intgrs dans votre
base de donnes).
Figure 13.6
Votre tableau de bord
Google Analytics.
Origine gographique des visiteurs. Une telle information permet dafner vos
actions commerciales et de les personnaliser par rgion ou par pays (voir
Figure 13.7).
Rapports Performances du contenu. Si vous avez des doutes sur le contenu de
votre site, vous pouvez vous reporter ces rapports. Ils soulignent les pages de
votre site connaissant la plus forte audience. Il vous est possible de connatre dans
le dtail le nombre de visites et la dure de consultation de chaque page. Si une page
a un score moyen alors quelle comporte des produits forte valeur ajoute, il sera
ncessaire de rapidement repenser linformation contenue sur cette page, vrier la
qualit des images prsentant vos produits, sassurer que les informations se tl-
chargent rapidement
Processus dobjectifs et de cheminement. Vous prciseront quelles tapes vos
visiteurs suivent pour raliser un acte dachat. Vous saurez rapidement quel est le
cheminement engendrant le plus de conversions.
Figure 13.7
Des statistiques sur lorigine gographique de vos visiteurs.
Comme vous laurez compris, Google Analytics est un alli notable pour comprendre et
sadapter aux besoins et comportements de vote clientle donc pour tendre vers un
site plus performant.
Exploitez lensemble de ces rapports. Avec la section Visiteurs de votre tableau de bord
Google Analytics, il est possible didentier quel type dinternaute frquente le plus
votre site (voir Figure 13.8).
La vue densemble des visiteurs vous permet de rpondre, entre autres, aux questions :
Quel navigateur utilisent-ils ?
Quelle est la taille de leur cran ?
Quel est le temps coul entre lentre et la sortie dune page ?
Quelle est leur provenance gographique ?
Ce dernier point fait rfrence aux taux de rebond dnit en dbut de chapitre.
Nous ne cesseront de rappeler que ltude du taux de rebond a son importance car il
peut vous indiquer un problme de tlchargement des pages, limpatience des inter-
nautes face la lenteur dapparition des informations, images et vidos recherches.
Rappelez-vous que toute information doit tre afche en moins de 20 secondes.
Figure 13.8
Une vue densemble
de la frquentation
de votre site.
De tels lments seront la base dune rexion pour repenser lergonomie de votre site,
retravailler le contenu pour aller si ncessaire vers plus de sobrit, vers plus def-
cacit.
Dans la section Visiteurs de votre interface, au niveau du champ Visiteurs Tendances,
cliquez sur Visites. Vous accderez une carte des visites par jour (voir Figure13.9).
Aprs un mois de rfrencement minimum, il vous sera possible didentier les jours de
la semaine favorables votre business. Si un pic de frquentation apparat clairement
un jour de la semaine, vous pourriez dcider daugmenter un peu plus votre budget
publicitaire ce jour-l pour largir vos plages de diffusion sur les moteurs de recherche.
Une telle information peut aussi servir tablir une variabilit dans la gestion des
enchres par mots cls (cot par clic) an de payer moins cher les jours savrant moins
opportuns la gnration du chiffre daffaires.
Dans le mme tat desprit, des tendances de visites peuvent tre tudies par heure. Par
exemple, planier des tests selon des horaires de campagne. Mais avant de diffuser vos
campagnes daprs des tranches horaire prcises, il est important de sassurer que la
tendance observe nest pas due au retrait dune promotion ou labsence de diffusion
de spots publicitaires on-line ou off-line La tendance doit tre rcurrente sans quoi il
serait dangereux de se priver de trac sur un priode de la journe.
Cet outil peut tout fait voluer dans sa conguration et se doter de nouvelles applica-
tions pour afner les informations remontant de votre trac. Il est ainsi possible de met-
tre en place le tag utm_nooveride (oprant une nette distinction entre le trac issu de
votre marque et celui issu dautres termes hors marque) ou de recourir un prol spci-
que pour connatre les mots cls rellement taps par les internautes avant datteindre
votre site.
Figure 13.9
Une vue densemble du nombre de visites journalires.
Dans lhypothse o votre campagne se structure en un ensemble de termes relatifs
votre marque et un autre ensemble de termes plus gnriques (concernant les produits/
services prsents sur votre site) recourir au tag utm_nooveride peut tre utile. Avec ce
tag, vous saurez trs prcisment si la conversion tudie tire son origine dune requte
o linternaute a utilis un terme gnrique ou un terme renvoyant votre marque.
Clarions. Par principe, Google Analytics attribue la conversion au dernier mot cl uti-
lis par linternaute pour accder votre site et raliser son achat. Dans de nombreuses
hypothses la conversion va tre attribue un mot cl correspondant votre marque.
Mais dans les faits, nombre dinternautes procdent deux voire trois recherches avant
de procder un achat.
Linternaute souhaitant trouver un livre sur lart culinaire en Italie peut ainsi, dans un
premier temps, taper "livre art culinaire Italie" dans un moteur de recherche. Il repre
votre site MaBoutique.net, visite les rubriques en relation avec sa requte, puis sort du
site pour poursuivre sa recherche, oprer des comparaisons avec les produits dautres
sites.
Avec cette visite le tracking est activ, un cookie vient dtre plac. Il sera oprationnel
pendant 6 mois.
Si dans un second temps linternaute revient sur votre site avec pour requte la marque
"MaBoutique.net" quil a aisment mmorise, lachat quil ralisera fera remonter
dans les tableaux Google Analytics une conversion.
En labsence du tag utm_nooveride, la conversion sera attribue au dernier terme
recherch "MaBoutique.net".
Avec ce tag, la vraie source de conversion est authentie et octroye au tout premier
mot cl ayant dclench le processus de recherche puis dachat sur votre site : lexpression
"livre art culinaire Italie".
Lintrt dun tel tag est de connatre avec prcision tous les mots cls importants parti-
cipant laugmentation de votre CA.
En son absence, vous pourriez tre amens mettre en pause certains termes pour les-
quels votre interface de tracking ne montre que des cots et point de conversions. Alors
que dans la ralit, ils contribuent lacte nal dachat.
Fiche 1: Lutilisation du tag utm_nooveride
La mise en place du tag est simple puisquil convient dajouter le lien
utm_nooveride=1 aux URL de destinations associes aux mots cls se rapportant
votre marque.
Si lURL de destination utilise dans les annonces ddies votre marque est :
http://www.maboutique.net
vous devez la changez en :
http://www.maboutique.net?utm_nooveride=1
Si vous utilisez Google Analytics dans sa conguration classique, vous vous fermez
certaines portes riches en informations.
titre dexemple, il est possible de recourir un ltre donnant pour lensemble des
mots cls achets ceux qui ont t rellement taps par les internautes.
Vous vous donnez alors la chance daccrotre les champs lexicaux de votre campagne
de liens sponsoriss, de gagner en spcicit et en cots par clics moins chers.
Le centre daide Google Analytics regorge de tutoriaux pour grer au mieux son compte, crer ses
profils, filtres.
Pour crer sans trop de difficults les filtres de son compte Google Analytics, la matrise dun certain
nombre de caractres est ncessaire. Les principaux sont la Figure 13.10 :
Retrouvez toutes ces donnes ladresse :
https://www.google.com/support/googleanalytics/bin/answer.py?answer=55461.
Fiche 2 : Un profil identifiant les mots cls rellement taps
par les internautes
Figure 13.10
Caractres filtres GA
& correspondances
Les tapes pour procder la cration du ltre :
1. Connectez-vous Google Analytics.
2. Paramtrez un prol purement ddi au rfrencement payant ; nommez-le par
exemple Requtes relles en SEM.
Nhsitez pas mettre en place des prols personnaliss dans votre compte Google
Analytics (maximum : 50 prols par compte). Les ltres que vous crerez sappliqueront
uniquement la source de trac souhaite.
3. Sur la page de prsentation du prol, droite des donnes propres ce prol, cliquez
sur Modier puis sur Crer un ltre.
4. Il existe diffrents types de ltres, celui recherch est un Filtre personnalis dans
une conguration avance (le dernier sous-rpertoire en dessous de la mention Type
de Filtre).
Pour connatre les requtes relles des internautes, la mise en place de plusieurs ltres
sera ncessaire.
Sil est toujours possible de changer lordre des ltres en cliquant sur Paramtres des
prols ; dans le cas prsent il est ncessaire de respecter lordre les tapes qui suivent :
Le 1
er
ltre. Il permet la prise en considration des mots cls de votre campagne
Google AdWords et de les amener vers le champ dtude des requtes relles.
Des champs requis sont remplir : dans le champ A, optez pour Rfrence en prci-
sant les caractres ci-contre : (\?|&)(q|p)=([^&]*). Le champ B se rappportera
au Support de campagne. Ici lintert se porte sur la campagne au cot par clic,
donc prcisez cpc
Dans le dernier champ Sortie vers, slectionnez Champ personnalis 1, puis $A3
noter que pour les deux premiers ltres les champs A et lopration de remplacement
du champ de sortie sont obligatoires. Pour le reste, cochez non.
Le 2
me
ltre. Ce champ tablit le rapprochement entre mot cl achet et mot cl
rellement recherch par linternaute. Les deux donnes apparatront ainsi lune
cte de lautre dans votre rapport Google Analytics.
Dans cette deuxime tape seules trois champs doivent tre modis :
Champ A ? Extraire A : Slectionnez Terme de la Campagne, puis notez (.*)
Champ B ? Extraire B : Slectionnez Champ personnalis 1, puis notez nouveau
(.*)
Sortie vers ? Constructeur : Slectionnez Terme de la campagne puis crivez $A1
($B1)
Pour approfondir le sujet, nhsitez pas consulter les blogs http://www.webmarke-
ting-online.fr, http://oseox.fr ou http://www.wagablog.com.
Xiti.com
Xiti est un outil de tracking qui suit le comportement de vos visiteurs en termes de
volume de visites, nombre de pages vues, temps moyen de navigation Dans le cadre
dun site de e-commerce, il donne accs lanalyse du chiffre daffaires par produit, au
taux de transformation dun segment de produits /article donn, le gain ou la perte
daudience
La mise en place
Pour souscrire loffre Xiti, rendez-vous sur le site la page : https://secure.xiti.com/
fr/Inscription/Abonnement.aspx.
Louverture dun compte est simple et rapide. Choisissez une formule mensuelle ou
annuelle puis cliquez au niveau de la formule Xiti Pro sur le bouton "Sabonner".Vous
bncierez dune offre dessai de 15 jours (voir Figure 13.12).
Figure 13.11
Le tableau de bord Xiti.
Aprs lintgration du code Xiti dans les paramtres de votre site, loutil mesurera et
analysera laudience de votre site en faisant ressortir les tendances comportementales
de vos visiteurs et le retour sur investissement que dgage votre activit.
La gestion des informations
Loutil Xiti suit la performance de toutes vos actions marketing : rfrencement naturel
et payant, afliation, e-mailing
Tout lintrt de Xiti, repose sur la possibilit de croiser des statistiques de trac avec
des donnes comportementales. En confrontant les donnes comportementales et lori-
gine gographique de vos visiteurs, vous obtenez des tendances de frquentation par
pays ou rgions. Si vous vous intressez aux statistiques sur le temps des visites, vous
pourrez constater suivant le cas quune augmentation du temps pass sur votre site (sans
que cela saccompagne de conversions) est conscutive un problme de tlchargement
du contenu dune de vos pages ou son indisponibilit.
Si vous croisez ltude de la dure des visites avec un taux de rebond en hausse vous
aurez la conrmation quune page de votre site doit tre retravaille.
Figure 13.12
Les formules dabon-
nement Xiti.
Ltude dun tel facteur peut aussi tmoigner de limpact positif ou non de lintgration
de nouveaux articles ou de la rvision de la prsentation dune offre.
Avant de se plonger dans lanalyse de ces indicateurs, il faut indiquer loutil les cam-
pagnes suivre. Cela passe par une simple cration de prol en allant dans la section
Conguration. Cliquez alors sur Nouveau lien sponsoris dans la rubrique Sour-
ces&Campagnes. Mentionnez le rseau sur lequel la campagne sera diffuse ou alors
optez pour Liens sponsoriss (non classs) en sachant que vous aurez par la suite des
donnes indiffrencies. Un identiant peut tre automatiquement attribu par Xiti
(cliquez non au niveau du choix dune valeur).
Ces tapes ralises, votre prol est cr. Rendez-vous dans Liste des campagnes tou-
jours dans la rubrique Sources&Campagnes pour connatre la valeur xtor (un chiffre
ou un nombre) de votre campagne de rfrencement payant.
La valeur xtor a son importance pour paramtrer le tracking. Elle devra en effet apparatre
dans les caractres du tag accoler aux URL de vos campagnes.
Une URL avec le tag Xiti suit le montage suivant :
http://www.maboutique.net/art_culinaire/italie?xts=0000000&xtor=SEC-01-GOO-
[Groupe_1]-[Var-1]-{ifContent:C}{ifSearch:S}-[{keyword}]
Chaque champ du "lien Xiti" a sa signication. La connexion entre lURL des pages de
votre site et le tag de tracking passe par un point dinterrogation. Sil est dj prsent
Figure 13.13
Une interface
de tracking
multi-canal.
dans votre URL de redirection, optez alors pour le signe "&". Quant aux autres caractres
voici leur porte :
xts=0000000. Paramtre propre votre compte ; code sous forme de nombre attribu
par Xiti.
xtor. Signe distinctif dun tracking opr via la plateforme Xiti.
SEC-01-GOO. SEC ou source prcdant le numro de la campagne suivie (ici 01),
qui dans lexemple est diffuse sur le rseau Google. Si elle tait rfrence sur le
rseau Yahoo!, le tag scrirait SEC-01-YSM ou SEC-01-MSN pour une prsence
sur le rseau MSN.
[Groupe_1]. Pour prciser quel groupe dannonce de votre campagne de liens spon-
soriss appartient lURL tracke. Il nest pas obligatoire de spcier ce champ.
[Var-1]. Spcier le champ Var-1 relatif la variante dannonce nest pas obligatoire.
{ifContent:C}{ifSearch:S}. Paramtres concernant exclusivement les campagnes
Google. Le S dans lURL permet de traquer une campagne de liens sponsoriss dif-
fuse sur le rseau Search (de recherche). Le C dans lURL se rapporte une
campagne de liens sponsoriss diffuse sur le rseau Content (rseau contextuel).
[{keyword}]. Cette dernire variable indiquera le mot cl achet.
Une fois le tracking install, Xiti vous permet de raliser de nombreuses tudes. Portons
notre choix sur le rapport daudience avec une attention particulire pour les expressions
cls de votre campagne.
Ce rapport est accessible en slectionneant dans le menu de gauche le lien Sources, puis
Moteurs de recherche et enn Expressions cls.
La priode dtude est dterminer en sachant quil est possible dtablir une compa-
raison entre deux priodes.
La liste qui va alors apparatre contient pour les jours/mois slectionns les expressions
rdiges par les internautes avant de se rendre sur votre site.
De telles donnes peuvent tre exploites pour ajouter de nouveaux termes, de nou-
veaux groupes de mots cls, si sur le total de visites ils font partie des mots cls les plus
requts.
cause dune telle liste, des expressions non pertinentes ou trop loignes de votre sec-
teur dactivit peuvent apparatre. Pour qualier votre trac, pensez ajouter ces
expressions aux termes exclus dans vos campagnes de liens sponsoriss Google,
Yahoo ! ou MSN.
14
Vers une boutique 2.0
Le Social Marketing, pourquoi faire ?
Mettre les produits en avant
Des propositions contextuelles bases sur les clients
Interagir avec les clients ?
Les dernires volutions du Web, connues sous le nom gnrique de Web 2.0, changent
la donne en matire de mise en avant des produits et des avis des internautes. Mais
dabord, quest-ce que le Web 2.0 ?
Sous lintitul Web 2.0 se cachent la fois une srie de techniques et de fonctionnalits
destines "remettre linternaute au centre de la Toile" et le rendre acteur, plus que
spectateur, des sites web quil frquente. Mme si cette dnition, et la notion mme de
Web 2.0, est conteste par Tim Berners-Lee et dautres crateurs du Web, elle reste
gnralement admise. On retrouve ainsi, sous le terme Web 2.0, un catalogue de fonc-
tionnalits et de sites assez pars, qui garde comme point commun le fait de pousser
linternaute agir et participer. Par exemple :
Les plates-formes dhbergement vido. Sur YouTube, Google Video, DailyMotion,
linternaute est invit envoyer ses propres lms et courts-mtrages.
Les blogs. Linternaute peut la fois jouer le rle dauteur (le blogueur lui-mme)
et de commentateur ;
Les rseaux sociaux. Ils sont bass avant tout sur la cration de liens et de contacts
entre les diffrents utilisateurs, (LinkedIn aux USA, Viadeo en France).
Les plates-formes lies la "Folksonomie". Ce sont Digg, StupleUpon, Netscape,
Reddit ou encore del.icio.us pour les principales plates-formes amricaines, et
Scoopeo ou Fuzz pour les plates-formes franaises, qui restent toutefois margina-
les. Elles se fondent la fois sur le principe de la soumission de liens et dactualit
par les internautes, et sur la "validation" de ces liens par un vote des autres utilisa-
teurs du systme. Les liens qui remportent le plus de suffrages se trouvent exposs
en priorit aux internautes.
On associe galement dune faon gnrale la notion de Web 2.0 et la technologie Ajax.
Cette association est avant tout technique : le dveloppement des sites et services
estampills Web 2.0 passe souvent par des mcanismes faisant appel Ajax. La pr-
sence dune technologie Ajax nest en aucun cas un gage de mise en avant de linter-
naute, ou daspect social dun site. Ajax permet simplement, laide de requtes
asynchrones et de JavaScript, de prsenter aux visiteurs dun site de nouveaux contenus
sans avoir recharger une seule page de celui-ci. Si cette technologie est utile pour la
cration dinterfaces riches et dynamiques, elle pose toutefois certains problmes
daccessibilit du contenu et de rfrencement.
Dans ce chapitre, vous allez voir comment les techniques Web 2.0 peuvent sappliquer
concrtement une boutique en ligne, et notamment la librairie que vous construisez
depuis le dbut de cet ouvrage. Diffrentes pistes sont explores ou abordes, et vous
mettrez en pratique la cration dune offre dachat contextuelle associe la validation
du panier dachat de vos clients.
Le Social Marketing, pourquoi faire ?
Social Commerce, Boutique 2.0, les possibilits offertes par le Web 2.0 en matire de e-
commerce sont innies. Mais, il est avant tout important de garder en tte les objectifs
de votre boutique et de ces techniques : augmenter le plus possible les revenus gnrs
par votre commerce. Pour cela, deux moyens soffrent vous : attirer plus de clients ou
sassurer que chaque client commande plus douvrages en ligne.
Toucher plus de clients potentiels. Les mthodes pour cela ne manquent pas. Un
bon rfrencement, des campagnes de publicit en ligne ou mme hors ligne, des
changes de lien avec dautres sites, des campagnes denvoi de-mails, sans pour
autant faire de spam On en arrive dtailler toutes les techniques de marketing
existantes sur Internet et utilises depuis une dizaine dannes par les plus grands
groupes de commerce en ligne. Suivant le type de boutique que vous possdez, cer-
taines astuces peuvent vous aider mener bien ces campagnes marketing. Pensez
par exemple cibler un public concern par les objets en vente sur votre boutique,
plutt que de tenter une approche grand public, beaucoup plus onreuse.
Augmenter le volume dachat de vos clients. Sur ce point, les possibilits sont
beaucoup plus vastes quil ny parat. Un client vient sur votre boutique parce quil
a un besoin particulier, besoin dun livre prcis, la recherche dun cadeau
vous de le convaincre quil a en fait besoin de plus dobjets que ce quil est relle-
ment venu acheter. Les mthodes pour cela sont trs nombreuses et dtailles au
chapitre qui va suivre !
297 VERS UNE BOUTIQUE 2.0
Mettre les produits en avant
Avant daborder des fonctionnalits Web 2.0 proprement parler, quelques mthodes
de base pour augmenter, potentiellement, le panier moyen de vos clients.
Comme nous venons de le dire, une majorit de vos clients viendra sur votre boutique
pour un besoin prcis. Ainsi, ils peuvent accder vos pages en entrant simplement la
description prcise de louvrage recherch sur un moteur (Google par exemple), ou se
rendre directement sur le site de votre boutique et y commander le livre quils veulent.
Ce rsultat est obtenu grce aux techniques de marketing classiques.
Votre d va tre, sur le peu de pages que le client peut voir de votre boutique, de le ten-
ter au maximum pour quil ajoute plusieurs articles son panier. Loin des grandes
mises en pratique des chapitres prcdents, voici une petite liste thorique des mthodes
qui soffrent vous pour optimiser le panier des clients :
Mettez en avant les nouveauts. Cest lopration de base. Vos clients viennent
sans doute pour un article prcis mais peuvent galement tre tents par une nou-
veaut, quils avaient prvu dacheter de toute faon. vous de les convaincre de
lacheter chez vous plutt quailleurs. Gardez donc, sur chacune de vos pages, et
spcialement sur la page daccueil du site (voir Figure 14.1), une place de choix
pour les derniers articles ajouts votre catalogue. Si possible, ciblez ces articles
sur la rubrique dannuaire ou larticle que votre client est en train de visualiser. Pour
cela, vous pouvez utiliser une base de mots cls, de la mme faon que vous avez
conu vos requtes de recherche au Chapitre 6.
Ouvrez les recherches de vos visiteurs. Vos visiteurs sont arrivs sur votre bouti-
que par une che prcise, sur un livre traitant dun sujet prcis ? Ouvrez donc leur
recherche dautres articles traitant de sujets similaires. Vous avez dj commenc
cette dmarche lors de la mise en place des pages de votre catalogue, en y insrant
les deux rubriques dannuaire auxquelles appartient louvrage (voir Figure 14.2).
Vous pouvez aller plus loin en afchant directement quelques articles disponibles
dans ces catgories. Votre client cherche un livre qui traite de Flash ? Donnez-lui le
choix et fournissez-lui des liens rapides vers les autres livres traitant du mme sujet.
Sur un argumentaire bien trouv, votre client choisira peut-tre un ouvrage deux
fois plus cher que celui pour lequel il tait initialement venu. Bien entendu, cette
arme est double tranchant, mais ne sous-estimez pas vos clients.
Jouez galement sur les afnits dauteur ou dditeur. Vos clients apprcient
particulirement les ouvrages dun auteur ? Proposez-leur sa bibliographie com-
plte en un clic. Mieux, comme pour les ouvrages traitant du mme sujet, afchez
sur la che dtaille dun livre les deux ou trois meilleures ventes de cet auteur.
Cest autant de chances dachat supplmentaire sur votre boutique. En allant plus
loin, vous pouvez proposer des promotions spciales pour lachat de deux ouvrages
du mme auteur la manire dAmazon France (voir Figure 14.3).
Figure 14.1
La page daccueil du site de la FNAC donne tout de suite un aperu des nouveauts disponibles.
Figure 14.2
Des liens de type
Annuaire sont dj pr-
sents sur votre boutique.
Nombre des ides dtailles ici vont vous demander des changements dans votre base de donnes.
En effet, ce qui est encore ralisable pour quelques liens peut trs vite devenir lourd quand il sagit
dafficher plusieurs articles sur la mme page. Imaginez la charge que peut demander laffichage dun
article principal et de quatre ou cinq propositions construites sur des requtes diffrentes. Les perfor-
mances de votre boutique deviendraient vite insupportables Pensez donc modifier la structure de
votre base de donnes afin doptimiser les requtes destines afficher les offres complmentaires
vos clients !
Des propositions contextuelles bases sur les clients
Maintenant, mettez-vous un instant la place de lun de vos clients et imaginez les deux
scnarios suivants lorsque vous parcourrez un catalogue darticles :
diffrents liens vous proposent des articles en rapport avec votre recherche
actuelle ;
dautres clients vous recommandent des articles quils ont eux aussi commands.
laquelle de ces deux approches feriez-vous le plus conance ? celle provenant du
client, bien videmment !
Jusqu prsent, lensemble des systmes de propositions contextuelles dtaill dans ce
chapitre faisait appel votre catalogue de produits et votre vision de celui-ci. Mais il
y a peut-tre des afnits de produits auxquelles vous navez pas pens et qui semblent
videntes pour vos clients
Figure 14.3
Pour chaque article,
Amazon France en pro-
pose un second prix
rduit
Principe gnral
Pour construire ce genre de propositions contextuelles contrles par vos clients, vous
allez avoir besoin dune solution automatise. En effet, il pourrait se rvler fastidieux,
voire dangereux, de demander ouvertement lavis de vos clients sur les couples de pro-
duits associer. Imaginez le travail de modration raliser pour contrler lensemble
des rponses donnes par vos clients. Il serait titanesque !
Non, mieux vaut trouver une solution automatique qui ne demande pas directement
lopinion des clients tout en considrant leur avis
La solution est simple : prendre en compte leurs commandes !
partir du moment o un client a command plus dun article, on peut en dduire que
les produits en question ont une afnit. Si plusieurs clients ont ralis la mme asso-
ciation darticles, cette afnit est dautant plus forte !
La logique de votre proposition contextuelle est donc la suivante : Identier les articles
commands le plus souvent en compagnie dun autre. Vous dnirez ainsi des "couples
darticles" populaires que vos clients ont lhabitude de commander de paire. De cette
faon, vous augmenterez les chances de transformation de vos propositions en achats
rels. Le tout est de transformer ce scnario en requte SQL exploitable.
Cration dune requte
La proposition contextuelle que vous allez mettre en place va tre afche sur la page
de panier de votre client, an de le convaincre deffectuer un achat supplmentaire sur
la dernire page possible. Pour cela, nous allons rechercher lensemble des articles
commands en mme temps que ceux prsents dans le panier.
Cette tche nest pas facile. An de bien dtailler le processus qui nous intresse, la
requte permettant dobtenir les articles proposer va tre dtaille dans les pages sui-
vantes :
1. Premire tape, obtenir la liste des articles prsents dans le panier, par linterm-
diaire dune simple requte SELECT. Nous voulons obtenir de cette faon les identi-
ants darticles concerns. La requte est simple :
SELECT shop_panier.article FROM shop_panier WHERE
shop_panier.client=paramClient;
Comme dhabitude, paramClient correspond la variable de session du client
actuellement connect : $_POST[MM_UserName]. Assurez-vous donc de bien dnir
cette variable lors de la cration de votre jeu denregistrements.
2. Vous connaissez les articles prsents dans le panier de votre client actuel ? Bien, il
vous faut maintenant trouver au cours de quelles commandes ces articles ont dj
t commands sur votre boutique. Pour cela, vous allez devoir faire appel deux
requtes imbriques. Cest--dire que les critres de recherche de votre requte
principale (les numros de commande) vont dpendre des rsultats dune autre
requte (les numros darticle). Syntaxiquement, cela se traduit de la faon sui-
vante :
SELECT shop_ligne_commande.commande FROM shop_ligne_commande WHERE
shop_ligne_commande.article IN (SELECT shop_panier.article FROM shop_panier
WHERE shop_panier.client=paramClient);
3. Bien, maintenant, vous de dterminer la liste des articles concerns dans ces com-
mandes. Cette requte demande encore une fois une syntaxe dimbrication :
SELECT shop_ligne_commande.article FROM shop_ligne_commande WHERE
shop_ligne_commande.commande IN (SELECT shop_ligne_commande.commande FROM
shop_ligne_commande WHERE article IN (SELECT shop_panier.article FROM
shop_panier WHERE client=paramClient));
4. Vous arrivez donc cette fois deux niveaux dimbrication, une requte assez
complexe. Avec cette requte, vous allez obtenir, ligne par ligne, lensemble des
articles commands en mme temps que ceux prsents dans le panier de votre
client, ceux-ci compris. An de ne pas proposer vos clients dacheter deux fois
le mme article, vous pouvez ajouter un critre de ltre votre requte an que
les articles prsents dans le panier actuel soient automatiquement exclus des
rsultats :
SELECT shop_ligne_commande.article FROM shop_ligne_commande WHERE
shop_ligne_commande.commande IN (SELECT shop_ligne_commande.commande FROM
shop_ligne_commande WHERE article IN (SELECT shop_panier.article FROM
shop_panier WHERE client=paramClient)) AND shop_ligne_commande.article NOT IN
(SELECT shop_panier.article FROM shop_panier WHERE client=paramClient);
5. Dans cette requte, quel est larticle le plus command ? Vous ne pouvez encore le
savoir, moins dinstaurer un comptage des enregistrements dans votre requte
(sous la forme de linstruction COUNT(*)) et de trier les rsultats obtenus suivant ce
comptage. Loption GROUP BY est indissociable du COUNT et permet de savoir quels
lments distincts sont compts dans votre requte. On obtient alors :
SELECT shop_ligne_commande.article, COUNT (*) AS total FROM
shop_ligne_commande WHERE shop_ligne_commande.commande IN (SELECT
shop_ligne_commande.commande FROM shop_ligne_commande WHERE article IN (SELECT
shop_panier.article FROM shop_panier WHERE client=paramClient)) AND
shop_ligne_commande.article NOT IN (SELECT shop_panier.article FROM
shop_panier WHERE client=paramClient) GROUP BY shop_ligne_commande.article
ORDER BY total DESC;
6. Enn, pour que votre requte soit exploitable, il vous faut rcuprer les titre et prix
des articles trouvs an de les afcher sur la page de panier nale :
SELECT shop_ligne_commande.article, shop_livres.titre, shop_livres.prix_ttc,
shop_livres.prix_ht, COUNT(*) AS total
FROM shop_ligne_commande INNER JOIN shop_livres ON
shop_livres.id=shop_ligne_commande.article
WHERE shop_ligne_commande.commande IN (SELECT shop_ligne_commande.commande
FROM shop_ligne_commande WHERE article IN (SELECT shop_panier.article FROM
shop_panier WHERE client=paramClient)) AND shop_ligne_commande.article NOT IN
(SELECT shop_panier.article FROM shop_panier WHERE client=paramClient)
GROUP BY shop_ligne_commande.article
ORDER BY total DESC
La solution prsente ici offre lavantage de fonctionner, mais elle est loin dtre optimale du point de
vue des performances. Si votre boutique garde un trafic raisonnable et ne gnre pas des milliers
dachats par jour, la charge serveur provoque par cette requte ne devrait pas mettre en pril votre
boutique. En revanche, aux premiers signes de ralentissement de votre panier, pensez concevoir
une solution alternative. Il peut par exemple sagir dune table de correspondance entre chaque arti-
cle, renseigne au moment mme de la validation du panier par vos clients et qui stocke simplement
deux identifiants darticles et le nombre de fois o leur commande simultane a eu lieu.
Mise en place
Une fois votre jeu denregistrements construit partir de la requte dtaille ci-dessus,
la mise en place des liens contextuels nest plus quune formalit :
1. Insrez sur votre page le champ Titre de votre jeu denregistrements, ainsi que le
champ Prix_ttc.
2. Liez le titre de louvrage la page de description dtaille de celui-ci en utilisant la
donne article comme paramtre dURL.
3. Enn, rptez ces donnes autant de fois que le nombre darticles que vous voulez
proposer, laide dune rgion rpte.
Votre bloc de propositions contextuelles est alors en place (voir Figure 14.4).
Figure 14.4
Les autres clients
ont galement achet
Interagir avec les clients ?
Les quelques points dtaills ci-dessus ne comprennent pas rellement dinteraction
avec les clients. Elles se contentent de prsenter de la meilleure manire possible les
produits disponibles dans votre catalogue. Mais les vrais possibilits offertes par le Web
2.0 est de laisser vos clients contribuer la vie de votre boutique et pourquoi pas inciter
les autres visiteurs acheter. Les moyens sont nombreux, on peut citer plusieurs pistes :
Laissez les internautes poster des avis sur les produits proposs, la manire des
critiques de disque publies sur Amazon (voir Figure 14.5). Les bons avis stimule-
ront les ventes des bons produits, et les mauvais avis vous aideront certainement
corriger les imperfections de votre boutique.
Offrez vos internautes la possibilit de crer des "listes". Ides cadeaux, produits
en afnit les clients auront trs certainement des ides dassociation de produits
que vous naurez pas. Rendez ces listes consultables comme autant de conseils
dachat pour les autres internautes. Ceux-ci y trouveront galement des ides propres
augmenter leur panier dachat.
Ajouter des fonctions dalerte mail sur vos produits. Plusieurs orientations possi-
bles cela : prvenir vos clients potentiels de la disponibilit dun produit quils
souhaitaient acqurir, leur permettre denvoyer la che dun produit par mail
leurs contacts. Ils se chargeront ainsi moindres frais de votre promotion par
mail.
Figure 14.5
Amazon offre la possibilit chacun de donner son avis sur les disque, DVD ou livres
Mieux encore, laissez vos clients mettre en avant vos produits sur leurs propres Web
en leur proposant un format simple dintgration. Cest le modle choisi par exem-
ple pour les programmes dafliation dAmazon (voir Figure 14.6). Ce dernier per-
met nimporte quel client de crer des liens vers les produits Amazon trs
simplement en change dune commission sur les ventes ventuellement gnres.
Figure 14.6
Le programme
daffiliation dAmazon
tire parti des techno-
logies Web 2.0.
Partie
PREMIERS PAS EN
MARKETING, FAIRE
CONNATRE SA
BOUTIQUE EN LIGNE
Vous venez de dpenser du temps et de lnergie pour llaboration de votre site.
Celui-ci construit, il faut dsormais y attirer la clientle.
Comment tre sr que votre site ne va pas se perdre parmi la multitude de sites
concurrents dj prsents ?
Nous allons vous prsenter dans cette partie les diffrents leviers, supports e-mar-
keting que vous pouvez exploiter an de vous dmarquer. Vous trouverez galement
les voies explorer an daccrotre votre retour sur investissement.
Toute campagne e-marketing impose un travail doptimisation et de suivi important.
Vous allez dcouvrir les principes de rfrencement (gratuit et payant), lintrt des
comparateurs de prix, de lafliation et enn les techniques pour tirer avantage de
votre base e-mail.
Ces techniques de e-marketing sont complmentaires. Vous ntes en aucun cas
oblig de les appliquer toutes. Donnez-vous juste la chance de toucher le maximum
dinternautes rentrant dans votre cible.
Avant de commencer, il faut apporter une petite prcision sur le rfrencement.
Quest-ce que le rfrencement ?
Nous pouvons le dnir comme lensemble de techniques runies suite la
requte dun internaute pour faire apparatre la meilleure position possible une
annonce (compose dun titre et dune description) sur les pages de rsultats dun
moteur de recherche. Parmi les plus connus, citons : GOOGLE, YAHOO ! ET
MSN.
III
Lessence mme du rfrencement est le mot cl, rentr dans la barrette de recherche
par un internaute.
Pour mieux se reprsenter les deux types de rfrencement existants, ralisons une
recherche sur le moteur GOOGLE : entrez la requette "livre dhistoire grecque" dans la
barrette de recherche Google.
En cliquant sur "Recherche Google", vous tes redirig vers une page de rsultat
regroupant diffrentes annonces (voir Figure III.1).
Si vous tudiez de plus prs la structure de cette page, vous constaterez quelle com-
porte deux parties. Une partie intitule Liens commerciaux (sur Google) ou Liens
sponsoriss (sur Yahoo! Search marketing) apparaissant droite de votre cran et une
partie sur fond blanc, gauche de lcran correspondant aux Liens naturels.
cet instant, vous prenez conscience quil nexiste non pas un rfrencement, mais deux :
Le rfrencement payant. Aprs avoir diffus une annonce, il consiste accepter de
payer une certaine somme quand linternaute clique sur ladite annonce, an daccder
votre site.
Le rfrencement naturel. Cest lart de se faire connatre sur Internet. On cherche
amliorer constamment la visibilit des pages de son site, par des liens tisss avec dautres
sites et par une annonce qui apparat sur les pages de rsultat des moteurs de recherche.
Figure III.1
Une page de rsultat
comportant des liens
commerciaux et des liens
naturels.
15
Rfrencement naturel
Limportance des mots cls
Loptimisation des pages
Les liens entrants
Google Sitemaps
Les techniques dexclusion dindexation
Avant de parler des principes et des techniques du rfrencement naturel, il est
important de dnir ce que cache rellement ce terme. lheure o prs de 90 % des
recherches en France se font par lintermdiaire du moteur Google, une dnition
facile du rfrencement serait "une technique qui consiste placer en meilleure
position possible dans les moteurs de recherche une page web pour un mot ou une
expression donne".
Mais cette faon assez commune de comprendre la problmatique du rfrencement
naturel nen couvre en fait quune partie. Le rfrencement naturel nest pas, en soi,
quune question de positionnement. Cest un travail qui vise lacquisition de trac
quali gratuit sur un contenu web. Un trac quali, cest--dire des visiteurs qui sont
la recherche des informations ou des services proposs par le contenu en question. De
cette faon, il ne faut alors plus considrer le rfrencement naturel comme une simple
opration technique doptimisation, mais comme une stratgie dacquisition daudience
globale, qui couvre les tapes allant de dnition mme de cette audience la satisfaction
de celle-ci par le biais des contenus disponibles sur un site.
Le rfrencement naturel rpond donc une vritable stratgie de communication en
ligne. Une stratgie sur le long terme, puisque le rfrencement naturel, mme sil est
gr de plus en plus rapidement par les moteurs de recherche, peut mettre jusqu 3
mois pour porter ses fruits sur votre boutique. condition dtre labor de faon logique.
PREMIERS PAS EN MARKETING, FAIRE CONNATRE SA BOUTIQUE EN LIGNE 308
Dans ce chapitre, vous allez dcouvrir quelques aspects de la mise en place dune stra-
tgie de rfrencement naturel, de la slection des mots cls cibler la conception
technique de plan de site. Ce nest l quune petite partie du travail rel de visibilit, un
ouvrage complet tant ncessaire pour traiter de bout en bout tous les aspects du rf-
rencement naturel.
Lensemble des oprations dtailles ici doit tre pris en compte ds la cration de votre
boutique et tre oprationnelles au plus tt. Plus votre site sera optimis son lance-
ment, meilleur sera laccueil des moteurs de recherche et plus tt les rsultats escompts
arriveront.
De limportance des mots cls
Souvent nglige par ceux qui ne voient dans le rfrencement naturel quune opration
technique, la dtermination dune "cible" pour son rfrencement est pourtant lune de
ses tapes cruciales. Impossible de communiquer avec des Internautes si vous ne savez
pas ce quils recherchent et ce qui les intresse sur la Toile. Cest pourquoi une pre-
mire tape de dnition des mots cls cibler est indispensable avant tout travail de
rfrencement. Plus quindispensable, elle est aujourdhui stratgique !
La page daccueil
Il existe une innit de mthodes pour concevoir la premire page dun site mar-
chand. Celle-ci prendra une conguration diffrente si votre objectif est avant tout
de mettre en avant des articles forte valeur ajoute, sil sagit plus de coller
lactualit, de jouer sur le dynamisme des offres ou alors de prsenter une faade
plus institutionnelle.
Il existe un point sur lequel tout le monde devrait sentendre lors de la ralisation de la
page : il sagit de son optimisation pour le rfrencement naturel.
Votre page daccueil doit rvler la vritable identit de votre boutique et la nature des
articles qui sy vendent. Le choix des mots cls attribuer la page daccueil doit suivre
cette logique.
Le fondement du rfrencement naturel est en effet le contenu ditorial de votre site.
Celui-ci peut avoir un look des plus attractifs, les images et animations quil contient ne
laideront en rien tre correctement positionn sur les moteurs de recherche.
On parle en lespce dindexation.
309 RFRENCEMENT NATUREL
Pour tre bien index, les robots des moteurs de recherche doivent quand ils parcourent
votre sitetrouver du texte, des mots cls.
Mais que sont ces mots cls dont on parle depuis quelques lignes ? Il sagit bien
entendu des mots cls que vont saisir vos futurs clients pour trouver votre boutique sur
un moteur de recherche.
Tapez par exemple : "cd dvd" dans Google (voir Figure 15.1). Cest la boutique en ligne
"Cdfolie.com " qui apparat en tte. Si vous recherchez maintenant "achat livres", cest
le site "Amazon.com" qui apparat en tte.
Et concernant votre boutique web, sur quels mots cls voudriez-vous apparatre en tte
de pages des moteurs de recherche ? Ce sont ces mots cls quil vous faut choisir pour
conrmer les pages de votre site web. Ils doivent reprsenter clairement votre boutique
mais galement rpondre quelques autres critres.
Figure15.1
Les rsultats des requtes "cd dvd" et "achat livres".
Gardez les ides suivantes en tte :
Choisissez des mots cls en rapport troit avec le sujet de votre site, an de ne pas
dcevoir vos visiteurs. En effet, quoi de pire que de rechercher une boutique de
musique en ligne, et de tomber au nal sur un marchand ne proposant que des
livres ! Ne pas dcevoir le visiteur doit tre la premire de vos priorits.
Si vous avez quelques indcisions, rien ne vous empche de regarder ce que vos
concurrents directs exploitent. Pour cela, positionnez-vous sur une des pages du site
dun de vos concurrents, faites un clic droit an dafcher le code source de cette
page. Vous trouverez ces mots cls dans les balises meta keywords, meta description,
et meta title.
Nessayez pas dtre prsent partout la fois, concentrez-vous sur cinq dix mots
cls. Si votre site web est trs vaste, vous pouvez tenter un rfrencement par sec-
tion, en choisissant une srie de mots cls pour chaque rubrique de votre site. Mais
pour une page en particulier, et la page daccueil qui plus est, gardez seulement
quelques mots cls bien choisis en tte.
En rfrencement la patience est de mise. Si vous commencez tout juste votre rfren-
cement, vous affrontez des business dj en ligne depuis plusieurs annes. En tant que
petit dernier sur la Toile, vous comprenez quil est vain de vouloir apparatre en pre-
mire page sur un mot cl tel que Musique ou autres termes gnriques gnrant de
forts volumes de recherche.
Pour revenir au terme Musique, celui-ci donne dj plus de 306 millions de rsultats
avec Google : http://www.google.fr/search?sourceid=navclient&ie=UTF-8&oe=UTF-
8&q= musique.
En suivant ces conseils, slectionnez une liste de cinq sept mots cls pour lesquels
vous allez optimiser votre page daccueil. Avant dtre sr deux, faites-leur passer un
dernier test. En effet, tes-vous certain que les mots cls choisis gnreront assez de tra-
c vers votre site ? Pour vous en assurer, vous pouvez utiliser les gnrateurs de mots
cls des rgies publicitaires Google (https://adwords.google.com/select/Keyword-
ToolExternal) ou MIVA (https://account.fr.miva.com/advertiser/account/Popups/
KeywordGenBox.asp).
Si ces outils rvlent que les mots cls ou les expressions que vous envisagez dintgrer
votre site napparaissent pas en tte du classement ou si vous estimez que le nombre
de recherche est bien trop faible, envisagez tout simplement dautres termes.
Mots cls des pages de catalogue
Le choix des mots cls des pages du catalogue pose un problme diffrent de celui pos
par la page daccueil. Comment souhaitez-vous que les internautes arrivent sur la page
de description dun ouvrage ? En saisissant le titre de cet ouvrage dans Google directe-
ment, et en voyant votre boutique arriver en tte ! Cest la meilleure publicit envi-
sageable.
Le choix des mots cls utiliser dans les pages de catalogue est donc simpli
lextrme : les titres des ouvrages dcrits ou les noms des auteurs peuvent sufre. Pen-
sez tout de mme complter ces donnes avec quelques mots cls bien choisis, qui
mettront en avant vos ouvrages.
Mettez-vous la place dun internaute qui rechercherait vos produits. Il y a de fortes
chances que sa requte commence par un verbe daction tel que "acheter", "lire",
"commander" ou par dautres mots cls lis au commerce.
Soyez conscient que loptimisation de vos liens en rfrencement naturel ne saccom-
pagne pas dun effet immdiat. La patience est de rigueur. Donnez-vous 1 3 mois,
avant de voir un impact notable pour toutes les oprations que vous mnerez. Un tel
dlai est tout fait normal.
Une fois la remonte du positionnement de vos liens constate sur les pages de rsultat,
poursuivez votre travail doptimisation, la cration de liens pertinents.
Optimisation des pages
Vous avez slectionn vos mots cls ?
Ils sont pertinents, en rapport avec le sujet de votre boutique, et relativement ouverts
la concurrence ? Flicitations il est maintenant temps doptimiser vos pages en fonction
de ceux-ci.
Les techniques de rfrencement ont beau devenir de plus en plus complexes, un critre
reste : les mots cls. Ceux-ci doivent tre prsents sur vos pages !
Les balises de rfrencement
Historiquement, trois balises HTML sont utilises pour contenir les informations de
rfrencement :
La balise <title>. Contient un slogan pour votre site denviron 200 caractres.
Dans ce slogan, reprenez les mots cls les plus importants et placez-les de prf-
rence en tte de la balise suivant la syntaxe suivante :
<title>Ma Boutique Achetez vos livres en ligne! </title>
La balise meta keywords. Doit recevoir la liste de mots cls que vous avez slec-
tionns, spars par des virgules. Comme pour la balise <title> placez en tte de
vos mots cls, les plus importants. Ils auront ainsi plus de poids pour les moteurs
de recherche. Sa syntaxe est la suivante :
<meta name="keywords" content="liste des mots cls">
La balise meta description. Contient une description de votre site web, cette fois
un peu plus longue que celle prsente dans le titre. Placez toujours dans cette des-
cription vos mots cls les plus importants. Et, noubliez pas que le contenu de cette
balise est utilis comme rsum de votre page, dans les pages de rsultat des
moteurs de recherche. Il sagit ici non seulement dtre rfrenc, mais galement
de donner envie aux internautes de cliquer sur votre lien. Sa syntaxe est semblable
celle de la balise meta keywords :
<meta name="description" content="description de votre site">
Ces trois balises doivent tre places dans len-tte de votre page, entre les balises
<head> et </head>, et si possible, le plus haut possible dans son code source.
Intgration des balises den-tte, avec Dreamweaver
La mise en place des balises de rfrencement dans Dreamweaver est des plus simples
raliser. Il vous suft de savoir quels objets utiliser :
1. Tout dabord, le titre (<title>). Celui-ci est afch directement dans len-tte de la
page Dreamweaver, sous la forme dun champ texte, situ ct des boutons de
changement du mode dafchage (voir Figure 15.2) Dans ce champ, vous pouvez
saisir nimporte quelle donne, quil sagisse de texte brut ou dextrait de jeu
denregistrements sous forme de script PHP. Ainsi, pour afcher le titre issu dun
jeu denregistrements, nhsitez pas saisir <?php echo $row_Livre
[titre];?> dans ce champ.
2. Pour ajouter les autres balises de rfrencement, afchez tout dabord len-tte de
votre page laide de la commande Afchage > Contenu de len-tte. Ce dernier
est alors afch dans la fentre ddition de Dreamweaver (voir Figure 15.3).
Placez donc le point dinsertion de Dreamweaver dans cette nouvelle partie de la
fentre.
3. Dans Insertion, slectionnez le groupe HTML, puis lobjet En-tte > Mots cls ou
dans la barre doutils > Commun > En-tte > Mots cls (voir Figure 15.4).
4. Une bote de dialogue nomme Mots cls souvre alors (voir Figure 15.5) compo-
se dun unique champ texte. Compltez donc celui-ci avec les mots cls que vous
avez choisis dans la page en cours ddition. Vous pouvez trs bien, comme le titre
Figure 15.2
Renseignez ici le titre
de votre page PHP.
Figure 15.3
Len-tte de votre page
est affich ici.
Figure 15.4
Les objets relatifs len-
tte de votre page sont
affichs ici.
de votre page, saisir du code PHP directement issu dun jeu denregistrements an
de renseigner dynamiquement la balise de mots cls.
5. De la mme faon, utilisez lobjet En-tte > Description an de saisir la description
complte de votre page, celle-ci pouvant elle aussi contenir des donnes dynamiques
issues de jeux denregistrements.
Une fois ces balises den-tte places, votre page est dj semi-optimise.
Optimisation du texte des pages
La prsence dans les moteurs de recherche nest plus depuis longtemps une affaire
exclusive de balises Meta. Dsormais, chaque mot prsent sur votre site compte.
Vous lavez devin, lastuce est dutiliser vos mots cls dj identis dans le contenu
mme de vos pages. Mais pas nimporte comment !
Tout dabord, assurez-vous que vos pages possdent sufsamment de contenu pour tre
correctement digres par les moteurs de recherche. Une page ne contenant quune
seule animation Flash et un lien "Passez lintro" sera trs difcile placer dans Google.
On estime gnralement quun minimum de 200 termes est ncessaire sur une page
pour quelle soit juge pertinente par un moteur. Plus, cest encore mieux !
Ensuite, placez vos mots cls de manire rchie dans votre texte, de prfrence aux
endroits importants : titres (les fameuses balises <h1>, <h2>), textes et gras et itali-
que, sujet des liens Et pensez rpter les mots cls les plus importants plusieurs
fois, divers endroits de la page. Vous facilitez ainsi leur identication par les moteurs ;
ce qui terme peut inuencer une remonte de votre positionnement sur les pages de
rsultats de Google ou Yahoo!
En rfrencement naturel, il est important de placer le mot cl dans lURL pour faciliter
lidentication des occurrences de votre page quand les moteurs crawlent les pages de
votre site web. Vous donnez plus de chances vos liens davoir un bon Page Rank.
Figure 15.5
Saisissez dans cette
fentre la liste de mots
cls associs la page
en cours.
Dernier conseil, nhsitez pas lgender vos images. Pour cela, utilisez lattribut ALT
de la balise <img> et donnez-lui pour valeur lun de vos mots cls.
Faites en sorte de toujours combiner les considrations techniques du rfrencement
naturel, avec celles fonctionnelles. Certes lobjectif dacqurir un meilleur Page Rank
sur les moteurs de recherche vous poussera intgrer plus de mots cls dans les pages
de votre site. Pour autant, vous ne devez pas oublier la fonction principale de votre site :
Vendre !
Vos pages doivent rester attractives an de pousser les internautes acheter les produits
proposs.
Pour cela, la lecture de vos pages doit rester logique, claire. Tout est question dquilibre !
Pour acclrer le rfrencement de son site, on peut tre parfois tent den gonfler le contenu.
Lobjectif est de gagner rapidement en visibilit, en page rank. Mais protgez-vous de telles pratiques
car, court ou moyen terme, leurs consquences seraient nfastes au rfrencement de votre site,
prjudiciables votre business ; vous exposant au risque de blacklisting.
Quelles pratiques surveiller :
1. Le deep linking (liens profonds).
Il est frquent de trouver dans un texte descriptif un hyperlien caractris par un ensemble de mots
cls dynamiques renvoyant vers les donnes dun autre site. Un lien profond se remarque parce quil
est surlign ou dune couleur distincte du reste des donnes de la page. Il ny a aucun problme tant
que le visiteur sait vers quel site il va tre redirig et quelle information il pourra accder. Il en va
autrement quand la source est occulte. En effet dans ce cas, lindexation vise uniquement sappro-
prier un contenu qui nest pas le sien. Il dcoule de la lecture de ce contenu une confusion. Linter-
naute ne peut savoir qui en est lauteur. Laffaire amricaine Ticketmaster vs. Microsoft peut tre cite
titre dexemple. Le groupe Microsoft exploitait linformation contenue sur le site de billetterie en ligne
Ticketmaster par des liens dirigeant directement sur les pages secondaires du site Ticketmaster. Un
accord a t trouv entre les parties le 22 janvier 1999. Lutilisation dhyperliens par Microsoft fut
accepte, si ceux-ci pointaient uniquement vers la page dacceuil du site Ticketmaster.
2. Le squatte de noms de domaine ou sous-domaine.
3. Linsertion de faux commentaires ou tmoignages sur des blogs, forums pour gagner ou booster
sa popularit.
4. Gonfler facticement le contenu des pages du site par le process de duplication et linsertion de
nombreux termes dans le code source. Frquemment ces textes additionnels sont rendus invisibles
lil des internautes en utilisant des caractres de couleur blanche de la mme couleur que le
fond dcran du site.
5. Le inline linking ou lhypothse dune insertion dimages par liens hypertextes.
6. Le framing ou lopportunit de diffuser de linformation dans diffrentes fentres toutes rattaches au
mme site. Si une de ces fentres dirige vers le contenu dun tout autre site sans en faire apparatre
lURL, une telle appropriation est contestable.
La pratique dloyable, tudie au cas par cas, sera tablie sil y a confusion quant la proprit du
contenu diffus, absence dautorisation dune telle utilisation et si des avantages pcuniaires en
dcoulent
Tisser des liens
La faon doptimiser sa prsence dans les moteurs de recherche change en permanence.
Mais, actuellement, les liens sont sans conteste le paramtre le plus important prendre
en considration si vous voulez bien vous positionner sur Google et consort.
Vriez le positionnement de vos annonces toutes les semaines, an de dterminer les
actions correctives mener.
Quest-ce que le Net Linking ?
Il sagit dune technique permettant dchanger des liens an doptimiser son position-
nement, son rank, dans les pages de rsultats des moteurs de recherche.
Si des sites, bnciant dun fort taux de pages vues, intgrent un de vos liens sur leurs
pages, vous gagnerez en notorit, donc augmenterez votre Page Rank sur Google.
Lutilisation des liens pour le rfrencement peut se prsenter de la faon suivante :
quand un lien pointe vers votre site, son texte DOIT tre lun des mots cls que vous
avez slectionns.
Plus vous aurez de liens pointant vers la page daccueil de votre boutique et utilisant les
mots cls "achetez des livres", plus haut vous apparatrez dans les rsultats des moteurs
pour ce mot cl.
Cette rgle sapplique galement lintrieur de votre site web : cest pour cela que
tous les liens menant la description dtaille dun ouvrage sont faits sur le titre de
louvrage en question.
Le principe gnral est l. Toutefois, une prcision doit tre apporte. En effet, un lien a
dautant plus dimportance que la page qui le contient est juge "pertinente" par le
moteur de recherche.
Cette pertinence sexprime, sur Google, par une donne appele Page Rank.
Cette information est disponible dans la Toolbar de Google, dans ses options avances,
sous la forme dune petite barre verte. Un survol laide de la souris vous indiquera la
Page Rank de la page que vous tes en train de visiter.
Par exemple : la page daccueil de MultiMania possde un Page Rank de 7 sur un maximum
de 10.
Le Page Rank est consultable laide de la barre doutils Google, tlchargeable sur http://tool-
bar.google.com/intl/fr. Lorsque vous naviguez sur une page avec cette barre, le Page Rank de la
page en question est visible sur celle-ci, sous la mention Page Rank. Un survol sur le graphique
accompagnant cette mention affichera le niveau de la page (voir Figure 15.6).
Donc, si vous voulez tre en bonne position sur un mot cl choisi, assurez-vous quil est
utilis par les sites qui font des liens vers le vtre et possdant un bon Page Rank. Per-
tinence, homognit entre ces liens et le contenu de votre site doivent exister. Accumu-
ler des liens entrants qui ne sont pas en troite adquation avec votre site ne vous
permettra pas dtre mieux index par les moteurs de recherche. Le nombre de liens na
dimportance que sils sont de qualit !
Les tapes dune stratgie
Pour une meilleure visibilit, on aura recours aux annuaires ou aux moteurs de recher-
che. Il vous faut bien travailler le contenu des pages de votre site. La qualit est de rigu-
eur ! Si celles-ci comportent de nombreuses images, exploitez le principe des ALT TAG
an que les moteurs puissent lire quoi ces images font rfrence.
tude des sites en concurrence directe avec le vtre, et analyse de leur politique res-
pective de liens en vue didentier les sites sources importants pour la campagne de
Net Linking.
tude et localisation des sites forte afnit de contenu, forte visibilit et dont le
trac potentiel est lev en vue de la mise en place dchanges de liens.
Rfrencement des sites dans lensemble des annuaires gratuits disponibles sur
Internet.
Crez, changez des liens avec des blogs, dautres sites que vous aurez identis
pralablement comme pertinents, pouvant servir lactivit de votre site et augmenter
son taux de frquentation.
Figure 15.6
La barre doutils
Google en action.
Le recours au fichier Sitemaps
Google Sitemaps est un service propos par Google depuis juin 2005. Ce service pro-
pose aux webmasters de construire un chier sous format XML listant tout ou partie
des pages de leurs sites web dans le but dinformer Google de leur existence. Une fois
une inscription au service Google Sitemaps obtenu, il est possible dinformer Google
de lexistence de ce chier et ainsi, permettre Google de mieux indexer la totalit des
pages disponibles sur un site.
Depuis novembre 2006, le protocole Sitemaps sest ouvert aux autres moteurs de
recherche tels Yahoo!, Live.com ou encore des moteurs minoritaires comme Ask.com
ou Exalead.
Le principe du protocole Sitemaps
Quand les pages de votre site sont modies, ou quil y a de pures crations, le chier
Sitemap en informe les diffrents moteurs qui peuvent alors crawler vos pages, et les
indexer en fonction de leurs qualits.
Sans le chier Sitemap, vous seriez oblig de soumettre les pages de votre site web
chaque moteur. Donc recourir Sitemap vous allge dune telle action et vous fait
gagner du temps.
Pour rsumer, les avantages du protocole Sitemaps sont dans un premier temps, la sim-
plication du travail de rfrencement car toute modication apporte votre site sera
signale par ce chier aux robots Google, Yahoo !, MSN. Dans un second temps, la
ractivit apporte dans lanalyse de vos pages.
Quand votre site est ractualis, pensez en faire de mme du chier Sitemap.
La mise en place de Sitemaps
La mise en place de Sitemaps repose sur la cration dun chier XML dont le code est
le suivant :
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
Si vous ntes pas familier dun tel code ou en cas de doute, le contenu de chaque balise
est prcis dans le tableau ci-aprs :
Lors de llaboration de votre chier Sitemap vous devez respecter les rgles sui-
vantes :
Ne rpertoriez pas plus de 50 000 URL dans votre chier. Si votre site propose
plus de 50 000 pages indexables, il vous faudra utiliser plusieurs chiers XML
diffrents.
Tableau 15.1 : Le contenu des balises du fichier Sitemaps
Balise Description
<urlset>
Obligatoire Dnition de la liste des pages listes dans le Sitemaps. Cette
balise contient toutes les autres balises de description de page.
<url>
Obligatoire Dnition dune page prcise. Cette balise contient lensemble des
balises de description dune page prcise.
<loc>
Obligatoire URL de la page lister. Cette URL doit imprativement contenir le
protocole daccs la page (http://, https://) et contenir moins de
2 048 caractres.
<lastmod>
Optionnel Date de dernire modication de la page, prsente sous le format
YYYY-MM-DD.
<changefreq>
Optionnel Frquence de modication de la page. Cette donne permet Goo-
gle de savoir quelle est la frquence optimale de visite par moteurs.
Les valeurs suivantes peuvent tre dnies : always (le document
est diffrent chaque fois que la page est afche), hourly (toutes
les heures), daily (tous les jours), weekly (toutes les semaines),
monthly (tous les mois), yearly (tous les ans), never (aucun
changement sur la page, page darchive), ces valeurs ne sont que
des "recommandations" pour les robots des moteurs de recherche,
et non pas des instructions strictes. Les pages notes hourly
peuvent tre visites de manire beaucoup moins frquentes,
et les pages notes yearly peuvent tre visites bien plus rgulire-
ment par les moteurs de recherche. Ce code ne reste donc quune
indication !
<priority>
Optionnel Dnition du niveau dimportance dune page par rapport aux autres
pages du site. Cette balise doit contenir une valeur comprise entre
0.0 (page la moins importante) et 1.0 (valeur la plus importante). La
priorit dterminera, entre autres, quelle frquence le robot de
rfrencement doit vrier les pages dnies comme importantes.
Cette balise na aucune incidence sur le positionnement dune page
dans les rsultats des moteurs.
Votre chier nal ne doit pas excder les 10 mgaoctets. Toutefois, an dconomi-
ser la bande passante en cas de consultation rgulire des Sitemaps, il est possible
de compresser ces chiers au format gzip.
Votre chier Sitemap ne peut lister que des pages qui sont dans le mme domaine/
sous-domaine/dossier que lui.
Ainsi, si un chier sitemaps.xml est hberg sur le dossier http://www.exemple.com/folder,
il pourra rpertorier la page http://www.exemple.com/folder/newpage3.html, mais pas la
page http://www.exemple.com/images/gallery.html.
Cette dernire devra tre indexe dans un autre chier Sitemaps.
Les URL des pages indexer (balise <loc>) doivent imprativement tre encodes en
UTF8 et les caractres spciaux qui les composent doivent tre remplacs par leur qui-
valent HTML suivant le tableau suivant :
Linscription au service Google Outils pour Webmaster
Connectez-vous votre compte Google Outils pour Webmaster, ou crez-le en vous
rendant ladresse suivante: https://www.google.fr/webmasters/tools et crez votre
compte Google ou gmail si vous nen possdez pas dj un.
Une fois connect sur le Google Sitemaps (voir Figure 15.7), Google doit vrier
lappartenance du site web tudier :
Saisissez lURL du site que vous voulez suivre laide de Google Sitemaps dans le
champs Ajouter un Site et validez-la laide du bouton OK.
Google ajoute votre site la liste des sites suivis. Pour suivre les statistiques du site via
Google Sitemaps, vous devez nanmoins vous identier en tant que webmaster du site
en question.
Cliquez sur le lien Vrier prsent en vis--vis du nom du site que vous venez de saisir.
Plusieurs mthodes de vrication de lappartenance du site sont disponibles.
Tableau 15.2 : Encodez les pages de votre site
&
&
'
"
"
<
<
>
>
Sur la page de vrication dappartenance du site, slectionnez la mthode que vous
souhaitez utiliser pour vous authentier :
Ajouter un Meta Tag. Ncessite que vous ajoutiez une balise META dans le code
source de la page daccueil de votre site. Cette balise est prsente sur la page vri-
cation aprs slection de loption Ajouter un Meta Tag.
Enregistrer un chier HTML. Ncessite que vous criez un document HTML
vide possdant exactement le nom fourni par Google. Ce nom prcis est fourni en
bas de la page de vrication du site.
Une fois le META ou le chier de vrication cr, cliquez sur le bouton Vrier an
que Google puisse sassurer que le site en question vous appartient bien. Cette vrication
effectue, vous pouvez alors soumettre vos Sitemaps au service Google.
Dclarez vos fichiers au protocole Sitemaps
Une fois votre identication valide, vous pouvez dclarer vos chiers Sitemaps sur le
site de Google en suivant les tapes ci-aprs :
1. Dans la liste des sites grs dans votre compte Sitemaps, cliquez sur le lien Ajouter
correspondant votre site (voir Figure 15.8).
2. Sur la page de dclaration du chier Sitemaps, slectionnez loption Ajouter un
plan sitemap Web gnrique, puis compltez le champ LURL de mon plan Sitemap
est avec ladresse de votre chier Sitemap.
Figure 15.7
Linterface Google
pour Webmaster.
3. Une fois ces champs renseigns, cliquez sur le bouton Ajouter un plan Sitemap Web
gnrique (voir Figure 15.9).
4. Le chier Sitemap est alors dclar Google. Celui-ci rsume lensemble des
chiers Sitemaps disponibles sur le site dans un tableau disponible en cliquant sur
le nombre de Sitemaps de la page daccueil du service.
Figure 15.8
Cliquez sur le lien
Ajouter.
Figure 15.9
Compltez ladresse du fichier Sitemap soumettre.
5. Il est possible dajouter un prol de site autant de chiers Sitemaps que ncessaire
son indexation complte. Cette opration sopre en cliquant simplement sur le
lien Ajouter prsent en haut du tableau de rsum des Sitemaps disponibles.
6. La gestion des donnes disponibles englobe les donnes sur les pages manquantes
et celles relatives aux mots cls (voir Figure 15.10).
Le service Google Sitemaps permet en effet daccder un certain nombre de statisti-
ques concernant les pages disponibles sur le site, les pages manquantes et les requtes
les plus pertinentes menant au site tudi.
En cliquant sur le nom dun site sur la page daccueil de Google Sitemaps, puis sur les
liens Diagnostic puis Exploration du Web dans le menu gauche de linterface, on
accde un tableau statistique complet. Il permet dafcher les pages pour lesquelles le
robot de Google a rencontr une erreur de type HTTP (404 document non trouv,
500 erreur serveur, ou autre).
Il est galement possible daccder la liste des pages non disponibles au moment du
dernier passage du robot (section Introuvable), tout comme la liste des pages dont
laccs est restreint.
Figure 15.10
Google propose
une interface listant
les erreurs rencontres
par le moteur sur vos
pages.
La page Statistiques / Requtes les plus frquentes permet dobtenir la liste des mots
cls sur lesquels le site est prsent et cliqu (voir Figure 15.11).
Deux autres types de statistiques sont prsents dans la rubrique Statistiques :
Statistiques relatives lexploration. Rsume les dernires analyses du robot
Google sur le site, listant les pages plus haut Page Rank et la proportion derreurs
rencontre par le robot.
Ce que voit Googlebot. Il dtaille les mots cls les plus prsents sur le site et sur les
liens qui pointent vers celui-ci.
De nombreuses autres fonctionnalits sont disponibles dans linterface Google Outils pour Webmaster,
et celle-ci senrichit tous les mois de nouveaux rapports. Un petit coup dil au blog officiel du service
vous aidera y voir plus clair : http://googlewebmastercentral.blogspot.com/.
Les techniques dexclusion dindexation
Il vous est possible dexclure lindexation de certaines donnes de votre site web en
ayant recours au chier Robots.txt.
Figure 15.11
Quels mots cls
ont utilis vos visiteurs
pour trouver votre
boutique.
Pourquoi exclure des pages de votre site des moteurs de recherche ? Simplement parce quelles ne
sont pas pertinentes et ne rpondent en rien aux ventuelles demandes des internautes. Par exem-
ple, les pages de conditions gnrales de vente seront rarement recherches via Google. Pensez ga-
lement retirer des moteurs de recherche les pages de votre interface dadministration qui pourraient
ventuellement tre localises par les robots.
Ce chier, plac au plus haut niveau du serveur hbergeant un site web est destin lis-
ter lensemble des chiers et dossiers qui ne doivent pas tre indexs ni parcourus par
les moteurs de recherche. La norme dnissant les chiers Robots.txt a t adopte en
juin 1994 par consensus entre les diffrents acteurs de la recherche sur Internet de lpo-
que. Elle reste toujours en application aujourdhui et est toujours comprise par les prin-
cipaux moteurs du Net (Google, Yahoo ! MSN).
Syntaxe du fichier Robots.txt
La syntaxe utilise pour la rdaction des chiers Robots.txt est simple. Elle comprend
uniquement deux commandes :
User Agent. Cette ligne dnit lidentiant (le user agent du robot parcourant votre
site) du moteur auquel sapplique le chier Robots.txt. Il est ainsi possible de d-
nir que certaines sections du site doivent tre ignores par Google mais peuvent tre
parcourues et indexes par MSN et Yahoo ! Pour appliquer une commande tous
les moteurs existants, le caractre gnrique * doit tre utilis.
Disallow. Permet de dnir le dossier ou chier qui ne doit pas tre index. Si plu-
sieurs dossiers ou chiers sont dans ce cas, on utilisera autant de lignes Disallow
que ncessaire.
Par exemple, pour empcher Google dindexer le dossier test dun site web, on crera
le chier Robots.txt suivant :
User Agent: googlebot
Disallow: /test
Pour empcher ce mme Google dindexer les dossiers test et archives, on rdigera le
chier de la faon suivante :
Disallow: /test
Disallow: /archives
Pour empcher tous les robots dindexation denregistrer les donnes du dossier beta,
on utilisera :
User Agent:*
Disallow: /beta
Enn, si seul Google est autoris indexer le contenu du dossier beta, on rdigera alors
le chier Robots.txt de la faon suivante :
User Agent:*
Disallow: /beta
Disallow:
Cette syntaxe, simple, demande tout de mme connatre les User Agent (ou identi-
ants) utiliss par les principaux robots dindexation. Les trois principaux moteurs
actuels rpondent aux User Agent suivants :
Google : googlebot/2.1 (http://www.google.com/bot.html)
MSN : msnbot/1.0 (http://search.msn.com/msnbot.htm)
Yahoo! Mozilla/5.0 (compatible ; Yahoo! Slurp ; http://help.yahoo.com/help/us/
ysearch/slurp)
Dautres User Agent, pour des robots dindexation moins rpandus, sont disponibles
sur le Web aux adresses suivantes :
www.jafsoft.com/searchengines/webbots.html#search_engine_
robots_and_others
http://en.wikipedia.org/wiki/User_agent
Mise en place du fichier
Une fois le chier Robots.txt cr avec ses rgles dexclusion, il convient de lhberger
la racine mme du site quil commente, de faon ce que son adresse nale soit
www.monsite.com/robots.txt.
Certains sites, comme Google Webmaster (http://www.google.com/webmasters/tools/),
possdent des outils permettant de vrier la bonne tenue dun chier Robots.txt. Ils
peuvent tre utiles an de sassurer que certaines sections indispensables dun site ne
font pas lobjet dune exclusion de la part du chier.
Pour tre au fait des dernires pratiques, tendances des moteurs de recherche, nhsitez pas consul-
ter des blogs tesl que Secrets2moteurs.com (catgories Actualits Google, Yahoo!, Microsoft/Live),
Webrankinfo.com, Abondance.com
16
Rfrencement payant
Google AdWords
Yahoo! Search Marketing
Microsoft adCenter
Loptimisation dune campagne de liens sponsoriss
Lautre facette du Rfrencement est le Search engine marketing ou rfrencement
payant. La slection de mots cls et leur association une annonce vous permet de
faire la publicit de votre boutique sur des sites forte audience tels que Google ou
Yahoo!
Vous payez uniquement quand un internaute clique sur votre annonce.
En grande majorit, ce modle est utilis pour renforcer les rsultats du rfrencement
naturel. La combinaison du rfrencement payant et naturel garantissant en effet la
meilleure visibilit de votre site.
De part sa facile mise en uvre, le rfrencement payant peut tre exploit pour mettre
en avant une promotion, pour appuyer le lancement dun nouveau produit ou tout sim-
plement pour assurer la prsence de votre site sur les moteurs de recherche lors de
priodes cls pour votre business.
Lvolution des rgles du rfrencement payant a balay les ides prconues selon les-
quelles une simple augmentation de votre budget journalier ou des enchres consacres
vos mots cls vous plaait en premire position des pages de rsultats. Le temps est un
alli de la performance dune campagne de liens commerciaux, dautant plus si une
telle campagne repose sur une structure pertinente.
Que vous souhaitiez mettre en place votre campagne de rfrencement payant sur Google,
Yahoo! Search Marketing (Y!SM) ou MSN, quelques pralables simposent avant
douvrir un compte et de dbuter la diffusion de vos annonces.
Quelques pralables
Ltude concurrentielle
Commencez dans un premier temps par raliser une tude concurrentielle. Vous devez
en effet connatre les annonceurs qui exploitent le rfrencement payant pour faire la
promotion de produits similaires aux vtres. Pour les identier, prenez 5 10 mots cls
qui vous viennent automatiquement lesprit pour dnir votre site, votre entreprise,
son secteur dactivit, son environnement.
Ralisez une recherche sur les moteurs o vous souhaitez ultrieurement lancer votre
campagne et notez les 3 annonceurs apparaissant en top position.
Quels sont les lments mis en avant dans leur annonce ?
Sagit-il de leur marque, des caractristiques produits, le prix pratiqu, les facilits de
paiement, la rapidit de livraison, les garanties ? Est-ce que lannonce diffuse est en
parfaite adquation avec lunivers du mot cl que vous avez tap ? tes-vous redirig
vers la bonne page du site web ?
En ralisant ce mini audit, vous identiez rapidement les forces et faiblesses de vos
concurrents. Dores et dj, vous pouvez :
dgager des pistes pour mettre en lumire vos produits ;
affronter vos concurrents ;
diffuser prochainement des annonces se distinguant de celles de vos concurrents et
vous donnant lopportunit de capter rapidement lattention de votre cible dinter-
nautes.
Prparez votre future campagne
Structurez dans un second temps votre future campagne. Il est en effet prfrable dy
avoir pens avant douvrir un compte, pour ne pas vous retrouver bloqu ltape de
rdaction de lannonce ou didentication des mots cls. Vous pourriez avoir reprendre
toutes les tapes de cration du compte, suite lexpiration de votre session.
Un compte de liens sponsoriss Google, Y!SM ou MSN peut se prsenter dans le mme
esprit que le schma de la Figure 16.1 : calqu sur larchitecture du site.
Pour mieux comprendre le schma de la Figure 16.1, imaginez que le site Leba-
gage.com souhaite exploiter une campagne de liens sponsoriss an daugmenter ses
ventes en ligne de bagages et valises. En sinspirant du modle de la Figure 16.1, la
329 RFRENCEMENT PAYANT
structure de son compte devrait reposer sur des campagnes ddies chaque famille de
produit, scindes en groupes dannonces consacrs chaque sous-famille de produits.
Une annonce spcique devrait accompagner ces groupes dannonces, selon lexemple
qui suit :
Campagne A : Bagages
1. Groupe dannonce 1 : Bagage collection A > Mots cls : bagage haut de gamme,
bagage luxe
2. Groupe dannonce 2 : Bagage collection B > Mots cls : bagage petit prix,
bagage pas cher
Exemple dannonce pour le groupe dannonces 1 :
Titre : le site du bagage
Description : Bagage.com : livraison sous 48 h. Prparez votre voyage serei-
nement !
URL : www.lebagage.com
Figure 16.1
Un modle de structure
de campagne en rfren-
cement payant.
Compte
Campagne
A
Campagne
B
Campagne
C
Groupe
d'Annonce 1
Mot Cl
Mot Cl
Groupe
d'Annonce 1
Mot Cl
Mot Cl
Groupe
d'Annonce 1
Mot Cl
Mot Cl
Groupe
d'Annonce 2
Mot Cl
Mot Cl
Groupe
d'Annonce 2
Mot Cl
Mot Cl
Groupe
d'Annonce 2
Mot Cl
Mot Cl
Campagne B : Valises.
1. Groupe dannonce 1 : Valises collection A > Mots cls : valise achat, valise
acheter
2. Groupe dannonce 2 : Valises collection B > Mots cls : valise promotion, valise
rigide
Titre : Valises de haute qualit
Description : Achetez votre valise sur Le Bagage.com livraison sous 48 h
Campagne C : Location de valises.
1. Groupe dannonce 1 : Location Bagages > Mots cls : louer bagage, location
bagage
2. Groupe dannonce 2 : Location Valises > Mots cls : louer une valise, service de
location de valise
Titre : Valises de haute qualit
Description : Louez votre valise sur Le Bagage.com livraison sous 48 h.
Un autre schma peut tre envisag pour structurer sa campagne. Il repose sur une
architecture plus gnrique, sadaptant tout secteur dactivit.
Il revient concevoir sa campagne par grandes thmatiques :
1 campagne Marque. Vous prvoyez un groupe dannonce avec les rdactions
classiques de votre marque, par exemple maboutique , ma boutique Un
second groupe dannonce peut se rapporter au nom de domaine de votre site.
Vous achetez les diffrentes rdactions possibles de lURL de votre site :
www.maboutique.net, ma boutique.net, http www ma boutique net, mabouti-
que.net
1 campagne Termes Gnriques. Il sagit de consacrer chaque groupe dannonce
aux grandes familles de produits que comporte votre site.
1 campagne Golocalisation. Vous associez vos termes gnriques les pays,
dpartements, rgions, villes o vous tes susceptibles de gagner des clients. Allez
le plus loin possible dans le dtail. Si par la suite, un groupe dannonce relatif une
association gographique napporte pas le retour sur investissement attendu, dun
simple clic vous pourrez mettre en veille ce groupe.
1 campagne Cible. Si vous avez des cibles distinctes (hommes, femmes, CSP+, tu-
diants, adolescents, seniors) vous pouvez concevoir des groupes dannonces
adapts.
1 campagne vnements. Au regard de vos offres promotionnelles ou en fonction
de la saisonnalit, pensez crer des groupes dannonces appropris avec par exem-
ple un champ lexical pour les ftes de n danne, Nol, le Nouvel An, la Saint-
Valentin, les ftes des pres ou des mres.
Aborder de la sorte votre future campagne est un gage de qualit. En regroupant les arti-
cles dune mme famille de produits et en y associant par la suite une annonce en
corrlation, vous mettez en place un compte quilibr, homogne et logique.
Le matre mot dans llaboration dune campagne de liens sponsoriss est la pertinence.
Une parfaite adquation doit exister entre les mots cls que vous allez choisir, les
annonces auxquelles ils seront rattachs et les pages de votre site vers lesquelles vous
dirigez votre trac.
Pour crer une telle adquation, faites reposer la structure de votre compte sur larchi-
tecture de votre site. Si ce dernier comporte un onglet par famille de produits, vous
devez crer autant de campagne que ncessaire.
Une campagne est un regroupement dun plusieurs groupes dannonces. Il sagit du premier niveau
de votre compte Google, Y!SM o vous pourrez entre autres dfinir le budget journalier dpenser.
Une fois vos campagnes identies, scindez chacune delles en groupes dannonces (la
runion de vos annonces et mots cls) qui correspondent aux sous-familles de produits
prsentes dans longlet de votre site. Soyez le plus prcis possible.
Commencez identier quelques mots cls gnriques pour chaque groupe dannon-
ces. Vous pouvez toujours vous aider dun gnrateur de mots cls en vous reportant
ladresse suivante : www.indicateur.com/Doc/gnrateurs_mots_cles.asp.
Associez votre liste de mots cls une annonce compose dun titre de 25 caractres,
dune description de 70 caractres et dune URL Une annonce est la combinaison
dun titre servant daccroche pour capter lattention des internautes, dune description
prsentant de faon concise votre produit et dune URL guidant lintress la page de
votre site contenant linformation, lobjet recherch.
Vous avez maintenant tous les lments en main pour ouvrir vos comptes Google,
Y !SM et MSN !
Google AdWords
Google propose un programme de rfrencement payant nomm Google AdWords qui
est ce jour le plus plbiscit par les annonceurs.
Crer son compte
O se rendre ?
Rendez-vous tout dabord sur la page daccueil de loffre Google AdWords dont
ladresse est www.google.fr/intl/fr/ads/. Lensemble des solutions de publicit en ligne
proposes par Google y est dtaill (voir Figure 16.2).
Figure 16.2
Les programmes Google AdWords et Google AdSense.
Cliquez sur le lien Google AdWords, prsent en haut de la page, an d'entrer dans le
systme AdWords.
La premire tape est l'inscription. Cliquez sur le bouton Inscription prsent en haut
droite de la page. Vous rentrez dans l'univers du rfrencement payant (voir
Figure 16.3).
Suivez dsormais pas pas les phases de cration de compte.
Cration pas pas
Google propose deux modes pour ouvrir un compte : le Mode simpli et le Mode stan-
dard. Nous excluons directement le premier qui se rapporte lhypothse o vous
nauriez faire la promotion que dun seul produit. Avec le Mode simpli, les fonc-
tionnalits de votre compte sont sommaires et ne permettent pas de crer plusieurs
campagnes ni de lancer des tests dannonces.
Par consquent, procdez louverture de votre compte en slectionnant dition standard,
puis cliquez sur Continuer.
La deuxime tape consiste slectionner votre cible. Souhaitez-vous toucher des
internautes parlant exclusivement le franais ou dautres langues ? Prcisez-le dans
lencadr Cibler les clients par langue en choisissant une plusieurs langues (voir
Figure 16.6).
Figure 16.3
On se lance.
Vous devez par la suite opter pour un ciblage gographique. Concrtement, votre cam-
pagne de liens sponsoriss doit-elle tre diffuse lchelle nationale (1
re
option) ?
rgionale (2
me
option) ? ou dans une zone trs spcique que vous dterminerez vous-
mme (3
me
option) ?
Figure 16.4
Loption dition standard.
Figure 16.5
Ciblage linguistique:
3 niveaux de ciblage
gographique.
Pour poursuivre, cliquez sur Continuer.
ce stade, vous devez golocaliser votre campagne par pays, en slectionnez un ou
plusieurs, tout dpend du rayonnement que vous souhaitez donner votre activit. Si
vous choisissez des pays trangers, votre site doit comporter un mode de livraison et
une tarication appropris.
Figure 16.6
Golocalisation par pays.
Figure 16.7
Rdigez votre annonce.
Il existe diffrents modles dannonces prsents ultrieurement dans la partie consa-
cre la gestion de votre compte. Pour lheure, utilisez le modle le plus courant
intitul Annonce illustre.
Lannonce illustre consiste en :
1 titre de 25 caractres maximum, espaces inclus ;
2 lignes de description de 35 caractres maximum, espaces inclus ;
1 URL afcher avec votre annonce. Il sagit de ladresse du site web vers lequel
linternaute accdera. 35 caractres maximum sont autoriss. Il est noter que dans
le cadre dun site de e-commerce, il est recommand dutiliser lURL simple du site
web en tant quURL afcher. Ainsi linternaute mmorise plus aisment le nom
de votre site ;
1 URL de destination qui est la page relle du site sur laquelle linternaute va tre
dirig. Cette URL ne sera pas visible dans lannonce diffuse sur les pages de rsul-
tats de Google. Elle consiste en ladresse prcise du site o vous menez linternaute
an quil trouve exactement le produit ou service mis en avant dans votre annonce.
Avant de passer ltape de slection des mots cls, vriez ltat nal de votre
annonce en regardant en haut de la page laperu dannonce reprenant titre, description,
URL de diffusion et de destination.
Figure 16.8
Le choix des mots cls.
En vous appuyant sur la structure de votre site, listez les mots cls importants pour cha-
que page Assurez-vous, laide dun outil gnrateur de mots cls, que les termes
slectionns ont t lorigine de trac les mois prcdents sur le rseau Google.
En reprenant les conseils noncs dans la partie introductive "Prparez votre future
campagne", organisez vos mots cls par thmatiques.
ce stade de la cration de votre compte AdWords, vous naurez saisir que les mots
cls de votre premier groupe dannonces les uns en dessous des autres (se confrer
la Figure 16.8).
Il est conseill de saisir 16 20 mots cls-expressions par groupe dannonces. Au-del,
votre liste risque dtre trop tendue et de perdre en prcision.
Sachez en outre quintgrer sa campagne des mots cls exclusivement gnriques est
une erreur. Il est vrai que pour certains secteurs dactivit, les termes gnriques appor-
teront le plus gros du trac et des conversions. Pour autant, lajout dexpressions spci-
ques (long tail) donnera lopportunit de rfrencer votre site partir de mots cls
cibls ne souffrant pas de la concurrence et saccompagnant donc denchres au cot
par clic (CPC) abordables.
De plus, entre un internaute qui ralise une recherche partir de mots cls vagues et un
internaute qui qualie sa recherche par une expression spcique, il y a plus de chances
que ce dernier clique sur votre annonce (correspondant sa recherche) et ralise lacte
dachat attendu.
Vous laurez donc compris, nhsitez pas exploiter au maximum les longues expressions
en les associant des expressions gnriques mais pertinentes, cibles par rapport votre
secteur dactivit. Vous aurez beaucoup plus de chances de tendre vers un trs bon ROI.
Figure 16.9
Dterminez devise,
budget quotidien
et cot par clic.
La sixime tape de cration de votre compte AdWords correspond au choix de la
devise dans laquelle vous prvoyez de rgler les factures Google. Le deuxime champ
remplir se rapporte au budget quotidien que vous tes prt payer par jour. Le calcul est
simple, vous savez exactement la somme que vous pouvez consacrer mensuellement
Google pour rfrencer votre site. Pour dnir votre budget quotidien, il vous suft de
diviser cette somme par 30 (toute donne saisie est comprise hors taxes).
Cette somme nest pas dnitive. Une fois votre compte lanc, vous pouvez toujours la
faire voluer la baisse ou la hausse en fonction des retombes de votre campagne.
La dernire donne prciser est celle du cot par clic maximum que vous tes prt
payer pour vos mots cls, chaque fois quun internaute cliquera sur une de vos annonces.
La cration de votre compte est presque nalise. En cliquant sur Continuer une page
rcapitulative des donnes saisies prcdemment va apparatre. Veillez ce quaucune
erreur ne se soit insre. Si tout est correct, cliquez sur Continuer vers linscription.
Google vous demande alors de choisir e-mail et mot de passe an de pouvoir vous connec-
ter ultrieurement votre interface. Une fois le code de scurit recopi, cliquez sur Crer
un compte. Un e-mail de notication va vous tre envoy an de contrler une nouvelle
fois toutes les informations que vous avez rentres. En cliquant sur le lien insr dans
cet e-mail de validation, la cration de votre compte Google AdWords est ofcialise.
En utilisant vos codes daccs, rendez-vous sur votre compte AdWords. Sur la premire
page Instantan du compte, vous apercevrez un message dalerte : "Envoyez vos infor-
mations de paiement". Google AdWords est un service payant exigeant par consquent
la saisie de vos coordonnes bancaires pour procder la diffusion de vos annonces.
Pour raliser cette opration :
1. Allez vers la page intitule Mon Compte,
2. Cliquez sur Prfrence de facturation.
3. Remplissez le champ Facturation et paiement, en prcisant mthode et mode de
paiement (postpaiement, carte de crdit).
4. Remplissez galement le champ Dtails de paiement relatif aux donnes de votre
carte de crdit et ladresse de facturation.
5. le dernier champ concerne les informations sur la TVA.
Trois options de paiement vous sont proposes. Si vous optez pour le postpaiement, les
frais de rfrencement devront tre acquitts postrieurement aux clics des internautes.
Avec le mode de prpaiement, vous constituez une rserve sur laquelle seront dduits
les clics. Une rserve est obligatoire. Vous devrez anticiper lpuisement de cette
rserve et compter facilement 7 jours ouvrs entre lenvoi de votre virement bancaire et
son enregistrement. Vous vous exposez donc de possibles mises hors ligne de votre
campagne, une potentielle perte dhistorique et de chiffre daffaires.
La troisime option de paiement est le dbit direct.
Grer son compte.
Linterface Google AdWords est rgulirement actualise an de proposer ses utilisa-
teurs une navigation plus intuitive, de nouvelles options pour mieux grer les campagnes et
en analyser les performances.
Globalement cette interface comporte quatre parties : une ddie la gestion des cam-
pagnes, une aux rapports, une loutil Google Analytics et la dernire englobant infor-
mations de facturation, de connexion votre compte.
La partie Gestion de campagnes.
LInstantan du compte est la premire page de linterface sur laquelle vous tes dirig
lors de votre connexion. Elle consiste en une photo un moment des donnes de votre
campagne, de ltat budgtaire de votre compte. Seront rassembles ce niveau, les
informations relatives vos annonces (tournent-elles leur maximum en fonction du
budget mis en place ?), ltat de vos campagne (actives, mises en veille, supprimes ?),
la proportion du budget dpens
Le deuxime lien de cette partie sintitule Rcapitulatif de campagne : cest ce niveau
que la gestion de votre campagne sopre. Dans un premier temps, vous avez un tableau
avec les statistiques de votre campagne, savoir le nombre de clics, le nombre
dimpressions gnres, le CTR de votre campagne, son CPC moyen et le cot global.
Figure 16.10
Len-tte de la page "Rcapitulatif de campagne".
Le CTR dune campagne, ou "click through rate" est le ratio clics sur impressions exprim en pourcen-
tage. Il tmoigne dun bon trafic quand il est suprieur 1 %. En de, il rvle que vos mots cls
entranent de nombreuses impressions (apparitions de votre annonce sur la page de rsultat Google)
mais une faible proportion de clics sur vos annonces. Dans une telle hypothse, quelques modifica-
tions doivent tre envisages, elles sont numres la fin du chapitre dans la partie relative lopti-
misation dune campagne de liens sponsoriss.
Sur cette page, il vous est possible de crer de nouvelles campagnes cibles soit par
mots cls (conguration classique dune campagne de liens commerciaux sur Google),
soit par sites. Dans cette dernire hypothse, vous allez crer une campagne en dtermi-
nant les sites du rseau de contenu Google sur lequel vous souhaitez voir apparatre vos
annonces. Si vous ne savez pas quel site retenir, Google vous proposera de slectionner
un certain nombre de sites rassembls par thmatiques (shopping, photos et vidos,
sport). Concernant la tarication, vous avez la possibilit dtre factur par cot xe
pour 1 000 impressions (CPM), ou alors au CPC.
Le rseau de contenu : votre annonce peut tre diffuse sur un site dinformations tel que LExpansion
(voir Figure 16.11). Le moteur Google tudie la smantique de vos mots cls, identifie la thmatique de
vos campagnes, et place vos annonces sur un site dont les articles sont en relation avec votre activit.
Figure 16.11
Le site LExpansion,
fait partie du rseau
de contenu Google.
Si vous souhaitez accder au dtail de vos campagnes, cliquez sur le nom de votre cam-
pagne. Vous accdez une premire page nomme Campagne o vous tes mme
den crer de nouvelles, den mettre en veille, den supprimer ou den modier les para-
mtres. Cest ce niveau que vous trouvez deux liens dterminants pour afner le trac :
Mots cls exclure pour la campagne et Sites exclure.
Pour aller plus loin dans la lecture des donnes de votre campagne, il vous suft de cliquer
sur un des noms des groupes dannonces cres pour accder au listing de mots cls, et
annonces associes.
AFFINER SON TRAFIC EN EXPLOITANT LES OPTIONS DE CIBLAGE
Concernant vos mots cls, trois ciblages peuvent tre appliqus. Ils peuvent tre tests
en mme temps. Trac, cot dacquisition ou volume de vente peuvent diffrer dun
ciblage lautre.
Ciblage large (broad match). Option de ciblage par laquelle la diffusion de vos
annonces se fait la plus large possible. Quand la requte de linternaute contient un
des mots cls de lexpression achete, la diffusion de votre annonce sopre auto-
matiquement. Si, par exemple, le mot cl achet est "livre jeunesse" votre annonce
sera diffuse si la requte de linternaute est "acheter livre". Laspect positif de ce
ciblage est que vous captez le maximum de trac et de requtes des internautes. Son
aspect ngatif est que le trac gnr peut manquer de pertinence et se rvler on-
reux. Ayez recours au mot cl exclu, an dencadrer au maximum votre trac.
Ainsi, si votre service ne couvre pas les livres doccasion, vous pouvez exclure le
terme "occasion" de votre campagne an de bloquer lafchage de vos annonces
pour une requte de linternaute du type "livres dhistoire occasion".
Ciblage expression (phrase match). Si vous voulez cibler votre mot cl "livre
doccasion" en phrase match, il vous suft dencadrer cette expression par deux
guillemets "livre doccasion". Quand la requte de linternaute contient tous les
termes de lexpression achete et en respecte lordre, mme sil intgre un terme
supplmentaire dans sa requte, avant ou aprs lexpression, votre annonce sera dif-
fuse. Si, par exemple, vous avez dans votre listing de mots cls, lexpression "livre
doccasion" et que la requte de linternaute est "acheter livre doccasion", votre
annonce sera diffuse. Elle ne le sera pas si la requte est "acheter sans frais un livre
doccasion"parce que llment nouveau dans la requte de linternaute, perturbe
lordre des termes que comprend votre expression.
Ciblage exact (exact match). La diffusion de votre annonce sopre si et unique-
ment si linternaute a pour requte votre mot cl ou expression. Cest le ciblage le
plus restrictif car le plus cibl. Il se matrialise par deux crochets encadrant votre
expression : [livre doccasion].
Un mot cl nest rien sil nest pas reli une annonce adapte.
ACCROTRE SA VISIBILIT EN EXPLOITANT DIVERS MODLES DANNONCES
Google propose cinq modles dannonces :
Lannonce textuelle. Cest la version classique avec titre de 25 caractres et
description de 70 (voir Figure 16.12).
Lannonce illustre. Elle est diffuse exclusivement sur le rseau de contenu sous
la forme dune bannire, dun skyscraper Les formats sont tous dtailles sur
linterface.
Lannonce localise. Elle est diffuse sur Google Maps, sous forme dun petit
texte qui apparat quand un internaute fait une recherche dans un rayon gogra-
phique prcis. Une che indiquera o votre entreprise est situe (voir
Figure 16.13).
Figure 16.12
Une annonce textuelle.
Lannonce textuelle pour mobile. Elle consiste en une annonce textuelle trs concise
avec un titre et une description de 18 caractres maximum. Elle saccompagne soit
de votre numro professionnel, soit dun lien redirigeant vers votre page web adapte
au format mobile.
Lannonce vido. Apparat sur le rseau de contenus et consiste en une image statique
sur laquelle linternaute doit cliquer pour en visualiser le contenu.
Si vous souhaitez tester de nouvelles versions dannonces suivez ces quelques conseils
(sappliquant autant aux rgies publicitaires Google, Y!SM et MSN) :
Nutilisez jamais de superlatifs, soyez concis, dynamique.
Figure 16.13
Lannonce localise est diffuse sur Google Maps.
Mettez en avant tous les avantages de votre offre, et utilisez des "call to action",
cest--dire des verbes daction (achetez, dcouvrez, optez) incitant les internau-
tes dcouvrir le produit, lacheter, donc slectionner votre annonce pour se
rendre sur votre site.
Nutilisez jamais le terme "clic" ou "ici". Il est implicite que linternaute doit
cliquer sur votre annonce pour poursuivre ou concrtiser sa recherche. Ce nest
donc pas une information pertinente. Ainsi les textes "Dcouvrez notre gamme de
produits en cliquant ici" ou "Dcouvrez nos produits en un seul clic" ne seront
pas valids.
Intgrez votre mot cl votre titre ou description et optez pour la fonction insertion
keyword {Keyword : Texte par dfaut}, plus amplement prsente dans le chapitre
relatif la gestion de campagne Y!SM.
Vous avez le droit dutiliser un point dexclamation dans votre annonce. De
mme pour mettre en valeur un terme, vous pouvez changer son initiale par une
majuscule.
Redirigez votre trac sur la page de votre site comportant llment recherch.
Si les pages de votre site ne sont pas assez explicites, un page datterrissage peut
tre cre avec une redirection vers votre site an que linternaute concrtise son
achat.
Assurez-vous que tout message publicitaire diffus soit clair et prcis quant aux biens vendus, services
proposs. Vos textes ne doivent pas tromper linternaute. Celui-ci peut en effet invoquer les disposi-
tions du code de la consommation en cas de pratiques mensongres, par exemple larticle L121-1
rendant rprhensibles les fausses informations concernant les coordonnes, le prix.
Pour connatre linuence de vos mots cls et annonces sur le trac drain vers votre
site, la deuxime section de votre interface met votre disposition diffrents rap-
ports.
Figure 16.14
Art.L 121-1 du code de la consommation.
La partie Rapports
En cliquant sur longlet Rapports vous tes redirig vers le listing des quinze derniers
rapports gnrs. Cette page comprend un lien pour congurer vos rapports selon le
modle souhait.
Google met votre disposition 9 types de rapport allant de lanalyse des mots cls,
des annonces jusqu la performance des sites slectionns dans le cadre dune cam-
pagne par site. Les rapports peuvent tre consults sous format Excel, CSV, TSCV,
XML. Vous pouvez dterminer une frquence de cration de rapports et notier leurs
disponibilits par e-mail.
Le rapport nomm Performance de la requte de recherches est trs utile pour afner le
trac de vos campagnes. En fonction des mots cls achets et des ciblages appliqus
(ciblage large ou expression), vous savez exactement quelle a t la requte de linter-
naute pour accder votre site.
Les trois colonnes vrier sur ce rapport sont la colonne groupe dannonces, celle sur
la requte de recherche, et celle sur le type de ciblage des requtes de recherches.
Pour avoir une meilleure lecture de ce tableau, mettez en place un ltre automatique et
dans la colonne relative au type de ciblage, liminez toutes les lignes qui comportent la
mention Exact parce que dans cette hypothse, linternaute a effectu sa recherche
partir dune expression identique celle prsente dans votre campagne.
Vous devez vous concentrer uniquement sur les requtes en ciblage large ou expression
et en fonction des donnes qui apparaissent dans la colonne Requte de recherche. Vous
dcidez soit dajouter le mot cl ou lexpression mentionne, soit de lexclure. Un tel
tableau vous permet dacheter des expressions plus cibles et dafner votre trac en
lencadrant par des termes exclus.
La partie Google Analytics
Google vous propose dimplmenter gratuitement sur votre site Google Analytics.
Il sagit dun support danalyse utile identiant les pistes exploiter pour gnrer un
trac plus rentable.
Ds que votre code de tracking Google Analytics est intgr chacune de vos pages de
site, loutil centralise lensemble des statistiques de vos campagnes publicitaires (cam-
pagne de rfrencement payant, e-mailing, bannires).
Dans le cadre dune campagne de liens sponsoriss, Google Analytics relvera les
pages les plus frquentes de votre e-boutique. Assurez-vous que vous exploiter le
maximum de mots cls ou dexpressions traduisant le contenu de telles pages. Si ce
nest pas le cas, ajoutez tous les termes ncessaires votre compte Google AdWords en
les reliant aux URL de redirection desdites pages. Vous devriez augmenter votre taux de
frquentation et surtout le retour sur investissement.
Vous trouverez sur cette plate-forme des rapports indiquant la valeur de votre panier
moyen, le nombre de vos transactions et leur source (identication des visiteurs ayant
pass une commande en fonction de leur langue, de leur localisation, du moteur utilis se
rendre sur votre site). Reportez-vous la premire partie du Chapitre 13 pour connatre
les statistiques prsentes sur cet outil de suivi de trac.
Google Analytics vous offre une vue densemble du trac de votre site en terme de
pages vues, de temps moyen de frquentation, de visiteurs uniques (voir
Figure 16.15).
La partie Mon Compte
La quatrime section de linterface Google AdWords est consacre au rcapitulatif de
facturation (possibilit de tlcharger et imprimer vos factures) et vos Prfrences
de facturations qui reprend tous les paramtres de paiement. Le lien Accs vous permet
de vrier vos codes de connexion. Si vous souhaitez les modier cliquez sur le lien
Prfrences de compte.
Pour attirer plus dinternautes sur votre site vous pouvez exploiter le rseau Yahoo! en
ouvrant un compte auprs de cette rgie publicitaire.
Figure 16.15
Lanalyse de la frquentation de votre site par moteur de recherche.
Yahoo! Search Marketing
En 2007, Y!SM a inaugur sa nouvelle interface PANAMA introduisant plus de rac-
tivit dans la gestion de campagnes de liens sponsoriss.
Si jusqu la premire moiti 2007, lannonceur consacrant la plus haute enchre pour
un mot cl, prenait automatiquement la premire position des liens sponsoriss, ce
modle est dsormais rvolu.
Crer son compte
O se rendre ?
Pour ouvrir un compte Yahoo! Search Marketing (Y!SM) rendez-vous ladresse :
http://searchmarketing.yahoo.com/fr_FR/arp/srch_choose.php?o=FR0094.
Si on opte pour la campagne assiste, il est demand de prciser le march sur lequel on
souhaite lancer la campagne, donner des informations sur la proposition ditoriale que
lon attend (budget, ides de mots cls, les points importants du site, les zones gogra-
phiques o lon souhaite que soient diffuses les annonces) et les informations de factu-
ration.
Si lon opte pour la solution "self serve", en cliquant sur Dmarrer maintenant on se
lance dans llaboration de sa campagne.
Suivant la priode de lanne laquelle vous dcidez de souscrire, un crdit de 50
vous est offert.
Cration pas pas
La cration dun compte Y!SM est assez rapide puisquelle ncessite de suivre six tapes
seulement.
1. Choisissez un march et un fuseau horaire (voir Figure 16.16).
2. Prcisez le ciblage gographique de votre clientle : souhaitez-vous lancer votre
campagne une chelle nationale, rgionale ou pour une ville donne ?
3. Rentrez vos mots cls les uns en dessous des autres. Loutil Y!SM vous propose
dautres variantes que vous ajoutez loisir votre listing (voir Figure 16.17).
4. Dnissez votre budget car comme son nom lindique vous allez lancer une campa-
gne de liens payants. Il sagit ici de prciser votre limite de dpense journalire et
lenchre maximale que vous tes prt payer par clic (Voir Figure 16.18).
5. Rdigez votre annonce en saisissant un titre de 60 caractres maximum, une
description de 70 caractres maximum et lURL de votre site (voir Figure 16.19).
Figure 16.16
Dbutez louverture
de votre compte Y!SM.
Figure 16.17
Votre liste de mots cls doit tre saisie.
Figure 16.18
La dfinition de votre budget journalier et de votre CPC maximum.
Figure 16.19
Rdigez votre annonce
en mettant en avant la
spcificit de votre offre.
6. Vriez les donnes saisies et mentionnez les futurs codes de connexion votre
interface. Validez et le tour est jou ! (voir Figure 16.20).
Grer sa campagne
Linterface PANAMA se dcompose en quatre sections :
un tableau de bord ;
les donnes et la gestion de vos campagnes ;
une mise votre disposition des diffrents rapports ;
une dernire section nomme "Administration"qui reprend les informations gnrales
de votre compte et de votre budget.
Figure 16.20
Ltape finale
Section Tableau de bord
Dans sa partie gauche, il comprend toutes les alertes ditoriales et budgtaires. Si vous
voulez en connatre la teneur, il vous suft de cliquer sur le lien de lalerte pour tre
redirig vers la partie de votre campagne qui pose problme. noter, le lien Prfrences
en haut de la page de votre interface (prs du lien Connexion). Il vous alerte en temps
rel des dysfonctionnements de votre compte (puisement du solde, mots cls refuss,
annonces en attente de validation) par le biais dun e-mail.
Dans sa partie droite, vous avez un rcapitulatif des donnes du trac de vos campagnes
et des conversions (si vous avez lanc loutil de traking, Conversion counter). cet
emplacement, vous trouvez aussi une synthse des donnes de votre compte (combien
de mots cls vous exploitez, le budget journalier mis en place, le solde restant, et le
nombre de jours avant puisement de ce solde).
En bas de page, un tableau rsume par campagne cre les donnes globales du trac
gnr (voir Figure 16.21).
Figure 16.21
Le tableau de bord Y!SM.
Section Campagnes
Longlet Campagnes rassemble les donnes pour crer ou faire voluer les campagnes
existantes ; celles relatives au statut ditorial de toutes nouvelles soumissions de mots
cls ou annonces (en attente de traitement/rejets avec explication donne).
Au dernier trimestre 2008, le groupe Y!SM a lanc une nouvelle tarification pour son programme
Search Marketing. Le systme de dtermination denchre repose sur le nombre dannonceurs ench-
rissant sur le mme mot cl, sur lenchre minimale moyenne de ce mot cl et sur lindice de qualit
des annonces de votre campagne Y!SM. Ainsi, si lenchre minimale du mot cl que vous achetez est
en dessous de lenchre minimale moyenne, votre mot cl risque de se retrouver inactif. Vous rece-
vrez alors une alerte et aurez environs trois jours pour modifier si vous le souhaitez le cot par clic
minimal. Pour connatre les mots cls tombs inactifs, vous pouvez faire une recherche avance avec
le tableau de linterface se trouvant au niveau de longlet Campagne.
Le lien Importer donne la possibilit de convertir les campagnes Google au format
Y!SM. Une telle option permet de grer le mme contenu sur les deux rseaux sans
avoir procder une seconde saisie de lensemble des mots cls, annonces, URL,
enchres. Un des avantages, au-del du gain de temps, est de pouvoir tablir plus facilement
un comparatif sur les performances dun mot cl sur Yahoo! ou Google.
Avec linterface Panama et son option Day Parting il est dsormais possible de lancer
des campagnes, la date souhaite. Tout fait approprie pour un site de e-commerce,
une telle option permet de diffuser le jour J des annonces se rapportant une promotion
ou au lancement dun nouveau produit.
Comment activer cette option ?
Figure 16.22
Y!SM Recherche Avance Mots Cls Inactifs
1. Slectionnez la campagne pour laquelle une date dactivation et de suspension
prcise doit tre mise en place.
2. Cliquez sur le lien Paramtres de la campagne et dans lencadr en bas gauche,
cliquez sur Modie.
3. Rentrez les dates souhaites et valider.
Il faut bien prciser que la programmation de lancement et de n de campagne se
fait uniquement au niveau des dates. Il nest pas possible de lancer ou arrter une
campagne en fonction des heures sur un jour donn.
Le ciblage gographique sest largi avec la nouvelle version de linterface Y!SM. Sur
le march franais, il peut se faire lchelle nationale, rgionale ou dpartementale.
Les annonces seront diffuses en fonction de la requte ou de ladresse IP de linter-
naute. Il est galement possible dexclure un continent, cela se fait au niveau de votre
compte.
Pour spcier votre ciblage gographique vous devez ouvrir votre campagne et cliquer
sur longlet Paramtres de la campagne.
Un compte Y!SM peut comporter jusqu 20 campagnes, lesquelles peuvent tre segmentes en
1 000 groupes dannonces renfermant eux-mmes jusqu 1 000 mots cls. Chaque groupe dannonces
peut comporter 20 annonces.
Le format des annonces sest rapproch de celui de Google. Toute nouvelle annonce
insre dans votre campagne doit comporter (sur le march franais) un titre de 60
caractres maximum, espaces inclus, et une description de 70 caractres espaces
inclus.
Il est possible de recourir la fonction Insertion Keyword qui se rdige comme suit :
{Keyword: Texte par dfaut}. Cette fonction permet dinsrer le mot cl ou lexpression
de linternaute dans le titre de votre annonce. Quand votre publicit est diffuse, le mot
cl apparat en gras dans le titre, ce qui accroche lattention de linternaute et augmente
considrablement votre taux de clics.
Cette balise doit comporter un texte par dfaut qui safchera, si le mot cl tap par
linternaute venait tre trop long. En effet, mme si vous avez recours cette fonction,
le nombre de caractres maximal des titres et descriptions de vos annonces doit tre
respect (voir Figure 16.23).
Cette fonction Insertion Keyword peut galement faire apparatre en titre les ventuelles
fautes dorthographe ou inversions de la requte dun internaute. Par consquent, si
vous intgrez cette fonction dans votre titre ou votre description, pensez activer
loption Texte secondaire. Cette option permet dafcher en gras la requte de linter-
naute dans votre annonce, correctement orthographie. Pour activer cette option sur
votre interface :
1. Cliquez sur longlet Campagne puis sur le groupe dannonces qui comporte le mot
cl.
2. Cliquez sur le mot cl auquel vous voulez associer une bonne orthographe.
3. Une page reprenant toutes les caractristiques de ce mot cl, apparat avec loption
Texte secondaire en dessous du graphe reprsentant le volume de trac.
Le placement des annonces ne peut simplement dpendre de laugmentation ou de la
diminution dun cot par clic. Cette politique met n la course aux surenchres
entre annonceurs. Lattention doit se porter sur la qualit rdactionnelle du message
commercial.
Figure 16.23
Une annonce en version
"insertion Keyword".
Plus vos annonces sont pertinentes, plus vous avez de chances dacqurir un trs bon
positionnement avec une enchre basse. Il peut mme vous arriver dtre positionn en
premire position et dacquitter pour chaque clic une enchre plus basse que lannon-
ceur qui est en deuxime position, si loutil PANAMA estime que la rdaction de la
deuxime annonce est de moins bonne qualit.
Lindice de qualit est matrialis par une barrette comportant cinq cases fonces en bleu, en fonction
de la pertinence de vos annonces. Il sera affect si vos annonces sont dsactives plus de sept jours
(hypothse o pendant votre absence lpuisement du solde de votre compte couperait la diffusion
de vos annonces). Une telle coupure entrane en effet la perte dhistorique.
Section Rapports
Longlet Rapport de linterface PANAMA dirige vers une page regroupant deux
familles de rapports : des rapports relatifs la performance de votre campagne, dautres
financiers. Cest ce niveau quil faut mensuellement extraire vos factures et les imprimer.
Les rapports Y!SM analysent les donnes sur le trac, le rendement et lefcacit de cha-
que campagne. Vous pouvez accder galement des rapports plus qualitatifs renfer-
mant des donnes sur les rfrents, sur les tactiques par canal, les jours avant la ralisation
dune conversion.
Il est possible de planier, de personnaliser et rditer vos rapports.
Section Administration
Cette section comporte un rcapitulatif des caractristiques du compte, avec possibilit
de bloquer certains continents sur lesquels vous ne souhaitez pas tre diffuss, possibi-
lit de changer le montant de votre budget journalier, ainsi que la mthode de paiement
et dajouter des fonds si le solde de votre compte est trop bas.
Lencadr Stratgie dafchage permet dactiver ou non le rseau de recherches ou le
rseau contextuel ainsi que de prciser le type de ciblages exploiter.
Y !SM met votre disposition des outils de traking. En cliquant sur le lien URL de tra-
king vous accdez au code qui permet de rcolter les donnes sur la source des clics et
le mot cl utilis pour accder votre site.
Si vous cliquez sur le lien Analyse vous accdez aux donnes pour implmenter un traking
plus pouss : conversion ralise sur votre site, cheminement emprunt par linternaute
avant de raliser son achat et une demande dinformations.
Microsoft adCenter
Linterface Microsoft adCenter a t lance en septembre 2005. Son contenu volue peu
peu dans lobjectif de proposer terme des fonctions proches des interfaces des rgies
publicitaires concurrentes.
Crer son compte
O se rendre ?
Pour ouvrir un compte Microsoft adCenter, rendez-vous ladresse : https://adcen-
ter.microsoft.com/customer/SignupPreview.aspx?mkt=fr-fr.
Cliquez sur le bouton Inscrivez-vous maintenant prsent en haut droite de la page
(voir Figure 16.24).
Cration pas pas
Pour lancer une campagne sur MSN, six tapes sont ncessaires :
1. Ciblez votre clientle. Vous devez prciser la langue utilise pour rdiger vos
annonces et quelle est votre diffusion gographique. Trois options se prsentent :
une diffusion sur tous les pays et rgions disponibles sur le rseau Microsoft
adCenter ;
Figure 16.24
Votre inscription
au service adCenter.
opter pour des pays ou rgions spciques ;
ne diffuser les annonces que dans des villes pralablement slectionnes.
Pour passer la deuxime tape, cliquez sur Continuer.
2. Crez lannonce. Pour lancer votre campagne, il faut au moins rdiger une annonce,
qui pourra voluer ou tre accompagne dautres versions ultrieurement (voir
Figure 16.25). Il faut remplir quatre champs :
le titre ne doit pas excder 25 caractres ;
la description compte 70 caractres maximum ;
URL dafchage ne doit pas comporter plus de 35 caractres ;
lURL de destination qui napparat pas lors de la diffusion de votre annonce
permet de spcier la page sur laquelle les internautes vont rellement arriver.
Elle peut commencer par http ou https.
Cliquer sur Continuer, pour accder la troisime tape.
3. Choisissez les mots cls qui sont rentrs les uns en dessous des autres. Veillez ce
quils correspondent la thmatique de lannonce prcdemment rdige (voir
Figure 16.26).
Cliquer sur Continuer pour accder la quatrime tape.
4. Dnissez votre budget. Vous ne pouvez lancer une campagne de liens sponsoriss
sans avoir mentionn le budget mensuel que vous consacrez et lenchre maximale
que vous tes prt payer pour chaque mot cl.
Figure 16.25
Quatre champs remplir
pour concevoir votre
annonce adCenter.
Concernant votre budget mensuel, il vous reviendra de dterminer sil doit faire
face ltat du trac rel du moteur MSN ou sil doit assurer une diffusion
homogne sur les 30 jours du mois en prcisant un seuil journalier ne pas
dpasser.
Toutes ces donnes pourront tre modies lorsque votre compte sera cr.
Cliquer sur Continuer pour accder la cinquime tape.
5. Conrmez les dtails de votre campagne (voir Figure 16.27).
En haut de la page, vous seront prsentes les donnes saisies concernant le budget
mensuel, le CPC maximum, la langue, le ciblage gographique, les mots cls et
lannonce.
En dessous de ce rcapitulatif, saisissez les informations pour vous connecter ult-
rieurement votre compte. Il sagit de mentionner nom, prnom, le nom dutili-
sateur, et le mot de passe, de slectionner une question secrte et sa rponse en cas
doubli des codes, et dintgrer nalement votre adresse e-mail.
Cliquer sur Continuer pour accder la sixime tape.
6. Pour clturer cette opration et pouvoir lancer la campagne, il est ncessaire diden-
tier votre socit et de saisir des donnes de facturation : paiement par carte de
crdit... (voir Figure 16.28).
Cochez la case relative aux conditions dutilisation, et cliquez sur Valider : votre
compte est cr !
Figure 16.26
Insrez vos mots cls
les uns en dessous
des autres.
Figure 16.27
Confirmez les donnes de votre future campagne.
Grer sa campagne
Depuis la page daccueil, vous accdez aux campagnes, groupes dannonces et centre
daide.
Vous noterez la prsence de quatre onglets dont nous allons tour tour prsenter les
fonctions :
Figure 16.28
Activez votre campagne adCenter.
Longlet Campagnes
Cette premire page rcapitule les campagnes existantes. Pour accder aux donnes
dune campagne en particulier, il suft de cliquer sur son nom.
Si vous souhaitez en crer une, le tableau prsent en dessous du titre Slectionner une
campagne comporte dans sa partie extrme gauche le lien Nouvelle campagne. Cinq
tapes doivent tre suivies :
1. Paramtres. Regroupe le nom de la campagne, le fuseau horaire, le nom du groupe
dannonces quelle comportera et le type de ciblage (par langue et march, par zone
gographique, par jour de la semaine et par heure de la journe). ce niveau, il est
possible de dterminer la date de dbut et de n de cette campagne.
2. Annonces. Consiste la rdaction de diffrentes annonces, selon les caractristi-
ques prsentes un peu plus haut. Lors de la rdaction de votre titre, un aperu de
votre titre avec rdaction dynamique (fonction permettant dinsrer le mot cl tap
par linternaute) est disponible. vous par la suite de crer une version dannonce
avec cette fonction. En bas de page, un tableau rcapitule les annonces que vous
avez enregistres.
La constitution dune annonce dynamique repose sur lexploitation de paramtres, au nombre de 3.
{Param1} se rapporte lURL de destination. Il vous permet de rediriger linternaute vers la page de
votre site web en corrlation avec sa requte. Pour le {Param1}, un maximum de 1 022 caractres
est admis.
{Param2} et {Param3} peuvent tre utiliss dans le corps de plusieurs annonces pour raliser des
modifications en masse.Vous pouvez par exemple insrer {Param2} dans vos titres et y associer une
ide, un concept qualifiant lensemble de vos produits ("pas cher", ). {Param3} peut quant lui
tre utilis pour les rductions que vous appliquez. Ainsi, si sur une priode de lanne vous proposez
une rduction de 50 % et une autre une rduction de 25 %, il ne sera pas ncessaire de changer
toutes vos annonces, une une. Une simple modification des donnes du {param3} et la nouvelle
information se retrouvera dans lensemble des annonces comprenant ce paramtre. Pour {param2}
et {param3}, un maximum de 70 caractres est admis.
Le paramtre {Keyword} peut aussi tre utilis pour les campagnes adCenter. Il permet dafficher la
requte de linternaute dans le titre ou la description de votre annonce au vu de son placement. Pen-
sez rdiger un texte par dfaut, au cas o la requte de linternaute serait trop longue pour permet-
tre son insertion.
3. Mots Cls. Choisissez les mots cls et saisissez-les ligne par ligne dans lencadr
en haut gauche de la page. Si vous hsitez sur les termes choisir, un outil de
recherche est disponible sur cette page. Le bas de la page comprend un rcapitulatif
des termes retenus, avec la possibilit pour chacun de slectionner des mots cls
ngatifs (le mot cl ngatif est le mot cl exclure).
Votre compte Microsoft AdCenter peut comporter jusqu 10 000 campagnes, 10 000 groupes
dannonces par campagne, 10 000 mots cls par groupe dannonces et 20 annonces par groupe
dannonces. Une telle "limitation" rend la gestion de votre compte des plus souples.
4. Tarication. Il sagit de dterminer le budget de votre campagne. Faites bien atten-
tion dopter pour une rpartition sur le mois. ce niveau, dnissez lenchre
maximale sappliquant au mot cl par dfaut. Linterface vous donne la possibilit
de cibler votre trac en fonction de lge, du sexe (ciblage dmographique) ou de la
ville des internautes (ciblage gographique). Vous attribuez alors une enchre sup-
plmentaire : principe du ciblage incrmental.
Si aprs quelques mois de rfrencement, vous constatez des jours ou priodes de la
journe plus favorables votre activit, linterface Microsoft AdCenter permet de
cibler votre audience par tranches horaires. Il vous suft de raliser votre slection
dans les encarts Ciblez vos clients par jour de la semaine et/ou Ciblez vos clients
par heure de la journe. De telles options reposent sur lexistence des prols
Windows Live, Microsoft Passeport des internautes surfant sur le portail MSN. Les
donnes sont issues du placement dun cookie de 30 jours suite la connection de
linternaute.
5. Consulter. Reprend toutes les donnes saisies. Sil ny a aucune erreur, cliquer sur
Valider pour concrtiser la validation de votre campagne.
Au-del de la pure cration, la page Campagne de votre interface vous permet dimporter
la structure des campagnes cres sur Google pour les exploiter sur le rseau MSN.
Il suft de transfrer le contenu de votre campagne sur un chier CVS en suivant les
instructions prsentes au niveau de longlet Importer des Campagnes. Une telle option
peut vous faire gagner un temps prcieux.
Dans cette mme optique, linterface Microsoft adCenter vous offre la possibilit de
copier le contenu dun groupe dannonces existant.
Quant la gestion des mots cls, la fonction Modier un ensemble de mots cls permet
deffectuer des changements en masse concernant les mots cls ngatifs, le type de
ciblage, la rdaction des textes dynamiques.
La modification de la structure de votre campagne saccompagne dune rvision ditoriale dont la
conclusion est donne au maximum sous 72 heures.
Longlet Compte & facturation
Longlet Compte & facturation se dcompose comme suit :
Un listing. Il reprend les comptes ouverts auprs du rseau Microsoft adCenter.
Il mentionne le nom du compte, son solde, la devise, loption de paiement et du
statut.
Un rsum dinformations. Il prsente la socit, et les moyens de paiement rete-
nus. ce niveau, il est possible dajouter une nouvelle carte de crdit, de modier
ladresse de facturation ou les infos de facturation.
Un lien facturation. Il permet de consulter vos relevs sur 30, 60, 90 jours ou plus.
Longlet Simulation
Il correspond loutil de recherche de mots cls.
Longlet Rapports
ce niveau, vous pouvez gnrer un nouveau rapport, consulter les rapports prcdem-
ment crs, ou paramtrer le type de rapports que vous souhaitez consulter (voir
Figure 16.29).
Les rapports, qui peuvent tre crs, concernent la performance de votre compte, des
donnes budgtaires, ou des donnes dmographiques (si vous avez actionn un ciblage
par zone gographique ou par ge et sexe). Diffrentes options existent quant laf-
chage du rapport et la priode quil couvre.
Figure 16.29
La section rapport de
linterface Microsoft
adCenter.
Enn, Microsoft adCenter vous donne la possibilit de crer un modle de rapport que
vous recevrez date convenue par courrier lectronique.
Dans le mme tat desprit que Google Editor, vous pouvez dsormais grer vos campagnes avec
Microsoft AdCenter Desktop. Le principal du travail peut se raliser hors connection. La connection
est ncessaire pour toute mise en ligne de vos nouvelles annonces, intgration de nouveaux mots
cls, optimisations denchres
Cet outil permet dimporter la structure de vos campagnes Google ou Yahoo!
Il est tlchargeable sur le site Microsoft Advertising partir du lien: http://advertising.micro-
soft.com/france/Microsoft_adCenter_Desktop.
Loptimisation dune campagne de liens sponsoriss
Une optimisation de campagne en rfrencement payant repose sur lanalyse de la
performance dannonces, et de mots cls. Celle-ci ne doit pas tre occasionnelle
mais continue.
Une fois par semaine, dressez un constat sur lvolution de votre trac, du positionnement
de vos mots cls, du taux de clic et de conversion.
Limpact de chaque stratgie nouvellement teste doit tre clairement identi. Lobjec-
tif est davoir une campagne rentable au vu des dpenses engages et du chiffre daffaires
gnr.
Pour quune campagne de liens sponsoriss rponde aux objectifs xs, loptimisation
de la structure de votre compte et de votre site doit tre ralise.
Loptimisation de votre campagne
Optimiser une campagne de liens sponsoriss nest pas une opration complexe.
Lidentication des actions doptimisation mener doit reposer sur un bilan issu
de lanalyse de votre trac et de la rentabilit de chacune de vos campagnes. Les
statistiques qui en dcouleront vont vous permettre dtablir clairement lobjectif
atteindre.
Votre optimisation peut tendre ltablissement dun trac plus consquent ou lam-
lioration du retour sur investissement. Si ces deux hypothses se distinguent par les
actions quelles demandent dtablir, elles sappuient sur un dnominateur commun : la
structure de votre compte. Vous devez vous assurer que vos campagnes et groupes
dannonces reposent sur une structure retant prcisment les familles de produits de
votre site.
La recherche dun trafic plus consquent
Si vous recherchez accrotre les visites de votre site, un tel objectif peut tre atteint en
exploitant un plus grand listing de mots cls gnriques. Le recours de tels termes doit
saccompagner de linsertion de mots cls exclure. Vous ne devez en aucun cas
dclencher la diffusion de vos annonces pour nimporte quelle requte des internautes.
Gagner en trac ne doit pas saccompagner dune perte de pertinence.
UNE BAISSE DE CLICS ? QUE FAIRE ?
Si la recherche dun trac plus consquent est conscutive au constat dune baisse de
clics, il vous est conseill de revoir la dynamique de vos annonces. Il est prfrable
davoir des annonces spciques qui mettent en avant : les garanties pratiques, la
rapidit ou gratuit des livraisons, les promotions en cours, les possibilits de rembour-
sement, particulirement en cas dinsatisfaction.
Vous devez vous diffrencier de vos concurrents.
Essayez de tester en mme temps plusieurs versions dannonces an de savoir quel
type de rdaction sont sensibles les internautes. Enn, afnez la rdaction de vos
annonces en insrant automatiquement le mot cl dans le titre ou la description.
DES IMPRESSIONS ACCOMPAGNES DUN FAIBLE TAUX DE CLICS ? COMMENT RAGIR ?
Vos listings de mots cls doivent tre rviss quand votre campagne gnre de nom-
breuses impressions mais peu de clics. Les lments prendre en compte sont : votre
taux de clics, qui se calcule par le ratio clic/impression 100 ; les CPC maximum ;
votre position pour chaque mot cl et le statut des mots cls.
Identiez de nouvelles expressions en vous servant du gnrateur de mots cls prsent
sur chaque interface. Sur Google AdWords exploitez galement le Rapport sur les
requtes des internautes. Il mentionne les expressions tapes par les internautes avant
de cliquer sur une de vos annonces.
Assurez-vous que vos annonces concordent avec les mots cls prsents dans vos groupes
dannonces.
LE CAS DE LA SAISONNALIT
Si votre activit est fortement soumise la saisonnalit, il peut tre bon daugmenter les
CPC maximum au dbut des mois cls an dacqurir une position stratgique et de
rapidement gagner en clics. Une fois la saison passe, ne dsactivez pas vos mots cls,
optez plutt pour une enchre minimale. En dsactivant un mot cl vous lui feriez perdre
tout son historique.
La ncessit daugmenter son retour sur investissement
LIMPORTANCE DES MOTS CLS SPCIFIQUES
Dans une telle hypothse, vous devez vous assurer que votre campagne repose sur des
mots cls cibls : marques, nom de vos produits, expressions combinant vos produits
avec un verbe daction (acheter, rserver, louer).
GARANTIR UN BON POSITIONNEMENT
Les mots cls qui vous apportent les conversions doivent bncier dun bon posi-
tionnement. En reconsidrant le CPC maximal de vos mots cls, gardez en tte quil
est fondamental dapparatre sur la premire page car seul 20 % des internautes
prennent connaissance des annonces de la seconde page de rsultat dun moteur de
recherche.
LIMPORTANCE DES ANNONCES TRS SPCIFIQUES
tablir une corrlation entre le mot cl et lannonce est dterminant deux gards.
Une telle association augmente le taux de clics tout comme lindice de qualit de vos
campagnes.
LIndice de qualit est symbolis sur linterface Y!SM par une barrette avec des cases bleues repose sur
la formule suivante : CPC (Quality Score de lannonce & CTR)
Votre retour sur investissement sera ampli si vos annonces illustrent les dernires
promotions, offres de votre site et permettent aux internautes cliquant dessus de voir
leurs attentes satisfaites.
LIMPACT DE LA PAGE DE DESTINATION
Pour accrotre votre retour sur investissement vous devez prfrer les pages de destina-
tion la page daccueil de votre site. Rediriger un internaute sur la page dcrivant le
mieux les caractristiques du produit recherch augmente vos chances de convertir
cette visite en un achat.
Loptimisation de votre site web
La ncessit doptimiser votre site apparat quand malgr de bonnes statistiques (ratio
clic sur impression suprieur 1 %, annonces positionnes sur la premire page de
rsultat des moteurs de recherche) le trac dirig vers votre site ne saccompagne pas
des actes dachats attendus. Il faut alors rapidement minimiser le taux de rebond des
internautes.
Assurez-vous dans un premier temps quune troite relation existe entre lannonce que
vous diffusez et le contenu de la page vers laquelle vous dirigez vos clients potentiels.
Dans un second temps, pensez faire voluer le contenu de votre site, en changer
quelque peu la dynamique. Travailler lergonomie et le contenu de vos pages contribue
augmenter le nombre de conversions. Vous pouvez consulter la premire partie du
Chapitre 12 traitant de limportance dune bonne ergonomie. Il dtaille les actions
mettre en place pour avoir un site en phase avec les attentes de sa clientle, rendre son
usage et la navigation au sein des pages plus faciles.
Dans le cadre dune campagne de liens sponsoriss, il est conseill damener les inter-
nautes en moins de deux clics la page souhaite. Sur cette page, les informations fon-
damentales sont positionnes l o le regard de linternaute se place automatiquement.
Une fois que sa volont dachat est conforte par linformation et la prsentation des
produits sur votre site, le processus dachat doit tre le plus simple possible.
17
Utiliser les comparateurs de prix
Kelkoo, la plate-forme commerante de Yahoo
Le Guide.com
Shopping.com
Comparateur de prix gratuits : Twenga
Dans quels cas le recours un comparateur de prix contribue-t-il rehausser le chiffre
daffaires dun Web marchand ? La prsence sur Kelkoo, Le Guide.com ou Shopping.com
peut tout dabord compenser le manque de notorit dun nouvel entrant, partir du
moment o llment mis en valeur et sur lequel il pense tre comptitif est le prix de
vente de ses produits.
tre prsent sur un comparateur de prix est un levier pour gagner une nouvelle clientle
la recherche de la bonne affaire, de la meilleure offre-prix.
Pour les comparateurs o le placement des offres se fait en fonction dune commission
verse pour toute redirection, si vous tes en mesure de payer le CPC (cot par clic)
exig pour tre parmi les trois premiers annonceurs, vous vous assurez un bon taux de
frquentation, et par ricochet, vous boostez vos ventes. Cependant, pour vous assurer
un chiffre daffaires correct, la gestion de votre campagne devra tre stratgique et
reposer sur de nombreux tests. Identiez les produits ayant une marge sufsante pour
gnrer des bnces indpendamment de la commission verse, surveillez de prs le
cot dacquisition des prospects gnrs par un comparateur de prix, dterminez votre
seuil de rentabilit.
Certains commerants pourront ne jamais ressentir le besoin de diffuser leurs produits
sur un comparateur de prix. Ce sera le cas de le-commerant dont lactivit est de
nature artisanale. Si ses produits (dont il peut tre le seul crateur) se ralisent une
petite chelle, et sont vendus soit en direct soit par le biais dun site, il naura aucun
intrt utiliser un comparateur de prix pour faire la promotion de son activit et vendre.
Parce que dans une telle hypothse, une comparaison ne pouvant tre tablie avec
dautres produits, ce nest pas le prix mais la qualit, la raret du bien ou la rputation
du commerant qui amneront des internautes passer commande. Le mme constat
pourrait tre fait pour un site proposant des produits de luxe.
Comme vous allez le constater, les comparateurs de prix fonctionnent essentiellement sur
le classement doffres en fonction de leur prix de vente. Pour un mme article, lannon-
ceur avanant le prix le plus attractif aura de grande chance de gnrer un ux notable
vers son site, mme si son offre ne saccompagne daucune garantie, daucun service.
Dans les dveloppements venir, les trois principaux comparateurs de prix fonctionnant
sur un modle payant et un comparateur de prix gratuit vont tre prsents.
Kelkoo, la plate-forme commerante de Yahoo
Prsent dans dix pays de lUnion europenne, Kelkoo repose sur le principe du posi-
tionnement des annonces en fonction du CPC (voir Figure 17.1).
Figure 17.1
Donnez la chance aux internautes de trouver et choisir vos produits.
371 UTILISER LES COMPARATEURS DE PRIX
Ce comparateur rassemble 6 millions de produits et rfrence 2 000 marchands. En dcembre 2006,
il a connu plus de 3 millions de visiteurs uniques.
Vous avez deux options pour effectuer votre recherche sur ce comparateur. La premire
revient utiliser le moteur de recherche intgr en haut gauche de la page Kelkoo. Les
offres apparaissant sur la page de rsultats peuvent tre rorganises en fonction dune
fourchette de prix ou par catgories de produits. Chaque offre comprend un rsum des
caractristiques du produit, un lien de redirection vers le site marchand prsent sous la
forme dun bouton intitul Voir offres, et une notation donne du produit ralis par les
prcdents acheteurs.
La deuxime option consiste rechercher votre produit en fonction des catgories pr-
sentes, elles sont au nombre de 15. Le classement des offres se fait alors selon leur prix.
Pour tre rfrenc sur Kelkoo, vous pouvez opter dans un premier temps pour loffre
dessai reposant sur un package de 1 500 clics gratuits (le CPC est de 0,17 ). Vos offres
apparatront seulement quand un internaute utilisera le moteur de recherche Kelkoo
pour trouver le produit dsir. Kelkoo met votre disposition un Extranet pour grer
votre listing doffres. Cette offre de rfrencement gratuit nest pas disponible pour tou-
tes les catgories de produits. (Veuillez vous connecter au site pour de plus amples
informations). Cette offre dessai peut vous permettre de connatre limpact dun tel
programme sur le volume de ventes gnres.
En fonction de votre retour sur investissement, une fois votre bonus de 1 500 clics uti-
lis, vous avez le choix de souscrire ou non loffre globale payante pour continuer
apparatre sur le comparateur Kelkoo.
Le rfrencement sopre sur lensemble du site avec envoi par e-mail de rapports
reprenant les donnes du trac, accs une solution de traking (Trade Doubler).
Pour communiquer votre listing de produits Kelkoo, vous pouvez crer un chier
FTP/http qui reprend toutes les offres commerciales que vous souhaitez voir indexer.
Ce chier doit tre rgulirement consult an que les dernires donnes concernant les
produits de votre site soient actualises sur le comparateur de prix.
Si vous nutilisez pas un tel chier, les pages de votre site web sont crawles par lagent
"sniff" de Kelkoo.
Pour connatre les spcificits et les petits plus de ce comparateur, rendez-vous sur www.kelkooin-
solite.com.
De plus, pour une gestion efcace de votre campagne assurez-vous de bien grer votre
ux de produits, cest--dire le chier faisant le lien entre votre base de donnes et
celle du comparateur. Ne proposez que les produits les plus rentables.
Le Guide.com
Prsent dans douze pays europens, et disponible en 7 langues (franais, anglais, alle-
mand, espagnol, italien, nerlandais et polonais), le Guide.com propose un rfrence-
ment gratuit avec apparition des ches produits sur les sites webmarchand.com,
Guide.com, le Guide.net et Gooster.com (voir Figure17.2).
Le rfrencement payant octroie un placement prioritaire sur les pages de rsultats des
moteurs de recherche et des annuaires. Dans cette seconde hypothse, les offres commer-
ciales seront accompagnes du logo de le-commerant.
Figure 17.2
Un guide largement
diffus en Europe.
La commission reverser dpend du volume de clics mis (voir Tableau 17.1).
Les recherches se font en fonction du prix et / ou de la popularit des produits auprs
des prcdents acheteurs.
Le Guide.com propose des services annexes, savoir la possibilit davoir ses offres
promotionnelles dans lencadr Les bons plans ou dans les newsletters diffuses. Des
programmes dafliation peuvent tre galement envisags.
Sur le march franais, en dcembre 2006, le Guide.com comptait 3,8 millions de visiteurs uniques (don-
nes Mediametrie//Netratings), avec lchelle europenne 90 millions de produits et 25 000 marchands
rfrencs.
Shopping.com
Le comparateur Shopping.com a t lanc sur le march franais en mars 2005 et est
galement prsent en Grande Bretagne, en Allemagne, en Australie et aux tats-Unis
(voir Figure 17.3).
Shopping.com repose sur un rfrencement payant dont le positionnement des annonces
dpend du montant de lenchre au CPC consacr pour un produit. Sous rserve de
nouvelles tarications, lenchre oscille entre 0,15 et 0,70 .
Si vous visez les trois premires positions, vous devrez faire face aux surenchres de
vos concurrents. Veillez donc identier le seuil au-del duquel le cot du clic de redi-
rection mettrait en danger le bnce retir dune telle campagne. Pour les autres
annonces, le positionnement dpendra du prix pratiqu pour le produit recherch par
linternaute.
Les informations fournir pour apparatre sur ce comparateur sont des plus classiques : le
prix du produit devant tre index, le dlai et frais de livraison et enn le stock disponible.
Quand votre campagne est lance, vous avez la possibilit den traquer les rsultats.
Tableau 17.1 Une tarification dtermine en fonction des volumes de clics
Nombre de Clics Tarif Unitaire Brut H.T. Tarif Unitaire Net H.T.
De 3 000 5 400 0,20 0,170
De 6 000 30 000 0,18 0,153
De 30 000 90 000 0,16 0,136
Au-del de 103 000 0,14 0,120
Selon les donnes ComScore, ce comparateur compte 4,5 millions de visiteurs uniques, 2 millions de
produits indexs sur le march franais et 250 marchands rfrencs sur lanne 2006.
Twenga
Voici un comparateur de prix gratuit ayant fait son entre sur le Net en septembre 2006
an dapporter une rponse concrte au manque dobjectivit soulign par la DGCCRF
lors de son enqute daot 2006 contestant le principe de placement des annonces en
fonction du CPC (voir Figure 17.4).
Si votre business plan ne vous permet pas de lancer une campagne sur un comparateur
de prix dont le classement est payant, vous pouvez tenter sans risques de rfrencer vos
produits sur Twenga.
Aucun frais dguiss ne surgiront, une fois votre campagne lance, car ce comparateur
maintient son principe de gratuit en montisant son audience grce des liens commer-
ciaux dispatchs sur ses diffrentes pages.
Lexhaustivit des informations accompagnant chaque article rfrenc est recherche
sur Twenga. Ainsi un internaute souhaitant comparer les offres en matire dcran
plasma pourra prendre connaissance des qualits intrinsques des produits, des avis des
consommateurs, du prix, de la notation donne par le comparateur (voir Figure 17.5).
Figure 17.3
La configuration du site
Shopping.com.
Figure 17.4
Twenga, un comparateur
de prix gratuit.
Figure 17.5
Twenga: une information
fournie pour chaque article
rfrenc.
Sur ce comparateur, lindexation des articles se fait parmi 15 catgories. Le classement
des produits repose sur le prix dfaut de la slection dun autre critre par linternaute.
Il existe deux voies pour tre prsent sur ce comparateur : le laisser crawler les pages de
votre site et procder lintgration des articles de votre site ou sinscrire directement
sur Twenga www.twenga.fr/register.php en envoyant conscutivement vos listings
de produits.
18
Faire appel aux services
daffiliation
Le principe
Les objectifs
La mise en place dun programme daffiliation
Dans le Livre Blanc sur lafliation (de nouvelle gnration), le groupe Public-Ides
rappelle que lafliation "consiste engager une stratgie de partenariat entre un site
marchand (lannonceur ou le site aflieur) et un autre site Internet (lafli ou le site
diteur). Lannonceur choisit son partenaire en fonction de son trac (le nombre de visi-
teurs uniques et le nombre de pages vues) ; et/ou de la pertinence de son contenu (la
nature de linformation mise en ligne)."
Concrtement, "lafli accorde de lespace publicitaire lannonceur en mettant des
bannires ou des liens publicitaires." En contrepartie, lannonceur sengage rmunrer
"lafli au prorata de son apport daffaires".
Lafliation est un outil de recrutement pouvant renforcer la visibilit de votre site en
bnciant du trac des sites web que vous choisirez comme partenaires.
Un tel vecteur contribue galement accrotre la notorit de votre marque tout en
dveloppant vos ventes.
Avant de vous lancer dans une telle aventure, prenez le temps de consulter les dvelop-
pements venir an de construire, selon vos besoins, une campagne rentable. Identiez
clairement votre besoin (catgorie socioprofessionnelle de votre cible, ge, localisation,
nombre de prospects recruter).
Soyez galement prt traiter le volume de nouveaux contacts conscutifs un tel pro-
gramme. Lafliation est en effet un vecteur promotionnel se concevant rarement une
petite chelle ; pour ce qui est tout au moins de lenvoi de-mails.
Le principe de laffiliation
Une relation affilieur, affili et plate-forme daffiliation
Le principe de lafliation est dtablir une relation entre un site bnciant dun bon
taux de frquentation, souhaitant montiser son audience (lafli) et un site en qute
de visibilit pour mieux vendre ses biens et services (laflieur). Pour lancer un pro-
gramme dafliation, il est donc ncessaire de constituer un partenariat avec des aflis
(voir Figure 18.1).
Vous pouvez mettre en place votre campagne dafliation vous-mme si vous bn-
ciez en interne dune personne ddie un tel programme ou bien dcider de recourir
une plate-forme dafliation.
Une offre commerciale performante
Le fondement de lafliation est la performance ralise sur une offre commerciale.
Pour que votre campagne de-mailing ou de bannires vous apporte le nombre de contacts,
conversions souhaits, elle doit comporter une vritable offre, la perspective dun gain
pour linternaute contact.
En effet, si elle sapparente trop une "lettre dinformation", celui-ci peut ne pas prendre
le temps de lire le contenu de votre e-mail.
Lafliation vous place vraiment dans le cadre de la pure performance car vous ne vous
engagez payer que pour une action raliser. Ce peut tre un clic, un formulaire rem-
pli, un achat, une commande ou une inscription opt-in. Lopt-in consiste, daprs le
Dico du Net, en une "politique de collecte des donnes personnelles base sur le
consentement pralable de linternaute."
Les diffrents modes de fonctionnement/de facturation
Lafliation peut prendre la forme dune campagne dafchage de supports publicitaires.
Pour diffuser votre offre, communiquer sur la valeur ajoute de votre site, plusieurs
supports peuvent tre exploits. Le plus courant est la bannire qui selon le Dico du
Figure 18.1
Le cur dun programme
daffiliation : le partenariat
affili-affilieur.
Partenariat
Site ayant
des produits/service
vendre: l'affilieur,
c'est--dire VOUS
Site ayant
du trafic:
l'affili
379 FAIRE APPEL AUX SERVICES DAFFILIATION
Net se prsente comme "un rectangle cliquable, statique ou anim, contenant un
message publicitaire et dirigeant le plus souvent linternaute vers un site vocation
commerciale".
Ce support prendra bien souvent les dimensions 468 60 pixels. Pour connatre tous
les standards dune campagne dafchage (skyscraper, carr, fentre pop-up,) ren-
dez-vous sur le site IAB (Interactive Advertising Bureau) dont ladresse est : www.iab-
france.com.
Vous pouvez galement dcider de matrialiser votre campagne sous la forme dun lien
contextuel surlign avec une couleur diffrente de celle du reste du texte du site de
lafli. Les sites aflis dcident dintgrer un tel lien plus quune bannire quand ils
ne disposent pas assez de place sur leurs pages. Ce format permet au site diteur
daccepter plus daflieurs et donc de montiser grande chelle laudience du site.
Figure 18.2
IAB prsente les diffrents modles daffichage en affiliation.
Le lien contextuel peut tre prfr aux autres formats si le contenu de votre site est en
relation directe avec le message de lafli, avec son secteur dactivit.
Une campagne dafchage peut aussi prendre la forme dun interstitiel. Ce nest pas
aujourdhui le modle le plus utilis en raison de son cot. Il est cependant bon den
connatre les caractristiques. En naviguant sur le net, vous avez certainement du en
visualiser. Par exemple en recherchant les dernires sorties cinmatographiques ou les
horaires dun lm, si vous avez tent daccder au site Allocine.com une publicit pre-
nant tout lcran vous a certainement t prsente (voir Figure 18.3) avant mme
daccder au contenu du site.
Une campagne dafchage se facture selon le modle du CPM (cot pour 1 000 impres-
sions), celui du CPC ou du CPA (cot par acquisition).
Lautre facette de lafliation est le-mailing, technique selon laquelle un courrier lec-
tronique est envoy " un plus ou moins grand nombre dinternautes". Une campagne
de-mailing a gnralement pour but de promouvoir un produit pour un service, ou
informer les lecteurs abonns sur une actualit choisie" (dnition extraite du Dico du
Net.). Dans cette hypothse, la facturation se ralisera au CPM, CPL (cot par lead,
cest--dire par formulaire rempli), CPO (cot par ordre) ou CPS (cot xe par vente
"sale") ou pourcentage pris sur les ventes ralises.
Si vous dcidez de prendre en charge llaboration et la gestion dune campagne
de-mailing, quelques pralables simposent. Ils sont rpertoris sous forme de tableau,
Figure 18.3
Avec linterstitiel,
votre publicit
est la premire page
visualise par
un internaute.
extrait du Guide de survie de le-mailing, conu par Diane Revillard de lAgence
Di&Mark (voir Tableau 18.1).
Une campagne de-mailing peut tre pense en dix tapes.
1. Rchissez aux caractristiques de votre cible. Votre site tant rfrenc depuis
quelque temps, la nature du trac quil gnre doit vous permettre dsormais de
connatre grosso modo les attentes et comportements du public que vous tou-
chez. De telles donnes seront prcieuses pour choisir le ton, le contenu de votre
message commercial.
2. Rpertoriez lensemble de vos adresses e-mails. Cette liste peut tre toffe avec les
bases de donnes dagences spcialises ou plates-formes dafliation. Des sites,
tel que Rentabilisez.com, vous donnent accs aux programmes de plates-formes.
3. Dterminez vos objectifs long terme. Que souhaitez-vous retirer dune telle cam-
pagne ? Cherchez-vous exclusivement dliser votre clientle actuelle ? Avez-
vous besoin de gagner une nouvelle clientle ?
Les offres de votre campagne doivent tre identies. Toute campagne doit tre en
mesure de rpondre concrtement aux besoins de votre cible.
4. Segmentez et construisez vos listes de diffusion, ce au regard de loffre et de la
rdaction de votre message. Plus votre action sera cible, plus votre taux de conversion
sera important.
Tableau 18.1 Les axes suivre pour crer et grer une campagne de-mailing
tapes
Ralises
Oui Non
1 - Rpertoriez lensemble de vos adresses e-mails et donnes connexes disponibles
2 - Dnissez les objectifs long terme de la campagne
3 - Dnissez les diffrentes offres et/ou les incentives de la campagne
4 - Segmentez et construisez vos listes de diffusion selon loffre et la rdaction du message
5 - Rdigez votre courrier lectronique
6 - Pr-testez votre courrier lectronique
7 - Envoyez votre courrier lectronique
8 - Traitez et analysez les demandes de dsabonnements
9 - Traitez les retours de-mails
10 - Assurez le suivi de campagne, faites lanalyse complte du reporting
5. Rdigez votre courrier lectronique. Votre message peut se lire au travers dun court
texte et/ou dune image reprsentative.
Dans son dveloppement sur Lessentiel du marketing direct du Guide des Profession-
nels du marketing Direct, Xavier Lucron numre les rgles suivre pour rdiger un
message "performant". cette n, il propose une liste de mots utiliser : "test, bn-
ci, rapidit, scurit, progrs, qualit, conomique, performant, ncessaire, proter,
information, conseil, rsistant, efcace, nouveau, esthtique, proposer, promotion".
Ce sont des termes "factuels, positifs et crdibles". Le contenu de votre e-mailing doit
tre un mix de dynamisme, dappels laction, de phrases simples et positives. Le
dynamisme peut se traduire travers lusage de limpratif: "Testez notre nouvelle
version", "Abonnement gratuit de".
Figure 18.4
Rentabilisez.com : Programmes et plates-formes daffiliation en dtail.
Votre message doit tre exempt de termes ou expressions ngatifs. Bannissez les accro-
ches de type : "Ne cherchez plus", "Nayez plus peur, lentreprise beta est l pour"
ou les phrases comportant "sans".
Enn, noubliez pas de proposer un lien pour amener les destinataires de cette campagne
souscrire votre offre ou remplir le formulaire de contact vers lequel votre e-mail redi-
rigera.
6. Ralisez toujours un test avant de penser lenvoi global et nal de votre campagne
de-mailing.
7. Quand les vrications ncessaires sont opres, envoyez votre courrier lectronique.
8. Traitez les demandes de dsabonnement. Les destinataires de votre courrier lectro-
nique ne doivent pas se sentir pris au pige dun tel envoi. Il faut donc leur donner
la possibilit de cliquer sur un lien pour se dsinscrire de votre programme.
9. Vient alors la phase de traitements des retours de-mails.
10. Ltape clturant une campagne de-mailing est celle du reporting, de lanalyse
complte des rsultats de votre programme.
Votre programme daffiliation
Le choix dun rseau daffiliation
Les objectifs de lafliation sont simples. Il sagit de recruter de nouveaux clients,
membres, prospects en exploitant un rseau performant, appropri son secteur dacti-
vit.
Les considrations de retour sur investissement sappliquent galement lafliation de
sites Internet. Aussi, prenez garde de ne pas vous aflier toutes sortes de sites. Optez
pour ceux qui correspondent votre cible de clientle.
Votre choix peut se porter dans un premier temps sur un petit panel de sites.
Pour slectionner les sites de votre programme dafliation, rassemblez toutes les infor-
mations collectes partir de votre site concernant les attentes, centres dintrts de
votre cible. Par la suite, utilisez les rseaux dannuaires professionnels en ligne, contac-
tez les rseaux daflis numrs sur des sites spcialiss tels que Rentabilisez.com
(www.rentabilisez.com/) ou Web-afliations.com (www.Web-afliations.com/aflia-
tion-aflie.html).
La mise en place dun programme daffiliation
En fonction de la structure de votre activit, du budget et de votre temps, deux hypo-
thses apparaissent pour construire votre programme dafliation. La premire hypothse
revient laborer vous-mme vos campagnes dafliation, dans la seconde vous la conez
une agence spcialise.
Grez vous-mme vos campagnes. Contactez un un les sites sur lesquels vous
aimeriez placer une bannire ou un lien. Il est recommand quune personne se consa-
cre temps plein un tel programme. Lafliation ncessite un relationnel impor-
tant pour constituer votre rseau daflis. Une fois quil est constitu, il faut le
faire vivre et lanimer. Mettez en avant sur votre site vos partenaires, en tablissant
un barme des commissions reverses aux aflis au regard de laudience de leur
site, ainsi que les rsultats des campagnes lances avec eux.
Si vous souhaitez rentabiliser laudience de votre site, il est toujours possible de
vous placer en tant que site afli et daccepter les publicits de sites voluant
dans le mme univers que vous. Dans ce cas, les sites Rentabilisez.com et Web-
afliations.com disposent dune rubrique ddies aux afliations directes (voir
Figure 18.5).
Une agence, une plate-forme gre votre campagne. Votre programme daflia-
tion sera relay moyennant le paiement dune commission sur le prix du prospect
gnr.
Pour mieux vous reprsenter la relation qui se met en place, imaginez une place de
march. Dun ct vous, en qute de clients, de lautre un propritaire de site dont
la nature du trac et le taux de frquentation peuvent rpondre votre besoin. Le
propritaire est prt montiser laudience de ses sites, cest--dire rdiger une
partie de son trac vers votre site an de gnrer des ventes ou le remplissage de
formulaires
Comme ces deux acteurs ne sont pas en mesure de se rencontrer, lagence
dafliation tablit la relation ncessaire, moyennant une commission. Concr-
tement, votre programme dafliation va tre dpos sur une plate-forme o les
futures campagnes sont classes par thmatiques. Si le choix dun propritaire
de site se porte sur votre offre, cela enclenchera la diffusion de votre campagne
dafliation.
En passant par une plate-forme vous bnciez de sa force de frappe et vous dga-
gez un temps prcieux pour renforcer votre catalogue produits et le service apport
votre clientle.
Sassurer de la performance de la campagne
Le lancement dune campagne dafliation ne doit pas se faire nimporte quel prix.
Matriser le cot dacquisition de vos nouveaux clients est fondamental.
Une politique de ROI doit se mettre en place. Il sagit doptimiser votre investissement
en connaissant le taux de clic et de transformation de vos bannires. Pour vous aider
vous pouvez recourir un outil de tracking. Si vous passez par une plate-forme ou rgie
pour lancer votre programme dafliation vous bnciez de toutes les statistiques
ncessaires pour identier les programmes performants et gains retirs.
Figure 18.5
Programmes daffiliations directes du site Web-affiliations.com.
19
Lexploitation de votre base e-mail
La conception de votre newsletter
La gestion de vos mailings lists
Comment exploiter la richesse de votre base e-mail an de dliser votre clientle ?
Vous pouvez recourir lup-selling. Une technique qui consiste, selon le Dico du Net,
"prsenter sur une page produit des produits de gammes complmentaires, suscepti-
bles dtre ajouts au panier." Vous pouvez galement laborer une newsletter. Mais
avant tout, assurez-vous que votre dmarche ne soit pas interprte par vos contacts
comme une pratique de spamming. En reprenant la dnition de C. Alvergnat dans son
rapport sur Le publipostage lectronique et la protection des donnes personnelles, le
spamming apparat comme la technique d"envoi massif de courriers lectroniques non
sollicits, le plus souvent caractre commercial, des personnes avec lesquelles
lexpditeur na jamais eu de contact et dont il a capt ladresse lectronique dans les
espaces publics dInternet : forums de discussion, liste de diffusion, annuaires, sites
web"
Pour que votre base e-mail soit optimale et vous apporte le retour escompt, pensez la
rafrachir rgulirement. Une telle opration passe par la suppression des adresses e-
mails invalides et celles des internautes qui ne souhaitent plus recevoir vos e-mails et
vous en ont fait la demande expresse.
Sollicitez votre base e-mail interne deux fois par mois. Au-del, vous pouvez lasser
votre clientle avec le risque quelle traite vos mailings ou newsletters comme des
spams.
Enn, veillez ne pas tre agressif dans votre prospection commerciale.
La conception de votre newsletter
Une newsletter est une "lettre dinformation () compose dinformations rdiges
sous forme de nouvelles brves." Pouvant toucher tout public, elle est diffuse "quoti-
diennement ou sous forme dune lettre hebdomadaire." (dnition extraite du glossaire
du site www.e-marketing.fr).
Lors de son laboration, il faut absolument prendre en compte que votre clientle en
reoit chaque jour un nombre important. Quelles sont alors les cls pour que la vtre se
dtache du lot ? Comment faire pour quelle soit parcourue et amne visiter votre site ?
La newsletter trouve sa lgitimit dans la petite information en plus, la mise en avant de
bons plans, de conseils.
Voici quelques principes prendre en considration. Les donnes majeures (prix exclu-
sifs, promotions, bons plans) doivent tre trs rapidement reprables, car peu de
temps sera consacr la lecture de votre newsletter. Lintrt de louvrir doit frapper
votre cible. Assurez-vous quelle lui est adapte et quelle nest pas trop gnraliste.
Travaillez son titre, son objet. Son graphisme doit tre propre, son contenu concis et
percutant. En toute hypothse, optez pour une information claire.
Pour linscription votre newsletter, rapidit et facilit simposent. Prospects et clien-
tle doivent pouvoir trouver facilement le lien dinscription. Concernant les champs
remplir, limitez-vous au strict ncessaire tout en donnant la n du formulaire la
possibilit de faire part de ses prfrences. Recevoir une newsletter en adquation avec
ses besoins augmentera la satisfaction de vos clients. Lopration doit se conclure par
une conrmation de linscription.
Pour donner envie douvrir votre courriel et de dcouvrir votre newsletter, rassurez en
mentionnant dans le titre le nom de votre entreprise. Pas de place au doute, le client ne
pensera pas recevoir un spam !
Lobjet de votre e-mail doit aussi contenir une donne propre votre cible (son nom, un
lment gographique...). Nhsitez pas prciser la priode pendant laquelle votre
offre est effective cela renforce le dsir, lenvie den proter !
Toute information avance dans le titre de votre e-mailing doit se retrouver dans la pre-
mire partie de votre newsletter, voire le premier sujet trait. Cest une rgle de bon
sens. Orientez la lecture.
Faites attention la ligne de ottaison dmarquant la zone directement visible quand
votre newsletter safche (zone au-dessus de la ligne de ottaison ou "above the fold")
et celle qui ncessitera un scroll. Placez au-dessus votre offre de la semaine, les pro-
duits bnciant dune promotion ou dune actualit Dans cette premire partie de la
389 LEXPLOITATION DE VOTRE BASE E-MAIL
newsletter doivent apparatre les lments mme de capter lattention de linternaute
et de lui donner envie den poursuivre la lecture.
Linternaute prend connaissance du contenu de votre newsletter : cest un bon point !
Mais lobjectif reste de lamener cliquer sur les lments prsents pour le rediriger
vers votre site.
Le plus souvent ce sont les visuels qui seront cliqus. Ils ne doivent pas tre en surnom-
bre. La clart de prsentation des images et textes incitera au clic. La mise en avant de
votre offre appuye par un texte incitatif sera galement dterminante.
tape nale : la redirection vers le site. Pour assurer la satisfaction de vos clients et les
amener acheter, une corrlation entre le contenu de votre newsletter et celui de votre
page daccueil doit exister. Il est inutile de crer une newsletter, si linternaute ne peut
retrouver sur votre site la bonne affaire suggre ou loffre promotionnelle mise en
avant.
Linformation en termes de prix, de dure de loffre, de conditions dapplication doit
tre capte facilement sur votre site tout comme sur votre newsletter.
Lintrt dune newsletter est de maintenir un lien avec lensemble de vos contacts, de vous rappeler
eux sils venaient consulter irrgulirement votre site. La newsletter apparat donc comme loutil
idal de rappel dexistence.
Cet outil marketing permet de communiquer aisment sur les dernires actualits et nouveauts de
votre site. Il est galement un support promotionnel qui grce un lien redirigeant vers votre site,
vous donne lopportunit de gagner en visites.
Dun point de vue plus technique, pour concevoir votre newsletter, il est possible de se
reporter de nombreux sites rpertoriant les tapes suivre, ou de se tourner vers des
agences spcialises.
En vous rendant sur le http://www.conseilsmarketing.fr/emailing/comment-creer-
une-newsletter-en-10-etapes-2, vous accderez un guide dcrivant en 10 tapes
comment laborer votre newsletter (voir Figure 19.1).
Vous y apprendrez les formats privilgier, le poids des images ne pas dpasser,
les erreurs ne pas commettre comme utiliser trop de polices (maximum 3), rdiger le
contenu dans Word et le copier-coller sur lditeur html, etc.
Des conseils vous seront donns pour que votre newsletter ne soit pas classe parmi les
spams. ce titre, il peut tre intressant de permettre linternaute denregistrer votre
adresse dexpdition dans ses contacts (voir Figure 19.2).
Figure 19.1
Des conseils techniques
pour crer votre news-
letter.
Figure 19.2
Pour garantir les bonnes
rception et lecture de
votre newsletter.
391 LEXPLOITATION DE VOTRE BASE E-MAIL
Llaboration dune newsletter doit satisfaire certaines obligations lgales, comme la
possibilit de se dsinscrire, daccder et de pouvoir modier ses donnes personnelles,
lexistence dun message de conrmation dinscription (voir Figure 19.3).
La gestion de vos listes de-mails doit galement reposer sur laccord de leurs propri-
taires. Les concepts dopt-in et double opt-in sont prsents dans la section suivre.
La gestion de vos mailings lists
Quelques prcautions doivent tre prises pour tablir une liste de qualit.
Vous devez vous assurer davoir laccord des internautes auxquels vous comptez
envoyer votre newsletter. dfaut, votre envoi sera considr comme du spam. Il faut
dans ce cas recourir au procd du double opt-in selon lequel un e-mail est envoy
tout internaute demandant dintgrer votre base de donnes an de recevoir votre news-
letter. Pour vous protger des malveillances ou erreurs des internautes, votre e-mail doit
comporter un lien par lequel vous demandez de conrmer le souhait dinscription. Ce
nest qu cette seconde tape que linternaute fera partie de votre rseau dabonns.
Figure 19.3
Le lien de dsabonnement.
Pour que votre base soit continuellement jour, il vous faut permettre linternaute
dactualiser ses donnes de contact ou prfrences dans les mailings que vous lui
envoyez. Un simple lien redirigeant vers son compte suft.
Un autre lien doit tre prsent : celui qui permet de se dsinscrire. aucun moment vos
contacts ne doivent se sentir prisonniers des envois que vous ralisez. Limage de votre
site en dpend.
Pour que votre base e-mail soit optimale et vous apporte le retour escompt, pensez la
rafrachir rgulirement en extrayant les adresses e-mails invalides, et celles des inter-
nautes qui ne souhaitent plus recevoir votre newsletter. Normalement, une personne
souhaitant se dsabonner de votre newsletter doit voir sa demande satisfaite sous
24 heures
Vous pouvez bncier dune aide la gestion de vos listes dabonns. Le site eMill
Optin (http://optin.emill.net/service/) est un service gratuit. Il permet dautomatiser la
gestion de vos listes de contacts dans lhypothse o vous dcidez de lancer une news-
letter.
Ce site vous propose de concevoir un formulaire an que vos visiteurs puissent sabon-
ner votre newsletter. Vous choisissez les questions auxquelles doivent rpondre vos
futurs abonns en mentionnant le caractre obligatoire ou non des questions, puis men-
tionner ladresse de votre site qui apparatra dans le-mail de conrmation dabonnement,
envoy linternaute. Une fois ces oprations ralises il vous suft dintgrer le code
html sur la page de votre site, et le service de gestion est lanc.
Index
Symboles
$_GET 116, 174
$POST 155
.htaccess 246
.htpasswd 246
A
Abandon de panier 274
Above the fold 388
Accs restreint 179
Accessibilit 272
Actifs 139, 145
Administration 57, 235
Accs 237
et rfrencement 247
Fonctionnalits 235
Adresse mail 170
Afliation 304, 377
e-mailing 380
facturation 378
performance 385
principe 378
programme 384
rseau 383
Afli 378
Aflieur 378
Aide 54, 269, 276
Intgration 277
Alerte mail 303
Annonce
illustre 342
localise 342
textuelle 342
pour mobile 343
vido 343
Annuaire 122, 134, 297
Apache, dmarrage 35
APCE 5
Aperu
des donnes 109
Dreamweaver 110
navigateur 109
paramtres 111
Arborescence 53
catalogue 54
espace client 56
procdure dachat 55
Architecture 23, 24, 53
Archivage 48
Assurance 264
Auteur 123, 297
Authentication de lutilisateur 172
Auto-entrepreneur 5
cotisations sociales 6
scalit 6
formalisme 5
TVA. 6
universit 7
Auto-incrment 84
B
Balises de rfrencement 312
<meta description> 312
<meta keywords> 312
<title> 312
mise en place 312
Banque 234, 251, 258
Base de donnes 28, 160
connexion 69, 86
cration 38, 68, 76
dnition des droits 40
dnition des tables 70
droits 39
exportation 85
importation 85
nommage 37
nouvel utilisateur 39
principe 28, 69
privilges 39
spcications 68
structure 68
utilisateurs 39
Bibliothques 139, 147
conversion 148
cration 147
insertion 148
mise jour 152
modication 150
BIC 5
BNC 5
BNP Paribas 263
Business Plan 9
C
Carte bleue 258
virtuelle 258
Catalogue
annuaire 122
arborescence 54
auteurs 123
spcications 53
thorie 94
Chambre de Commerce et dIndustrie 7
Ciblage
exact ou exact match 342
expression ou phrase match 341
large ou broad match 341
options 341
CIC 259
Cl primaire 79
Clients 159
base de donnes 160
cration 162
CNIL 7, 254
Commande, analyse 300
Commentaires 303
Commerce en ligne 1
Commission de paiement 223
Comparateur de prix 369
Comportements 169
de serveur 135
modication 136
Conception 51
Conditions gnrales de vente 254
Conance 251
Connexion 174
cration 88
chier 90
Contact 54, 277
Contenu dynamique 104
image 106
insertion 104
navigation page page 130
numrotation 132
rgions rptes 126
Cookie 101
COUNT(*) 301
Cot par clic Voir CPC
CPA 380
CPC 369, 380
CPM 380
Crdit Agricole 260
Cryptage 161
CTR 340
395 INDEX
D
Database 28
Date 275
Dconnexion 177
Deep linking 315
Dveloppement local 21
Disponibilit 245
Donnes
dynamiques, aperu 109
personnelles 254
double opt-in 391
Doublons 171
Dreamweaver 11
actifs 139
bibliothques 139
connexion 88
page blanche 86
Droit
daccs 237
de rtractation 255
Dump 85
E
e.transactions 260
EasyPHP 32
e-commerce, dnition 1
diteur 297
Enregistrements, insertion 162
Entreprise 4
Ergonomie 269
eSKueL 28
Espace client, spcications 56
Espace de dveloppement 44
tapes 10
tiquettes 165
Exclusion dindexation 324
Extraction 48
F
Facturation 221
autres solutions 234
formulaire 230
jeu denregistrements 230
Factures 233
FAQ 54, 276
Fia-Net 264
cot 268
interface 266
Logo 265
transactions 267
Fiches produits 273
Fichier Robots.txt 324
Filtre 101
critre 101
variables 101
Foire aux questions 276
Folksonomie 295
Formulaire 141, 165
champs cachs 168
dinsertion 162
de connexion 174
de mail 277
de mise jour 181
nombre de caractres 168
ordre des champs 166
Framing 315
Fraude 265
FTP 48
G
Gestion 235
GET 116
Google AdWords 332
gestion dun campagne 339
ouverture dun compte 333
Google Analytics 279, 345
Cheminements 284
mise en place 280
rapports 283
tracking code 280
GROUP BY 301
H
Homepage 55
HTML 23
syntaxe 26
httpd.conf 35
Hyperlien 315
I
IAB 379
Ides cadeaux 303
Identiant unique 79
Identication 159
Image dynamique 106
Index 79
Indexation 308
Indice de qualit 355
Inline linkning 315
INNER JOIN 117
Interactive Advertising Bureau 379
Interface 269
J
Jakob Nielsen 11, 273
Jeu denregistrements 95, 154
ajouter 96
choix des tables 96
colonnes 98
connexion 97
cration 96
ltre 99
mode avanc 98, 113
mode simple 96
nom 97
test 102
test et Variables 103
Jointures 117, 118
K
Kelkoo 370
rubriques 371
tarifs 371
L
Langues 253
LCEN 251
LCL 263
Le Guide 372
Audience 373
Liaisons 96
Liens 119
absolus 144
dynamiques 119
hypertextes 315
optimisation des liens sponsoriss 364
profonds 315
relatifs 144
Ligne de ottaison 388
Listes 303
des produits 237
Localhost 45
Loi
de modernisation de lconomie 5
sur la conance dans lconomie numrique 251
397 INDEX
M
Mac OS 32
Mail 277
Mailing 387
Maquette 67
Marketing 296
Message derreur 171
Mthode
GET 145
POST 145
Microsoft adCenter 356
ciblage incmental 362
Mise jour des lments de bibliothque 153
MM_Username 182
Mode
code 173
fractionn 173
Mot de passe 161, 246
Moteur de recherche 139, 271
Mots cls 308
MySQL 28, 76
attributs 79
cls 79
dmarrage 35
type de donnes 78
N
Navigation 270
page page 129
net linking 316
Newsletter 387
Niveau daccs 176, 180
Nom de domaine, dnition 256
Nouveauts 297
Nouvelle page 86
Numrotation 132
O
Optimisation 302
ORDER 117, 125, 155
Ordre 125
Outils dadministration 57
P
P@iement 259
Page
daccueil 55
Principale-Dtails
de dtail 240
donnes 238
liens 240
Rank 317
Paiement 221
scuris 251, 258
Panneau
actifs 145
bases de donnes 87
liaisons 96
Paramtres dURL 94, 101, 110, 119
PayPal 222
Belgique 224
commission 223
comptes Premiers 224
conguration 227
conrmation Mail 226
inscription 224
intgration 229
redirection automatique 232
suisse 224
vrication des paiements 233
PHP 21, 24
balises 27
code 25
documentation 27
historique 25
paramtres dURL 94, 110
sessions 162
syntaxe 25
PHP 5.0 34
PHP/MySQL 11
phpMyAdmin 28, 35, 37, 76
cration dune table 77
privilges 39
remplissage de tables 84
POST 155
Prxe dURL 45
Procdure dachat, arborescence 55
Prol de site 41
assistant 42
cache 48
dnition 42
FTP 47
mthode de modication 44
nommage 43
prxe dURL 45
RDS 47
rsum 48
serveur
de dveloppement 43
distant 47
test 46
webCAV 47
Propositions 297
contextuelles
base de donnes 203, 299
requte 300
Protection 246
de la vie prive 254
Publipostage 387
R
Recherche 139, 242
avance 158
rsultats 154
Redirection aprs paiement 232
Rfrencement naturel 307
choix des mots cls 311
optimisation dune campagne 314
Rfrencement payant 327
campagne 331
Rgions rptes 126, 156
jeux denregistrements 127
occurrences 128
Rglementation 253
Rpertoire de dveloppement 41
Requte 113
imbriques 301
INNER JOIN 117
ordre 125
paramtres 115
SQL 80
test 118
WHERE 115
Robots.txt 247
S
Section Client 178
Secure Socket Layer 260
SELECT 114
Serveur 23, 24
de dveloppement 21, 31
Mac OS 32
distant 47
local 31
session_start 186
Sessions 162, 182, 185
399 INDEX
Shopbot 369
Shopping.com 373
Site
Dreamweaver 153
dynamique 21
avantage 21
requtes serveur 24
statique 23
requtes serveur 23
Sitemaps
chier 318
mise en place 318
protocole 318
Social
Commerce 296
Marketing 296
Socit Gnrale 262
Sogenactif 262
Spcications 51, 52, 58
annuaire 60
auteur 61
catalogue 53, 58
commandes 62, 66
connexion 63
description dun article 58
espace client 56, 65
inscription 64
panier 64
procdure dachat 55
recherche 62
SQL 80
jointures 117
ORDER 125
requte 113
SSL 221, 260
Statistiques 279
Statut
auto-entrepreneur 7
juridique 4
Structure 53
Support 269
T
Table de donnes
cration 77
prxe 78
remplissage 84
Tarifs 253
Taux de rebond 280
Twenga 374
U
URL Encode 121
Usability 273
V
Valeur 168
entre 101
Validation des doublons 171
Valider le formulaire 169
Variable
de formulaire 101
de serveur 101
de session 101
Vrier le nom dutilisateur 172
chec 172
Vocabulaire 270
W
W3C 26, 271
WAI 271
Wamp5 31
conguration 36
dmarrage 34
forum 36
installation 32
rpertoire de dveloppement 41
tlchargement 32
WCAG2.0 271
Web
2.0 295, 303
Accessibility Initiative 271
Content Accessibility Guidelines 271
X
Xiti 290
abonnement 290
rapports 291
Y
Yahoo! Search Marketing 347
interface 350
Le Campus
Crer un site e-commerce
Table des matires
Introduction au monde du
e-commerce
Bien choisir son hbergeur
Mise en place dun serveur de
dveloppement
Spcifications et cration de la base
de donnes
Cration dun catalogue en ligne
Installation dun moteur de recherche
Accueil des clients et ouverture des
comptes
Grer les commandes des clients
Paiement et facturation
Mise en place dune plate-forme
dadministration
Un site scuris inspirant confiance
Support et aide pour guider le client
lors de son achat
Statistiques de frquentation et de
vente
Vers une boutique 2.0
Rfrencement naturel
Rfrencement payant
Utiliser les comparateurs de prix
Faire appel aux services daffiliation
Lexploitation de votre base e-mail
Le commerce en ligne ne cesse de se dvelopper et constitue un apport
remarquable aux bnfices dune entreprise. Ce livre vous guidera dans
toutes les tapes de la cration dun site, de sa mise en place technique
( laide de Dreamweaver CS4 et PHP/MySQL) sa promotion. Il vous
aidera laborer et organiser une base de donnes pour assurer vos
produits le maximum de visibilit ainsi qu utiliser des solutions de
paiement en ligne simples et totalement scurises. Vous apprendrez
rfrencer votre site de manire efficace et tablir une relation de
confiance avec vos clients. Enfin vous dcouvrirez lensemble des leviers
de marketing disposition dune boutique en ligne (plate-forme daffilia-
tion, publicit, liens sponsoriss, comparateurs de prix).
Cette quatrime dition prend en compte les nouveauts de Dreamweaver
CS4, le nouveau statut dauto-entrepreneur et lvolution des plate-for-
mes de paiement bancaire, de Google Analytics et de Xiti.com. Enfin elle
met laccent sur la scurisation de votre site.
Rsolument pratique, cet ouvrage sadresse avant tout aux TPE et PME.
Il dveloppe au fil des chapitres un exemple concret afin que vous puis-
siez, au terme de votre lecture, crer vous-mme un site efficace et
lucratif.
propos des auteurs
Franois Houste est directeur du ple Projects & Analytics de lagence de marketing en ligne LSF
Interactive. Il se dfinit volontiers comme un passionn du Web, sans cesse la recherche de services,
dides et de personnes innovantes.
Certifie Google Advertising Professionals en 2007, Delphine Bouton volue dans le secteur du webmar-
keting. Elle a travaill pour le compte de lagence LSF Interactive et de Yahoo! Search Marketing.
Sandrine Houste est chef de projet dans linformatique bancaire.
avec Dreamweaver CS4 et PHP/MySQL
Niveau : Dbutant / intermdiaire
Catgorie : Dveloppement web
Configuration : Mac / PC
4
e
dition
Codes sources sur www.pearson.fr !
Pearson Education France
47 bis, rue des Vinaigriers
75010 Paris
Tl. : 01 72 74 90 00
Fax : 01 42 05 22 17
www.pearson.fr
ISBN : 978-2-7440-4101-3
4101 1209 32

Creer Un Site e Commerce

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Creer Un Site e Commerce

Transféré par

Droits d'auteur :

Formats disponibles

Le Campus

Vous aimerez peut-être aussi