Réalisation d'un Blog avec Dreamweaver^TM (partie II - Initialisation et paramétrages)

Introduction Initialisation Mise en forme Tri Administration

Gestion de site avec Dreamweaver^TM Visualiser le déroulé

Comme pour chaque création de site, commencez par configurer la gestion de site depuis le menu Site > Gérer les Sites de Dreamweaver^TM, puis créez en un, nouveau > site. La fenêtre de gestion du site s'ouvre. Si celle ci se trouve en mode élémentaire passez en mode avancé.

Animation sur la gestion du site.

Pour les infos locales

1. Nommez le site BlogJPO
2. Pointez vers le dossier racine, le dossier dans lequel vous avez placé l'ensemble des fichiers sources
3. Cochez la case d'actualisation automatique des fichiers locaux

Pour les infos distantes

1. Choisissez un accès Local/Réseau
2. Pointez également vers le dossier dans lequel vous avez placé l'ensemble des fichiers sources
3. Cochez la case d'actualisation automatique des fichiers distants

Pour les infos du serveur d'évaluation

1. Optez pour un modèle de serveur PHP/MySQL
2. Choisissez un accès Local/Réseau
3. Pointez également vers le dossier dans lequel vous avez placé l'ensemble des fichiers sources
4. Cochez la case d'actualisation automatique
5. Saisissez le préfixe d'URL, qui devrait ressembler à http://localhost/Article, puisque l'alias d'Apache se nomme Article et se trouve au premier niveau.

Une fois le site administré, il ne reste plus qu'à préparer les 4 fichiers de base qui vont nous être utiles au cour de cette partie du tutorial. Depuis la palette fichier Fenêtre > Fichiers, sélectionnez Affichage local. Puis faites un click droit (ctrl clik pour Mac) sur le dossier recine et choisissez Nouveau fichier dans le menu local. Répétez quatre fois cette manipulation et nommez respectivement les fichiers ainsi crées :

• index.php
• lecture.php
• saisie.php
• details.php

Création d'un modèle de page de base

Positionnez les divers visuels

Chacun des fichiers devant faire appel à un certains nombre d'éléments communs, il est préférable d'utiliser la possibilités de modèles qu'offre Dreamweaver^TM. Créez un nouveau document, Fichier > Nouveau, puis dans la boite dialogue, choisissez l'onglet Général et sélectionnez la catégorie Page modèle et comme page modèle Modèle PHP. Assurez vous de rendre la page conforme à la norme xHTML et validez. Enregistrez votre nouveau modèle comme PageBase. Attention, Dreamweaver^TM va créer un dossier Templates, au premier niveau de votre site, pour y placer ce document. Ce dossier ne doit pas être déplacé ni renommé.

Afin de placer et positionner correctement les éléments crées dans Fireworks^TM ajoutez un tableau de 1 colonne sur 3 rangées. Menu Insertion > Tableau. Entrez les valeurs suivantes dans la boite dialogue :

1. Lignes 3, Colonnes 1
2. Largeur du tableau 752 pixels
3. Largeur de la bordure 0 pixel
4. Marge intérieure des cellules 0
5. Espacement entre les cellules 0

Une fois le tableau sur la page, placez le curseur dans la première cellule et insérez y la barre de menu et le bandeau haut crées dans Fireworks^TM. Insertion > Image Objets > HTML Fireworks. Depuis la boite de dialogue qui s'ouvre pointez vers le fichier bandoH.htm, du dossier menu, qui fait partie des éléments fournis. L'ensemble des éléments composants le menu et la partie graphique du bandeau se positionnent dans la première cellule. Répétez cette opération avec la troisième cellule, celle du bas, mais cette fois ci en pointant vers le fichier bandoB.htm du dossier piedPage toujours parmi les éléments fournis. Les divers éléments graphiques se positionnent. Si l'importation a réglé automatiquement la hauteur des deux rangées, il serait de bon ton d'entrer celle pour la rangée centrale sur 100%. Placez le curseur dans la cellule centrale, sélectionnez la balise <tr> depuis l'inspecteur de balise de la fenêtre document, et entrez 100% dans la case hauteur de l'inspecteur des propriétés.

Vous pouvez déjà prévisualiser dans un navigateur le rendu de votre page et vérifier ainsi le bon fonctionnement des divers éléments interactifs. C'est à dire les survols des boutons de la barre de menu, et les liens des divers icônes du visuel du pied de page.

Pour ceux d'entre vous qui ne sont pas familier avec la génération d'éléments interactifs, tels que des zones réactives ou des barres de menus, depuis Fireworks^TM, il est conseillé de suivre le tutorial sur la création d'une barre de menu, ou sur la création de zones interactives.

Connectez la page à la base de données

Comme pour tout les blogs, chacune de nos pages devra posséder un sommaire général permettant de naviguer parmi les divers thèmes proposés par les articles. Il faut donc pouvoir remonter les sujets de la table adéquates, blog_sujet, pour ensuite les afficher dans un tableau dynamiques (au cours des étapes suivantes). Dans un premier temps le site doit pouvoir se connecter à la base de données base_blog. Cette étape peut être réalisé une seule fois pour l'ensemble du site. Dreamweaver^TM mémorise cette opération pour l'ensemble du site. La fenêtre Application > Base de données permet de créer une telle connexion.

Animation d'explication de la connexion à la base de données

Les divers paramètres à saisir dans la boite de dialogue qui s'ouvre sont les suivants :

1. Nom de connexion : entrez le nom qui vous servira de référent tout au long de votre développement, par exemple base_blog_conn
2. Serveur MySQL : ici comme nous sommes en local, localhost fera l'affaire, sinon vous entreriez l'adresse du serveur ou se trouve la base
3. Par défaut le nom d'utilisateur est root, à moins que vous ne l'ayez changé dans le fichier de configuration.
4. Par défaut il n'y a pas de mot de passe, à moins que vous ne l'ayez changé dans le fichier de configuration.
5. sélectionner depuis le bouton menu, la base de données base_blog

Validez deux fois les boites de dialogue d'avertissement. Voilà la connexion est réalisée. Toujours depuis l'onglet Bases de données, vous pouvez accéder au contenu de votre base. De manière générale, le petit '+' à gauche de votre connexion vous permet d'accéder aux diverses tables, affichages et procédures stockées. Dans notre cas vous pouvez consultez la composation de la base, et donc vérifiez la bonne intégrité des trois tables et des champs qu'elles contiennent.

Créez le jeu d'enregistrement des sujets d'articles

Créeons donc un jeu d'enregistrement qui remontera de la base les sujets triés par ordre alphétique. Toujours depuis la fenêtre Applications intéressons nous à l'onglet Application > Liaisons. Si les conditions 1, 2 et 3 sont bien remplis (site, document PHP et serveur d'évaluation renseigné), il est possible depuis le bouton + de créer un nouveu jeu d'enregistrement. Si la boite de dialogue qui s'ouvre est en mode avancé, passez en mode simple.

Les divers paramètres à saisir dans la boite de dialogue sont les suivants :

1. Choisissez un nom explicite et évocateur comme sommaire_sujet
2. Depuis le menu déroulant sélectionnez la connexion établie précédement base_blog_conn
3. Sélectionnez la table des sujets, soit blog_sujet
4. Remontez l'ensemble des datas
5. Aucun filtre n'est nécessaire
6. Demandez un tri croissant sur le champ ch_suj_titre

Vous pouvez tester vos paramètre et vérifier que les datas retournés correspondent bien à votre attente et sont bien formatés comme souhaité. U ne fois la boite de dialogue validée, la fenêtre liaison vous permet de visualiser les divers champs et leur format.

Insertion d'une table dynamique qui fera office de menu sommaire

Nous allons prévoir un emplacement pour ce menu dans notre tableau précédent. Sur la cellule centrale nous allons créer deux zones, une à gauche pour le menu et une à droite pour le contenu d'affichage. Au lieu de scinder la cellule en deux colonnes, qui risque de rendre notre tableau instable, inserrons directement un nouveau tableau dans cette cellule. Placez donc le curseur dans la cellule du milieu et ajoutez un autre tableau de une rangée sur deux colonnes. Les divers paramètres à saisir dans la boite de dialogue sont les suivants :

1. Lignes 1, Colonnes 2
2. Largeur du tableau 100 %
3. Largeur de la bordure 0 pixel
4. Marge intérieure des cellules 0
5. Espacement entre les cellules 0

Notre jeu d'enregistrement paramétré, il nous faut maintenant afficher les datas qu'il contient afin de créer le menu des sujets. La meilleure façon reste de encore une fois passer par l'intermédiaire d'un tableau. Un tableau de une colonne sur deux rangées, une pour le titre du menu et une qui sera couplée à un comportement serveur afin de la dupliquer pour autant de sujets que nécessaire. Placez le curseur dans la cellule de gauche du tableau précédent et insérer un nouveau tableau. Les divers paramètres à saisir dans la boite de dialogue sont les suivants :

1. Lignes 2, Colonnes 1
2. Largeur du tableau 100 %
3. Largeur de la bordure 0 pixel
4. Marge intérieure des cellules 0
5. Espacement entre les cellules 0

Tapez le mot Sommaire dans la première celule et glissez déposez depuis la fenêtre Liaisons l'enregistrement ch_suj_titre dans la seconde. Sélectionnez ensuite la balise <tr> de cette cellule. Ouvrez l'onglet Comportements de serveur de la fenêtre Application et appliquez le comportement Région répétée. Dans la boite de dialogue qui s'ouvre, sélectionnez le jeu d'enregistrement sommaire_sujet, optez pour Aficher tous les enregistrements puis validez.

Animation d'explication sur la mise en place du menu sommaire

Vous pouvez tester la page, si vous n'obtenez pas le menu Sommaire avec l'ensemble des sujets dans la partie de gauche, recommencez les étapes précédentes jusqu'à obtenir le resultat escompté.

Ajout de la région modifiable

N'oublions pas que pour l'instant nous travaillons toujours sur une page modèle de base pour notre site. Il va donc falloir que nous pensions à définir des régions modifiables afin de pouvoir apporter des modifications à nos futures pages. Sélectionnez la cellule à la droite du menu, et inserez une région modifiable depuis le menu Insertion > Objets de modèle > Région modifiable. Donnez un nom spécifique à la boite de dialogue qui s'ouvre, par exemple contenu_page, puis validez.

Si les préférences d'assistances visuelle sont activés (Affichage > Assistances visuelles > éléments invisibles), Dreamweaver^TM délimitera cette région par un cadre bleu et apposera le nom de la zone à ce cadre. Vous pouvez enregistrer et fermer le modèle. Vous pouvez également appronfondir les différentes notions de modèles Dreamweaver^TM depuis le tutorial suivant.