Creating the Blog Home Page

Creating the Blog Home Page

First, you'll edit the index.php file. Open it and apply the blgtemplate to it by selecting Modify > Templates > Apply Template to Page. Select the template from the list and select the "Update page when template changes" option.

In the title field of the Document bar, enter Blog: Home as the title of the page.

Since this is the home page of the site, it displays the list of the most recent articles. For this, you need to define a recordset, and then display data from that recordset in a dynamic table inserted in the editable region.

Creating an Advanced Recordset

This time, you create an advanced recordset because you need to display both the articles and the associated topics.

1. Click inside the mai 15215s1811p n editable region.
2. In the Bindings tab of the Application panel group, click the Plus (+) button and select Recordset (Query).

Enter the following information in the Recordset dialog box:

• Name: rsArticles
• Connection: connBlog
• Table: blg_article_art
• Columns: All
• Sort: date_art, Descending
3. Click Advanced.

Edit the SQL query to create an inner join between the topics and articles tables on the corresponding foreign key. Copy or write the following code immediately after blg_article_art:

INNER JOIN blg_topic_top ON idtop_art=id_top

6. The advanced Recordset dialog box appears like Figure 15. Click OK.

Figure 15. The advanced Recordset dialog box showing the rsArticles recordset

(+) View larger

Note: The join operation matches records in two tables. Match the idtop_art foreign key from the blg_article_art table with the primary key id_top from the blg_topic_top table.

The advanced recordset contains the fields of both tables, as shown in Figure 16.

Figure 16. The Bindings tab showing the rsArticles recordset

Next, you need to display the data from the advanced recordset in your page.

1. Click inside the mai 15215s1811p n editable region.
2. Select the Application tab from the Insert bar.
3. Select Dynamic Table from the Dynamic Data button bar.
4. Enter the following information in the Dynamic Table dialog box:
• Recordset: rsArticles
• Show: 10 records at a time
• Border: 0
• Cell padding: 0
• Cell spacing: 0
5. Click OK. Dreamweaver generates a table with all the columns from the recordset.

You must remove the unnecessary columns and trim the table to a readable format.

1. Select the following columns from the table and delete them: id_art idtop_art text_art, id_top description_top. Select table columns by clicking inside the table, clicking the down arrow above each column in the table, and selecting select column from the pop-up menu. Then press your delete key. If you do not see the down arrow, ensure that you have the table widths visual aid enabled (View > Visual Aids > Table Widths).
2. Select the dynamic table by clicking the corresponding <table> tag from the tag selector. Set the table width to 100% in the Property inspector.
3. Delete the first table row.
4. Select the remaining row, right-click it and select Table > Insert Row from the pop-up menu.
5. In the first table row, select the first two cells and merge them.
6. Drag the title_top and title_art dynamic texts into the merged cell and separate them with a > character.
7. In the first table row, select the last two cells and merge them. Type Published: in the merged cell and drag the date_art dynamic text after it.
8. Select the second row and merge its cells.
9. Insert a horizontal rule to separate the articles (Insert > HTML > Horizontal Rule).

Note: All the recordset data must be inside a repeat region. This guarantees that all the records from a recordset display iteratively.

Figure 17 shows how the final table should look in Design view.

Figure 17. The final table in Design view

(+) View larger

Finally, you need to link the topic names to the corresponding article lists and the article names to the article detail page. Select the dynamic text labeled and create a link to the topic.php file. The link must pass the URL named id_top, which takes as value the field value idtop_art from the rsArticles recordset. Review the steps on the previous page if you are unsure how to set URL parameters.

Similarly, link the dynamic text to the article.php page, and pass it the URL parameter id_art, which takes the value of the field id_art.

Figure 18 shows how the index.php page looks when you preview it in the browser window.

Tip: To quickly preview a page from Dreamweaver in your default Internet browser, press F12.

Figure 18. The index.php page previewed in a browser

(+) View larger