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. Instantanement votre page devient un clône de ce modèle et tout 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 modification.
Nous allons demander à la page d'acceuil, la page index.php, de nous afficher les 6 derniers articles parus, tout 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 nouveau 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 :
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 un 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.
Pour ceux d'entre vous qui ne sont pas habitué à 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 passez en mode avancé.
Vous apercevez alors la requête SQL que DreamweaverTM a générer afin de remonter les enregistrements classés par date décroissante, même sans une grande connaissance en SQL cela reste compreé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.
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 :
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'enregistrement ch_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 ensuite Fenê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 :
Vous pouvez tester et vérifier le bon fonctionnement de cette page index.php, si vous n'obtenez pas l'affichage des six derneirs articles postés dans la base, recommencez les étapes précédentes jusqu'à obtenir le resultat escompté.
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..
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és à 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évu, en voici les identifcations et leur zone d'application :
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é enrgistrés. 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 :
Association loi 1901 - APE : 913E - SIRET : 418 667 028 00017
hameau du chêne vert - 1 impasse de la pie - 13490 Jouques France
infos**[AT]**puce-et-media.com - Tel : (33) 4 42 67 61 73 - (33) 9 70 63 65 74
Copyright © 1998-2007 Puce et Média. Tout droits réservés .