building a blog part1

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a... http://www.adobe.com/devnet/dreamweaver/articles/php_blog1_print.html

1 de 18 25/06/2006 12:35 a.m.

Dreamweaver Article

Building a Blog with Dreamweaver, PHP, and MySQL – Part 1: Creating the Basic Application

Marius Zaharia

InterAKT Online

Having access to the Internet does not actually imply being present on the Internet. In the information jungle that has clogged the Internet community, it is often too difficult to stayvisible and be able to communicate your thoughts and ideas safely and clearly. For a more intimate relationship with your friends and the online community, in general, you shoulduse a blog.

Short for weblog, a blog is a personal journal that is frequently updated and intended for public consumption. It is a convenient way to make your ideas and opinions known or topublish more formal articles on specific topics, and to develop commentaries around them. If I caught your attention, then this tutorial will help you set up a basic blog fromscratch, with absolutely no manual programming whatsoever.

This article is the first of a series of six tutorials that will guide you through building a complex blog using Macromedia Dreamweaver MX 2004 within the PHP MySQLdevelopment environment. You can build this blog on either a Windows/IIS, Mac/Apache, or Linux/Apache development platform.

Requirements

To complete this tutorial, install the following software and files:

Macromedia Dreamweaver MX 2004

TryBuy

Tutorials and sample files:

blog1_samples.zip (ZIP, 27K)

System Requirements:

Operating System: Macintosh OS X, Microsoft Windows, or LinuxWeb server: Apache version 1.3.x or later, or Microsoft IIS version 5.0 or higherPHP application server version 4.3.4 or later.MySQL database server version 3.23.54 or later.

Prerequisite knowledge:

Familiarity with the Dreamweaver workspace and interfaceBasic concepts of web application development

Setting Up the Application Server Environment

The first thing you'll must do is set up your application server environment and install Macromedia Dreamweaver MX 2004. The Macromedia PHP Topic Center features somegreat articles written by top experts, that can guide you through this process:

Setting up your PHP server environment using Linux, Apache, MySQL and PHP by David Sklar—if you use the LAMP platform.Setting up the PHP, MySQL, and Apache server platform on Macintosh OS X for Dreamweaver MX by Minh Huynh—if you're working on Mac.Setting up PHP for Microsoft IIS by Andrew Stopford—if you're a fan of Microsoft Internet Information Server. For information on installing and setting up MySQL onWindows, visit MySQL.com.

Planning Your Application

For the moment, I will quickly explain how to set up a blog with a basic feature package, using the point-and-click approach of Dreamweaver MX 2004. The blog you build in thefollowing pages lists all the articles which are dynamically extracted from the database. Visitors can read an article in a separate page or to browse through articles which aregrouped by topic. As the administrator of the blog, you can to add new topics and post new articles, which are automatically stored in the back-end database. For an increasedfunctionality and for a more convenient design management, the blog is based on a template that you can modify separately in the future.


2 de 18 25/06/2006 12:35 a.m.

Figure 1. The blog you will create

(+) View larger

Take a closer look at the application architecture. The application consists of:

Database that stores all the site information: blg_blog.sqlDreamweaver template that specifies the graphics and the layout of the site: blgtemplate.dwt.phpCSS (Cascaded Style Sheet) file that specifies the color scheme and the font-styles: blog.cssHome page of your blog, that displays a list with the latest entries: index.phpArticle list associated to a selected topic: topic.phpArticle detail page, where the full text of a selected article, including its short description, is available to readers: article.phpDynamic form for posting a new article: post.php

Besides these files, which you create yourself, Dreamweaver creates its own files, which are necessary for connecting to the database. Don't worry about these additional files, asthey are handled by Dreamweaver.

If you run into problems at any time while completing the article, you can compare your work to the final copy of the pages, which are included in the sample files download linkedat the beginning of the article.

Defining the Site in Dreamweaver

Before you begin building your blog, set up your site in Dreamweaver. The procedure is not complicated, as long as you pay attention to paths and URLs. Dreamweaver handles allthe dirty details. For a quick site setup, see How to define a site in Dreamweaver (TechNote 14028).

A minimal setup requires you to specify the following settings:

Local Info: Identifies the site files in Dreamweaver and enables the site management features.Remote Info: Defines the settings to access the remote web server where your site will be uploadedTesting Sever: Defines a private place to act like a public server to test the application and connections to the database.

Here is how I configured these sections for my site. Your settings will differ based on your operating system platform, site URL, access method (FTP or Local/Network), and soforth. Again, see How to define a site in Dreamweaver (TechNote 14028) if you have problem defining the site.

Local Info section:

Site name: blgLocal root folder: C:\Documents and Settings\mzaharia\My Documents\blg\Refresh local file list automatically: checkedDefault images folder: C:\Documents and Settings\mzaharia\My Documents\blg\img\. I have decided to place all the images for my site in a separate folder called img,located inside the local root folder.HTTP address: http://work.iakt.ro/test/mza/blg/Cache: enabled

Remote Info section:

Access: Local/NetworkRemote folder: Z:\test\mza\blg\Refresh remote file list automatically: checked (This option is only available if you set Access to Local/Network.)Automatically upload files to server on save: checked

Testing Server section:

Note: Because the remote server I used is quite reliable and my blog application does not involve heavy server requests, I decided to use it as a testing server as well. However, thisis not advisable when you use a shared hosting or when you plan for an extensive testing activity, which could eventually lead to server failure.

Server model: PHP_MySQLAccess: Local/NetworkTesting server folder: Z:\test\mza\blg\Refresh remote file list automatically: checked.URL prefix: http://work.iakt.ro/test/mza/blg/

Next, create the 4 pages of your blog application:

index.phparticle.phptopic.phppost.php

To create each of these files:

Make sure the blg site is open in the Files panel.1.Right-click the site name.2.Select New File from the pop-up menu.3.Enter the name of the file and press Enter.4.

Repeat these steps for all four of the files listed above.

Building the Database

Now that your site has been set up, take a closer look at the database architecture. Every dynamic website is driven by a database, which defines the structure and organization ofthe data you will manipulate. The database stores all site information and can be accessed by the application server through a query. The relevant information that a visitor needs isthen returned as a recordset, which represents the query results.

To create and manage your own MySQL database, you can use one of the many third-party tools, which take a visual approach to databases without requiring you to know SQL


3 de 18 25/06/2006 12:35 a.m.

programming. One such tool is phpMyAdmin, which you can download and install on the machine running the MySQL database or the local workstation. To deploy the SQL scriptsreferenced below using a command line, consult either the MySQL documentation on MySQL.com, or the articles listed in the setting up the environment section of this article.

But first, have a look at the application requirements. A typical blog is basically a list of articles. You can group articles by topic and each article has some associated commentswhich users post. Single out these concepts: articles, topics, comments, and users. You can guess that the database has four different tables, each storing one of the above datastructures. For the moment, I leave out the users and comments tables, as I will use them in a future tutorial, to discuss how you can create an administration section for your blog.

Have a look at the other two tables and the corresponding SQL code to generate them.

Topics: blg_topic_topid_top Primary key: the unique numeric identifier of each topictitle_top The title of the topic. This will be displayed in the browser.description_top A short description of the topic.

As you can see from the following SQL code block, the code is quite self-explanatory.

CREATE TABLE blg_topic_top ( id_top int(11) NOT NULL auto_increment, title_top varchar(100) NOT NULL default '', description_top varchar(255) NOT NULL default '', PRIMARY KEY (id_top));

Note: You use a primary key is a field to uniquely identify a record from a table. The primary key values must be unique and cannot be null. Usually, the primary key is set toauto_increment, which means that its value increases automatically each time a new record is added to the table. This guarantees that the primary key requirements are met.

Articles: blg_article_artid_art Primary key: the unique numeric identifier of each articleidtop_art Foreign key: the numeric ID of the topic to which this article is associatedtitle_art The title of the article. This will be displayed in the browser.description_art A short description of the article contents. This will be displayed in the article lists.text_art The actual contents of the article.date_art The date and time when the article was posted. It will be used to sort and order articles by date. This will be inserted automatically in the table.

CREATE TABLE blg_article_art ( id_art int(11) NOT NULL auto_increment, idtop_art int(11) NOT NULL default '0', title_art varchar(100) NOT NULL default '', description_art varchar(255) NOT NULL default '', text_art longtext NOT NULL, date_art datetime default NULL, PRIMARY KEY (id_art));

Note: A foreign key is a field from a table that refers to (or targets) a specific key, usually the primary key, in another table. This is a convenient way of logically linkinginformation from apparently unrelated tables. In your case, you need to link each article to the topic it belongs to. Use the idtop_art foreign key in the articles table to referencethe idtop primary key from the topics table.

Now that you have the SQL script to generate the blog database and you have a pretty good idea of what is does, run it on the database server. Consult the articles referenced onpage two of this article, your MySQL documentation, or your web host's documentation for how to run SQL scripts. These two table creation scripts are also available in theblg_blog.sql file, which is included in the sample files download linked from the beginning of this article. Include the following line at the beginning if you wish to create aseparate database.

create database blg_blog;

Note: If you use a shared hosting server, the administrator might not grant you the right to create more than one database. If this is the case, then just run the two table scripts.

To populate your tables with some test data, use the data.sql SQL script in the sample files download linked at the beginning of this article.

Best Practices: Database Naming Convention

When defining a database, it is a good idea to make sure there are no name confusions. I recommend the following naming practices:

Give all tables from the same database a common prefix (in your case, blg_), to distinguish them from other tables in other databases stored on the same server.1.Give all fields from the same table a common suffix (for instance: all fields from the table blg_comment_com end in _com).2.Give all foreign and primary keys a prefix of id.3.

Creating the Dreamweaver Template

The next step is to create a site template that defines the layout and graphical aspect of your blog.

Note: A template is a fixed page layout. You can define regions in the template that are editable in documents based on that template. You use templates to control which pageelements template users can edit. One of the most powerful uses of templates is the ability to update multiple pages at once.

To create the blog template:

Open Dreamweaver.1.Open the blog site you have defined by clicking its name from the pop-up menu in the Files tab of the Files panel.2.Make sure you work in the Local View by selecting this option in the Files tab.3.

Select File > New and select Template page > PHP template from the General tab as shown in Figure 2 below.4.


4 de 18 25/06/2006 12:35 a.m.

Figure 2. Creating a new PHP template page using the New Document dialog box

(+) View larger

Tip: The template of a dynamic site must be dynamic, as well. The template has a PHP extension after you save it.

Click Create. A blank page opens.5.

Think of the page layout for a moment. The blog pages should have the following general organization:

Header, containing the site logoFooter, where links and copyright information are insertedNavigation menu, where the topic list displaysMain area, for listing articles

Figure 3 shows the general page layout.

Figure 3. The basic layout of the template

Next, you will learn how to create this basic layout and add graphical formatting to it using Dreamweaver. You use this layout for all site pages. Dreamweaver templates can reallybootstrap your editing efforts by automatically updating the layout of the entire site from just one file. In a Dreamweaver template, you can define which page regions users can editsubsequently and which page regions should remain unchanged throughout the site.

In your case, the header and footer sections and the left menu should be the same throughout the site. The only section that changes is the center of the page, which displaysinformation that the visitor requested.

To define the layout of the site, you'll use an HTML table. You don't need to worry about the HTML code behind it. First, create a table with two columns and three rows:

Select Insert > Table.1.

Fill in the Table dialog box that appears, as shown in Figure 4.2.


5 de 18 25/06/2006 12:35 a.m.

Figure 4. The Table dialog box

The table should occupy the whole page, so Table width is set to 100%.For aesthetic reasons, make the table borders invisible, by setting the Border thickness to 0.The Cell padding and Cell spacing define the amount of spacing inside and between cells.

Click inside a cell and you notice how the tag selector and the Property inspector change accordingly. You will use these two tools to select and format various elements of thetemplate. The tag selector shows the hierarchy of tags surrounding the current selection.

Note: If you are unable to see the Property inspector, select Window > Properties.

As you can see from the layout draft in Figure 3, the menu section is thinner than the main section and the header and footer sections span on a single row each. You need to formatthe table as follows:

Click inside one of the cells in the left.1.Set its width (W) to 15% within the Property inspector. The other column will readjust accordingly.2.

Select the first row by clicking inside it and then select the <tr> tag in the tag selector as shown circled in red in Figure 5.

Figure 5. Selecting the first row using the tag selector

3.

Click the Merge button from the Property inspector as shown circled in red in Figure 5.4.Perform the same operations for the last row.5.Select each table cell and set its vertical alignment to Top in the Property inspector.6.

The table should now look like Figure 6.

Figure 6. How the template should look so far.

Save the template file by selecting File > Save. A pop-up message warns you that you haven't defined any editable regions. Click OK to proceed.

Note: Pages based on a template that have no editable regions defined cannot be modified. You will define such regions later in this tutorial.

1.

In the Save As Template dialog box, select the site (blg) where you will use this template.2.Name the file blgtemplate.3.Click Save.4.

Dreamweaver creates a special folder called Templates inside the site root folder. All the template files are stored in this folder.

Tip: Dreamweaver gives all template filenames a special DWT extension. If the template name is blgtemplate, as in your case, the corresponding filename is blgtemplate.dwt.php.

Next, you edit the layout sections of your template: the header, the footer, and the menu.

First, decide on an image that you will use for the logo and store it in the img folder of your site. If you wish, you can use the logo.jpg image that is included in the sample fileslinked at the beginning of the article. To insert the logo in the header section of the template:

Place your pointer in the header of the template.1.Click the Image button from the Common tab in the Insert bar.2.


6 de 18 25/06/2006 12:35 a.m.

Navigate to the image, and select it. Because you set up a default images folder when you defined the site, Dreamweaver automatically makes a copy of the logo.jpg image inyour default images folder.

3.

Pay attention to the URL: Remove the opening /, because the template in a different folder than the rest of the application files. The relative path “img/logo.jpg” ensures theimage is correctly displayed in the pages based on this template.

4.

Select the logo.jpg image in Design view and enter index.php in the link field in the Property inspector so that site visitors can get back to the blog home page from any otherpage by clicking the image.

5.

Figure 7. Inserting the logo image and adjusting its path

(+) View larger

Next, you edit the footer section of the blog. Enter the desired text and links in the table cell. Because the blog was created with Macromedia Dreamweaver MX 2004, I havedecided to create a link to the Dreamweaver product page. Just select the text that you want to link and then enter the desired URL in the Link field in the Property inspector.

In the next section of this tutorial, you learn how to create a dynamic navigation menu that uses data from a recordset.

Creating the Navigation Menu

In this section, you create the navigation menu of the blog template. This contains all the topics, which are dynamically extracted from the database. For that, you need:

A database connectionA recordset of all the topics

Defining a Database Connection

In the Application panel, select the Databases tab.1.Click the Plus (+) button and select MySQL Connection.2.

Fill in the MySQL connection dialog box as shown in Figure 8. You must provide your own MySQL server, username, and password.

Figure 8. Entering the MySQL database connection information

Note: In a production environment, do not use the root password for your web applications.

If you are not sure how to connect to the database server or are getting error messages when testing the connection, ask the system administrator or your web host for theproper access information. Use the Select button to quickly locate the blog database. You can test the connection using the Test button.

3.

Click OK when finished.4.

The connection displays in the Databases panel. Click the plus (+) icon to expand it. As shown in Figure 9, you can see the table organization of the blg_blog database.

Figure 9. Viewing the database information using the Databases tab of the Application panel group


7 de 18 25/06/2006 12:35 a.m.

Note: Dreamweaver automatically generates the PHP/MySQL code for connecting to the database and stores this information in a special file (connBlog.php) in the Connectionsfolder, which is automatically created inside the site root folder.

Creating a Recordset

Next, you need to extract the information you want to use from the database. For this, you create a recordset:

In the Application panel, select the Bindings tab.1.Click the Plus (+) button and select Recordset from the displayed menu.2.

Fill in the Recordset dialog box as shown in Figure 10.

Figure 10. Creating the rsTopics recordset

In the table pop-up menu, select the table you want to extract information from: blg_topic_top.You can also sort the records alphabetically (Ascending), by their title (title_top).

3.

Click OK when finished.4.

Dreamweaver displays a message window, warning you that subsequent changes to the code that was generated will not copy to documents based on the template. That is why it isimportant to generate the recordset correctly the first time. Click OK to dismiss the warning dialog box.

Figure 11. Template recordset warning message

(+) View larger

The recordset displays in the Bindings panel. Click the plus (+) icon to expand it. it.

Figure 12. The rsTopics recordset within the Bindings tab of the Application panel group

The point-and-click approach of Dreamweaver makes it very easy to connect to a database and generate a recordset. You do not have to write any PHP or MySQL code, just fill intwo dialog boxes and you're done.

Getting back to the navigation menu, you will learn how to display the data from the recordset you have created.

Click inside the left cell of the layout table.1.Click the Application tab from the Insert bar.2.Select Dynamic Table from the Dynamic Data button menu.3.

Fill in the Dynamic Table dialog box as shown in Figure 13.4.


8 de 18 25/06/2006 12:35 a.m.

Figure 13. The Dynamic Table dialog box using the rsTopics recordset

Display all the topics, because users must be able to navigate through all of them.

Click OK when you're done.5.

Insert the table in the left cell. However, you only need the name of each topic for the menu, so you should delete the id_top and the description_top columns; just select the tablecolums and press the Delete key. Next, change the title_top column heading with a human-readable one, such as Topics.

Currently, the menu entries have no links associated to them. Each menu entry should lead to the topic.php page and pass it an URL parameter, which takes corresponding id of thetopic as the value. To create the link:

Select the dynamic text labeled {rsTopics.title_top}.1.In the Property inspector, click the folder icon next to the Link text box.2.Browse to the site root folder on the local machine and select the topic.php file.3.In the URL text box, delete the preceding / character, because you need to use the relative path to the file. The URL should be topic.php.4.

Click the Parameters button next to the URL text box. Dreamweaver opens a dialog box, where you should define the URL parameter associated to this link.

Click the plus (+) button to add a new parameter.Enter its name: id_topEnter its value, by clicking in the Value field, clicking the lightning bolt icon next to the Value field and selecting the id_top field from the rsTopics recordset.Click OK, and then OK again.

5.

After defining the URL parameter, click OK.6.

Before finishing the template, define which regions can be further edited and which can not. Your blog template will have only one editable region: the main area where the articlesdisplay. To make this region editable:

Select the right table cell in the middle row.1.Click the Common tab from the Insert bar.2.Select Editable Region from the Templates button menu.3.Dreamweaver opens a dialog box that asks you for the name of the editable region. Name it main.4.Click OK.5.Select the main text that Dreamweaver inserted in the editable region and delete it.6.

Save the template file. Figure 14 shows how the template page looks so far in Dreamweaver Design view.

Figure 14. The template in Design view

(+) View larger

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 selectthe “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 dynamictable 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.

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

Enter the following information in the Recordset dialog box:

Name: rsArticlesConnection: connBlogTable: blg_article_artColumns: AllSort: date_art, Descending

3.

Click Advanced.4.

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 afterblg_article_art:

INNER JOIN blg_topic_top ON idtop_art=id_top

5.

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


9 de 18 25/06/2006 12:35 a.m.

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_toptable.

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.

Click inside the main editable region.1.Select the Application tab from the Insert bar.2.Select Dynamic Table from the Dynamic Data button bar.3.Enter the following information in the Dynamic Table dialog box:

Recordset: rsArticlesShow: 10 records at a timeBorder: 0Cell padding: 0Cell spacing: 0

4.

Click OK. Dreamweaver generates a table with all the columns from the recordset.5.

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

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).

1.

Select the dynamic table by clicking the corresponding <table> tag from the tag selector. Set the table width to 100% in the Property inspector.2.Delete the first table row.3.Select the remaining row, right-click it and select Table > Insert Row from the pop-up menu.4.In the first table row, select the first two cells and merge them.5.Drag the title_top and title_art dynamic texts into the merged cell and separate them with a > character.6.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.7.Select the second row and merge its cells.8.Insert a horizontal rule to separate the articles (Insert > HTML > Horizontal Rule).9.

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 {rsArticles.title_top}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 stepson the previous page if you are unsure how to set URL parameters.


10 de 18 25/06/2006 12:35 a.m.

Similarly, link the dynamic text {rsArticles.title_art} 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

Creating the Article List

Next, you edit the topic.php file. This page displays a list of articles assigned to a specific topic that a user selected from the menu. Conceptually, the page is constructed in thesame way as the index.php page. The only difference is that the page filters the recordset you use by the topic id, which the URL parameter passes.

Note: You can filter records in a database based on the equality of a parameter’s value with a record column’s value. This yields a limited set of records that satisfy a certaincondition (in your case, the records belong to the same topic).

Open the topic.php page and apply the template to it, as described for the index.php page.

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

Creating a Filtered Recordset

To create a filtered recordset, you proceed just as you do with a normal recordset, with one exception: In the Recordset dialog box, you specify the filter condition as shown inFigure 19.

Figure 19. The Recordset dialog box showing the rsArticles recordset and a filter condition

As you can see, the idtop_art field value must be equal to the value of the id_top URL parameter.

Click the Advanced button to add the join condition immediately after blg_article_art:

INNER JOIN blg_topic_top ON idtop_art=id_top

Next, you display the data from the filtered recordset using a dynamic table, as described for index.php. Create the dynamic table using the the rsArticles recordset you just created.

Now use the following steps to format and clean up the dynamic table

Select the dynamic table by clicking the corresponding <table> tag from the tag selector. Set the table width to 100% in the Property inspector.1.Select the following columns from the table and delete them: id_art, idtop_art, text_art, id_top, and description_top. You can select table columns by clicking insidethe 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 downarrow, ensure you have the table widths visual aid enabled (View > Visual Aids > Table Widths).

2.

Delete the first table row.3.Select the remaining row, right-click it and select Table > Insert Row from the pop-up menu.4.Select the left two cells in the top row and merge them by clicking the merge cells button in the Property inspector.5.Select the right two cells in the top row and merge them by clicking the merge cells button in the Property inspector.6.Select the {rsArticles.title_art} dynamic text and drag it to the top left table cell.7.Select the {rsArticles.date_art} dynamic text and drag it to the top right table cell.8.Type Published: to the right of the {rsArticles.date_art} dynamic text.9.Select the dynamic table by clicking the corresponding <table> tag from the tag selector and press your left arrow key so the cursor is to the left of the table.10.


11 de 18 25/06/2006 12:35 a.m.

With the cursor to the left of the table, insert another table (Insert > Table). Assign the table the following values: 1 row, 1 column, 100% width, 0 CellSpace and 0 CellPad.11.You do not need to display the {rsArticles.title_top} dynamic text for each article, since the topic is the same for all articles. Select the {rsArticles.title_top}dynamictext and drag it above into the new table you just created. This will put it outside the the repeat region in the lower table. You may want to disable the table widths visual aidif it is in the way (View > Visual Aids > Table Widths).

12.

Enclose the {rsArticles.title_top} dynamic text in quotes and write Articles in before it.13.In the second table row in the lower table, select all of the cells and merge them.14.Place your cursor to the right of the {rsArticles.description_art} dynamic text and press Enter.15.Insert a horizontal rule to separate the articles (Insert > HTML > Horizontal Rule).16.Save and put the file to the server. Also make sure the index.php file is on the server.17.In your browser, navigate to the index.php file. If you populated the database using the data.sql file mentioned earlier, you will see the topics show up on the article.php pagewhen you click the topic links in the right nav of the index.php page.

18.

Create the necessary link between the article title and the article.php page, passing it the URL parameter id_art, which is equal to the id_art field from the rsArticles recordset.Review the section on dynamic links if you're unsure of how to do this.

The page should look like this in Design view:

Figure 20. The page in Design view

(+) View larger

In the next section, you will learn to display an article in full.

Displaying an Article

Next, you create the article detail page: article.php. This page displays the title, the short description, the body, and the publishing date for an article. You build the page in a similarmanner to topic.php:

Open article.php and apply the blgtemplate to it.1.In the title field of the Document bar, enter Blog: Article as the title of the page.2.

Create a filtered advanced recordset called rsArticle that must:

filter articles by the id_art field, which must be equal to the value of the URL parameter, id_art.

make an inner join between the tables blg_topic_top and blg_article_art.

(INNER JOIN blg_topic_top ON idtop_art=id_top)

Figure 20 shows Advanced view of the rsArticle recordset:

Figure 21. The rsArticle recordset in the advanced recordset dialog box

(+) View larger

3.

Display the dynamic data from the recordset in your page. This time, you won't need a dynamic table for that, since there is only one item in the recordset to display—thearticle ID that the URL parameter passed.

Insert a table in the main editable region that has three rows and two columns.Merge the cells of the second row.Merge the cells of the third row.Drag the recordset fields that you want to display from the Bindings panel into the corresponding table cells, as shown in Figure 22. Write the necessary text to makeyour page more user-friendly.

Figure 22 shows how the article.php page should look in Design view.

4.


12 de 18 25/06/2006 12:35 a.m.

Figure 22. The page in Design View

(+) View larger

You can see how easy it is to display dynamic information extracted from the database just by using drag and drop actions.

Save the file and put it to the server. Browse to the index.php page, click a topic to go to the topic page, and click an article title to display the article page with the detailedinformation for that article.

Now you have all the pages that display postings from the blog:

index.php, that lists the most recent 10 articlestopic.php, that displays the articles associated to a topic.article.php, that shows the article contents.

There is one issue left: how do you post an article? You will learn to do that in the next section.

Posting an Article in the Blog

For publishing articles to your blog, you have created the post.php page, which contains a record insertion form.

Open the post.php page.1.Apply the blgtemplate to it.2.In the title field of the Document bar, enter Blog: Post Article as the title of the page.3.Click inside the main editable region.4.Click the Application tab from the Insert bar and select Record Insertion Form Wizard from the Insert Record button bar.5.Configure the Record Insertion Form as listed below and shown in Figure 23.6.

Figure 23. The Record Insertion form

(+) View larger

Use the defined database connection.Select the table that you want the record inserted into: blg_article_artSelect the page to redirect users to after the insertion: index.php.You need to remove the id_art field, because this is auto incremented each time a record is inserted in the table. To remove a field, select it and click the Minus (-) button.Also, remove the idtop_art field. Select the topic from a pop-up menu that you will create later.For each of the remaining fields, enter a label, as seen in the screen shot.Change the description_art and text_art fields to display as text areas, because you need to insert a larger amount of text into these fields.

Change the date_art field to display as a hidden field, and set its default value to:

<?php echo date('Y-m-d H:i:s'); ?>

This way, you don't have to manually specify the value of the date_art field. The server will automatically populate it with the current date and time.

Note: The date( ) function is a special PHP function that returns the current local date and time, in the specified format. The echo function is another PHP function that outputs itsparameters—in this case, the results of the date function.

Click OK to exit the Record Insertion Wizard and insert the form on the page.

Figure 24 shows how the form should appear in Design view:


13 de 18 25/06/2006 12:35 a.m.

Figure 24. The record insertion form in Design View

(+) View larger

There's only one problem with this form: you cannot select the topic to which the article belongs. But why then have I removed the idtop_art field from the form? Wasn't thatnecessary to specify the topic. Indeed, idtop_art is used to identify the topic to which a certain article belongs. However, this is only a numeric field and it would be a dauntingtask to guess what number a certain topic has and then write that number in a text field. Instead, you should be able to select the topic name from a dynamic pop-up menu.

A dynamic pop-up menu displays a set of record fields from a recordset and allows you to select one. Should the database be modified, the dynamic menu changes accordingly,without requiring you to change the menu entries manually.

Create a simple recordset called rsMenu in the post.php page, just as you have done for the Dreamweaver template. The rsMenu recordset must contain all the topics from theblg_topic_top table.

Create the dynamic menu using these steps.

Insert a new row in the form table, right after the Article title field.1.Write the label Topic in the left cell of the new row.2.In the right cell, insert a pop-up menu by clicking the List/Menu button from the Forms tab of the Insert bar.3.Select the menu and label it idtop_art in the Property inspector.4.

Click the Dynamic button from the Property inspector and configure the Dynamic Menu dialog box as shown in Figure 25.

You will use the options from the rsMenu recordset.

The submitted value is id_top, but the actual entries in the pop-up menu are the names of the topics specified by title_top.

Figure 25. The Dynamic List/Menu dialog box

5.

Click OK.6.

Next, update your form to include the newly created dynamic menu:

Go to the Server Behaviors tab in the Application panel.1.Double-click the Insert Record server behavior.2.

In the list of columns, you can see that the idart_top does not get any value. Select this column and set its value to that of the idart_top form field.3.


14 de 18 25/06/2006 12:35 a.m.

Figure 26. The Insert Record dialog box

(+) View larger

Click OK.4.

The insert form is now ready for action. Preview it in the browser by pressing F12 and see how it works.

Figure 27. The insert article form

(+) View larger

Your application is ready. You have set up a basic blog, where you can post articles and visitors can read them. But it doesn't look very appealing, does it? You need to add someCSS touch to your blog to make it more lively. In the next section, you will learn how to do that.

Applying CSS to Your Blog

The Dreamweaver product and engineering teams have given CSS serious thought and have integrated a very handy feature that allows you to customize the look and feel of yourwebsite using a graphical interface.

To define a CSS style for your site, you use the Design panel. You will redefine the look of the <body> and <a> HTML tags and you will also create six new CSS classes, asfollows:

.nugget – defines the formatting of the nuggets in the left

.nugheader – defines the formatting of the nugget header

.nugbody – defines the formatting of the nugget body

.topic – defines the formatting of the article list

.topheader – defines the article header format

.topbody – defines the formatting of the article description

Figure 28. The nugget CSS classes

Figure 29. The article CSS classes

In the next steps, you define the skin of your site. You can change the look and feel of your blog from a single file called blog.css. To create this file:

Open the blgtemplate page.1.Select the CSS Styles tab from the Design panel. If it is not open, select Window > CSS Styles.2.

Click the New CSS Style icon from the bottom of the panel. Dreamweaver opens the New CSS Style dialog box.

Start by defining the general formatting of the document: the <body> tag.

Select the Tag as the selector type.Then select body from the Tag menu.Finally, choose to define the new style in a new style sheet file as shown in Figure 30.

Click OK.

3.


15 de 18 25/06/2006 12:35 a.m.

Figure 30. Use the New CSS Style dialog box to redefine the body tag

Dreamweaver asks you to create the new CSS file. Name it blog.css and save it in the Templates folder of your site.4.

Click Save. The file is created and the CSS Style Definition dialog box asks you to configure the formatting of the <body> tag as shown in Figure 31.

In the Type category, set the Font to Verdana, Arial, Helvetica, sans-serif and the Size to 10 pixels.

In the Box category, set the Padding and Margin attributes to 0, to eliminate the whitespace between elements of the page.

Figure 31. The CSS Style Definition for the body tag

5.

Click OK.6.

Next, define the formatting of the links. You will first edit the formatting of a link, in general (the <a> tag), and then apply special formatting for mouse-over effects and for visitedlinks.

Follow the steps described above for defining a new CSS style. This time select a from the Tag list. Remember to define the style in the same file: blog.css. Set the followingattributes in the Type category of the CSS Style Definition dialog box:

Decoration: noneColor: #004080

Next, edit the hover state of a link:

Click the New CSS Style icon.1.

In the displayed dialog box, select:

Selector Type: AdvancedSelector: a:hoverDefine in: blog.css.

2.

Click OK when you’re done.3.

Set the following attributes in the Type category of the CSS Style Definition configuration window:

Decoration: underline.Color: #20086B

4.

Finally, follow the same steps to define the formatting of the visited state of a link. This time, the only attribute that you specify is:

Color: #0080C0

Note: The link tags inherit the font attributes of the <body> tag, unless you specify otherwise. The only attribute that is particular to <a> is the color. In general, the inner tagsinherit the CSS attributes of the enclosing tags.

Now that you have finished modifying existing HTML tags, you define six custom CSS classes, which are used as described above. Use the following steps to create a custom stylethat you can apply as a class attribute to a range or block of text.

Click the New CSS Style icon from the Design panel.1.

In the New CSS Style dialog box, specify the following information:

Name: enter the custom name of your class, preceded by a period, such as .nugget or .topic.Selector type: ClassDefine in: blog.css

2.


16 de 18 25/06/2006 12:35 a.m.

Note: Class names must begin with a period and can contain any combination of letters and numbers. If you don’t enter a beginning period, Dreamweaver automatically enters itfor you.

Here is the complete list of formatting options that you must specify for the custom styles:

CSS Category CSS Properties

.nugget

BoxPadding: Same for all, 5 pixelsMargin: Bottom, 10 pixels

BorderStyle: Same for all, dottedWidth: Same for all, 1 pixelColor: Same for all, #C0C0C0

.nugheaderType

Size: 12 pixelsWeight: bolder

Background Background color: #99CCFF.nugbody Background Background-color: #F4F4F4

.topic

Box Padding Top: 10 pixels, Right: 7 pixels,Bottom: 10 pixels, Left: 7 pixels

BorderStyle: Same for all, dottedWidth: Same for all, 1 pixelColor: Same for all, #C0C0C0

.topheaderType Size: 12 pixelsBackground Background color: #F4F4F4

.topbody Type Style: italic

When you're done defining the styles, you can see all of them listed in the CSS Styles tab of the Design panel as shown in Figure 32.

Figure 32. The CSS Styles tab showing the styles for the blog.css stylsheet

Make sure you save the template and the blog.css files. Dreamweaver will ask you to update all of the pages base on the Template. Click update. You can use the defined CSSstyles in all pages based on blgtemplate, since it contains a link to the blog.css file.

To apply these styles to the various tags in your pages, all you have to do is to right-click the corresponding tag in the tag selector and select the appropriate class from thedisplayed pop-up menu.

Open the blgtemplate page and apply the CSS styles to the menu nugget using the following steps.

On the tag selector, right-click the <table> tag containing the topics menu and select Set Class > nugget from the pop-up menu, as shown in Figure 33.

Figure33. Setting the class for the table tag

1.

In a similar manner, right-click the <td> tag containing the menu header and select Set Class > nugheader.2.Finally, right-click the <td> tag containing the menu entries and select Set Class > nugbody.3.

Save the page using Control + S. Dreamweaver asks if you want to update all pages based on the blgtemplate. Click Update as shown in Figure 34.4.


17 de 18 25/06/2006 12:35 a.m.

Figure 34. Updating the files based on the template

An Update Pages dialog box displays a list with all the updated files. Once it is done updating the files, click Close.5.

Figure 35. Updating the pages

Note: There is one issue though: because Dreamweaver uses a document-relative link to the blog.css file within blgtemplate, the CSS file is not be accessible in documents basedon that template. Use these steps to fix this issue.

Open the blgtemplate file in Code view by clicking Code button from the document windowPress Control + F to open the Find and Replace window.

Enter this search string: blg.css, and click Find Next.

Figure 36. Updating the CSS file that the pages use

Dreamweaver finds the text on this code line:

<link href="blog.css" rel="stylesheet" type="text/css">

Modify the code line as follows:

<link href="Templates/blog.css" rel="stylesheet" type="text/css">

Save blgtemplate and choose to update all files based on it.

Next, open the topic.php page and apply the CSS styles to the article list:

On the tag selector, right-click the <table> tag containing the article list and select Set Class > topic from the displayed pop-up menu, as shown in Figure 37.1.

Similarly, right-click the <tr> tag containing the article title and select Set Class > topheader.2.


18 de 18 25/06/2006 12:35 a.m.

Figure 37. Setting the class for the table tag

(+) View larger

Next, right-click the <td> tag containing the article description and select Set Class > topbody.3.Save the page and preview it in the Internet browser:4.

Follow the same procedure to format the other blog pages using CSS styles. Use your creativity to enhance these styles or define new ones, as needed.

Figure 38. Previewing the page in the browser

(+) View larger

Where to Go From Here

In this article, I've presented how to use Dreamweaver with PHP and MySQL to build the skeleton of a blog. This tutorial is just the starting point of a series of six articles, that willguide you through creating a full-fledged weblog. Here is a quick glimpse into the future features that will enrich your blog:

User registrationUser authenticationComment moderationBack-end management of topics and articlesSearch engineNavigation barsArchive calendar

Building a Blog with Dreamweaver, PHP, and MySQL – Part 2: Creating an Administration Section

About the author

Marius Zaharia is the documentation manager at InterAKT Online, a developer of professional Dreameaver extensions for dynamic web development. When he's not writingarticles and tutorials to guide web developers, he enjoys learning new things and exploring new technologies. His interests range from web development to politics and avantgardeelectronic music.

Copyright © 2006 Adobe Systems Incorporated. All rights reserved.

building a blog part1

Documents

visual aids

unique numeric identifier

url text box

table dialog box

recordset dialog box

main editable region

date art dynamic text

application panel group