crée-ton-bog


Réalisation d'un Blog avec Dreamweaver

EnvoyerImprimerPDF
Dream_Blog_teaser
WebLog ou Blog, tout le monde en parle, mais qu'est ce que c'est au juste ?
Vous trouverez quelques informations sur les sites de Wikipedia. Il existe sur le marché une multitude d'outils spécialisés dans la création et la gestion de blogs.
Ces outils sont très simples d'utilisation, il s'agit en général d'une sorte d'application intégrée qui prend tout en charge, de la gestion de la base de données au système d'administration, en passant par les archives et le moteur de recherche.
Les deux incontournables outils WordPress et DotClear restent quand même les plus populaires. Vous trouverez un comparatif des deux applications, mais ce ne sont pas les seuls. Il existe égament des outils plus complets comme Joomla ou Drupal, et d'autres dont vous trouverez une liste assez complète sur le site de Northern Lights.
Bien que de tels outils existent, il est souvent intéressant de pouvoir réaliser son propre blog de A à Z surtout si l'on possède la suite MX de Macromedia TM.

Introduction

Les principales étapes de ce tutorial se décomposent en trois parties :

Initialisation et paramétrages
  • Prérecquis et fichiers nécessaires
    • Administration du serveur Apache
    • Administration de la base de données
  • Gestion de site Dreamweaver
    • Pour les infos locales
    • Pour les infos distantes
    • Pour les infos du serveur d'évaluation
  • Création d'un modèle de page de base
    • Positionnez les divers visuels
    • Connectez la page à la base de données
    • Créez le jeu d'enregistrement des sujets d'articles
    • Insertion d'une table dynamique qui fera office de menu sommaire
    • Ajout de la région modifiable
Formatage, requête SQL et styles CSS
  • Création de la page d'ouverture index.php
    • Préparation de la page index.php
    • Mise en place d'un jeu d'enregistrement des articles
    • Modification 'avancées' de la chaîne SQL
    • Apposition des enregistrements par glissé déposé
  • Mise en place d'une feuille de style CSS
Tri et affichage dynamique
  • Mettre en place la lecture détaillée d'un article particulier
  • Affichage des articles par thèmes en utilisant le sommaire
  • Création d'une page de saisie pour ajouter des articles
  • Ajouter des liens à la barre de menu
Conclusion
La première partie de ce tutorial a servit de support pour une journée portes ouvertes au centre de formation Next Formation à laquelle était également présent Florent Pajani de Macromedia France. Les articles utilisés sont des extraits originaux extraits du site de01net. En ce qui concerne les articles, les noms d'auteur, les dates de création et les contenus sont originaux. L'ensemble de ce contenu ne peut être utilisé qu'au fin de ce tutorial, et les droits d'auteurs et d'exploitation sont propriété du groupe tests.

Initialisation et paramétrages

Prérecquis et fichiers nécessaires

Pour mener à bien ce tutorial, il vous faut
  1. Télécharger l'ensemble des fichiers sources nécessaires
  2. Un environnement de travail Apache/PHP/MySQL
  3. DreamweaverTM installé sous Mac ou PC
  4. Installer la base de données fournie avec les fichiers sources
Administration du serveur Apache
Pour ceux d'entre vous qui n'ont pas l'habitude de travailler sur des sites dynamiques de type PHP il est conseillé de suivre le déroulé d'administration de cet environnement, au travers de cet autre tutorial sur les bases de AMP (Apache, MySQL, PHP). Sinon, créez un alias Article pour le serveur Apache pointant vers le dossier des fichiers sources.
Administration de la base de données
Il vous faut également créer et administrer une base de données MySQL, depuis PHP MyAdmin, grâce au fichier source fourni. Nommez cette base BlogJPO. Encore une fois, pour ceux d'entre vous qui ne sont pas familier avec MySQL il est conseillé de suivre le déroulé d'administration et de gestion de ces types de bases de données, au travers de cet autre tutorial sur les bases de MySQL.
Un rapide coup d'oeil sur la constitution de la base de données. Elle est composée de trois tables, une pour les sujet blog_sujet, une pour les articles blog_article et une pour l'administration blog_admin. Les trois tableaux ci dessous décrivent les champs de chaque table, le typage de leurs données ainsi que la fonction de chacun.
Table blog_sujet
ChampTypeFonction
Icône de cléch_suj_idint(11)Clé primaire
ch_suj_titrevarchar(100)Titre du sujet
ch_suj_descriptionvarchar(255)Description du sujet
Table blog_article
ChampTypeFonction
icône de cléch_art_idint(11)Clé primaire
ch_art_idSujetint(11)Relation avec la table blog_sujet
ch_art_titrevarchar(100)Titre de l'article
ch_art_descriptionvarchar(255)Description de l'article
ch_art_contenulongtextContenu de l'article
ch_art_datedatetimeDate de création de l'article
ch_art_auteurvarchar(50)Auteur de l'article
Table blog_admin Fonction
ChampTypeFonction
icône de cléch_adm_idsmallint(6)Clé primaire
ch_adm_loginvarchar(10)Login du compte
ch_adm_pwdvarchar(10)Mot de passe du compte
ch_adm_mailvarchar(30)E-mail du compte
ch_adm_niveautinyint(4)Niveau d'administration du compte
Les préparatifs et installation de serveur et base de données sont terminés. Nous pouvons passer à la réalisation du blog.

Gestion de site avec DreamweaverTM

Comme pour chaque création de site, commencez par configurer la gestion de site depuis le menu Site > Gérer les Sites de DreamweaverTM, puis créez en un, nouveau > site. La fenêtre de gestion du site s'ouvre. Si celle ci se trouve en mode élémentairepassez en mode avancé.
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 cours 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 racine et choisissez Nouveau fichier dans le menu local. Répétez quatre fois cette manipulation et nommez respectivement les fichiers ainsi créés :
  • 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 les possibilités de modèles qu'offre DreamweaverTM. Créez un nouveau document, Fichier > Nouveau, puis dans la boite dialogue, choisissez l'ongletGé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, DreamweaverTM 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éés dans FireworksTM, 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
Ecran insertion tableau fireworks
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éés dans FireworksTM. Insertion > Image Objets > HTML Fireworks. Depuis la boite de dialogue qui s'ouvre pointez vers le fichier bandoH.htm, du dossiermenu, 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 FireworksTM, 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 tous 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équate, blog_sujet, pour ensuite les afficher dans un tableau dynamique (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ée une seule fois pour l'ensemble du site. DreamweaverTM 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.
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 exemplebase_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és. Dans notre cas, vous pouvez consulter la composition de la base, et donc vérifier la bonne intégrité des trois tables et des champs qu'elles contiennent.
Créez le jeu d'enregistrement des sujets d'articles
Créons donc un jeu d'enregistrement qui remontera de la base les sujets triés par ordre alphabétique. Toujours depuis la fenêtreApplications intéressons nous à l'onglet Application > Liaisons. Si les conditions 1, 2 et 3 sont bien remplies (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
Ecran du Jeu d'Enregistrement
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é. Une 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, encore une fois, de passer par l'intermédiaire d'un tableau.
Un tableau d'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'enregistrementsommaire_sujet, optez pour Aficher tous les enregistrements puis validez.
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 résultat 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 insérez 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.
Aperçu de la mise en place de la région modifiable
Si les préférences d'assistances visuelle sont activés (Affichage > Assistances visuelles > éléments invisibles), DreamweaverTM 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 DreamweaverTM depuis le tutorial suivant.

Formatage, requête SQL et styles CSS

Création de la page d'ouverture 'Index.php'

Préparation de la page index.php
Ouvrez la page index.php et la fenêtre Actifs, Fenêtre > Actifs. Sur la partie gauche de la fenêtre une série d'icônes présente les diverses ressources accessibles pour le site, depuis les images jusqu'à la bibliothèque. L'avant dernier icône représente les modèles. Sélectionnez le.
Votre modèle devrait apparaître dans la liste des fichiers et son visuel dans le petit cadre du haut. Cliquez glissez le sur votre page PHP afin d'appliquer ce modèle à la page. Instantanément votre page devient un clône de ce modèle et tous les éléments préparés dans l'étape précédente viennent se positionner à l'identique.
La seule différence c'est qu'aucun d'eux n'est modifiable, seule la région modifiable nous autorise des ajouts et/ou modifications.
Mise en place d'un jeu d'enregistrement des articles
Nous allons demander à la page d'accueil, la page index.php, de nous afficher les 6 derniers articles parus, tous sujets confondus. Il va nous falloir créér un jeu d'enregistrement, sur la table blog_article trié par Date décroissante, et ne demander que les six premiers enregistrements.
Rien de plus simple, depuis le bouton + de la palette des Liaisons utilisée précédement (Fenêtre > Liaisons), demandons un nouveaujeu d'enregistrement. Si la boite de dialogue s'ouvre en mode avancé, passez en mode simple.
Les divers paramètres à saisir dans la boite de dialogue sont les suivants :
  1. Nommez le liste_articles
  2. Utilisez la connexion base_blog_conn
  3. Récupérer la table blog_article
  4. Remontez toutes les colonnes
  5. N'appliquez aucun filtre
  6. Demandez un tri par ch_art_date ordre décroissant
L'idée est comme pour tout blog, de n'afficher que l'en tête de l'article, c'est à dire, le titre, le sujet, la date, l'auteur et une brève description. Ce que nous avons déjà dans notre base, mais sur deux tables différentes. En effet, dans la table blog_article nous avons l'ensemble des champs nécessaires, sauf le sujet, qui lui, est stocké sous forme d'un identifiant de la table blog_sujet.
En clair, la table blog_sujet contient bien le ch_suj_titre, mais la table blog_article ne contient qu'une référence vers cet enregistrement dans le champ ch_art_idSuj. Nous allons devoir créer une requête SQL avancée, afin de remonter pour chaque enregistrement les valeurs de deux tables à la fois.
Modification 'avancées' de la chaîne SQL
Pour ceux d'entre vous qui ne sont pas habitués à la syntaxe SQL, il est conseillé de suivre le déroulé sur les requètes SQL, au travers de cet autre tutorial sur les bases de SQL. Sinon, double cliquez sur le jeu d'enregistrement liste_articles depuis la palette Liaison,afin de réouvrir la boite de dialogue et passer en mode avancé.
Vous apercevez alors la requête SQL que DreamweaverTM a générée, afin de remonter les enregistrements classés par date décroissante, même sans une grande connaissance en SQL cela reste compréhensible :
SELECT *
FROM blog_article
ORDER BY ch_art_date ASC
Il va falloir ajouter à la main la jointure à la seconde table et préciser sur quel critère elle doit se baser. L'instruction INNER JOIN nous permettra de connecter les deux tables et l'instruction ON définira la condition de mise en relation de ces deux tables. Le code est relativement explicite pour se passer de commentaire.
SELECT *
FROM blog_article INNER JOIN blog_sujet ON ch_art_idSujet=ch_suj_id
ORDER BY ch_art_date DESC
Vous pouvez tester, et constater que lors de la remontée des enregistrements les valeurs de champs des deux tables est remonté systématiquement. Dorénavant, il n'est plus possible de repasser en mode simple.
Si vous souhaitez revenir en mode simple pour vérifier une écriture ou modifier un paramètre depuis la boite de dialogue, il faut simplement couper l'ajout à la requète SQL est appuyer sur le commuteur simple.
Apposition des enregistrements par glissé déposé
Il ne nous reste plus qu'à formater les données remontées sur notre page. Nous allons ajouter une fois encore un tableau afin d'en simplifier la mise en page. Un tableau de trois lignes sur une colonne fera largement affaire. Placez le curseur dans la cellule de la seule région modifiable de la page et insérez le tableau, Insertion > Tableau.
Les divers paramètres à saisir dans la boite de dialogue sont les suivants :
  1. Lignes 3, 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
Dans la première cellule, celle du haut, glissez déposez depuis la fenêtre des Liaisons l'enregistrement ch_suj_titre, puis saisissez le signe > et glissez l'enregistrement ch_art_titre. Dans la seconde cellule écrivez le mot par puis glissez l'enregistrementch_art_auteur. Ensuite, écrivez le mot le et glissez l'enregistrement ch_art_date. Et enfin, dans la troisième cellule glissez l'enregistrement ch_art_description.
Si vous visualisez dans un navigateur ou optez pour le mode Affichage > Affichage des données dynamiques, vous devez obtenir uniquement le premier enregistrement du jeu. Afin d'en obtenir six comme prévu, il faut utilisez un comportement de serveur.
Placez le curseur à l'intérieur du tableau, et depuis l'inspecteur de balise du document sélectionnez la balise <table>. Ouvrez ensuiteFenêtre > Comportements de serveur, et ajoutez depuis le bouton + le comportement Region répétée.
Les divers paramètres à saisir dans la boite de dialogue sont les suivants :
  1. Sélectionnez le jeu d'enregistrement liste_articles
  2. Optez pour 6 enregistrements
  3. Validez la boite de dialogue
Vous pouvez tester et vérifier le bon fonctionnement de cette page index.php, si vous n'obtenez pas l'affichage des six derniers articles postés dans la base, recommencez les étapes précédentes jusqu'à obtenir le résultat escompté.

Mise en place d'une feuille de style CSS

Afin de rendre la charte graphique plus homogène en rapport de l'interface, nous allons ajouter une feuille de style déjà prévue à cet effet, blog.css est fournis avec les fichiers sources. Pour ceux d'entre vous qui ne sont pas familier avec l'utilisation des CSS, il est conseillé de suivre le tutorial sur les bases de la création de feuilles de style CSS.
Sinon, nous allons voir une brève description des divers sélecteurs, certains sont une redéfinition des balises HTML, les autres sont des classes ou Id, que nous affecterons à certaines zones du documents..
  • body
  • a
  • a:visited
  • a:hover
  • #contenu
  • .sommaire
  • .titre_Sommaire
  • .corps_Sommaire
  • .sujet
  • .titre_Sujet
  • .infos-Sujet
  • .detail_Sujet
Du fait que chacune de nos pages devra référer à cette feuille de style, il est préférable de l'ajouter au modèle. Ouvrez donc le modèle de page, ainsi que la palette des styles Fenêtre > Style CSS. Depuis le menu contextuel de la palette, sélectionnez Attacher feuille de style.
Avec le bouton Parcourir, naviguez jusqu'à pointez sur la feuille de style blog.css et optez pour Ajouter sous en tant que lien. Validez la boite, et enregistrez le modèle. Une boite de dialogue devrait vous informer que certaines pages sont liées à ce modèle, et que de ce fait, vous pouvez les mettre à jour avec les modifications que vous venez d'apporter. Validez, et attendez. DreamweaverTM va parcourir l'ensemble des pages liées et les mettre à jour.
Avant de refermer le modèle, il nous reste à placer des styles sur la partie du sommaire. Trois styles sont prévus, en voici les identifications et leur zone d'application :
  • .sommaire, s'applique à la balise <table> qui contient le sommaire
  • .titre_Sommaire, s'applique à la balise <tr> qui contient le mot Sommaire
  • .corps_Sommaire, s'applique à la balise <tr> qui contient l'enregistrement ch_suj_titre
Pour appliquer les styles rien de plus simple, sélectionnez la balise concernée grâce à l'inspecteur des balises du document, puis depuis le menu Style de la palette des propriétés (Fenêtre > Propriétés), sélectionnez le style adéquat (spécifié dans la liste ci-dessus). Appliquez donc les trois styles, puis enregistrez votre modèles, mettez à jour les pages liées, et fermez le modèle.
Attention, si votre document index.php est toujours ouvert, il a été mis à jour, mais les modifications n'ont pas été enregistrées. Donc enregistrez le également.
Il va nous falloir maintenant ajouter les styles à notre page index.php. Quatre styles sont prévus, en voici les identifcations et leur zone d'application :
  • .sujet, s'applique à la balise <table> qui contient l'article
  • .titre_Sujet, s'applique à la balise <tr> qui contient les enregistrements ch_suj_titre et ch_art_titre
  • .infos-Sujet, s'applique à la balise <tr> qui contient les enregistrements ch_art_auteur et ch_art_date
  • .detail_Sujet, s'applique à la balise <tr> qui contient l'enregistrement ch_art_description

Tri et affichage dynamique

Mettre en place la lecture détaillée d'un article

Il faut maintenant mettre en place une page de lecture détaillée afin de pouvoir consulter le contenu de chaque article, details.php. Cette page ressemble à la page index.php si ce n'est qu'elle n'affiche qu'un seul enregistrement et qu'au lieu de présenter l'enregistrement ch_art_description, elle devra présenter ch_art_contenu.
Une autre différence viendra du fait que le jeu d'enregistrement devra présenter l'article sur lequel l'internaute aura cliqué, ce filtrage pourra se faire par l'enregistrement de la clé primaire ch_art_id.
Dans un premier temps, dupliquez la page index.php en l'enregistrant sous details.php. Validez la boite de dialogue qui informe que ce fichier existe déjà. Commencez par supprimer le comportement de serveur Région répétée, sélectionnez le dans la paletteLiaisons, puis appuyez sur le bouton -.
Ensuite modifiez l'enregistrement ch_art_description, par l'enregistrement ch_art_contenu. Vous pouvez enregistrer le document. Nous verrons le filtrage du jeu d'enregistrement après avoir créer le lien dans la page index.php.
Afin de pouvoir filtrer l'article sélectionné dans la page index.php, il faut passer avec l'URL qui invoque la page details.php le paramètre ch_art_id de l'article. Ouvrez le fichier index.php et sélectionnez l'enregistrement ch_art_titre.
Depuis l'inspecteur des propriétés, cliquez alors sur le petit icône de dossier à droite du champ Lien. Dans la boite de dialogue qui s'ouvre, commencez par pointez sur le fichier details.php, puis cliquez sur le bouton Paramètres. Il faut saisir un paramètre sous la forme un_nom=une_valeur, ou un_nom sera l'identifiant et une_valeur contiendra la valeur à transmettre.
Comme nous souhaitons passer la valeur de l'enregistrement ch_art_id, nous pouvons nommer notre paramètre ch_art_id. La différence entre les deux viendra du fait que l'un sera une chaîne de caractères "ch_art_id", et l'autre sera la valeur de l'enregistrement correspondant à ch_art_id. Tapez ch_art_id dans la partie gauche de la fenêtre (nom) et ensuite pressez sur le petit éclair jaune de la partie droite (valeur).
Sélectionnez alors dans la fenêtre qui s'ouvre l'enregistrement ch_art_id. Si vous regardez de plus près le code que DreamweaverTMvient de générer, il s'agit bient d'un passage de paramètre après une URL, du type lelien.php?un_nom=une_valeur.
details.php?ch_art_id=<?php echo $row_liste_articles['ch_art_id']; ?>
Maintenant, il nous faut retourner à la page details.php et modifier la requète SQL du jeu d'enregistrement, pour que celui-ci ne remonte que l'article souhaitée. Ouvrez la page details.php, et depuis la fenêtre Liaison, double cliquez sur le jeu d'enregistrementliste_articles.
Du fait de la requète SQL complexe, il va nous falloir la couper pour revenir en mode simple. Rappelons que la partie que nous avions ajoutée était la jointure des deux tables blog_articles et blog_sujet. Coupez donc cette partie :
INNER JOIN blog_sujet ON ch_art_idSujet=ch_suj_id
...et passez en mode simple. Il faut modifier le filtre et le tri. Commencez par le plus rapide, supprimer le tri, en sélectionnant aucun. Pour le filtre, il faut indiquer que les deux ch_art_id, celui d'un paramètre et celui du jeu d'enregistrement doivent correspondre. Les divers paramètres à indiquer au filtre sont les suivants :
  1. dans le premier champ sélectionnez ch_art_id
  2. dans le second champ sélectionnez =
  3. dans le troisième sélectionnez paramètres d'URL
  4. dans le dernier tapez ch_art_id
Vous pouvez rebasculez en mode avancé afin de recoller la jointure. Vous pouvez voir au passage que DreamweaverTM a modifié la chaîne SQL. Le code final devrait ressembler à ceci :
SELECT *
FROM blog_article INNER JOIN blog_sujet ON ch_art_idSujet=ch_suj_id
WHERE ch_art_id = colname
Testez la page en lançant la page index.php dans un navigateur et en invoquant un article. Servez vous du bouton Arrière du navigateur pour recommencer l'opération avec un article différent. Si vous n'obtenez pas l'affichage du détail des articles invoqués, recommencez les étapes précédentes jusqu'à obtenir le résultat escompté.

Affichage par thèmes en utilisant le sommaire

Pour l'instant, nous avons bien un superbe sommaire de thèmes sur le côté gauche de nos pages, mais celui-ci est complètement affonctionnel. Il va nous falloir intervenir comme précédemment sur l'appel et le filtrage de notre jeu d'enregistrement.
Deux étapes, d'abord créer la page de lecture.php qui aura pour tâche d'afficher les descriptions des divers articles d'un thème donné, et l'ajout de l'appel URL sur les liens du sommaire de notre page modèle.
Commençons par ajouter les URL avec paramètres au menu Sommaire. Ouvrez le modèle de page et sélectionnez l'élément du menu, c'est à dire l'enregistrement ch_art_sujet. Puis comme pour la page précédente depuis l'inspecteur des propriétés, cliquez alors sur le petit icône de dossier à droite du champ Lien.
Dans la boite de dialogue qui s'ouvre, commencez par pointez sur le fichier lecture.php, puis cliquez sur le bouton Paramètres. Il faut ici aussi, saisir un paramètre sous la forme un_nom=une_valeur. Cette fois-ci nous devons passer la valeur ch_suj_id, donc tapezch_suj_id comme nom dans la partie gauche, et appuyez sur l'éclair jaune de la partie droite pour sélectionner ch_suj_id comme valeur d'enregistrement.
Le code généré par DreamweaverTM doit ressembler à ceci :
lecture.php?ch_suj_id=<?php echo $row_sommaire_sujet['ch_suj_id']; ?>
Passons à la page lecture.php. Du fait de sa similitude avec la page index.php, ouvrez cette dernière et enregistrez là souslecture.php. Validez la boite de dialogue qui informe que ce fichier existe déjà. Il faut modifier le paramètre du jeu d'enregistrement.
Depuis la palette Liaison, double cliquez sur le jeu d'enregistrement liste_articles. Comme précédemment, il va nous falloir couper la requète SQL pour pouvoir revenir en mode simple. Rappelons que la partie que nous avions ajouté était la jointure des deux tablesblog_articles et blog_sujet. Coupez donc cette partie :
INNER JOIN blog_sujet ON ch_art_idSujet=ch_suj_id
...et passez en mode simple. Il faut modifier le filtre pour vérifier la concordance entre le paramètre d'URL ch_suj_id et la valeur du jeu d'enregistrement ch_art_idSujet. Autrement dit, il est demandé au jeu d'enregistrement de remonter tous les articles qui ont comme référence d'enregistrement (ch_art_idSujet), la valeur de référence d'un sujet donné (ch_suj_id).
Les divers paramètres à indiquer au filtre sont les suivants :
  1. dans le premier champ sélectionnez ch_art_idSujet
  2. dans le second champ sélectionnez =
  3. dans le troisième sélectionnez paramètres d'URL
  4. dans le dernier tapez ch_suj_id
Vous pouvez rebasculez en mode avancé afin de recoller la jointure. Vous pouvez voir au passage que DreamweaverTM a modifié la chaîne SQL . Le code final devrait ressembler à ceci :
SELECT *
FROM blog_article INNER JOIN blog_sujet ON ch_art_idSujet=ch_suj_id
WHERE ch_art_idSujet = colname
ORDER BY ch_art_date DESC
Testez la page en lançant la page index.php dans un navigateur et en invoquant un sujet. Recommencer l'opération avec un sujet différent. Si vous n'obtenez pas l'affichage des articles regroupés par le sujet demandé, recommencez les étapes précédentes jusqu'à obtenir le résultat escompté.

Création d'une page pour ajouter des articles

Notre blog commence à prendre allure, il nous reste à lui donner vie, en permettant à des internautes de l'alimenter en articles. Ouvrez la page saisie.php, et depuis l'onglet Modèles de la palette des Actifs, glissez déposez le modèle sur la page. Enregistrez là.
Afin d'alimenter la base de données, il faut créer un formulaire, lui ajouter un comportement de serveur d'insertion d'enregistrement, et placer le tout dans un tableau pour rapidement mettre en forme. DreamweaverTM propose dans ses Objets d'applications, un composant tout prêt qui intègre directement l'ensemble de ces fonctionnalités.
Faisons la liste des éléments du formulaire qui alimentera la table blog_article. Le champ ch_art_id, sera automatiquement incrémenté, le champ ch_art_idSujet devra faire appel à un menu déroulant dans lequel l'auteur de l'article devra simplement venir piocher, le champ ch_art_date devrait pouvoir être transparent et s'auto-remplir en fonction de la date de saisie.
Les autres champs, ch_art_titre, ch_art_description, ch_art_contenu et ch_art_auteur, sont simplement des champs de saisie soit multiligne soit simple ligne.
Commencez par créer le jeu d'enregistrement qui viendra alimenter le menu déroulant pour la valeur du sujet d'article. Depuis la palette des Liaisons (Fenêtre > Liaisons), ajoutez un jeu d'enregistrement. Si la boite de dialogue s'ouvre en mode avancé passez en mode simple.
Les divers paramètres à saisir dans la boite de dialogue sont les suivants :
  1. Nommez le liste_sujets
  2. Utilisez la connexion base_blog_conn
  3. Récupérer la table blog_sujet
  4. Remontez toutes les colonnes
  5. N'appliquez aucun filtre
  6. Demandez un tri par ch_art_titre ordre croissant
Passez maintenant à la mise en place du formulaire de saisie. Placez le curseur dans la région modifiable de la page, et activez le menu Insertion > Objets d'application > Insertion d'un enregistrement > Assistant d'insertion d'enregistrement. Dans la boite de dialogue qui s'ouvre entrez les paramètres suivants :
  1. Choisissez l'objet de connexion, base_blog_conn
  2. Indiquez la table à affecter, blog_article
  3. Pointez vers la page à afficher une fois l'enregistrement inséré, le mieux est d'afficher index.php qui présente les six derniers enregistrements.
  4. La partie basse présente les divers champs de la table (voir détails ci dessous)
Les boutons + et - permettent d'ajouter ou supprimer des champs, et les flèches haut et bas de positionner les champs différemment dans le formulaire. Par défaut DreamweaverTM présente et type les champs en fonction des paramètres de la base de données, donc pas de réglages de ce côté là. Le champ étiquette permet de définir le libéllé présenté à l'internaute. Le champ d'affichage propose l'aspect du champ d'insertion, envoyer en tant que tel permet de typer les datas envoyés à la base et valeur par défaut parle d'elle même.
Voici les opérations à mener pour chacun des champs de la table blog_article :
  1. Supprimez le champ ch_art_id qui va être auto incrémenté par la base
  2. Positionnez le champ ch_art_idSujet sur un affichage en menu, et descendez le au dessous du champ ch_art_titre.Définissez son étiquette comme Sélectionnez un sujet pour votre article . Appuyez sur le bouton Propriétés du menu, puis choisissez ensuite Depuis la base de données. Une nouvelle boite de dialogue apparait, dans laquelle vous devez indiquez :
    1. Sélectionnez le jeu d'enregistrement liste_sujets.
    2. Dans le menu Obtenir les étiquettes de sélectionnez ch_sujt_titre
    3. Dans le menu Obtenir les valeurs de sélectionnez ch_sujt_id
    4. Validez cette boite de dialogue
  3. Définissez l'étiquette du champ ch_art_titre comme Indiquez le titre de votre article
  4. Définissez l'étiquette du champ ch_art_description comme Décrivez brièvement le thème de votre article
  5. Définissez l'étiquette du champ ch_art_contenu comme Ecrivez votre article
  6. Définissez l'étiquette du champ ch_art_auteur comme Indiquez la signature de votre article
  7. Placez l'affichage du champ ch_art_date sur champ masqué et placez la ligne de code ci-dessous dans l'espace Valeur par défaut, afin d'automatiquement insérer la date du jour de saisie sans importuner l'internaute.
<?php echo date('Y-m-d'); ?>
Du fait de l'aspect par défaut de la génération du formulaire, apportez lui quelques petites modifications depuis l'interface de création. Sélectionnez tour à tour les champs suivants et indiquez les valeurs spécifiées depuis l'inspecteur des propriétés :
  1. Pour le champ ch_art_tire entrez comme Larg. de caractères la valeur 60
  2. Pour le champ ch_art_description entrez comme Larg. de caractères la valeur 60, comme Nbre de lignes la valeur 4 et comme Type l'option Multilignes
  3. Pour le champ ch_art_contenu entrez comme Larg. de caractères la valeur 60 comme Nbre de lignes la valeur 10 et commeType l'option Multilignes
  4. Pour le champ ch_art_auteur entrez comme Larg. de caractères la valeur 60
  5. Modifiez la valeur d'étiquette du bouton en entrant le texte Insérer ce nouvel article
Vous pouvez directement tester depuis un navigateur en saisissant un nouvel article. Si vous n'obtenez pas l'enregistrement de ce nouvel article dans la base, recommencez les étapes précédentes jusqu'à obtenir le résultat escompté.

Ajouter des liens à la barre de menu

Il ne reste plus qu'à corriger deux détails dans la barre de menu pour clore cette première partie sur la réalisation d'un blog avec DreamweaverMX. Deux possibilités : soit en faisant un allé retour entre DreamweaverTM et FireworksTM, en utilisant la technlogie RoundTrip HTML de MacromediaTM, soit en sélectionant simplement les boutons un à un et en plaçant des liens depuis DreamweaverTM.
Nous opterons pour la seconde solution. Pour ceux d'entre vous qui ne sont pas familiers, ou ne connaissent pas la technlogie RoundTrip HTML de MacromediaTM, il est conseillé de suivre le tutorial sur le RoundTrip HTML entre DreamweaverTM et FireworksTM.
Ouvrez le fichier de modèles, puis sélectionnez le bouton Accueil, et depuis l'inspecteur des prorpiétés cliquez glissez le pointeur de fichier du champ lien vers le fichier index.php de la palette des Fichiers. Répétez l'opération pour le bouton Saisie qui devra pointer vers le fichier saisie.php.
Pour le dernier bouton, le bouton Retour, il suffira de placer un code JavaScript comme lien, afin de demander au navigateur de reculer d'une page. Tapez le code suivant dans le champs Lien du bouton :
javascript:history.back();
Enregistrez le modèle et validez mise à jour des fichiers qui lui sont liés, Lancez le fichier index.php et testez dans un navigateur pour vérifiez le bon fonctionnement du blog. Si vous n'obtenez pas un bon fonctionnement de la barre de navigation, recommencez les étapes précédentes jusqu'à obtenir le résultat escompté.

Conclusion

Au travers de ces quelques étapes nous avons pu mettre en place les bases d'un blog, en saisissant et classant des articles par thèmes. Dans la seconde partie nous complèterons les fonctionnalités de ce blog en lui ajoutant les bases d'un système d'administration.
Ce système permettra d'identifier les utilisateurs comme lecteurs libres ne pouvant accéder qu'à certains articles, lecteurs privilégiés pouvant accéder à tous les articles, auteur pouvant saisir de nouveaux articles ou administrateur pouvant concéder les droits aux utilisateurs ou encore créer de nouveau thèmes d'articles

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Articles (Atom)