ecom Livre Page 21 Jeudi, 12. novembre 2009 12:10 12 3 Mise en place d’un … · 2011. 3. 11. ·...

3 Mise en place d’un serveurde développement

Au sommaire de ce chapitre

■ Comment fonctionne un site dynamique ?■ La technologie PHP en détail■ Installation de WampServer 2.0 sur un système Windows■ Configuration de l’environnement de développement■ Création du profil de site dans Dreamweaver CS4

Une fois votre projet de boutique en ligne défini et votre hébergeur choisi en consé-quence, vous allez pouvoir penser à mettre en place un serveur de développementcomplet chez vous. Ce type de serveur est en effet indispensable dans le cadre du déve-loppement de sites web en langage PHP et vous fera gagner un temps précieux.

Pour mieux comprendre la nécessité de ce type de serveur, il est indispensable de savoircomment fonctionne exactement le langage PHP et comment il s’interface avec une basede données. Une fois ces définitions techniques posées, vous découvrirez comment instal-ler votre propre environnement de développement, en l’occurrence WampServer 2.0,sur une machine équipée de Windows. Vous apprendrez également à procéder aux pre-miers réglages de cet environnement afin qu’il corresponde exactement à l’hébergeurque vous vous êtes choisi pour votre site web.

Comment fonctionne un site dynamique ?Mais, avant tout, savez-vous comment fonctionne réellement un site dynamique ?

Les avantages d’un site dynamique

Contrairement aux pages personnelles, les sites commerciaux, professionnels ou insti-tutionnels, gèrent une quantité importante de contenu (actualités, articles, fichesproduits…). Imaginez le travail que représenteraient ces types de sites s’ils étaiententièrement constitués de pages HTML statiques.

ecom Livre Page 21 Jeudi, 12. novembre 2009 12:10 12

© 2009 Pearson Education France – Créer un site e-commerce – François et Sandrine Houste, Delphine Bouton

MISE EN PLACE TECHNIQUE D’UNE BOUTIQUE22

Prenez l’exemple d’un site comme celui de la FNAC (voir Figure 3.1). Cela signifieraitque la page descriptive de chaque livre et de chaque disque aurait fait l’objet d’un mon-tage à part. Les milliers d’articles proposés par le cyber-marchand demanderaient alorsdes jours et des jours de travail pour être présentés de manière correcte aux clientspotentiels.

De plus, à chaque nouvel arrivage, il faut concevoir non seulement les pages correspon-dantes à ces nouvelles éditions mais également toutes les pages existantes afin que, parexemple, la liste des ouvrages d’un même auteur soit à jour. Autre petit détail, la créa-tion d’un moteur de recherche ou du Caddie virtuel utilisé par les clients devient quasi-ment impossible ou demande tout au moins l’utilisation de tellement de JavaScript qu’ilserait sans doute préférable d’en abandonner l’idée.

Comment résoudre alors ce casse-tête ? En utilisant les technologies de sites dynami-ques, bien sûr ! Celles-ci ne font plus appel à de simples fichiers HTML mais utilisentde véritables langages de programmation interprétés par le serveur qui héberge lespages web. Ces langages permettent de comprendre des requêtes faites par l’utilisateur(l’affichage d’une page, une recherche précise…), de chercher les réponses à cetterequête dans une base de données et d’envoyer à ce même visiteur le résultat de cesrecherches sous forme de page web.

Figure 3.1Le site de la FNAC est entièrement fondé sur la technologie ASP de Microsoft.

ecom Livre 2 Jeudi, 12. novembre 2009 12:10 12


23MISE EN PLACE D’UN SERVEUR DE DÉVELOPPEMENT

Les sites dynamiques, c’est donc cela : la combinaison d’un langage de programmation(PHP, ASP…) et d’une base de données afin de générer des pages web.

Depuis sa version MX, Dreamweaver possède toute une panoplie d’outils permettant lacréation de sites web dynamiques : Liaisons, Comportements de serveur, Composants,Actions… Grâce à ces outils, on peut créer son propre site dynamique dans l’une descinq technologies proposées : ASP, ASP.net, JSP, Adobe Cold Fusion et, bien entendu,PHP !

Anatomie d’un site dynamique

Avant de vous lancer tête baissée dans la création d’un site web dynamique à l’aide deDreamweaver, il est important de comprendre comment fonctionnent exactement lesdifférentes technologies de création de sites dynamiques.

Pour bien comprendre, prenez comme base le comportement d’un site web statique,c’est-à-dire composé de pages HTML classiques.

Lorsque vous souhaitez afficher une page sur ce type de site, votre navigateur Internetdemande simplement au serveur d’hébergement de lui envoyer le code HTML corres-pondant à cette page (voir Figure 3.2). Ce code HTML est du même type que celuique vous créez avec Dreamweaver, il est composé de texte, de liens, d’appels à desimages… Lorsque votre navigateur rencontre la balise <img> correspondant à une image,il envoie à nouveau une requête au serveur afin de recevoir le fichier image corres-pondant.

Une fois la page et ses composants entièrement chargés et affichés, le navigateur cessed’envoyer des requêtes aux serveurs jusqu’à votre prochain clic sur un lien. L’échangeentre votre ordinateur et le serveur se limite donc à quelques requêtes et à quelquesfichiers, le serveur se contentant d’envoyer les fichiers HTML, images ou multimédiasréclamés.

Figure 3.2Les requêtes pour afficher les pages d’un site statique sont simples.

DVD

RO

M

Visiteur Serveurweb

Demande d’affichage d’une page

Rendu de la page demandée




Quand vous naviguez sur des sites dynamiques, le fonctionnement est sensiblement dif-férent. Lorsque vous souhaitez accéder à une page, votre navigateur envoie au serveurl’adresse de cette page (cette fois, il s’agit non plus d’un fichier HTML mais d’une pageécrite en PHP), ainsi que quelques paramètres. Ces paramètres peuvent être envoyés auserveur directement via l’URL présente dans le navigateur (c’est le plus fréquent) ouprovenir d’un formulaire et être envoyés par une méthode POST, comme dans le casd’un moteur de recherche.

Les méthodes POST et GET sont deux méthodes de communication entre un ordinateur client et unserveur Internet. Le serveur reçoit via le protocole HTTP des informations de l’ordinateur client.Lorsqu’on utilise la méthode GET, les informations envoyées sont ajoutées à l’URL de la page deman-dée au serveur. Quand on utilise la méthode POST, les informations sont invisibles pour l’utilisateur.Elles sont envoyées de manière cachée par le serveur. La méthode POST est en général associée auxformulaires, la méthode GET à la mise en place de liens dynamiques.

Une fois cette requête reçue, le serveur interprète alors le contenu de la page dynamiqueappelée. Cette page contient des requêtes vers une base de données dont les résultatsdépendent des paramètres déjà définis. La page va donc chercher dans cette base lestextes et autres éléments à inclure dans la page (voir Figure 3.3). Le serveur réunitensuite la page dynamique et les données provenant de la base de données afin de créerune page HTML classique.

Une fois cette page réalisée, elle est envoyée au navigateur afin d’être affichée sur votreordinateur comme une page classique. Le prochain appel à une page dynamique provo-quera les mêmes requêtes et mécanismes sur le serveur.

La technologie PHP en détailPHP n’est en fait qu’un langage de création de sites dynamiques parmi d’autres. Dansla même famille de langage, on peut citer l’ASP (Active Server Pages), développé par

Figure 3.3Le serveur est très sollicité lors de l’affichage des pages d’un site dynamique.

DVD

RO

M

Visiteur Serveurweb

Demande de la page

Rendu de la page demandéeServeur

de base dedonnées

Requête des éléments dynamiques

Données à inclure dans la page




Microsoft, le JSP (JavaServer Pages), développé par SUN, ou encore ColdFusion, propriétéde Adobe.

Présentation générale

PHP (acronyme récursif de PHP Hypertext Preprocessor) est la dernière technologie dedéveloppement de sites web dynamiques arrivée sur le Net, mais pourtant pas la moin-dre. Fondé sur la licence GNU et donc totalement gratuit, PHP est, avec l’ASP, lelangage dynamique le plus utilisé au monde. Il s’agit comme l’ASP d’un langage deprogrammation à part entière, hérité des C/C++.

Très répandu dans le monde de l’hébergement Internet, PHP offre l’avantage de pou-voir fonctionner aussi bien sur une architecture Windows que sur Unix/Linux. Il vouslaisse donc le choix entre un grand nombre d’hébergeurs pour l’accueil de votre siteweb. La création d’un environnement de développement PHP sous Windows est gran-dement facilitée par la vivacité du monde du logiciel libre. En effet, une foule de pro-grammes comprenant un serveur Apache, un interpréteur PHP et un environnement debase de données type MySQL sont disponibles sur Internet.

La mise en place d’un environnement de développement en PHP à l’aide de WampServer 2.0 estdétaillée plus loin dans ce chapitre.

Si vous souhaitez consulter la documentation la plus complète possible sur PHP, le siteofficiel est tout indiqué : http://www.php.net (voir Figure 3.4).

PHP dans vos pages

Mais, concrètement, à quoi ressemble du code PHP, une fois qu’il est intégré dans unepage ? Prenons un exemple très simple, un code PHP uniquement destiné à afficher untexte dans une page HTML. Le code source, tel qu’il sera interprété par le serveur,ressemble à cela :

<html> <head> <title>Premier script PHP</title> </head> <body> <? print(Date("l F d,Y")); ?> </body></html>




Ce script PHP très simple se contente d’afficher la date actuelle sur la page, et riend’autre. Comme vous pouvez le constater, le code PHP, modélisé entre les balises< ? ?> ou < ? php ?>, s’intègre parfaitement à l’intérieur des balises HTML classi-ques. Il vous est donc inutile de coder en PHP l’affichage entier d’une page, contentez-vous d’utiliser ce langage de programmation pour définir les éléments dynamiques devos pages (dates, textes issus d’une base de données…), et conservez les bonnes vieillestechniques du HTML pour le reste de la page !

Même si la connaissance du HTML n’est pas indispensable pour mener à bien votre projet deboutique en ligne, il peut se révéler très utile pour vous de connaître les bases de ce langage.Vous trouverez une définition de la norme HTML officielle sur le site du W3C (World Wide WebConsortium, organisme chargé de définir les standards utilisés 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 decet ouvrage va être directement rédigée par Dreamweaver. Il est toutefois possible que,pour certaines tâches bien précises, il soit plus rapide d’utiliser un programme entière-ment réalisé à la main qu’utiliser des codes prédéfinis par Dreamweaver. Dans ce cas,vous trouverez dans ce livre le code en question et la manière dont il convient de l’insérerdans la page à l’aide de Dreamweaver.

Figure 3.4Le portail de PHP : http://www.php.net.




Si vous souhaitez malgré tout en savoir plus sur le langage PHP, sa syntaxe et ses possi-bilités avancées, sachez que de très bons sites francophones existent pour expliquer celangage. Tels PHPFrance (http://www.phpfrance.com, voir Figure 3.5) ou PHPIndex(http://www.phpindex.com).

Gardez en tête que, dans une page web, le code PHP est toujours encadré de balises <? et ?> ou< ?php et ?>.

La version 5.0 de PHP est disponible depuis la fin de l’année 2004. Elle est désormaisadoptée comme un standard par la majorité des créateurs de site. Parmi les nouveautés,on en retiendra trois particulièrement importantes, même si leur impact sera limité dansla création de votre boutique en ligne :

• Implémentation de SQLite. SQLite est un système de gestion de base de donnéesembarqué directement dans PHP. Il permet pour des applications simples de sedéfaire de la contrainte d’un serveur de base de données à part entière. Avec cetteévolution, on notera d’ailleurs que le support de MySQL est désactivé dans la confi-guration par défaut de PHP 5.

Figure 3.5www.phpfrance.com, une bonne initiation au langage PHP.




• Implémantation de SimpleXML. Le format XML devenant omniprésent sur leWeb et dans les systèmes de gestion de contenu, PHP 5 intègre désormais unmodule de traitement et d’analyse des données au format XML très puissant.

• Nouveau modèle POO. Le modèle Orienté Objet, l’architecture même du langagePHP, a été fortement remanié afin d’être plus rapide et plus efficace. Bien entendu,l’architecture de PHP 4.0 est toujours interprétée par cette nouvelle version et la majo-rité des scripts développés dans les versions précédentes reste valable pour PHP 5.

Avec Adobe Dreamweaver CS4 vous n’aurez pratiquement pas à toucher au code PHPde votre site. Mais gardez l’ensemble de ces références en tête, elles vous seront utilessi vous souhaitez ajouter des fonctionnalités avancées à votre site e-commerce par lasuite. Dreamweaver est limité pour la programmation et ne vous empêchera pas detemps à autre de coder.

Les bases de données MySQL

Aussi puissant que soit PHP, il ne peut pas tout faire sur un site web ! Pour afficher unprix, un titre ou un nom d’auteur sur une page, il faut bien que l’information correspon-dante soit stockée quelque part. Et ce quelque part, dans votre site, va être une base dedonnées de type MySQL.

Pour les non-initiés, voici une définition sommaire d’une base de données : elle permetde stocker des informations de manière ordonnée et structurée. Une base est ainsi com-posée de plusieurs tables, elles-mêmes composées de colonnes et d’enregistrements,une colonne correspondant à un type d’information et un enregistrement, à une entitéprécise. Ainsi, dans le cadre de notre librairie en ligne, on peut imaginer qu’une tablecontiendra l’ensemble des livres disponibles dans la boutique. Chaque enregistrementcorrespondrait à un livre en particulier, chaque colonne, à une information précise surce livre, comme son titre, le nom de son auteur ou encore son prix (voir Figure 3.6).

L’information ainsi stockée devient très facilement récupérable : pour connaître l’auteurd’un livre, il suffit de connaître le titre de ce dernier et de savoir que c’est le nom del’auteur que l’on recherche. En croisant ces deux critères, l’information devient évidente.

Bien entendu, cette description est très schématique et, dans la pratique, une base dedonnées est bien plus complexe qu’un simple tableau. Il est en effet possible de réaliserdes liaisons entre plusieurs tables, d’optimiser les recherches, etc. Vous en découvrirezbien plus sur les bases de données dans le chapitre suivant, où il sera question de créerla base de données complète nécessaire à la création de votre boutique. Les notions plusavancées d’index ou de clés primaires seront abordées à ce moment.

Dans cet ouvrage, vous allez utiliser une base de données de type MySQL. Il s’agitdu type de base de données le plus souvent associé au langage PHP (voir Figure 3.7).



ecom Livre Page 21 Jeudi, 12. novembre 2009 12:10 12 3 Mise en place d’un … · 2011. 3. 11. ·...

Documents

Transcript of ecom Livre Page 21 Jeudi, 12. novembre 2009 12:10 12 3 Mise en place d’un … · 2011. 3. 11. ·...