Nouveautés Dreamweaver MX

Interface Dreamweaver MX. 2

Comportement Menu contextuel 3

Les modèles Dreamweaver MX. 4

Création d’un modèle. 4

Région facultative. 5

Région répétée. 5

Tableau répété. 6

Modèles imbriqués. 6

Principe des pages dynamiques. 6

Pages dynamiques ASP. 6

Installation du Serveur PWS. 7

Création d’un répertoire virtuel avec PWS. 7

Création d’un répertoire virtuel avec IIS. 8

Une page simple pour tester 8

Affichage d’une table d’une base de données. 9

Création d’un lien ODBC. 9

Créer une page dynamique. 10

Créer une connexion avec la base de données. 11

Créer un Jeu d’enregistrements. 11

Afficher le jeu d’enregistrements. 12

Recherche d’une fiche. 13

Insertion d’enregistrements. 14

Visualisation d’enregistrements dans un formulaire. 14

Recherche d’ouvrages dans une table Biblio. 15

Pages dynamiques PHP. 16

Installation du Serveur Apache. 16

Une page simple pour tester 17

Affichage d’une table Client d’une base de données MySQL Commande. 17

Créer une connexion avec la base de données. 17

Créer un Jeu d’enregistrements. 18

Afficher les enregistrements. 18

Interface Dreamweaver MX

Le groupe de panneaux Insertion remplace le Panneau Objets

L’icône permet développer ou de réduire le panneau Site

Pour déplacer les panneaux :

L’icône permet d’accéder au menu ci-dessous

Edition/Préférences/Général permet de choisir l’interface de travail : Dream MX ou Dream4

Comportement Menu contextuel

· Créer un lien hypertexte

· Fenêtre Comportements

· +

· Choisir Menu contextuel

On obtient :

Les modèles Dreamweaver MX

Création d’un modèle

Pour créer un modèle :

· Créer une page normale

· L’enregistrer avec Fichier/Enregistrer comme modèle ou (Groupe de panneaux Insertion/Onglet Modèles)

Définir une ou plusieurs régions modifiables :

· Sélectionner la région qui doit devenir modifiable

· Cliquer sur l’icône

· Donner un nom à la région modifiable(Corps par exemple)

Le modèle est enregistré dans le répertoire Templates avec l’extension .dwt

Pour créer une page à partir du modèle :

· Fichier/Nouveau

· Choisir le site

· Choisir le modèle

Région facultative

Pour créer une région facultative dans un modèle:

· Sélectionner la région facultative (une image sur l’exemple)

· Cliquer sur

· Donner un nom à la région modifiable (logo sur l’exemple)

· Sur la page créée à partir du modèle, utiliser Modifier/Propriétés du modèle

· Si on veut que l’image n’apparaisse pas, décocher Afficher Logo

Région répétée

Pour créer une région répétée :

· Créer les régions modifiables:nom et ville

· Sélectionner la seconde ligne du tableau

· Cliquer sur l’icône

Sur la page créée à partir du modèle, cliquer sur + pour ajouter une ligne

Tableau répété

Pour créer un tableau répété :

· Cliquer sur

· Définir la ligne de début et la ligne de fin qui doivent être répétées

Modèles imbriqués

Pour créer un modèle à partir un modèle à partir d’un autre modèle :

· Créer une page à partir d’un modèle (Global par ex)

· Dans la région modifiable Corps, définir d’autres régions modifiables (nom et tph par exemple)

Principe des pages dynamiques

En plus du balises HTML et des scripts JavaScript, les pages dynamiques contiennent du code exécuté par le serveur. Le résultat de l’exécution de ce code (Html) est transmis au navigateur.

L’accès aux bases de données ne peut se faire qu’avec une programmation serveur(Le langage JavaScript qui est exécuté par le navigateur ne le permet pas).

Il existe plusieurs technologies de programmation serveur: ASP, ASP.NET, PHP, JSP,C old Fusion,…

DreamweaverMX est multi-plateformes.

Les pages ASP contiennent des balises HTML et du code Basic. Ce code, exécuté sur le serveur, génère du HTML. Ensuite, Le serveur envoie au navigateur une synthèse des balises HTML et du résultat du code.

Sur l’exemple de la figure ci dessous, le code placé entre les balises <% %> est exécuté sur le serveur.

C’est seulement le résultat de l’exécution qui est envoyé au navigateur.

Installation du Serveur PWS

Pour tester ses pages ASP, on peut utiliser le PWS(Personnel Web Serveur) disponible sur le CD de Windows 98 (répertoire Add-Ons) ou IIS pour Windows XP

Création d’un répertoire virtuel avec PWS

Pour lancer l’exécution d’une page .asp, il faut créer un répertoire virtuel.

Un répertoire virtuel associe un nom logique au répertoire physique du site.

Lancer le serveur Pws.

Cliquer sur Avancé :

§ Donner le nom d’alias du répertoire virtuel (monsite)

§ Spécifier le chemin physique du site (c:/siteasp)

Pour exécuter un programme x.asp, lancer IE et frapper dans la barre d’adresse :

http://localhost/répertoire_virtuel/nom_programme

Si le nom du répertoire virtuel est monsite et le nom de la page est x.asp

http://localhost/monsite/x.asp

Création d’un répertoire virtuel avec IIS

· Panneau configuration

· Outils d’administration

· Services IIS

· Clic droit sur site Web par défaut/Nouveau/Répertoire virtuel

Une page simple pour tester

Ecrire une page essai.asp qui affiche la date du jour.

<html>

<body>

<h1>Bonjour </h1>

response.write date

</body>

</html>

Le nom du serveur PWS est localhost.

Pour exécuter le programme essai.asp, lancer le naviateur (IE, Netscape,..) et frapper dans la barre d’adresse :

http://localhost/monsite/essai.asp (http://localhost/répertoire_virtuel/nom_programme)

Remarque: le code ASP n’est pas visible dans le navigateur.

Affichage d’une table d’une base de données

Sur cet exemple, nous visualisons le contenu de la table Client. La table se présente ainsi :

Table Client

Création d’un lien ODBC

Pour accéder à une base de données, il faut d’abord créer un lien ODBC (Open Data Base Connectivity) sur le serveur.

§ Un lien ODBC associe un nom logique (icommande sur l’exemple) à une base physique (Commande.mdb sur l’exemple)

Dans le panneau de configuration, choisir Source de données ODBC.

Cliquer sur Ajouter

§ Choisir le Pilote (Access)

§ Cliquer sur Terminer.

§ Définir un nom logique pour la source de données (dsn): icommande sur l’exemple.

§ Cliquer sur Sélectionner pour choisir la base : commande.mdb sur l’exemple

Créer une page dynamique

Utiliser la commande Fichier/nouveau

Créer une connexion avec la base de données

· Dans le groupe de panneaux Application, choisir l’onglet Bases de données.

· Créer une connexion avec la base de données en Cliquant sur +

· Choisir le DSN (icommande sur l’exemple)

· Affecter un nom à la connection (cnn par exemple)

Créer un Jeu d’enregistrements

Dans le groupe de panneaux Application

· choisir l’onglet Comportements serveur

· Cliquer sur +

· Choisir Jeu d’enregistrements.

Choisir les champs du jeu d’enregistrements (touche Ctrl):

Afficher le jeu d’enregistrements

Dans l’onglet Application du groupe de panneaux Insertion, choisir l’icône

Dans le navigateur, frapper :

http://localhost/répertoire_virtuel/nom_page.asp

Pour tester une page ASP avec la touche F12, utiliser la commande Site/Modifier puis Serveur d’évaluation et spécifier dans Préfixe de l’URL http://localhost/répertoire_virtuel.

Code généré

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

Dim Recordset1

Dim Recordset1_numRows

Set Recordset1 = Server.CreateObject("ADODB.Recordset")

Recordset1.ActiveConnection = MM_cnn_STRING

Recordset1.Source = "SELECT Nom_cli, Ville, Code_postal, E_mail FROM Client ORDER BY Nom_cli ASC"

Recordset1.CursorType = 0

Recordset1.CursorLocation = 2

Recordset1.LockType = 1

Recordset1.Open()

Recordset1_numRows = 0

Dim Repeat1__numRows

Dim Repeat1__index

Repeat1__numRows = -1

Repeat1__index = 0

Recordset1_numRows = Recordset1_numRows + Repeat1__numRows

<html>

<head>

<title>Document sans titre</title>

</head>

<body>

<td>Ville</td>

<td>Code_postal</td>

</tr>

<% While ((Repeat1__numRows <> 0) AND (NOT Recordset1.EOF)) %>

</tr>

Repeat1__index=Repeat1__index+1

Repeat1__numRows=Repeat1__numRows-1

Recordset1.MoveNext()

Wend

</table>

</body>

</html>

Recordset1.Close()

Set Recordset1 = Nothing

Recherche d’une fiche

On veut rechercher la fiche d’un client :

1- Créer une page cherche.asp avec un formulaire et un champ nommé nom_cherche

Dans la propriété Action du formulaire, spécifier la page cherche_result.asp

2- Créer une page Cherche_result.asp

Créer un Jeu d’enregistrements avec un filtre :

· Choisir Nom_cli

· Choisir Variable formulaire

· Spécifier la variable Formulaire nom_cherche

3 - Présenter le résultat dans un tableau avec l’icône (Groupe panneaux Insertion/Onglet Application)

On obtient :

Insertion d’enregistrements

Utiliser l’icône du groupe de panneaux Insertion/Onglet Application

Visualisation d’enregistrements dans un formulaire

· Créer un formulaire

· Créer un Jeu d’enregistrements

· Affecter à chacun des champs du formulaire les champs du Jeu d’enregistrements avec le comportement Eléments de formulaire dynamique.

· Créer une barre de navigation avec l’icône

A l’exécution, on obtient

Recherche d’ouvrages dans une table Biblio

On veut effectuer une recherche d’ouvrages par mot clé.

Table biblio

1 - Créer une page Bibli_cherche.asp permettant de saisir le mot clé cherché.

Nommer le champ mot_cle_cherche

Dans la propriété Action du formulaire, spécifier la page Bibli_cherche_result.asp

2 – Créer une page Bibli_cherche_result.asp

Créer un Jeu d’enregistrements avec un filtre :

· Choisir le champ de recherche :titre

· Choisir Variable Formulaire

· Définir la variable: mot_cle_cherche

· Choisir Contient

3 – Visualiser les enregistrements du jeu d’enregistrements

Pages dynamiques PHP

Sur l’exemple ci dessous, le code placé entre les balises < ? ?> est exécuté sur le serveur.

C’est seulement le résultat de l’exécution qui est envoyé au navigateur.

Page accueil.php sur le serveur :

<html>

<head>

</head>

echo "<center>";

echo date("d/m/Y");

</body>

</html>

Page Accueil.php dans le navigateur :

<html>

<head>

</head>

<center>01/01/2003

</body>

</html>

Installation du Serveur Apache

Sur le site http://www.easyphp.org, on pourra télécharger MySQL et un serveur Apache

Placer les pages .PHP dans le sous répertoire www où est installé EasyPhp

Une page simple pour tester

Ecrire une page essai.php qui affiche la date du jour et la sauvegarder dans le répertoire

<html>

<head>

</head>

echo “Bonjour";

</body>

</html>

Le nom du serveur est localhost.

Pour exécuter le programme essai.php, lancer le navigateur et frapper dans la barre d’adresse :

http://localhost/essai.php

Remarque: le code PHP n’est pas visible dans le navigateur.

Affichage d’une table Client d’une base de données MySQL Commande

Sur cet exemple, nous visualisons le contenu de la table Client. La table se présente ainsi :

Table Client

Créer une connexion avec la base de données

· Dans le groupe de panneaux Application, choisir l’onglet Bases de données.

· Créer une connexion avec la base de données en Cliquant sur +

· Choisir le nom de la base Commande sur l’exemple

· Affecter un nom à la connection (connGlobal par exemple)

Créer un Jeu d’enregistrements

Dans le groupe de panneaux Application

· choisir l’onglet Comportements serveur

· Cliquer sur +

· Choisir Jeu d’enregistrements

Choisir les champs :

Afficher les enregistrements

Dans l’onglet Application du groupe de panneaux Insertion, choisir l’icône

Dans le navigateur, on obtient :

Pour tester une page PHP avec la touche F12, utiliser la commande Site/Modifier puis Serveur d’évaluation.

Code généré

<?php require_once('Connections/connGlobal.php'); ?>

<?php

mysql_select_db($database_connGlobal, $connGlobal);

$query_Recordset1 = "SELECT Nom_cli, Rue, Ville, Code_Postal FROM client";

$Recordset1 = mysql_query($query_Recordset1, $connGlobal) or die(mysql_error());

$row_Recordset1 = mysql_fetch_assoc($Recordset1);

$totalRows_Recordset1 = mysql_num_rows($Recordset1);

<html>

<head>

<title>Document sans titre</title>

</head>

<body>

<td width="120">Ville</td>

<td width="80">Code_Postal</td>

</tr>

<?php do { ?>

</tr>

<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

</table>

</body>

</html>

<?php

mysql_free_result($Recordset1);