Creer Un Site Ecommerce Avec DreemwaverCS4 Et PHP-MySQL

Le Campus
Crer un site e-commerce

avec Dreamweaver CS4 et PHP/MySQL
Codes sources C sur su ur w www.pearson.fr w
Franois et Sandrine Houste, Delphine Bouton avec la contribution de Raphalle Roux
Crer un site e-commerce avec Dreamweaver CS4 et PHP/MySQL

4e dition
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 thoriques. 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. 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
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.
Crer un site e-commerce avec Dreamweaver CS4 et PHP/MySQL

Franois Houste, Sandrine Houste et Delphine Bouton avec la contribution de Raphalle Roux
Table des matires

1 Introduction au monde du e-commerce . . . . . . . . . . . . . . . . . . . . . . . Comment utiliser ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Une boutique en ligne, mais pas nimporte comment . . . . . . . . . . . . .
Bien penser la stratgie de sa boutique . . . . . . . . . . . . . . . . . . . . . . . . . . Le statut juridique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dclaration la CNIL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1 2 3 3 4 7 8 10 11
Comment procder ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les diffrentes tapes de la cration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Partie I Mise en place technique dune boutique

2 Bien choisir son hbergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les offres ddies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lhbergement gnraliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Mise en place dun serveur de dveloppement . . . . . . . . . . . . . . . Comment fonctionne un site dynamique ? . . . . . . . . . . . . . . . . . . . . . . . . .
Les avantages dun site dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Anatomie dun site dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15 15 17 21 21 21 23 24 25 25 28 30
La technologie PHP en dtail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prsentation gnrale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PHP dans vos pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les bases de donnes MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dernire brique, un serveur Apache. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
VI
CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL
Installation de WampServer 2.0 sur un systme Windows . . . . . . . . . . .

Prsentation et tlchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Installation de WampServer 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en marche des serveurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31 31 32 34 36 37 39 41 41 41 42 43 47 51 52 53 58 67 68 69 69 70 76 84 86 86
Conguration de lenvironnement de dveloppement . . . . . . . . . . . . . . .

Nommage de la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnition des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cration du rpertoire de dveloppement . . . . . . . . . . . . . . . . . . . . . . . .
Cration du prol de site dans Dreamweaver CS4 . . . . . . . . . . . . . . . . . .

Prsentation rapide de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . Lassistant Prol de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Localisation du serveur de dveloppement . . . . . . . . . . . . . . . . . . . . . . . Connexion au serveur distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4 Spcifications et cration de la base de donnes . . . . . . . . . . . . . Spcication des pages dun site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Arborescence du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Spcication des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ralisation des maquettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnition de la structure de la base de donnes . . . . . . . . . . . . . . . . . . . .

Communication entre le site et la base de donnes . . . . . . . . . . . . . . . . Conseils gnriques la conception de la base de donnes . . . . . . . . . . Base de donnes de la boutique en ligne . . . . . . . . . . . . . . . . . . . . . . . . .
Cration des tables dans phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . Remplissage des tables MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connexion la base de donnes dans Dreamweaver CS4 . . . . . . . . .
Cration dune page blanche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TABLE DES MATIRES
VII
Le panneau Bases de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cration dune connexion pour un site PHP . . . . . . . . . . . . . . . . . . . . . . Fichier de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
87 88 90 93 94 95 96 96
5 Cration dun catalogue en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fonctionnement thorique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnition de jeux denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Le panneau Liaisons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cration dun jeu denregistrements simple . . . . . . . . . . . . . . . . . . . . . .
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
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
TABLE DES MATIRES
IX
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
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
TABLE DES MATIRES
XI
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
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
TABLE DES MATIRES
XIII
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
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
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 "dmatrialiss", 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 chiffre 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 lHexagone. 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 ?
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 oprationnelle, 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 rellement 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 visiteurs, 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 boutique 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-mailling cibls.
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 produits 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 commerce 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 nouveau 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 catalogue, 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 premier business : pas de fonds de commerce acqurir, pas de ramnagement de boutique 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 individuelles, tels les commerces en ligne. Il nest plus ncessaire de crer une socit part entire pour proter de revenus commerciaux, grce au statut juridique dentreprise 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 immatriculation 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 bnces 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 renseignements ncessaires.
Figure 1.1
Le site de lAPCE est une vritable mine de renseignements sur la cration dentreprise.
Avec lentre en application de la Loi de modernisation de lconomie du 4 aot 2008, le rgime dauto-entrepreneur est consacr. Depuis le 1er 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 activit 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.
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 reprsentant 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.
Figure 1.2
Les diffrents taux applicables en matire de charges sociales.
Taux du micro-social et du micro-fiscal simplifi Types d'activits

Commerciale, artisanale
Exemples Total
Vente de biens, fourniture de logement, restaurants, boulangerie 1%
Taux Taux de charges l'impt sociales

12,0 % 13,0 %
Prestation de services commerciale, Intermdiaire de commerce, coiffeur, artisanale ou librale relevant du RSI rflexologue 21,3 % Prestation de services librale relevant de la CIPAV Conseil, gologue, dcorateur 18,3 %
1,7 %
23,0 %
2,2 %
20,5 %
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 business. 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.
Dernier point mentionner au titre des avantages : lexonration de la taxe professionnelle 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 comporte 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 propre 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 (Commission 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.
Figure 1.3
En France, la CNIL veille au bon usage des informations personnelles sur Internet.
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 formulaires et mentions prrdigs, en accord avec la lgislation actuelle sur la collecte dinformations 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 connaissance 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
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).
Figure 1.4
Le Journal du Net reste une bonne source dinformation sur le monde du Web.
tablissez ce quon appelle un Business plan : "Document de plusieurs pages qui dcrit lensemble du projet dune entreprise : activit, march, technologie, marketing, ressources humaines et plus prcisment les dpenses programmes et les ressources
10
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 dveloppement, 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 fonction 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.
11
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 facilement 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.
12
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 prsent 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 galement 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 techniques pour crer un site dynamique rpondant vos attentes et celles de vos clients.
Bien choisir son hbergeur

Au sommaire de ce chapitre 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 publicit 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 boutique 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 serveur 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 quelquesuns des rseaux de distribution en ligne les plus clbres (voir Figure 2.1).
16
Figure 2.1
PowerBoutique propose une solution de boutique en ligne tout intgre.
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 laissent 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 prestataire propose une solution qui soit facile migrer chez un concurrent.
BIEN CHOISIR SON HBERGEUR
17
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 boutique sans avoir recours au codage la main. Cest le cas par exemple dOS Commerce (www.oscommerce.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 dinformation, 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 partenaire 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 boutique 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 dynamiques et une base de donnes. Avec ces deux lments, plus quelques autres indpendants 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 vousmme qui laurez conue. Le prix est souvent sans comparaison avec une offre ddie au e-commerce.
18
Figure 2.2
En France, OVH propose des offres dhbergement mutualis.
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 solution 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 implication. 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 principales sources dencombrement du serveur. Ct bande passante, tout dpend de la frquentation espre. Une page de boutique bien conue ne devrait pas peser plus de 100 ko.
BIEN CHOISIR SON HBERGEUR
19
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
Mise en place dun serveur de dveloppement

Au sommaire de ce chapitre 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 consquence, 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 dveloppement 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 installer votre propre environnement de dveloppement, en loccurrence WampServer 2.0, sur une machine quipe de Windows. Vous apprendrez galement procder aux premiers 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 institutionnels, 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.
22
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 montage 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 correspondantes 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 cration dun moteur de recherche ou du Caddie virtuel utilis par les clients devient quasiment impossible ou demande tout au moins lutilisation de tellement de JavaScript quil serait sans doute prfrable den abandonner lide.
Figure 3.1
Le site de la FNAC est entirement fond sur la technologie ASP de Microsoft.
Comment rsoudre alors ce casse-tte ? En utilisant les technologies de sites dynamiques, 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.
MISE EN PLACE DUN SERVEUR DE DVELOPPEMENT
23
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 correspondant 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 correspondant. 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.
D DVM RO
Demande daffichage dune page
Rendu de la page demande Serveur web
Visiteur
24
Quand vous naviguez sur des sites dynamiques, le fonctionnement est sensiblement diffrent. 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 demande 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 provoquera les mmes requtes et mcanismes sur le serveur.
Demande de la page Requte des lments dynamiques
D DVM RO
Rendu de la page demande Serveur web
Donnes inclure dans la page Serveur de base de donnes
Visiteur
Figure 3.3
Le serveur est trs sollicit lors de laffichage des pages dun site dynamique.
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
25
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 moindre. 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 pouvoir 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 grandement facilite par la vivacit du monde du logiciel libre. En effet, une foule de programmes 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>
26
Figure 3.4
Le portail de PHP : http://www.php.net.
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 classiques. Il vous est donc inutile de coder en PHP lafchage entier dune page, contentezvous 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 entirement 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.
27
Si vous souhaitez malgr tout en savoir plus sur le langage PHP, sa syntaxe et ses possibilits 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).
Figure 3.5
www.phpfrance.com, une bonne initiation au langage PHP .
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 conguration par dfaut de PHP 5.
28
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 majorit 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 correspondante 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 compose 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).
29
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 .
Il offre en outre lavantage dtre disponible chez la plupart des hbergeurs professionnels et dtre administrable directement par une interface web, grce des programmes
30
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 extrieurs. 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 navigateur. Pour votre site, sa tche va se compliquer. Il devra galement gnrer automatiquement 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.
31
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 entreprises, 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 mettre 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, supporte le langage PHP. Cest bien entendu possible, mais cela peut vite se rvler fastidieux ! 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 visualisation ! 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 serveur de base de donnes MySQL. Ils sont trs simples installer sur nimporte quelle
32
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.
Figure 3.9
WampServer 2.0 est un serveur Apache cl en main.
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 tlcharger. Linstallation du serveur dbute aussitt.
33
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 principales 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 sauvegarder 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).
Figure 3.10
O allez-vous installer WampServer 2.0 ?
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 coordonnes de votre serveur mail ainsi que ladresse de lexpditeur de vos messages
34
(voir Figure 3.11), au cas o vous intgreriez des fonctionnalits mail dans vos dveloppements. Prcisez alors les coordonnes habituelles de votre bote mail.
Figure 3.11
WampServer a besoin de vos coordonnes mail pour finaliser sa configuration.
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 quelques 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).
Figure 3.12
Votre serveur est en cours dexcution.
Cest depuis cette icne que vous pouvez accder lensemble des commandes du serveur. Dun simple clic gauche, vous droulez un menu de commandes assez complet (voir Figure 3.13).
35
Figure 3.13
Les diffrentes commandes de votre serveur WampServer.
WampServer 2.0 est scuris dans sa configuration par dfaut. Les accs votre serveur de dveloppement ne sont autoriss qu partir de la machine o ce serveur est en cours dexcution. Cette limitation 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/Restart 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 Windows. 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 phpMyAdmin.
36
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).
Figure 3.14
Les forums de Wamp rpondront bien des questions.
Configuration de lenvironnement de dveloppement

WampServer 2.0 est install sur votre ordinateur, mais cela ne veut pas dire que linstallation 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, identiant et mot de passe de ladministrateur tous ces paramtres doivent tre personnaliss an de correspondre votre futur hbergement. Ainsi, une fois votre site diffus dans sa version nale, aucun changement ne sera ncessaire pour le rendre oprationnel.
37
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 permettre, 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).
Figure 3.15
phpMyAdmin, linterface de gestion des bases MySQL la plus rpandue.
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 !
38
Vous allez crer une nouvelle base MySQL sur votre serveur de dveloppement. La manipulation 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.
Figure 3.16
Crez votre nouvelle base de donnes.
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.17
Votre nouvelle base de donnes a t cre avec succs.
39
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).
Figure 3.18
Voici les utilisateurs SQL existant dj.
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. Lutilisateur 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.
40
Figure 3.19
Le formulaire de cration des utilisateurs MySQL.
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 informations, 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.
41
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).
Figure 3.20
Pensez recharger les privilges de votre serveur afin que votre nouvel utilisateur soit valide !
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.
42
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 dsormais 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 galement 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 lments 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 serveur 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 slectionner 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.
43
La fentre Dnition du site souvre alors (voir Figure 3.21).

Figure 3.21
Premire tape de la dfinition dun site.
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 Dreamweaver que vous souhaitez mettre en place un site dynamique. Puis slectionnez
44
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.
Figure 3.22
Toutes les technologies disponibles dans Dreamweaver sont l !
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 ordinateur. 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.
45
Figure 3.23
O se trouve votre serveur de dveloppement ?
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 ordinateur 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://localhost/, 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
46
est distant, il sagira alors de ladresse de ce serveur distant, suivie ventuellement de quelques dossiers.
Figure 3.24
Dfinissez prsent la faon daccder votre serveur de dveloppement.
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 : Dreamweaver 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.
47
Figure 3.25
Votre serveur de dveloppement existe rellement.
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.26
Les paramtres dune connexion FTP .
48
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 collaboration, 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.
49
Figure 3.27
Ces paramtres sont-ils corrects ?
Spcifications et cration de la base de donnes

Au sommaire de ce chapitre 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 comportement 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 informations, 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 logiquement enregistres dans une mme table de votre base de donnes. Elles seront ainsi rcuprables en une seule requte.
52
Comme vous le voyez dans ce cas, la structure de votre base de donnes dpend directement 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 spcications, 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 complter 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 comment 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.
SPCIFICATIONS ET CRATION DE LA BASE DE DONNES
53
Arborescence du site
Le site de-commerce que vous allez construire va possder une structure relativement simple. 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 catgorie 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 entraner 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 pourrait tre Bureautique, Cration web, Graphisme et le second, Word, Excel, Dreamweaver, Photoshop. Une page de rsultat de recherche afchant les diffrents ouvrages trouvs suite une recherche effectue sur la page daccueil du site.
54
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.
Figure 4.1
La structure de la section Catalogue.
Bibliographie d'un auteur Page d'accueil
Annuaire Rsultat de recherche
Description d'un ouvrage
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 diffrentes 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
55
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 profondeur 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 suivant 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).
Figure 4.2
Le processus de commande de vos livres.
Description d'un ouvrage
Panier
Cration d'un compte
Validation de la commande Paiement Facturation
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.
56
Si les visiteurs sont dj connects votre boutique, cest--dire quils ont dj utilis un formulaire de connexion pour remplir leur panier, un lien Acheter sera directement 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 service 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
57
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 informations. 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 !
58
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 accessible 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 dynamique 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 maboutique.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 Dreamweaver CS4.
DESCRIPTION DUN ARTICLE
Vous lavez sans doute dj compris, la page de description dun article est vritablement 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
59
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 permettent 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 Chapitre 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 maboutique.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 appartenant 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.
60
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 darborescence (grands thmes comme Bureautique, Internet), la seconde dtaille les catgories 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.
Figure 4.5
La page principale de lannuaire se contente de lister les catgories disponibles sur le site.
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 parution (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 informatiques, Ouvrages informatiques. <meta desc> : Trouvez tous les livres sur Rubrique Annuaire sur maboutique.com.
61
Figure 4.6
Le dtail dune catgorie dannuaire est en fait la liste des ouvrages disponibles.
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.7
La fiche auteur se compose en fait dune liste douvrages.
62
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.
Figure 4.8
Les rsultats dune recherche sur votre boutique.
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
63
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.
Figure 4.9
Lidentification sur votre boutique tient en deux champs de formulaire.
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 catalogue. Ainsi, vos visiteurs pourront se connecter depuis nimporte quelle page an deffectuer un achat plus rapidement.
64
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.
Figure 4.10
Toutes ces informations sont ncessaires la cration dun compte sur votre boutique.
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 supprimant 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.
65
Figure 4.11
Le panier du client saffiche simplement sous la forme dun tableau.
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 modication des donnes personnelles du client, lautre, vers le suivi des commandes effectues.
Figure 4.12
Deux liens composent la page daccueil de lespace client.
66
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 ventuelles 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.
Figure 4.13
Le formulaire de modification des donnes personnelles est semblable celui utilis pour la cration des comptes.
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.
67
Figure 4.14
Toutes les commandes passes par un mme client.
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.15
Une premire maquette avant mme de lancer un diteur HTML.
68
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 donnes est constitue de tables qui sont assimilables des tableaux regroupant les informations 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 rfrence 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 correspond un livre (voir Figure 4.16).
Figure 4.16
Les donnes dune base se dcomposent en colonnes et en lignes.
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 lintermdiaire 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.
69
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 formulaire, 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, permettant didentier de faon unique chaque ligne de la table. Ces numros qui identient 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
70
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 votre boutique en ligne. 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 10 10 Attributs Extra Cl primaire x x Cl index Cl unique Commentaire Identiant unique de louvrage Numro ISBN de louvrage, utilis comme numro de rfrence Identiant de la premire rubrique dannuaire correspondant louvrage Identiant de la seconde rubrique dannuaire correspondant louvrage
id isbn
int varchar
unsigned auto_increment
categorie
int
11
unsigned
sous_categorie int
11
unsigned
71
Tableau 4.1 : Structure de la table shop_livres (suite)

Champs Type Valeurs Attributs Extra Cl primaire Cl index Cl unique Commentaire Titre de louvrage Prix hors taxe de louvrage Prix toutes taxes comprises de louvrage Date de parution de louvrage Rsum de louvrage 11
titre prix_ht prix_ttc
text float float
parution resume auteur
datetime text int unsigned

x
Identiant de lauteur de 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.
Tableau 4.2 : Structure de la table shop_auteurs
Champs Type Valeurs 10 64 64 Attributs Extra Cl primaire x Cl index Cl unique Commentaire Identiant unique de lauteur Nom de lauteur Prnom de lauteur
id nom prenom
int varchar varchar
72
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
Champs Type Valeurs 10 Attributs Extra Cl primaire x Cl index Cl unique Commentaire Identiant unique de la catgorie dannuaire Intitul de la catgorie dannuaire
id
int
unsigned
auto_increment
libelle
varchar
64
Tableau 4.4 : Structure de la table shop_sous_categories

Champs Type Valeurs 10 Attributs Extra Cl primaire x Cl index Cl unique Commentaire Identiant unique de la souscatgorie dannuaire Intitul de la sous-catgorie dannuaire 11
id
int
unsigned
auto_increment
libelle
varchar
parent
int
unsigned
Identiant de la catgorie dannuaire parente
73
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
Champs Type Valeurs 10 64 Attributs Extra Cl primaire x x Cl index Cl unique Commentaire Identiant unique du client Adresse e-mail du client, utilise comme identiant unique sur le site Nom du client Prnom du client Numro de tlphone du client Mot de passe du client, information crypte avant son stockage en base de donnes Premire ligne de ladresse physique du client Seconde ligne de ladresse physique du client Code postal de ladresse physique du client Ville de ladresse physique du client
id mail
int varchar
unsigned
auto_increment
nom prenom telephone mdp
varchar varchar varchar varchar
64 64 10 32
ad_ligne1
varchar
64
ad_ligne2
varchar
64
ad_cp
varchar
ad_ville
varchar
64
74
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.
Tableau 4.6 : Structure de la table shop_panier
Champs Type Valeurs 10 Attributs Extra Cl primaire x Cl index Cl unique Commentaire Identiant unique de la ligne de panier x Adresse e-mail du client remplissant le panier actuel Identiant de larticle ajout au panier Nombre darticles du mme genre ajout au panier
id
int
client
varchar
64
article
int
10
unsigned
quantite
int
10
unsigned
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 enregistrement 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.7 : Structure de la table shop_commande
Champs Type Valeurs 10 64 Attributs Extra Cl primaire x x Cl index Cl unique Commentaire Identiant unique de la commande Adresse e-mail du client remplissant le panier actuel
id client
int varchar
75
Tableau 4.7 : Structure de la table shop_commande (suite)

Champs Type Valeurs Attributs Extra Cl primaire Cl index Cl unique Commentaire Date de commande Total hors taxe de la commande Total toutes taxes comprises de la commande 1 tat dexpdition de la commande
date total_ht total_ttc
date float float
expedition
char
Tableau 4.8 : Structure de la table shop_ligne_commande

Champs Type Valeurs 10 Attributs Extra Cl Cl primaire index x Cl unique Commentaire Identiant unique de la ligne de commande x Identiant de la commande contenant la ligne de commande Numro ISBN de larticle command Prix HT de larticle command au moment de la commande Prix TTC de larticle command au moment de la commande Total HT
id
int
commande
int
10
unsigned
article
int
10
unsigned
prix_ht
float
prix_ttc
float
total_ht
float
76
Tableau 4.8 : Structure de la table shop_ligne_commande (suite)

Champs Type Valeurs Attributs Extra Cl Cl primaire index Cl unique Commentaire Total TTC payer pour larticle command 11 Nombre dexemplaires de larticle command
total_ttc
float
quantite
int
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.
Tableau 4.9 : Structure de la table shop_propositions
Champs Type Valeurs 10 10 10 Attributs Extra Cl primaire x x Cl index Cl unique Commentaire
article1 article2 quantite
int int int
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 cration 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.
77
Figure 4.17
PhpMyAdmin, linterface de gestion des bases MySQL la plus rpandue.
La liste des tables disponibles sur cette base apparat alors. De fait, cette liste doit tre vide (voir Figure 4.18).
Figure 4.18
Aucune table nexiste actuellement dans votre base de donnes.
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).
78
Figure 4.19
Prcisez ici le nom de la table crer, ainsi que le nombre de champs qui la composent.
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.
Figure 4.20
La dfinition relle de la table seffectue ici.
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
79
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 automatiquement 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 disposez 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 correspondant ces trois champs en fonction de la dnition des tables effectues plus haut dans ce chapitre (voir Figure 4.21).
Figure 4.21
La dfinition des index et autres cls dans phpMyAdmin.
Les trois donnes Cl primaire, Index et Identifiant unique ont chacune une fonction bien particulire : 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.
80
Les champs marqus comme index servent optimiser les recherches dans la table. Lidentifiant unique spcifie quant lui quun seul enregistrement dans votre table peut contenir une valeur spcifique 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.
Figure 4.22
Votre nouvelle table est 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 raliser 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 donnes (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
81
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` ( ìd` int(10) unsigned NOT NULL auto_increment, `libelle` varchar(64) NOT NULL, PRIMARY KEY (ìd`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1; -- ---------------------------------------------------------- Structure de la table `shop_client` -CREATE TABLE `shop_client` ( ìd` int(10) unsigned NOT NULL auto_increment, `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`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
82
-- ---------------------------------------------------------- Structure de la table `shop_commande` -CREATE TABLE `shop_commande` ( ìd` int(10) unsigned NOT NULL auto_increment, `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`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1; -- ---------------------------------------------------------- Structure de la table `shop_ligne_commande` -CREATE TABLE `shop_ligne_commande` ( ìd` int(10) unsigned NOT NULL auto_increment, `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`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1; -- ---------------------------------------------------------- Structure de la table `shop_livres` -CREATE TABLE `shop_livres` ( ìd` int(10) unsigned NOT NULL auto_increment, ì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,
83
`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`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1; -- ---------------------------------------------------------- Structure de la table `shop_panier` -CREATE TABLE `shop_panier` ( ìd` int(10) unsigned NOT NULL auto_increment, `client` varchar(64) NOT NULL, àrticle` int(10) unsigned NOT NULL `quantite` int(10) unsigned NOT NULL, PRIMARY KEY (ìd`), KEY `client` (`client`,àrticle`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1; -- ---------------------------------------------------------- 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` ( ìd` int(10) unsigned NOT NULL auto_increment, `libelle` varchar(64) NOT NULL, `parent` int(11) unsigned NOT NULL, PRIMARY KEY (ìd`), KEY `parent` (`parent`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
84
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.
Figure 4.23
Ce tableau rsume lensemble des tables existantes dans votre base de donnes.
Cliquez sur le lien Insrer des donnes pour accder au formulaire de saisie. Il se prsente 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.24
Compltez ce formulaire pour ajouter un nouvel enregistrement votre table.
85
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. Procdez 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 formulaire 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 STRUCTURE et DATA sont bien coches puis cliquez sur le bouton Go. Vous obtiendrez alors, dans un nouveau 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 dexportation dune base de donnes dans phpMyAdmin.
86
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 dynamique 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
87
Figure 4.26). Sur cette fentre, slectionnez la cration dune nouvelle page utilisant la technologie PHP, Crer > PHP.
Figure 4.26
Choisissez une nouvelle page de type 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.
88
Le panneau Bases de donnes est disponible dans le groupe de panneaux Application (voir Figure 4.27).
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
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 dynamiques 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.
89
Figure 4.28
Seule la connexion une base MySQL est possible pour un site PHP .
Choisissez de prfrence un nom reprsentatif du type de connexion cr, comme le nom de la base de donnes utilise.
Figure 4.29
La dfinition complte de votre connexion se droule ici.
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 Slectionner pour localiser la base de donnes souhaite dans la liste des bases disponibles 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 correctement. 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).
90
Figure 4.30
Voici lensemble des bases de donnes accessibles sur votre serveur de dveloppement.
Figure 4.31
Tous les paramtres de connexion semblent corrects.
Figure 4.32
Votre nouvelle connexion est dfinie et oprationnelle.
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.
91
Figure 4.33
Un fichier de connexion est cr dans larborescence de votre site.
Chacun des chiers porte le nom de la connexion qui lui correspond, lextension correspondant la technologie utilise pour crer celle-ci (.php dans notre cas).
Cration dun catalogue en ligne

Au sommaire de ce chapitre 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 chapitres, 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.
94
Commenons donc par crer la page centrale de votre boutique en ligne : la description dtaille dun article (voir Figure 5.1).
Figure 5.1
La page de description dun ouvrage, version finale !
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 galement 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
CRATION DUN CATALOGUE EN LIGNE
95
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 dynamiques 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.
Ajouter un jeu d'enregistrements Supprimer un jeu d'enregistrements Langage dynamique utilis
Rafrachissement du jeu d'enregistrements
Jeu d'enregistrements
Liste des champs disponibles dans le jeu
Insertion de donnes dynamiques sur la page
96
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 complexe, 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 dveloppement 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 associ 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 ellemme 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 gauche du panneau, et slectionnez la commande Jeu denregistrements (Requte) dans le menu correspondant.
97
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.
Figure 5.3
Tous les paramtres ncessaires la cration dun jeu denregistrements sont l.
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 denregistrements. 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.
98
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 trouvent les enregistrements que vous souhaitez utiliser. Cette liste droulante afche par dfaut le nom de toutes les tables disponibles partir de la connexion prcdemment 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 disponibles. 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).
Figure 5.4
Il est possible de nutiliser que quelques champs dune table dans un jeu denregistrements.
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.
99
Faites attention vos choix lors de la slection des colonnes. Si votre base de donnes contient beaucoup dinformations et que vous souhaitiez tout de mme en utiliser toutes les colonnes, vous ralentirez 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).
Figure 5.5
Votre premier jeu denregistrements est oprationnel.
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 chapitre, 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 certaines 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
100
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.
Figure 5.6
Slectionnez dabord la colonne sur laquelle portera le filtre.
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.7
Slectionnez ensuite loprateur utilis dans votre filtre.
101
3. Dans la troisime liste droulante de la zone Filtre, situe en dessous du champ utilis, 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.
Figure 5.8
Dans ce cas prcis, votre filtre se fondera sur une valeur bien dfinie.
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).
Tableau 5.1 : Types de donnes disponibles pour la mise en place dun filtre
Types de donnes Paramtre dURL Variable de formulaire Cookie Variable de session Description 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). La valeur de comparaison du ltre est dnie par la valeur dun champ de formulaire classique envoy depuis la page prcdente du site. La valeur de comparaison est stocke dans un cookie sur lordinateur du visiteur de votre site. La valeur de comparaison est une variable de session, cest--dire une variable dnie 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. 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 celuici. La valeur de comparaison est non pas une variable mais une valeur xe dnie une fois pour toutes lors de la cration du ltre.
Variable de serveur
Valeur entre
Dans le cadre de la cration de la page de description des ouvrages, vous allez utiliser un paramtre dURL contenant lidentiant unique de louvrage afcher. Slectionnez donc ce type de donnes dans la liste droulante.
102
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 denregistrements (voir Figure 5.9).
Figure 5.9
Voici les donnes qui seront accessibles laide de votre jeu denregistrements.
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 disponibles et de voir la totalit de ceux-ci.
103
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 supplmentaire est ncessaire au test du jeu. La demande de test dbute par lafchage de la fentre 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.
Figure 5.10
Quelle valeur doit avoir votre 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).
Figure 5.11
Les enregistrements correspondant votre filtre.
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
104
plus complexes pour crer des jeux denregistrements. Vous les dcouvrirez plus loin dans ce chapitre.
Figure 5.12
Lenregistrement est dfini avec le filtre.
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 boutique. 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.
105
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 denregistrements 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 denregistrements apparaissent alors dans le panneau Liaisons. Il vous suft de cliquer sur la donne que vous souhaitez utiliser, par exemple Titre.
Figure 5.13
Slectionnez la donne afficher sur votre page.
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).
Figure 5.14
La donne dynamique est bien insre dans la page.
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.
106
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 correspondant 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 denregistrements ne sont pas uniquement utilisables pour lafchage sur une page web. Elles peuvent 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 afchage 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 couverture de ce livre devra se nommer 1.jpg (ou .gif) sur votre serveur de dveloppement. 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 navigation de Dreamweaver. La fentre Slectionnez la source de limage souvre alors.
107
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).
Figure 5.15
Slectionnez le champ correspondant au nom de limage.
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, prsente 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 .
108
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).
Figure 5.16
Limage dynamique est en place.
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 insres 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.17
Les dimensions de limage sont laisses vides par Dreamweaver.
109
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.
Figure 5.18
Slectionnez le navigateur utiliser.
Une nouvelle fentre de navigateur souvre alors, qui afche la page en cours de dveloppement telle que la verront vos futurs visiteurs (voir Figure 5.19). Un dtail, toutefois : pour safcher correctement, votre page de description douvrages doit recevoir en paramtre lidentiant unique de louvrage afcher. Compltez donc, dans la barre
110
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.
Figure 5.19
Un aperu des ensembles de pages dans votre navigateur favori.
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, assurezvous 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 principale. 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 lutilisateur.
111
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.
Figure 5.20
Passage du mode cration laffichage en direct des donnes dynamiques dans Dreamweaver.
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).
Figure 5.21
Les paramtres de votre page passent par cette barre doutils.
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
112
la suite les uns des autres en les sparant par le symbole &. Validez alors le formulaire en cliquant sur OK.
Figure 5.22
Compltez lURL de votre page avec les paramtres ncessaires.
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 normalement. 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 donnes 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.
113
Cration avance de jeux denregistrements

Les tapes dtailles jusquici permettaient de crer facilement un jeu denregistrements 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 utiliser 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 connaissances 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.
114
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 denregistrements. 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 plusieurs 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 garantissent 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 suivante : 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 denregistrements 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.
115
Le dbut de la requte se construit alors dans la fentre SQL (voir Figure 5.25).
Figure 5.25
Votre requte est en cours de construction.
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 denregistrements. Pour cela, slectionnez tout dabord dans la liste lments de base de donnes 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).
116
Figure 5.26
Si votre requte ncessite lutilisation de variables, vous passerez par cette fentre pour les sites PHP .
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 session 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 variables 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).
Figure 5.27
Votre variable est dfinie.
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.
117
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).
Figure 5.28
Votre requte contient la fois des critres de filtre et de tri.
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. Saisissez 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 lidentifiant unique de louvrage crit est pass en paramtre de la fiche dtaille.
118
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 Dreamweaver : 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 conviennent, 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 attentivement 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.
119
Figure 5.29
Le nom de lauteur, intgr la page.
Si vous vous souvenez bien des spcications de site dnies dans le chapitre prcdent, 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 dynamiquement. 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.
120
Figure 5.30
Slectionnez le fichier vers lequel doit pointer votre lien.
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).
Figure 5.31
Quels paramtres allez-vous fournir votre prochaine page ?
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).
121
Figure 5.32
Quelle donne allez-vous utiliser ?
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 Slectionner 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.
122
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).
Figure 5.33
Les catgories dannuaire sont affiches sur la page.
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_categories.libelle et shop.sous_categories.libelle sur la page de description de
123
louvrage et de passer en paramtre le champ shop_categories.id ou shop.sous_categories.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 lintermdiaire 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.
124
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).
Figure 5.35
Cration dun jeu denregistrements en mode Simple.
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.
125
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 denregistrements, laide des champs de formulaire disponibles sous la zone Filtre (voir Figure 5.36).
Figure 5.36
La dfinition de lordre des enregistrements a lieu dans la fentre de dfinition du jeu.
Pour appliquer un ordre votre jeu denregistrements, procdez comme suit : 1. Dans la premire liste droulante de la section Trier de la fentre Jeu denregistrements, 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.
126
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 fentre 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 fonctionnalit de Dreamweaver : les rgions rptes. Les rgions rptes permettent dinsrer plusieurs enregistrements la suite sur une seule page. Pour bien comprendre leur fonctionnement, 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 denregistrements, 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 dynamique 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 !
127
Si vous souhaitez afcher les donnes correspondant aux deux premiers enregistrements, 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).
Figure 5.38
Avec une rgion rpte, les donnes des deux enregistrements sont bien affiches.
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 souhaitez 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 denregistrements 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.
128
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).
Figure 5.39
La dfinition dune rgion rpte est trs simple.
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 correspondante 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.
129
Figure 5.40
La rgion est bel et bien rpte.
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.41
Une navigation page page en action !
130
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 denregistrements, et slectionnez la commande Barre de navigation du jeu denregistrements dans le menu qui apparat alors (voir Figure 5.42).
Figure 5.42
Les diffrentes options de cration dune navigation page page.
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.
Figure 5.43
Choisissez le type de navigation page page que vous souhaitez.
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.
131
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.
Figure 5.44
La barre de navigation page page est en place.
La navigation page page peut galement tre utilise si aucune rgion rpte nexiste sur le document 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.
Figure 5.45
De quel jeu va dpendre le lien Page suivante.
Le lien en question est alors insr lendroit voulu. Il ne vous reste qu le tester en aperu dans votre navigateur.
132
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 facilement leurs marques sur votre site.
Figure 5.46
La numrotation des enregistrements aide se reprer dans une longue liste de donnes.
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 enregistrements aura toujours pour valeur la position de lenregistrement unique afch lcran. Pour mettre en place une numrotation des enregistrements, procdez de la manire suivante : 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).
133
Figure 5.47
Insrez une barre de numrotation complte.
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.
Figure 5.48
Quel jeu denregistrements voulez-vous accompagner dune barre de numrotation ?
La barre de numrotation est alors insre lendroit voulu. Pour la tester, passez simplement en mode Aperu dans Dreamweaver (voir Figure 5.49).
Figure 5.49
La numrotation est oprationnelle.
Comme pour la navigation page page, chacun des lments de la barre de numrotation 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.
134
Figure 5.50
Slectionnez le jeu adquat.
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 permanence 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 catgorie Informatique, vous y retrouverez une simple liste des grands thmes informatiques 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 identiques 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 premier est destin retrouver le titre de la sous-catgorie afcher en fonction de lURL.
135
Figure 5.51
Une des pages dannuaire finales.
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 quelques 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 Dreamweaver.
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 dynamiques.
136
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 Comportements de serveur du menu Fentre de Dreamweaver (ou par le raccourci clavier Ctrl+F9).
Figure 5.52
Le panneau Comportements de serveur.
Ajout d'un comportement de serveur Suppression d'un comportement de serveur Langage utilis
Liste des comportements de serveur dj dfinis
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
137
cette slection apparat alors en surbrillance dans le panneau Comportements de serveur (voir Figure 5.53).
Figure 5.53
Cest ce comportement quil faut modifier.
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 modications 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.
Installation dun moteur de recherche

Au sommaire de ce chapitre 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 disposition. 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
140
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 boutique en ligne. Si vous souhaitez modier la prsentation du formulaire, vous naurez qu rectier le chier central ainsi enregistr. Toutes les pages qui lutilisent 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 programmes JavaScript (les comportements) ou PHP (comme la dnition des jeux denregistrements), 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 comportement 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.
INSTALLATION DUN MOTEUR DE RECHERCHE
141
Cration du formulaire de recherche

Toute recherche sur le Net passe par la saisie dinformations dans un champ de formulaire. 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 Dreamweaver (voir Figure 6.1).
Figure 6.1
La barre doutils Formulaire de Dreamweaver.
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).
Figure 6.2
Formulaire ? Par !
Dreamweaver CS4 possde des options daccessibilit beaucoup plus pousses que ses versions prcdentes. Le logiciel dAdobe vous propose dsormais de complter diffrents champs de textes alternatifs 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.
142
Elles contribueront rendre votre commerce en ligne accessible aux personnes souffrant de handicap. 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.
Figure 6.3
Champ Texte ? Par !
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.4
Bouton de validation ? Par !
143
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.
Figure 6.5
Pensez nommer de faon cohrente vos formulaires !
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 remplacezla par Chercher. Il sagit en fait du texte afch sur le bouton. Vriez quAction coche bien sur Envoy le formulaire. Cette action permet de formater le bouton pour quil valide lensemble des donnes prsentes dans le formulaire 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.
144
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 formulaire depuis les lments de bibliothque de Dreamweaver.
Figure 6.6
Slectionnez ici la page qui affichera les rsultats de la recherche.
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.
145
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 panneau 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, symbolise 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).
146
Figure 6.7
Le panneau Actifs permet la gestion des actifs, des bibliothques et des modles.
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 (parfois 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.8
Les lments des actifs peuvent tre classs selon diffrents critres.
147
Cration dun lment de bibliothque

Pour crer un nouvel objet dans la bibliothque dun site, vous pouvez partir dun document 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.
Figure 6.9
Slectionnez les lments de la page que vous souhaitez convertir en lments de bibliothque.
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.10
Cliquez sur le bouton Nouvel lment de la bibliothque. Dreamweaver ajoute un objet Sanstitre la liste des objets dj prsents.
148
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.
Figure 6.11
La slection, devenue un lment de bibliothque, apparat dsormais en surbrillance dans les pages HTML.
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 prcdemment 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 !
149
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).
Figure 6.12
Faites glisser le nom de lobjet jusqu son point dinsertion dans la page.
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.13
Slectionnez la commande Sparer de loriginal pour dtacher un lment de son quivalent dans la bibliothque.
150
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).
Figure 6.14
Une fois redevenu modifiable, le texte napparat plus en surbrillance et nest plus attach la bibliothque.
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 dimportation ne mettant pas en jeu les balises den-ttes sont concernes par ces modications.
151
Figure 6.15
Une fois ouvert dans une fentre ddition, un lment de bibliothque se prsente comme une page classique. Cette dernire ne peut toutefois pas contenir dinformations telles quune couleur de fond, des comportements ou des feuilles de style.
4. Enregistrez lobjet laide de la commande Fichier > Enregistrer et fermez la fentre Document. Dreamweaver vous informe que les modications que vous venez deffectuer peuvent avoir des consquences sur le site tout entier (voir Figure 6.16).
Figure 6.16
Aprs chaque modification dun objet, Dreamweaver vous invite mettre jour lensemble des pages du site.
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 Dreamweaver de faire cette mise jour plus tard. 6. La vrication et la mise jour de lensemble des pages du site local peuvent prendre 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).
152
Figure 6.17
Une fois lensemble des mises jour effectu, un rapport complet permet de savoir combien de fichiers ont subi des modifications.
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 lment 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.
153
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).
Figure 6.18
Cochez la case lments de la bibliothque pour mettre jour les objets dans lensemble du site.
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.
154
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 denregistrements !
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%
155
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 correspondant 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 destine 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 prcdente. 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 enregistrements trouvs par date de parution du livre quils concernent. Cest de cette faon que lon rdige un critre en tri en langage SQL.
156
Les deux requtes construites ici permettent deffectuer une recherche sur une catgorie douvrage ou sur les titre et rsum dun ouvrage. Vous pouvez facilement tendre 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).
Figure 6.19
Deux rgions rptes suffisent la cration de la page de rsultats.
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.
157
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 correspond 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).
Figure 6.20
Le message derreur saffiche dabord comme un texte classique.
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.21
Les options de champs conditionnels sont disponibles ct des rgions rptes.
158
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).
Figure 6.22
Choisissez le jeu qui conditionnera laffichage.
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 recherche 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 suffisamment 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 formulaire 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
Accueil des clients et ouverture des comptes

Au sommaire de ce chapitre 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 peuttre 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
160
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 gnral, 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 ciaprs.
Tableau 4.5 : Structure de la table shop_client
Champs Type Valeurs 10 64 Attributs Extra Cl primaire x x Cl index Cl unique Commentaire Identiant unique du client Adresse e-mail du client, utilise comme identiant unique sur le site Nom du client Prnom du client Numro de tlphone du client Mot de passe du client, information crypte avant son stockage en base de donnes
id mail
int varchar
nom prenom telephone mdp
varchar varchar varchar varchar
64 64 10 32
ACCUEIL DES CLIENTS ET OUVERTURE DES COMPTES
161
Tableau 4.5 : Structure de la table shop_client (suite)

Champs Type Valeurs 64 Attributs Extra Cl primaire Cl index Cl unique Commentaire Premire ligne de ladresse physique du client Seconde ligne de ladresse physique du client Code postal de ladresse physique du client Ville de ladresse physique du client
ad_ligne1
varchar
ad_ligne2
varchar
64
ad_cp
varchar
ad_ville
varchar
64
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 distinguer 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.
162
Sessions PHP
Comme prcis dans lintroduction de ce chapitre, les pages contenues dans le dossier /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 galement 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 rapidement 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.
163
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.
Figure 7.1
Le formulaire de cration de compte, une fois en place.
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.2
Slectionnez lassistant dans la liste des objets dinsertion.
164
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.
Figure 7.3
Le formulaire dinsertion dcoulera de ces informations.
3. Dans la liste droulante Connexion, prsente en haut de la bote de dialogue, slectionnez 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.4
Pensez concevoir la page de confirmation de cration de compte.
165
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).
Figure 7.5
Le formulaire de base est construit partir des donnes de la table mettre jour.
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 formulaire 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 exemple, 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 celleci. Il est prfrable de laisser cette information telle quelle est gnre automatiquement 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.
166
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 automatiquement 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). Slectionnez 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.
Figure 7.6
Slectionnez le champ ajouter au formulaire parmi ceux encore disponibles.
10. Si vous souhaitez modier lordre sous lequel les champs du formulaire apparatront 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 cruciales pour la cration du compte, il est logique quelles soient rassembles lors de celle-ci.
167
11. Une fois le formulaire totalement dni, cliquez sur le bouton OK pour crer effectivement celui-ci. Aprs un petit dlai, Dreamweaver afche dans sa fentre principale le formulaire dinsertion denregistrement (voir Figure 7.7).
Figure 7.7
Le formulaire dinsertion est termin.
Si vous ntes pas certain des paramtres fournir pour la cration de votre formulaire dinscription, reportez-vous au tableau suivant.
Tableau 7.2 : Paramtrage du formulaire dinscription votre boutique en ligne
Champ de la table tiquette Adresse Mail Mot de passe Nom Prnom Adresse Adresse (complment) Code postal Ville Numro de tlphone Type de champ de formulaire Texte Mot de passe Texte Texte Texte Texte Texte Texte Texte Type de donnes Texte Texte Texte Texte Texte Texte Texte Texte Texte
mail mdp nom prenom ad_ligne1 ad_ligne2 ad_cp ad_ville telephone
168
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 comportements 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).
Figure 7.8
Dreamweaver soccupe lui-mme de la dfinition de la mthode denvoi.
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 dynamiques, 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 contiennent 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 dinscription 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).
169
Figure 7.9
Pensez personnaliser votre formulaire avec tous les attributs disponibles.
Figure 7.10
Renommez les boutons quand ceux-ci en ont besoin.
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 implique 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 multimdias 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 panneau 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.
170
Figure 7.11
Slectionnez le comportement Valider le formulaire.
Figure 7.12
La bote de dialogue Valider le formulaire.
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).
171
Figure 7.13
Le comportement est bien en place.
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).
Figure 7.14
Si la validation du formulaire nest pas correcte, lutilisateur voit alors apparatre une bote de dialogue lui indiquant lerreur quil a commise en remplissant le formulaire.
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
172
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 lutilisateur 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).
Figure 7.15
Slectionnez le champ qui fera lobjet dune vrification.
2. Dans le champ Champ nom dutilisateur, slectionnez le nom du champ de formulaire 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 rediriger 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 dsormais 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, Dreamweaver 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 :
173
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 massivement 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 modifications, 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.
174
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[requsername] 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 napparatra 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 dinstruction. 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 nouveau 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.
175
Afin de pouvoir utiliser ce formulaire de connexion sur toutes les pages de votre site, nous vous suggrons 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 ajoutes 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).
Figure 7.17
Avant de mettre en place le script de connexion, un formulaire doit tre prsent sur la page.
Une fois ces lments prsents et correctement nomms, linsertion de lobjet Connecter lutilisateur peut dbuter : 1. Slectionnez lobjet Connecter lutilisateur dans le panneau Donnes > Authentication de lutilisateur. La bote de dialogue du mme nom souvre alors (voir Figure 7.18).
Figure 7.18
Comment doit-on identifier lutilisateur ?
176
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 lidentication. 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 comment 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).
177
Figure 7.19
Lidentification, intgre au catalogue du site.
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 scurit 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.20
La dfinition dune procdure de dconnexion est des plus simples.
178
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).
Figure 7.21
Un message de confirmation est toujours le bienvenu.
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 chargement.
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.
179
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.
180
Figure 7.22
qui laccs cette page doit-il tre rserv ?
Dreamweaver offre galement la possibilit de limiter laccs une page de votre site web en fonction dun niveau daccs dfini dans la table shop_client de votre base de donnes. Ainsi, vous pourriez 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 visualisation de la page). Dans le cadre de votre boutique, le plus simple reste de rediriger 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 simples 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. Celleci safchera alors sans problme (voir Figure 7.24).
181
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.
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).
182
Figure 7.25
Un formulaire de mise jour ressemble comme deux gouttes deau un formulaire denregistrement.
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 formulaire 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 denregistrements 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.
183
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).
Figure 7.26
Slectionnez lobjet Assistant de formulaire de mise jour des enregistrements.
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 formulaire dinsertion.
Figure 7.27
Slectionnez la table et les donnes quil faudra mettre jour.
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.
184
4. Indiquez ensuite quel champ fait ofce de cl unique dans la table que vous souhaitez 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 pouvez 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 suivants, les colonnes qui devront tre mises jour laide de votre formulaire. La personnalisation 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 afchera dans le champ de formulaire lancienne valeur de lenregistrement slectionn, 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 Adresse Mail Mot de passe Nom Prnom Adresse Adresse (complment) Code postal Ville Numro de tlphone Type de champ de formulaire Texte Cach Texte Texte Texte Texte Texte Texte Texte Type de donnes Texte Texte Texte Texte Texte Texte Texte Texte Texte
mail mdp nom prenom ad_ligne1 ad_ligne2 ad_cp ad_ville telephone
185
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, Dreamweaver renseignera dune valeur vide les champs manquants. Ce qui peut se rvler une catastrophe 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 principale (voir Figure 7.28). Il ne vous reste qu modier la mise en page de celui-ci et le tester.
Figure 7.28
Le formulaire de mise jour des enregistrements est en place.
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 formulaire 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
186
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 chapitre (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
187
Figure 7.29
Deux lments distincts sont prsents reste savoir lequel afficher
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>
188
<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 obligatoirement 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.
Grer les commandes des clients

Au sommaire de ce chapitre 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. Lopration dmarre ds la page de description dun ouvrage, au moment o le client dcide de passer lachat.
190
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 proposer 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.
GRER LES COMMANDES DES CLIENTS
191
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 commande 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 accidentelle. 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.
192
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.
Figure 8.1
Permettre la connexion des clients nest quune premire tape.
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 Dreamweaver, 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.
193
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 donnes. 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 quantit 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 prcdent. 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.
Tableau 8.1 : Composition du formulaire dachat dun article
Nom client article quantit Type Champ masqu Champ masqu Champ masqu Valeur par dfaut
<?php echo $_SESSION[MM_Username];?> <?php echo $row_Livre[id];?> 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.
194
3. Ajoutez votre formulaire un objet du type Bouton et personnalisez-le en lui donnant Acheter comme valeur dtiquette (voir Figure 8.2).
Figure 8.2
Dfinissez le texte qui apparatra sur le bouton dachat laide du champ tiquette.
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.
Figure 8.3
Votre formulaire dachat se compose principalement de champs masqus.
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 formulaire dinscription de vos clients votre boutique.
Figure 8.4
Linsertion dun enregistrement passe par une simple bote de dialogue.
195
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 renseigne 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.
Tableau 8.2 : Correspondance entre votre formulaire et la table shop_panier
Colonne de la table Champ de formulaire Aucun client article quantit texte entier entier Type de donnes
Id client article quantite
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.
196
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).
Figure 8.5
Cet article est dj prsent dans votre panier.
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 quantit 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.
Figure 8.6
Dfinissez simplement un lien laide de Proprits.
La mise en place dun renvoi vers votre panier est aussi simple que cela.
197
Mise en place de laffichage conditionnel

Reste dterminer quand lon doit afcher le formulaire de commande et quand on afche 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 : lidentiant 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 denregistrements en mode Avanc (voir Figure 8.7).
Figure 8.7
La dfinition de jeux denregistrements en mode Avanc.
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 ( paramclient 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
198
variables, elle a dj t aborde dans les chapitres prcdents de cet ouvrage. Dnissez donc ces deux variables en suivant les indications du Tableau 8.3.
Tableau 8.3 : Variables du jeu denregistrements Panier
Nom Type Valeur par dfaut 0 0 Valeur courante
Paramclient Paramarticle
text Integer
$_SESSION[MM_Username] $_GET[id]
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.
Figure 8.8
Le jeu denregistrements Panier apparat dans le panneau Liaisons de Dreamweaver.
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 conditionnelles 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).
Figure 8.9
Slectionnez la balise Form correspondant la validation de lachat.
199
2. Dans la barre doutils Insertion > Objets de donnes > Afcher la rgion si, slectionnez lobjet Afcher si le jeu denregistrements est vide, prsent dans le groupe dobjets Afcher la rgion (voir Figure 8.10).
Figure 8.10
Les objets de type Afficher la rgion permettent de mettre en place des affichages conditionnels.
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.
Figure 8.11
Slectionnez le jeu denregistrements dont dpend laffichage de votre texte.
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).
Figure 8.12
Cette rgion ne sera affiche que si le jeu denregistrements Panier est vide.
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
200
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 dafchage et validez cette option. 7. Votre lien se retrouve lui aussi entour dun halo gris tiquet Afcher si (voir Figure 8.13).
Figure 8.13
Aucun moyen de distinguer les diffrents types de rgions conditionnelles.
Lutilisation de ces deux rgions conditionnelles sur votre page, associes aux conditions 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.
201
Comme vous le voyez, la tche nest pas mince (voir Figure 8.14) !
Figure 8.14
Un panier bien rempli.
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 dynamiquement 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.
202
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 denregistrements :
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.
203
5. Compltez le jeu denregistrements obtenu avec la dnition de la variable Paramclient utilise comme ltre, suivant le Tableau 8.4.
Tableau 8.4 : Variable du jeu denregistrements Panier
Nom Type Valeur par dfaut 0 Valeur courante
Paramclient
text
$_SESSION[MM_Username]
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 denregistrements.
Pour afcher ces lignes, lopration est des plus simples : localisez dans le jeu denregistrements 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).
Figure 8.16
La premire ligne du panier, dfinie dans Dreamweaver.
Si vous testez la page ainsi conue dans votre environnement de test, vous verrez apparatre la premire ligne du panier en cours (voir Figure 8.17).
Figure 8.17
La premire ligne du panier, en action !
204
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, chacune 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 Formulaire du groupe Formulaires de la barre doutils de Dreamweaver, et nommez celuici Quantite. Pour des facilits de mise en page, incluez dans ce formulaire les diffrentes 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, simplement en en modiant la valeur et en validant de nouveau celle-ci (voir Figure 8.18).
Figure 8.18
Un champ texte pour modifier la quantit darticles.
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).
205
Ces trois informations sont rcuprables depuis le jeu denregistrements Panier (voir Figure 8.19).
Figure 8.19
Les autres champs du formulaire se doivent dtre cachs.
Au nal, votre formulaire doit correspondre au Tableau 8.5.

Tableau 8.5 : Composition du formulaire de mise jour de quantit
Nom Type Champ masqu Champ masqu Champ masqu Champ texte Valeur par dfaut
id client article quantit
<?php echo $row_Panier[id];?> <?php echo $row_Panier[client];?> <?php echo $row_Panier[article];?> <?php echo $row_Panier[quantite];?>
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 donnes. 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 formulaire Quantite pour mettre jour la table shop_panier avec les correspondances dtailles dans le Tableau 8.6.
Tableau 8.6 : Correspondance entre votre formulaire et la table shop_panier
Colonne de la table Champ de formulaire id client article quantit Type de donnes entier texte entier entier
id client article quantite
206
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).
Figure 8.20
La cration du formulaire de mise jour de la quantit est bientt termine.
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 dsormais 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 "Supprimer 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, pensez 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];?>
207
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).
Figure 8.21
Cette bote de dialogue permet de supprimer des enregistrements suivant des paramtres dfinis.
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 enregistrement 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.
208
7. Enn, prcisez la page vers laquelle votre client doit tre redirig une fois leffacement 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 chargera 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 lensemble des articles prsents dans le panier. Par la mme occasion, vous allez galement afcher 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 relatives la ligne de commande, les champs de changement de quantit et le lien de suppression dun article (voir Figure 8.22).
Figure 8.22
Lensemble de la slection va tre rpt sur la page.
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.
209
Figure 8.23
La mise en place dune rgion rpte est des plus simples.
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 !
Figure 8.24
Votre panier est presque fini.
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.
210
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 glisser 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 travail que la mise en place du panier proprement dit. Si vous vous souvenez du schma
211
original de votre base de donnes, une commande est stocke dans deux tables diffrentes : shop_commande sert enregistrer les donnes relatives une commande en particulier, 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 informations 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 celuici 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
Nom Type Champ masqu Champ masqu Champ masqu Champ masqu Valeur par dfaut
date total_ttc total_ht client
<?php echo $row_Total[date];?> <?php echo $row_Total[total_ttc];?> <?php echo $row_Total[total_ht];?> <?php echo $_SESSION[MM_Username];?>
212
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).
Figure 8.25
Un formulaire principalement compos de champs masqus.
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).
Figure 8.26
Insrez lenregistrement de la commande dans votre base de donnes.
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.
213
4. Il vous faut maintenant dnir la correspondance entre les champs de votre formulaire et les colonnes de la table de donnes slectionne. Cette correspondance est dtaille dans le Tableau 8.8.
Tableau 8.8 : Correspondance entre le formulaire de validation dachat et la table shop_commande
Colonne de la table Champ de formulaire date date total_ttc total_ht client Numrique Numrique Texte Type de donnes
date total_ttc total_ht client
5. Compltez le champ Aprs linscription, aller par ladresse de la page de traitement 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 fonctionnement 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.
214
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 enregistrement 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 enregistrement 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");
215
$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 :
mysql_select_db($database_MaBoutique, $MaBoutique); $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 loccurrence 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,
216
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")); mysql_select_db($database_MaBoutique, $MaBoutique); $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")); mysql_select_db($database_MaBoutique, $MaBoutique); $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 insre 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.
217
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 commande 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.
218
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 formalit 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 afcher 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 seulement les informations relatives la commande (extraite de la table shop_commande) mais galement celles relatives chacun des articles commands, trouvables depuis un
219
Figure 8.27
Toutes les commandes dj passes par un client !
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.
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 internationales 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 services 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 prestataire dans le cadre de votre boutique en ligne. Vous allez voir, lopration est trs simple !
222
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.
Figure 9.1
PayPal, une solution centralise de paiement en ligne.
Son but est de runir clients et acheteurs sur une mme plate-forme, proposant au premier 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.
PAIEMENT ET FACTURATION
223
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-feesoutside. 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 systme 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 loccurrence, 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.
224
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.paypal.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.
Figure 9.2
Le lien Ouvrir un compte permet louverture dun compte PayPal.
2. Trois versions de compte vous seront proposes mais seules les options "compte Premier" et "compte Business" rpondent aux caractristiques dun site de e-commerce. 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 inscription, 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 personnelles sont requises : le nom et ladresse du futur dtenteur de compte PayPal, qui ont t "communiques votre tablissement bancaire", ainsi quun numro de tlphone.
225
Figure 9.3
Slectionnez le type de compte PayPal que vous souhaitez crer.
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 dutilisation 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.
226
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.
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.
227
Figure 9.6
Vos informations bancaires sont indispensables si vous souhaitez recevoir des paiements.
Configuration de linterface de paiement

Vous voil dsormais dtenteur dun compte PayPal. Vous tes en mesure de le congurer 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 didentication situ en haut gauche de linterface. Une fois connect, vous serez automatiquement 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 faciliter 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)
228
Figure 9.7
La section Mon compte est la partie centrale de votre espace PayPal.
Figure 9.8
Slectionnez le profilcorrespondant votre boutique
Figure 9.9
Vous allez utiliser lobjet Boutons acheter maintenant pour valider vos achats.
229
5. Le formulaire de cration de votre bouton dachat safche alors. Compltez celuici 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 modiant 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 :
230
1. Rouvrez la page traitement_commande.php laide de Dreamweaver et afchez le code source de celle-ci (voir Figure 9.10).
Figure 9.10
Affichez le code source de votre page afin dy insrer le formulaire de paiement.
2. Crez sur cette page un nouveau jeu denregistrements charg de retrouver la dernire 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 lintgration du lien dachat. 4. Modiez prsent le formulaire en question avec des lments issus du jeu denregistrements 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">
231
<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 dvaluation : 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.
232
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 conguration de cet objet tient en un simple formulaire (voir Figure 9.12).
Figure 9.12
Un seul champ de formulaire suffit la mise en place dune redirection automatique.
3. Cochez la case Oui en haut de la page de conguration (question Renvoi automatique) 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 redirig vers lhistorique de vos commandes une fois le paiement dune commande effectu.
233
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).
Figure 9.13
Lhistorique de vos paiements et facturations.
Un compte PayPal pouvant la fois servir la facturation de votre boutique et au paiement sur dautres sites, votre page daccueil rsume lensemble des oprations effectues 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 permettant 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 prsentes 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
234
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 facilement sur le Net. Dautres mthodes existent pour grer la facturation et le paiement de votre boutique en ligne. 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 banque 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.
Figure 9.14
Les outils de paiement scuris du Crdit mutuel prsents en dtail.
Vous trouverez une prsentation dtaille de quelques systmes de paiement en ligne proposs par les organismes bancaires franais au Chapitre 11.
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 nouveaux 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, effacement) 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 lefcacit avec laquelle vous grerez les produits, clients et commandes passes sur votre boutique.
236
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 dadministration. 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 permettent 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 formulaire 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.
MISE EN PLACE DUNE PLATE-FORME DADMINISTRATION
237
Les droits daccs

Autre question cruciale avant de se lancer : la question des droits daccs. Votre interface 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 prsents 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. Celuici permet de crer deux pages : lune listant vos produits avec le minimum dinformations 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 enregistrezla 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.
238
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 paramtres 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 boutique), tandis que la seconde se rapporte la page de dtail (les informations dtailles de chaque ouvrage).
Figure 10.1
Prt crer votre ensemble de pages ?
3. Slectionnez, dans la liste droulante Jeu denregistrements, le jeu denregistrements 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 disponibles dans le jeu denregistrements. Vous pouvez maintenant la modier en changeant lordre dafchage des donnes ou en supprimant/ajoutant des champs. Procdez comme suit :
239
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 bouton 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.
Figure 10.2
Pour ajouter un champ laffichage, utilisez cette nouvelle bote de dialogue.
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 laffichage (voir Figure 10.3).
240
Figure 10.3
Tous les champs du jeu denregistrements sont dj slectionns.
5. Dans la liste droulante Lier la page dinformations dtailles depuis, slectionnez 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 pouvez 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 Enregistrements la fois et renseignez le champ correspondant avec le nombre denregistrements 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).
241
Figure 10.4
Personnalisez prsent la page de dtail.
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 existante, 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 afcher 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).
Figure 10.5
La liste denregistrements telle quelle apparat dans Dreamweaver.
Il ne vous reste plus qu enregistrer et personnaliser ces pages pour quelles correspondent au mieux linterface graphique de votre site web.
242
Figure 10.6
Le dtail dun enregistrement, prt tre enregistr !
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, prsent 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.7
Un lien supplmentaire sur linterface dadministration permettra la modification des produits existants.
243
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).
Figure 10.8
Slectionnez lobjet Assistant de formulaire de mise jour des enregistrements.
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 formulaire dinsertion.
Figure 10.9
Slectionnez la table et les donnes quil faudra mettre jour.
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
244
juste de crer, charg de rcuprer les donnes qui seront afches dans le formulaire. 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 enregistrement 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 interface dadministration. 7. Dtaillez prsent, laide de la liste Champs du formulaire et des champs suivants, 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 lenregistrement 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 principale (voir Figure 10.10). Il ne vous reste qu modier la mise en page de ce formulaire de mise jour et le tester.
Figure 10.10
Le formulaire de mise jour des enregistrements est en place.
245
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 interface 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 dajouter, 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 denregistrements 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.
246
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 dhbergement. Cette mthode utilise deux chiers, nomms .htaccess et .htpasswd, qui contiennent 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 chemin /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 Windows 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
247
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 prsentation 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 lments 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".
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 question 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.
UN SITE SCURIS INSPIRANT CONFIANCE
253
Pour rsumer de telles rglementations, vous tes tenu de runir sur votre site les informations 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 lautoentrepreneur) 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 qualits 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 lesquelles 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 didentier 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.
254
Figure 11.2
Anticipez les possibles erreurs des internautes: guidez-les grce aux messages derreurs.
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 passer 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 Commerce 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 donnes 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 extrieurs votre site. Informez donc vos clients de vos dispositions vis--vis de cette loi. Garantissez que leurs donnes personnelles ne seront pas exploites abusivement et qu tout moment il leur sera possible dy accder an de raliser les corrections 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.3
Extraits de la loi n78-17 du 6 janvier 1978.
255
Le droit de rtractation. Vos clients en bncient. Le site de la Direction gnrale 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 recommand 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.
256
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 identique au vtre mais en .eu, .net, .com peut tre demand. La charge de la preuve du bienfond dun tel transfert vous reviendra. Rfrez-vous dans une telle hypothse la procdure de lICANN (Internet Corporation for Assigned Names and Numbers) accessible via ladresse http://www.icann.org/tr/french.html (voir Figure 11.5).
257
Figure 11.5
LICANN : organisme officiel de gestion des noms de domaine.
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.
Figure 11.6
Procdure rglement litiges ICANN.
Lutilisation des lments visuels et graphiques sera encadre par le droit des marques si vous avez ralis un dpt pralable auprs de lINPI.
258
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 bancaires 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 abonnement 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 paiement 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 lapplication 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.
259
Loffre CM-CIC P@iement

Loffre CM-CIC P@iement du CIC (voir Figure 11.7) est prsente comme une solution 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".
Figure 11.7
Le CIC propose, comme les autres banques, sa solution de paiement en ligne.
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 ncessaire 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 souscription dun contrat avec une agence du groupe. Vient ensuite la phase technique dintgration de la fonction dappel du systme scuris. Elle sera relie la page de paiement de votre site. Linstallation ralise, votre page comportera le bouton "paiement par carte bancaire". Ds quun internaute souhaitera valider sa commande et procder au paiement, il cliquera sur ce bouton puis saisira
260
les donnes de sa carte bancaire (numro, date dexpiration et cryptogramme). Le centre de traitement des transactions recevra ces paramtres, identiera ladresse lectronique 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 systmatiquement 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 tlcharger 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.
261
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).
Figure 11.8
Loffre de paiement scuris du Crdit Agricole.
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 Internet, 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-transactions avec intgration dun lien redirigeant directement vers votre site.
262
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.
263
Figure 11.9
Sogenactif est lune des plus anciennes solutions de paiement en ligne disponible en France.
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, remboursement, 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, abonnement 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.
264
Pour dcouvrir la solution Mercanet de la BNP PARIBAS (voir Figure 11.10) utilisez lURL suivante : www.bnpparibas.net/banque/portail/entrepros/Fiche?type=folder&identiant=PRO_Mercanet_20041102135447. Loffre Sherlocks de LCL sera quant elle accessible partir du site http://professionnels.lcl.fr/sherlocks/.
Figure 11.10
Mercanet, loffre de BNP Paribas
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 prenant 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 cohrence 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.
265
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 chiffre 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-commerant, 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 internautes 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.
266
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 caractristiques des produits ? Sur les prix pratiqus ?... Une information assez dtaille est propose 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.
Figure 11.12
La fiche du site Lebagage.com.
Linterface Fia-Net
Linterface mise votre disposition (voir Figure 11.13) se compose dune premire section consacre lanalyse de vos transactions avec un dcoupage en fonction des oprations 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.
267
Figure 11.13
Linterface Fia-Net
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 prcieuses 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.
268
Figure 11.14
Tableau "classement des sites participants".
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 daffaires. Pour obtenir un devis, veuillez vous connecter la page www.a-net.com/marchands/devis.php
12
Support et aide pour guider le client lors de son achat

Au sommaire de ce chapitre : 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 rassurer 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 "recherche 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.
270
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
SUPPORT ET AIDE POUR GUIDER LE CLIENT LORS DE SON ACHAT
271
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 puiss. 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 version. 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 handicape 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 caractristiques 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 fonctionnement 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 automatismes 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 commande, 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.
272
Ces prconisations ont t rsumes dans le modle de page daccueil type de la Figure 12.1.
Figure 12.1
Quelques cls pour assurer le succs de votre site web.
Accueil
Mon Livre.net
Le choix dont vous avez toujours rv !
MON PANIER 0 articles
Ne dpassez jamais plus de 7 onglets de navigation afin de permettre linternaute de mmoriser rapidement la structure de votre site
Produits 1
Produits 2
Produits 3
Produits 4
Produits 5
Produits 6
Prsentez verticalement les services & garanties accompagnant lachat de chaque produit.
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.
EN QUELQUES LIGNES PRESENTEZ VOTRE ENTREPRISE, LOBJECTIF / LE CONCEPT DE VOTRE SITE.
Service 1 Service 2 Service 3 Service 4 Garantie 1 Garantie 2 Garantie 3

Pour toute image accompagnant vos dveloppements et prsentant vos produits / services pensez intgrer Lgende & ALT TAG dans lhypothse o les images seraient longues tlcharger.
PRESENTATION DE VOS OFFRES, NOUVEAUTES & PROMOTIONS.
Insrez ce niveau les offres de paiement disponibles & Le logo de lassurance FiaNet si vous dcidez dy souscrire.
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
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 typographie, un positionnement dans la page. Dun coup dil, votre client doit faire la diffrence 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.
273
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 descriptive place directement sa droite. Les yeux se dplacent vers le bas de la page quand celle-ci prsente 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 synthtique.
Figure 12.2
La lecture en F du contenu dune page web.
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.
274
Figure 12.3
Prsentez vos produits sous diffrents plans.
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.
275
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 cheminement (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)
Figure 12.4
Le site venteprivee.com mentionne clairement les tapes suivre avant de clturer sa commande.
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 lessentiel, 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 accompagn de la lgende "Mention obligatoire". Pour que la commande et le processus de paiement soient clturs, votre page de formulaire doit comporter un bouton de soumission de taille mdium, dont lintitul peut tre : "Envoyer", "Valider ma commande" ou "Acheter".
276
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 spcifique 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 scurise. 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.
277
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 poseront 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 possibilit 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.
278
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

Au sommaire de ce chapitre : 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 danalyser plus posment le trac de votre site, de noter quune grande part dinternaute nutilise pas le cheminement auquel vous pensiez pour concrtiser leur achat, dapprendre 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 dliser. 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).
Figure 13.1
Google Analytics vous aide mieux apprhender les comportements des internautes sur votre site.
Il vous donne accs plus de 80 rapports adapts au commerce lectronique. Ils rpondent aux questions qui portent sur le comportement classique des internautes, lidentication du nombre de pages consultes avant un achat
280
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 doptimisation 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/analytics/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).
Figure 13.2
Louverture de votre compte Google Analytics.
Une fois cette opration ralise cliquez sur Continuer an daccder la page comportant le code de tracking nomm Google Analytics Tracking Code (GATC) placer soit
STATISTIQUES DE FRQUENTATION ET DE VENTE
281
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).
Figure 13.3
Copiez-collez le code de tracking Google Analytics sur les pages de votre site.
Si votre site comporte des animations flash ou du code dynamique, Google a prvu une autre procdure. 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.
282
Figure 13.4
Ajoutez et paramtrez votre nouveau profil Google Analytics.
Figure 13.5
La dfinition dobjectifs commerciaux.
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.
283
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 cheminement des internautes avant de raliser un achat). La lecture de telles donnes est aise, les rapports tant illustrs de graphiques.
Figure 13.6
Votre tableau de bord Google Analytics.
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 visiteurs 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).
284
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).
Figure 13.7
Des statistiques sur lorigine gographique de vos visiteurs.
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 tlchargent 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.
285
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).
Figure 13.8
Une vue densemble de la frquentation de votre site.
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 internautes face la lenteur dapparition des informations, images et vidos recherches. Rappelez-vous que toute information doit tre afche en moins de 20 secondes.
286
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 defcacit. 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).
Figure 13.9
Une vue densemble du nombre de visites journalires.
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 applications pour afner les informations remontant de votre trac. Il est ainsi possible de mettre 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 spcique pour connatre les mots cls rellement taps par les internautes avant datteindre votre site.
287
Fiche 1: Lutilisation du tag utm_nooveride

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 utilis 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 participant laugmentation de votre CA. En son absence, vous pourriez tre amens mettre en pause certains termes pour lesquels votre interface de tracking ne montre que des cots et point de conversions. Alors que dans la ralit, ils contribuent lacte nal dachat.
288
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
Fiche 2 : Un profil identifiant les mots cls rellement taps par les internautes
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 :
Figure 13.10
Caractres filtres GA & correspondances
Retrouvez toutes ces donnes ladresse : https://www.google.com/support/googleanalytics/bin/answer.py?answer=55461.
289
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 1er 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 prcisant 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 2me 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 (.*)
290
Sortie vers ? Constructeur : Slectionnez Terme de la campagne puis crivez $A1 ($B1) Pour approfondir le sujet, nhsitez pas consulter les blogs http://www.webmarketing-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
Figure 13.11
Le tableau de bord Xiti.
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).
291
Figure 13.12
Les formules dabonnement 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 lorigine 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.
292
Figure 13.13
Une interface de tracking multi-canal.
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 campagnes suivre. Cela passe par une simple cration de prol en allant dans la section Conguration. Cliquez alors sur Nouveau lien sponsoris dans la rubrique Sources&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 toujours 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
293
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 sponsoriss 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 diffuse 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 comparaison 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 nouveaux 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 secteur 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

Au sommaire de ce chapitre : 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 fonctionnalits 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 marginales. 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 utilisateurs du systme. Les liens qui remportent le plus de suffrages se trouvent exposs en priorit aux internautes.
296
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 prsence dune technologie Ajax nest en aucun cas un gage de mise en avant de linternaute, 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 ecommerce 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, certaines 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 rellement venu acheter. Les mthodes pour cela sont trs nombreuses et dtailles au chapitre qui va suivre !
VERS UNE BOUTIQUE 2.0
297
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 tenter 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 nouveaut, 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 boutique 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 complte 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.
298
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 prsents sur votre boutique.
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).
299
Figure 14.3
Pour chaque article, Amazon France en propose un second prix rduit
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 performances 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
300
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 produits 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 association 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 suivantes : 1. Premire tape, obtenir la liste des articles prsents dans le panier, par lintermdiaire dune simple requte SELECT. Nous voulons obtenir de cette faon les identiants 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.
301
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 suivante :
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 commandes. 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;
302
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 article, 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
303
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 stimuleront les ventes des bons produits, et les mauvais avis vous aideront certainement corriger les imperfections de votre boutique.
Figure 14.5
Amazon offre la possibilit chacun de donner son avis sur les disque, DVD ou livres
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 possibles 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.
304
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 exemple pour les programmes dafliation dAmazon (voir Figure 14.6). Ce dernier permet 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 technologies 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-marketing 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
306
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).
Figure III.1
Une page de rsultat comportant des liens commerciaux et des liens naturels.
Si vous tudiez de plus prs la structure de cette page, vous constaterez quelle comporte 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.
15

Rfrencement naturel
Au sommaire de ce chapitre : 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.
308
Dans ce chapitre, vous allez dcouvrir quelques aspects de la mise en place dune stratgie 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 rfrencement 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 lancement, 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 premire 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 marchand. 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.
RFRENCEMENT NATUREL
309
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.
Figure15.1
Les rsultats des requtes "cd dvd" et "achat livres".
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.
310
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 section, 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 rfrencement, 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 premire 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=UTF8&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 trac vers votre site ? Pour vous en assurer, vous pouvez utiliser les gnrateurs de mots cls des rgies publicitaires Google (https://adwords.google.com/select/KeywordToolExternal) 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.
RFRENCEMENT NATUREL
311
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 directement, et en voyant votre boutique arriver en tte ! Cest la meilleure publicit envisageable. 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. Pensez 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 saccompagne 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 !
312
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 prfrence 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 slectionns, 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 description 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
RFRENCEMENT NATUREL
313
echo $row_Livre
jeu denregistrements, nhsitez pas saisir <?php [titre];?> dans ce champ.

Figure 15.2
Renseignez ici le titre de votre page PHP .
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.
Figure 15.3
Len-tte de votre page est affich ici.
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).
Figure 15.4
Les objets relatifs lentte de votre page sont affichs ici.
4. Une bote de dialogue nomme Mots cls souvre alors (voir Figure 15.5) compose 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
314
de votre page, saisir du code PHP directement issu dun jeu denregistrements an de renseigner dynamiquement la balise de mots cls.
Figure 15.5
Saisissez dans cette fentre la liste de mots cls associs la page en cours.
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 italique, 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.
RFRENCEMENT NATUREL
315
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 sapproprier un contenu qui nest pas le sien. Il dcoule de la lecture de ce contenu une confusion. Linternaute 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.
316
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 positionnement, 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.
RFRENCEMENT NATUREL
317
Le Page Rank est consultable laide de la barre doutils Google, tlchargeable sur http://toolbar.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).
Figure 15.6
La barre doutils Google en action.
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. Pertinence, homognit entre ces liens et le contenu de votre site doivent exister. Accumuler 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 recherche. Il vous faut bien travailler le contenu des pages de votre site. La qualit est de rigueur ! 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 respective 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.
318
Le recours au fichier Sitemaps

Google Sitemaps est un service propos par Google depuis juin 2005. Ce service propose 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 simplication 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>
RFRENCEMENT NATUREL
319
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 :
Tableau 15.1 : Le contenu des balises du fichier Sitemaps
Balise Description Obligatoire Obligatoire Obligatoire Dnition de la liste des pages listes dans le Sitemaps. Cette balise contient toutes les autres balises de description de page. Dnition dune page prcise. Cette balise contient lensemble des balises de description dune page prcise. URL de la page lister. Cette URL doit imprativement contenir le protocole daccs la page (http://, https://) et contenir moins de 2 048 caractres. Date de dernire modication de la page, prsente sous le format YYYY-MM-DD. Frquence de modication de la page. Cette donne permet Google 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 rgulirement par les moteurs de recherche. Ce code ne reste donc quune indication ! 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.
<urlset> <url> <loc>
<lastmod> <changefreq>
Optionnel Optionnel
<priority>
Optionnel
Lors de llaboration de votre chier Sitemap vous devez respecter les rgles suivantes : 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.
320
Votre chier nal ne doit pas excder les 10 mgaoctets. Toutefois, an dconomiser 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 quivalent HTML suivant le tableau suivant :
Tableau 15.2 : Encodez les pages de votre site
& " < >
& ' " < >
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.
RFRENCEMENT NATUREL
321
Figure 15.7
Linterface Google pour Webmaster.
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 vrication 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.
322
Figure 15.8
Cliquez sur le lien Ajouter.
3. Une fois ces champs renseigns, cliquez sur le bouton Ajouter un plan Sitemap Web gnrique (voir Figure 15.9).
Figure 15.9
Compltez ladresse du fichier Sitemap soumettre.
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.
RFRENCEMENT NATUREL
323
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).
Figure 15.10
Google propose une interface listant les erreurs rencontres par le moteur sur vos pages.
Le service Google Sitemaps permet en effet daccder un certain nombre de statistiques 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.
324
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).
Figure 15.11
Quels mots cls ont utilis vos visiteurs pour trouver votre boutique.
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.
RFRENCEMENT NATUREL
325
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 exemple, les pages de conditions gnrales de vente seront rarement recherches via Google. Pensez galement 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 lister 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 lpoque. Elle reste toujours en application aujourdhui et est toujours comprise par les principaux 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 dnir 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 plusieurs 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 :
User Agent: googlebot Disallow: /test Disallow: /archives
326
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 User Agent: googlebot Disallow:
Cette syntaxe, simple, demande tout de mme connatre les User Agent (ou identiants) 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 consulter des blogs tesl que Secrets2moteurs.com (catgories Actualits Google, Yahoo!, Microsoft/Live), Webrankinfo.com, Abondance.com
16
Rfrencement payant
Au sommaire de ce chapitre : 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 simplement 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 lesquelles 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.
328
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 dinternautes.
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 Lebagage.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
RFRENCEMENT PAYANT
329
Compte
Figure 16.1
Un modle de structure de campagne en rfrencement payant.
Campagne A
Campagne B
Campagne C
Groupe d'Annonce 1 Mot Cl Mot Cl
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 sereinement ! URL : www.lebagage.com
330
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 Exemple dannonce pour le groupe dannonces 1 :
Titre : Valises de haute qualit Description : Achetez votre valise sur Le Bagage.com livraison sous 48 h URL : www.lebagage.com
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 Exemple dannonce pour le groupe dannonces 1 :
Titre : Valises de haute qualit Description : Louez votre valise sur Le Bagage.com livraison sous 48 h. URL : www.lebagage.com
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, maboutique.net 1 campagne Termes Gnriques. Il sagit de consacrer chaque groupe dannonce aux grandes familles de produits que comporte votre site.
RFRENCEMENT PAYANT
331
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+, tudiants, 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 exemple un champ lexical pour les ftes de n danne, Nol, le Nouvel An, la SaintValentin, les ftes des pres ou des mres. Aborder de la sorte votre future campagne est un gage de qualit. En regroupant les articles 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 larchitecture 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 dannonces. Vous pouvez toujours vous aider dun gnrateur de mots cls en vous reportant ladresse suivante : www.indicateur.com/Doc/gnrateurs_mots_cles.asp.
332
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.
RFRENCEMENT PAYANT
333
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).
Figure 16.3
On se lance.
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 standard. Nous excluons directement le premier qui se rapporte lhypothse o vous nauriez faire la promotion que dun seul produit. Avec le Mode simpli, les fonctionnalits 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).
334
Figure 16.4
Loption dition standard.
Figure 16.5
Ciblage linguistique: 3 niveaux de ciblage gographique.
Vous devez par la suite opter pour un ciblage gographique. Concrtement, votre campagne de liens sponsoriss doit-elle tre diffuse lchelle nationale (1 re option) ? rgionale (2me option) ? ou dans une zone trs spcique que vous dterminerez vousmme (3me option) ?
RFRENCEMENT PAYANT
335
Pour poursuivre, cliquez sur Continuer.

Figure 16.6
Golocalisation par pays.
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.7
Rdigez votre annonce.
336
Il existe diffrents modles dannonces prsents ultrieurement dans la partie consacre 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 rsultats 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.
RFRENCEMENT PAYANT
337
En vous appuyant sur la structure de votre site, listez les mots cls importants pour chaque 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 apporteront le plus gros du trac et des conversions. Pour autant, lajout dexpressions spciques (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.
338
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 connecter 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 informations 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
RFRENCEMENT PAYANT
339
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 utilisateurs 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 campagnes, une aux rapports, une loutil Google Analytics et la dernire englobant informations 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
Figure 16.10
Len-tte de la page "Rcapitulatif de campagne".
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.
340
Le CTR dune campagne, ou "click through rate" est le ratio clics sur impressions exprim en pourcentage. 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 modifications doivent tre envisages, elles sont numres la fin du chapitre dans la partie relative loptimisation 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 dterminant 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.
RFRENCEMENT PAYANT
341
Si vous souhaitez accder au dtail de vos campagnes, cliquez sur le nom de votre campagne. 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 paramtres. 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 automatiquement. 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 onreux. 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 diffuse. 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.
342
Ciblage exact (exact match). La diffusion de votre annonce sopre si et uniquement 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).
Figure 16.12
Une annonce textuelle.
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 gographique prcis. Une che indiquera o votre entreprise est situe (voir Figure 16.13).
RFRENCEMENT PAYANT
343
Figure 16.13
Lannonce localise est diffuse sur Google Maps.
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.
344
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 internautes 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 dispositions 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.
Figure 16.14
Art.L 121-1 du code de la consommation.
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 rapports.
RFRENCEMENT PAYANT
345
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 campagne 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 linternaute 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 (campagne 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
346
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).
Figure 16.15
Lanalyse de la frquentation de votre site par moteur de recherche.
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.
RFRENCEMENT PAYANT
347
Yahoo! Search Marketing

En 2007, Y!SM a inaugur sa nouvelle interface PANAMA introduisant plus de ractivit 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 gographiques o lon souhaite que soient diffuses les annonces) et les informations de facturation. 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).
348
Figure 16.16
Dbutez louverture de votre compte Y!SM.
Figure 16.17
Votre liste de mots cls doit tre saisie.
4. Dnissez votre budget car comme son nom lindique vous allez lancer une campagne 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).
RFRENCEMENT PAYANT
349
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.
350
6. Vriez les donnes saisies et mentionnez les futurs codes de connexion votre interface. Validez et le tour est jou ! (voir Figure 16.20).
Figure 16.20
Ltape finale
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.
RFRENCEMENT PAYANT
351
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.
Figure 16.21
Le tableau de bord Y!SM.
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).
352
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 enchrissant 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 recevrez 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.
Figure 16.22
Y!SM Recherche Avance Mots Cls Inactifs
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 ?
RFRENCEMENT PAYANT
353
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 linternaute. 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).
354
Figure 16.23
Une annonce en version "insertion Keyword".
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 linternaute 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.
RFRENCEMENT PAYANT
355
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 lannonceur 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 chaque campagne. Vous pouvez accder galement des rapports plus qualitatifs renfermant 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, possibilit 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 traking 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.
356
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://adcenter.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).
Figure 16.24
Votre inscription au service adCenter.
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 ;
RFRENCEMENT PAYANT
357
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 :
Figure 16.25
Quatre champs remplir pour concevoir votre annonce adCenter.
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.
358
Figure 16.26
Insrez vos mots cls les uns en dessous des autres.
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 ultrieurement votre compte. Il sagit de mentionner nom, prnom, le nom dutilisateur, 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 didentier 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 !
RFRENCEMENT PAYANT
359
Figure 16.27
Confirmez les donnes de votre future campagne.
360
Figure 16.28
Activez votre campagne adCenter.
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 :
RFRENCEMENT PAYANT
361
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 caractristiques 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. Pensez rdiger un texte par dfaut, au cas o la requte de linternaute serait trop longue pour permettre 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
362
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 attention 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 supplmentaire : 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.
RFRENCEMENT PAYANT
363
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 retenus. 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 prcdemment crs, ou paramtrer le type de rapports que vous souhaitez consulter (voir Figure 16.29).
Figure 16.29
La section rapport de linterface Microsoft adCenter.
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 lafchage du rapport et la priode quil couvre.
364
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.microsoft.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. Lobjectif 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 lamlioration 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.
RFRENCEMENT PAYANT
365
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 remboursement, 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 nombreuses 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.
366
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 positionnement. 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 destination 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.
RFRENCEMENT PAYANT
367
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 internautes en moins de deux clics la page souhaite. Sur cette page, les informations fondamentales 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

Au sommaire de ce chapitre : 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.
370
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, lannonceur 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 positionnement des annonces en fonction du CPC (voir Figure 17.1).
Figure 17.1
Donnez la chance aux internautes de trouver et choisir vos produits.
UTILISER LES COMPARATEURS DE PRIX
371
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 prsentes, 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 toutes 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 utilis, 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.kelkooinsolite.com.
372
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, allemand, espagnol, italien, nerlandais et polonais), le Guide.com propose un rfrencement gratuit avec apparition des ches produits sur les sites webmarchand.com, Guide.com, le Guide.net et Gooster.com (voir Figure17.2).
Figure 17.2
Un guide largement diffus en Europe.
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 commerciales seront accompagnes du logo de le-commerant.
373
La commission reverser dpend du volume de clics mis (voir Tableau 17.1).

Tableau 17.1 Une tarification dtermine en fonction des volumes de clics
Nombre de Clics De 3 000 5 400 De 6 000 30 000 De 30 000 90 000 Au-del de 103 000 Tarif Unitaire Brut H.T. 0,20 0,18 0,16 0,14 Tarif Unitaire Net H.T. 0,170 0,153 0,136 0,120
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 (donnes 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 redirection 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.
374
Figure 17.3
La configuration du site Shopping.com.
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 commerciaux 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).
375
Figure 17.4
Twenga, un comparateur de prix gratuit.
Figure 17.5
Twenga: une information fournie pour chaque article rfrenc.
376
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

Au sommaire de ce chapitre : 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 visiteurs 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 dveloppements 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 programme. Lafliation est en effet un vecteur promotionnel se concevant rarement une petite chelle ; pour ce qui est tout au moins de lenvoi de-mails.
378
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 programme 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 bnciez en interne dune personne ddie un tel programme ou bien dcider de recourir une plate-forme dafliation.
Figure 18.1
Le cur dun programme daffiliation : le partenariat affili-affilieur.
Site ayant du trafic: l'affili Partenariat Site ayant des produits/service vendre: l'affilieur, c'est--dire VOUS
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 rempli, 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
FAIRE APPEL AUX SERVICES DAFFILIATION
379
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,) rendez-vous sur le site IAB (Interactive Advertising Bureau) dont ladresse est : www.iabfrance.com.
Figure 18.2
IAB prsente les diffrents modles daffichage en affiliation.
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.
380
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 prenant tout lcran vous a certainement t prsente (voir Figure 18.3) avant mme daccder au contenu du site.
Figure 18.3
Avec linterstitiel, votre publicit est la premire page visualise par un internaute.
Une campagne dafchage se facture selon le modle du CPM (cot pour 1 000 impressions), celui du CPC ou du CPA (cot par acquisition). Lautre facette de lafliation est le-mailing, technique selon laquelle un courrier lectronique 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,
381
extrait du Guide de survie de le-mailing, conu par Diane Revillard de lAgence Di&Mark (voir Tableau 18.1).
Tableau 18.1 Les axes suivre pour crer et grer une campagne de-mailing
Ralises tapes Oui 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 Non
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 touchez. 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 campagne ? Cherchez-vous exclusivement dliser votre clientle actuelle ? Avezvous 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.
382
Figure 18.4
Rentabilisez.com : Programmes et plates-formes daffiliation en dtail.
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 Professionnels du marketing Direct, Xavier Lucron numre les rgles suivre pour rdiger un message "performant". cette n, il propose une liste de mots utiliser : "test, bnci, 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".
383
Votre message doit tre exempt de termes ou expressions ngatifs. Bannissez les accroches 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 redirigera. 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 lectronique 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 dactivit. 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 informations collectes partir de votre site concernant les attentes, centres dintrts de votre cible. Par la suite, utilisez les rseaux dannuaires professionnels en ligne, contactez les rseaux daflis numrs sur des sites spcialiss tels que Rentabilisez.com (www.rentabilisez.com/) ou Web-afliations.com (www.Web-afliations.com/afliation-aflie.html).
384
La mise en place dun programme daffiliation

En fonction de la structure de votre activit, du budget et de votre temps, deux hypothses 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 consacre temps plein un tel programme. Lafliation ncessite un relationnel important 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 Webafliations.com disposent dune rubrique ddies aux afliations directes (voir Figure 18.5). Une agence, une plate-forme gre votre campagne. Votre programme dafliation 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. Concrtement, 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 dgagez un temps prcieux pour renforcer votre catalogue produits et le service apport votre clientle.
385
Figure 18.5
Programmes daffiliations directes du site Web-affiliations.com.
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.
19
Lexploitation de votre base e-mail

Au sommaire de ce chapitre : 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, susceptibles 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 emails 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.
388
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 "quotidiennement 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 exclusifs, 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 clientle 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 premire 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 produits bnciant dune promotion ou dune actualit Dans cette premire partie de la
LEXPLOITATION DE VOTRE BASE E-MAIL
389
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 surnombre. 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-creerune-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).
390
Figure 19.1
Des conseils techniques pour crer votre newsletter.
Figure 19.2
Pour garantir les bonnes rception et lecture de votre newsletter.
LEXPLOITATION DE VOTRE BASE E-MAIL
391
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).
Figure 19.3
Le lien de dsabonnement.
La gestion de vos listes de-mails doit galement reposer sur laccord de leurs propritaires. 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 newsletter. 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.
392
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 internautes 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 newsletter. Ce site vous propose de concevoir un formulaire an que vos visiteurs puissent sabonner votre newsletter. Vous choisissez les questions auxquelles doivent rpondre vos futurs abonns en mentionnant le caractre obligatoire ou non des questions, puis mentionner 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 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
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
B
Balises de rfrencement 312 <meta description> 312 <meta keywords> 312 <title> 312 mise en place 312 Banque 234, 251, 258
394
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
INDEX
395
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 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
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
G
Gestion 235 GET 116
396
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
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
H
Homepage 55 HTML 23 syntaxe 26 httpd.conf 35 Hyperlien 315
K
Kelkoo 370 rubriques 371 tarifs 371
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
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
J
Jakob Nielsen 11, 273 Jeu denregistrements 95, 154 ajouter 96
INDEX
397
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 ouverture dun compte 356 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 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
N
Navigation 270 page page 129 net linking 316 Newsletter 387 Niveau daccs 176, 180 Nom de domaine, dnition 256 Nouveauts 297
398
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
INDEX
399
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
400
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 ouverture dun compte 347
Le Campus Crer un site e-commerce

avec Dreamweaver CS4 et PHP/MySQL
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 daffiliation, 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-formes 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 puissiez, au terme de votre lecture, crer vous-mme un site efficace et lucratif. Codes sources sur www.pearson.fr !
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 webmarketing. Elle a travaill pour le compte de lagence LSF Interactive et de Yahoo! Search Marketing. Sandrine Houste est chef de projet dans linformatique bancaire.
4e dition
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
Niveau : Dbutant / intermdiaire Catgorie : Dveloppement web Configuration : Mac / PC
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 Ecommerce Avec DreemwaverCS4 Et PHP-MySQL

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 Ecommerce Avec DreemwaverCS4 Et PHP-MySQL

Transféré par

Droits d'auteur :

Formats disponibles

Le Campus

Crer un site e-commerce

Codes sources C sur su ur w www.pearson.fr w

Franois et Sandrine Houste, Delphine Bouton avec la contribution de Raphalle Roux

Crer un site e-commerce avec Dreamweaver CS4 et PHP/MySQL

Crer un site e-commerce avec Dreamweaver CS4 et PHP/MySQL

Table des matires

Partie I Mise en place technique dune boutique

La technologie PHP en dtail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

Installation de WampServer 2.0 sur un systme Windows . . . . . . . . . . .

Conguration de lenvironnement de dveloppement . . . . . . . . . . . . . . .

Cration du prol de site dans Dreamweaver CS4 . . . . . . . . . . . . . . . . . .

Ralisation des maquettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnition de la structure de la base de donnes . . . . . . . . . . . . . . . . . . . .

TABLE DES MATIRES

5 Cration dun catalogue en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fonctionnement thorique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dnition de jeux denregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Insertion de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Aperu des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Finalisation de la page de description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Mise en place de la page Auteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Dtail de lannuaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Note sur les comportements de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

Les actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Page de rsultat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

7 Accueil des clients et ouverture des comptes . . . . . . . . . . . . . . . . . 159

Cration dun client laide des assistants . . . . . . . . . . . . . . . . . . . . . . . . . 162

Connexion, dconnexion des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

La section Client du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

TABLE DES MATIRES

Modication de la page de description des articles . . . . . . . . . . . . . . . . . . 192

Cration du panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Validation de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

Partie II La relation client, point central du site e-commerce

TABLE DES MATIRES

Souscrire une assurance : Fia-Net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

13 Statistiques de frquentation et de vente . . . . . . . . . . . . . . . . . . . . . 279 Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

Interagir avec les clients ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Partie III Premiers pas en marketing, faire connatre sa boutique en ligne

Optimisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

Tisser des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

Le recours au chier Sitemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

TABLE DES MATIRES

16 Rfrencement payant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 Quelques pralables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Google AdWords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

Yahoo! Search Marketing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Microsoft adCenter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Loptimisation dune campagne de liens sponsoriss . . . . . . . . . . . . . . . . 364

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

18 Faire appel aux services daffiliation . . . . . . . . . . . . . . . . . . . . . . . . . . 377 Le principe de lafliation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

Votre programme dafliation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

Introduction au monde du e-commerce

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

Comment utiliser ce livre ?

INTRODUCTION AU MONDE DU E-COMMERCE

Une boutique en ligne, mais pas nimporte comment

Bien penser la stratgie de sa boutique

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

INTRODUCTION AU MONDE DU E-COMMERCE

CRER UN SITE E-COMMERCE AVEC DREAMWEAVER CS4 ET PHP/MYSQL

Taux du micro-social et du micro-fiscal simplifi Types d'activits

Taux Taux de charges l'impt sociales

INTRODUCTION AU MONDE DU E-COMMERCE