module 20

Transcription

module 20

MODULE 20
Conception d’un site web dynamique avec
Macromédia Dreamweaver MX
Module D0016
Présentation et installation des logiciels
Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information
complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités, ni pour son
utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter
de cette utilisation.
Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques.
Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle.
Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature
que ce soit pouvant résulter de l'utilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs
propriétaires respectifs.
Ce support pédagogique a été rédigé par Emmanuel CÔTEZ, assistant NTIC au Cnam Champagne-Ardenne.
Copyright © 2001-2005 Centre d'Enseignement A Distance du Cnam Champagne-Ardenne.
Tous droits réservés.
Toute reproduction, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable du
Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre,
constitue une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la
protection des droits d'auteur.
CONSERVATOIRE NATIONAL DES ARTS ET METIERS
PRESENTATION ET INSTALLATION DES LOGICIELS
DREAMWEAVER ET EASYPHP
1.1. INTRODUCTION
Dans cette première séance, nous allons voir comment installer les logiciels que nous allons utiliser lors de
cette formation ; une fois ceux-ci installés (nous utiliserons la version d’évaluation pour Dreamweaver), nous
verrons leur fonctionnement dans leur ensemble, afin que pour la suite de notre programme nous disposions
tous d’une configuration identique.
2. INSTALLATION DES LOGICIELS
Le premier logiciel que nous allons installer est le logiciel EasyPhp ; celui-ci est gratuit, vous pouvez
donc le télécharger et l’installer librement à votre domicile. Si ce logiciel permet de transformer votre ordinateur
en serveur web, sachez cependant qu’il n’a pas la prétention de servir de serveur web d’exploitation, mais juste
de serveur de test. Méfiez-vous, par exemple, si vous disposez d’une connexion internet permanente car
une fois EasyPhp installé, tout le monde pourra venir se connecter sur votre poste pour voir les pages
que vous êtes en train de rédiger ; EasyPhp n’étant par défaut pas sécurisé, il se pourrait même que quelqu’un
parvienne à s’introduire dans votre ordinateur afin d’y commettre quelques malversations.
Configurez correctement votre firewall si vous êtes connecté à internet en permanence ; EasyPhp n’est
pas fait pour servir de serveur d’exploitation, interdisez donc les requêtes lancées dans sa direction, sauf
pour ce qui est de votre machine locale (Adresse 127.0.0.1)
2.1. INSTALLER ET CONFIGURER EASYPHP
Insérez le CD-Rom outils qui vous a été fourni dans votre lecteur, puis passez par le poste de travail pour
retrouver le fichier d’installation de notre programme (sur le CD dans le dossier développement/easyphp 1.7/).
Eventuellement, faites une recherche sur le nom du fichier : « easyphp1-7_setup.exe »
Double-cliquez sur ce fichier, vous obtenez alors la
fenêtre ci-contre :
Cliquez sur « oui » pour continuer, vous obtenez la fenêtre
ci-dessous :
Cliquez sur « Next » pour commencer
l’installation (Next = suivant en anglais)
Conception d’un site web dynamique avec Macromédia Dreamweaver MX 1
Cochez le bouton radio « I accept the agreement », puis cliquez sur « Next ».
Cliquez sur « Next ». Cette dernière page vous demande de confirmer que vous avez connaissance des
avertissements que nous avons évoqués plus haut. Vous n’ignorez maintenant plus les risques que vous
encourrez si vous utilisez ce logiciel comme un véritable serveur web de production !
Installation des logiciels Dreamweaver et EasyPhp 2
Choix du répertoire d’installation de l’application ; souvenez-vous bien de ce répertoire, notez son
emplacement quelque part, nous aurons à nous y référer plus que régulièrement. Si vous installez EasyPhp dans
un autre emplacement que celui d’origine, n’oubliez pas que les références du cours seront établies en fonction
de ce répertoire par défaut. Cliquez sur « Next », puis sur « Oui » pour confirmer la création du répertoire :
Il vous faut maintenant choisir l’emplacement des icônes de démarrage de l’application dans votre menu
démarrer ; cliquez sur « Next » :
Résumé des informations d’installation : cliquez sur « Next » pour continuer l’installation ; cliquez sur
« Back » si vous souhaitez corriger les éléments renseignés précédemment :
Progression de l’installation : patientez pendant que l’ordinateur installe les composants de l’application.
Avertissement de sécurité autour de l’utilisation des variables en PHP. Sachez simplement qu’avant de
développer vos pages, il faudra vérifier les paramètres de configuration du serveur qui les héberge, de manière à
ce que vous adaptiez votre code en fonction de ces paramètres. Cliquez sur « Next » :
L’installation est terminée ; vous pouvez visiter la page d’accueil d’EasyPhp si vous souhaitez obtenir plus
d’informations sur le sujet. Pour lancer Easyphp, cliquez sur le menu « Démarrer », puis sur « Programmes »,
« EasyPhp 1.7 », et enfin sur « EasyPhp 1.7 » ; une fois le programme démarré, vous devriez voir apparaître
une icône supplémentaire dans la barre des tâches, juste à côté de l’heure :
Lors du lancement d’EasyPhp, celui démarre deux modules
particuliers en mémoire : le premier constitue le serveur web, qui, une fois
chargé en mémoire, s’occupera d’envoyer vos pages web vers votre
navigateur préféré (c’est une version d’Apache que nous utilisons avec
EasyPhp) ; le second constitue le serveur de base de données, MySql en
l’occurrence, auquel vous allez pouvoir accéder en utilisant l’utilitaire installé
avec EasyPhp : PhpMyAdmin (que nous verrons dans une séance
prochaine).
Si le petit point rouge associé à l’icône d’EasyPhp clignote, tout fonctionne correctement. A tout
moment, vous pouvez double-cliquer sur cette icône pour afficher le statut des deux serveurs en
fonctionnement : Apache et MySql.
A tout moment, cliquez avec le bouton de droite de votre souris sur cette icône pour
afficher le menu relatif à cette application (figure ci-contre).
-
-
Le menu « Configuration » vous permet d’accéder aux fichiers de configuration
( ! ) d’Apache, de MySql et de PHP ; ce sont tous des fichiers texte, qui restent à
manipuler avec précaution si on ne sait pas ce que l’on fait exactement !
La ligne « Administration » vous permet d’accéder directement à la page de
configuration de vos sites et de vos bases de données.
La ligne « Web local » lance le navigateur par défaut et affiche le serveur local
dans la fenêtre active.
La ligne « Redémarrer » vous permet d’arrêter et de relancer les deux serveurs
Apache et MySql ; attention : chaque modification de configuration
nécessitera de redémarrer ces deux serveurs.
2.2. INSTALLER ET CONFIGURER DREAMWEAVER
Insérez le CD-Rom outils qui vous a été fournit en début de formation ; localisez le fichier « Macromédia
Studio MX.zip » ; copiez le sur votre disque dur, puis double-cliquez dessus. Vous devez maintenant taper le
mot de passe permettant de décompresser ce fichier ; ce mot de passe vous aura été donné par votre
enseignant sur le forum de votre unité de valeur.
Décompressez l’archive nommée « Dreamweaver MX » dans le dossier de votre choix ; vous obtenez alors
un dossier nommé « dreammx » contenant le programme d’installation de notre application. Entrez dans ce
dossier et double-cliquez sur le fichier « dw_mx_trial_fr.exe ». Vous obtenez alors la fenêtre suivante :
Si vous ne possédez pas d’utilitaire d’archivage de fichiers (type WinZip ou WinRar), vous pouvez
utiliser le logiciel « Izarc » présent sur le CD-Rom Outils ; cet utilitaire est gratuit, vous pouvez donc
l’installer sur votre ordinateur personnel sans problème.
Cliquez sur « suivant » pour poursuivre l’installation, vous obtenez alors la fenêtre ci-dessous ;
Cliquez sur « oui » pour continuer l’installation :
Vous obtenez alors la fenêtre suivante :
Si vous désirez changer le répertoire d’installation de Dreamweaver (par défaut installé dans le dossier
Program Files), c’est le moment : cliquez sur « Parcourir » puis sélectionnez le répertoire de votre choix.
Cliquez ensuite sur « Suivant » ; vous obtenez alors la fenêtre suivante :
Laissez sélectionnées toutes les
cases, à moins que vous n’utilisiez
un autre logiciel de création de
pages web.
Une fois que vous aurez enregistré les
types de fichiers, il vous suffira de doublecliquer sur un fichier portant l’une de ces
extensions pour ouvrir automatiquement ce
fichier dans Dreamweaver.
Cliquez sur « Suivant » pour continuer, une fenêtre regroupant les informations d’installation s’affiche alors :
confirmez l’installation en cliquant sur « Suivant » ; le logiciel est en train de s’installer, patientez durant cette
procédure plus ou moins longue en fonction de la puissance de votre ordinateur :
Une fois l’installation terminée, vous obtenez la fenêtre suivante :
Cliquez sur le bouton « Terminer » ; votre logiciel est maintenant prêt à fonctionner. Il ne vous reste plus
qu’à lancer le logiciel en cliquant sur son icône dans le menu démarrer ; une fenêtre s’ouvre alors :
Cette fenêtre vous rappelle que vous utilisez une version d’évaluation de Macromédia Dreamweaver MX
(version 2002), version limitée à 30 jours ; rien ne vous empêche, si l’envie vous en prend, d’aller télécharger une
version plus récente de ce logiciel, elle aussi limitée à 30 jours ; si vous optez pour cette possibilité, sachez que
vous pouvez reculer la durée d’essai en installant les mises à jour pour Dreamweaver MX 2004
(version 7) ; en installant ces ajouts, vous avez ensuite 2 mois pour essayer librement le logiciel.
En attendant, cliquez sur le bouton « Essai » pour lancer le logiciel ; il vous faudra respecter cette
procédure à chaque fois que vous le lancerez ; si vous arrivez au bout de la période d’évaluation, vous avez la
possibilité d’acquérir ce logiciel en vous rendant sur le site www.macromedia.com ; si vous ne souhaitez pas
acquérir ce logiciel, il vous reste la possibilité de le désinstaller puis de le réinstaller ; cette procédure ne
fonctionnera malheureusement pas sur toutes les configurations, mais a le mérite de relancer les 30 jours d’essai
sur d’autres… A tester !
Au premier lancement de votre application, le logiciel vous demande quel espace de travail vous souhaitez
utiliser ; le premier (à gauche) correspond à l’espace de travail habituel sous Dreamweaver MX ; le second (à
droite) correspond à l’espace ancienne version, pour ceux qui connaissaient déjà Dreamweaver version 4.
Cliquez sur le bouton radio de gauche pour sélectionner l’espace de travail de Dreamweaver MX, puis
cliquez sur OK.
Vous êtes maintenant fins prêts pour vous lancer dans la folle aventure de la création de sites web.
3. PRESENTATION DES LOGICIELS
Voyons donc maintenant comment fonctionnent ces deux logiciels ; il ne s’agit pas de décrire précisément
l’ensemble de leur fonctionnalités, nous en aurons l’occasion durant ce cursus de formation, mais bien de vous
familiariser avec eux, de manière à ce que vous ayez déjà une petite expérience de la manipulation de ces
logiciels au moment où vous rentrerez chez vous…
3.1. DREAMWEAVER
Pour ce qui est du logiciel Dreamweaver, vous êtes censés, si vous vous êtes inscrit à cette formation,
connaître un minimum l’interface et l’utilisation de ce logiciel ; dans le cas contraire, la formation de niveau 1 sur
Dreamweaver vous sera certainement utile. Pour ceux qui disposent déjà d’une certaine expérience de ce
logiciel, nous verrons les différents apports aux niveau de l’interface et de l’utilisation du logiciel au fur et à
mesure des séances que nous allons suivre ensemble.
3.2. EASY PHP 1.7
3.2.1. Description
Si vous vous rendez sur la page d’accueil principale de
(http://www.easyphp.org/?lang=fr) vous pourrez lire les lignes suivantes :
l’équipe
qui
développe
EasyPhp
« EasyPHP installe et configure automatiquement un environnement de travail complet sous Windows permettant de
mettre en oeuvre toute la puissance et la souplesse qu'offrent le langage dynamique PHP et son support efficace
des bases de données. EasyPHP regroupe un serveur Apache, une base de donnée MySQL, le langage PHP ainsi
que des outils facilitant le développement de vos sites ou de vos applications. »
En clair, vous voilà nanti de la trousse à outils parfaites pour le développeur de sites dynamiques basés sur
les technologies PHP (langage de développement), la base de données MySQL (pour les informations que vous
souhaitez conserver) et le serveur web Apache. Tout cela tournant sous Windows, vous ne serez pas obligé
d’être un crack sous linux pour tester convenablement votre site : en effet, EasyPhp reproduit les mêmes
conditions d’exploitation que si vous mettiez votre site sur un serveur web tournant sous Linux… tout en ne
fournissant bien sûr pas un niveau de sécurité équivalent.
Pour plus de détails sur l’utilisation de ce logiciel, consultez la documentation générale d’EasyPhp à la page
http://www.easyphp.org/?lang=fr ; installez ensuite le logiciel sur votre machine, de manière à ce que nous
puissions, dès le début de ce cours, commencer à voir les interactions entre Dreamweaver et le serveur chargé
en mémoire.
3.2.2. Utilisation
Pour vous connecter sur votre serveur local, lancez un navigateur web et tapez l’adresse suivante dans la
barre d’adresse :
http://localhost/ ou http://127.0.0.1/
L’adresse IP « 127.0.0.1 » correspond à la boucle local dans votre ordinateur (elle est exactement identique
à « localhost ») ; ainsi, lorsque vous entrez cette adresse dans le navigateur, celui-ci s’appelle lui-même en
quelque sorte, et cherche un serveur en mémoire qui pourrait lui renvoyer les pages attendues.
Une fois que vous avez entré cette adresse, la page suivante s’affiche dans le navigateur client :
Cette page correspond à la racine du site hébergé (entre guillemets) par EasyPhp ; la page qui s’affiche
correspond au fichier « index.php » du dossier « www » du répertoire d’installation de EasyPhp (par défaut
« c:\program files\easyphp\www » ; c’est dans ce dossier que vous mettrez le site web que vous souhaitez
évaluer.
Si vous tapez maintenant l’adresse suivante : http://localhost/home/, la page qui s’affiche dans votre
navigateur va vous permettre de vérifier les options de configuration du logiciel (celles-ci sont modifiables
directement à partir des fichiers texte de même type que sous Linux) :
On distingue bien sur cette page les
différents modules que EasyPhp charge
en mémoire au démarrage de
l’ordinateur (ou au lancement du
programme si vous l’avez configuré de
la sorte) :
- Apache est le serveur web
d’évaluation ; c’est lui qui va envoyer
au navigateur les pages qu’il devra
afficher.
- PHP : le module qui va nous
permettre de réaliser des pages
dynamiques ; le langage PHP est un
langage interprété, c’est-à-dire qu’il va
exécuter les commandes au fur et à
mesure du chargement de la page.
- PhpMyAdmin : il s’agit en fait d’une
interface web de gestion de la base
de données MySQL livrée avec
EasyPhp.
- MySQL : c’est la base de données
que nous allons utiliser dans le
cadre de ce cours ; s’il ne s’agit
certainement pas de la plus robuste, de la plus fiable ou de la plus performante, il s’agit en tous cas d’une base
de données utilisée mondialement, sur laquelle on trouve pléthore d’informations, et qui a le mérite d’être
gratuite et libre de droit (encore que dans sa version 5 ce point ne soit plus certain). Nous aurions pu utiliser
aussi une base comme PostGreSQL, mais son installation et sa configuration est bien plus fastidieuse, et l’intérêt
que nous en aurions tiré dans le cadre de cette formation très restreint. MySQL, dans sa version 4, nous suffira
donc amplement pour ce que nous allons en
faire !
Voici l’interface web de gestion de la
base de données (à droite) ; à partir de celleci, nous allons pouvoir insérer des données
dans notre base, créer de nouvelles entrées,
de
nouvelles
tables…
Pour
plus
d’informations d’ordre général sur les bases
de données, plusieurs enseignements sont
proposés au Cnam Champagne-Ardenne,
renseignez-vous !
4. POUR EN SAVOIR PLUS…
Des informations techniques sur MySQL et le projet dans son ensemble :
http://www.nexen.net/docs/mysql/annotee/manuel_tocd.php
Sur l’installation du logiciel EasyPhp, la page du site commentçamarche :
http://www.commentcamarche.net/php/phpeasy.php3

module 20

Transcription

Documents pareils

1. Installer un serveur de test Windows XP avec EasyPHP 1.6 et 1.7

Windows

Comment convertir un Divx en DVD - les drivers

Télécharger mon CV

CONTROLE PARENTAL SUR INTERNET (suite) - Form@net

Comment convertir un article de l`encyclopédie wikipédia en pdf

Comment télécharger au format mp3 les émissions de la fabrique de

Personnaliser son bureau

Jumelage seconde Cormontaigne et troisième Jules Ferry

FORMATION : « INITIATION PHP / MySQL

Iinstallation de PMB sous Windows avec EasyPhp 12.1