Réalisation d'un Blog avec Dreamweaver^TM (partie III - Tri)

Introduction Initialisation Mise en forme Tri Administration

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 que 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 palette Liaisons, 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 un chaine de caractère "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 Dreamweaver^TM vient 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 afin 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'enregistrement liste_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é é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 Dreamweaver^TM a modifié la chaine 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étails des articles invoqués, recommencez les étapes précédentes jusqu'à obtenir le resultat escompté.

Affichage par thèmes en utilisant le sommaire

Pour l'instant nous avons bien un superbe sommaire de thème sur le coté 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 jeux 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.

Commencons 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 tapez ch_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 Dreamweaver^TM 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 celle ci et enregistrez là sous lecture.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 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 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 tout 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ée afin de recoller la jointure. Vous pouvez voir au passage que Dreamweaver^TM a modifié la chaine 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 resultat escompté.

Création d'une page pour ajouter des articles

Notre blog commence à prendre allure, il nous reste à lui doner 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. Dreamweaver^TM propose dans ses Objets d'applications, un composant tout prêt qui intégre directement l'ensemble de ces fonctionalités.

Faisons la liste des éléments du formulaire qui alimentera la table blog_article. Le champs ch_art_id, sera automatiquement incrémenté, le champs 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 siaise. 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érer, le mieux et 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 Dreamweaver^TM présente et type les champs en fonction des paramètres de la base de données, donc pas de réglages de ce coté 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 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 brievement 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 champs ch_art_tire entrez comme Larg. de caractères la valeur 60
2. Pour le champs 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 champs ch_art_contenu entrez comme Larg. de caractères la valeur 60 comme Nbre de lignes la valeur 10 et comme Type l'option Multilignes
4. Pour le champs 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 resultat 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 Dreamweaver^MX. Deux possibilités soit en faisant un allé retour entre Dreamweaver^TM et Fireworks^TM, en utilisant la technlogie RoundTrip HTML de Macromedia^TM, ou bien en sélectionant simplement les boutons un à un et en plaçant des liens depuis Dreamweaver^TM. Nous passerons pour cette étape, par la seconde solution. Pour ceux d'entre vous qui ne sont pas familier, ou ne connaisse pas la technlogie RoundTrip HTML de Macromedia^TM, il est conseillé de suivre le tutorial sur le RoundTrip HTML entre Dreamweaver^TM et Fireworks^TM.

Ouvrez le fichier de modèle, 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épetez 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 resultat 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 fonctionalités de ce blog en lui ajoutant les bases d'un système d'administration. Ce système permettra d'identifier les utilisateurs comme lecteur libre ne pouvant accéder qu'à certains articles, lecteur privilégié pouvant accéder à tout 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.