Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

Dreamweaver Article
Building a Blog with Dreamweaver, PHP, and MySQL Part 2: Creating an Administration Section
Marius Zaharia InterAKT Online In my first article, I presented how to set up a basic blog in Macromedia Dreamweaver MX 2004. The application allows visitors to view articles and to browse through topics of interest. The blog owneryoucan post articles through an HTML form. However, these features are quite basic and don't provide much functionality to your blog. You are probably already wondering how you can build a complex administration section that would allow you to manage topics and articles. By now, you have probably also discovered that virtually anyone can post articles in the blog, since the page for adding articles is not protected in any way from potentially malevolent users. In this article, you learn how to: Implement user authentication for your blog Restrict access to the administration section Add new topics using an insert record form Delete articles using a delete record server behavior Edit topics and articles using update record forms This article is the second of a series of six tutorials that will guide you through building a complex blog using Macromedia Dreamweaver MX 2004 within the PHP MySQL development environment. You can build this blog on either a Windows/IIS, Mac/Apache, or Linux/Apache platform.

Requirements
To complete this tutorial, install the following software and files: Dreamweaver MX 2004 Try Buy System Requirements: Operating System: Macintosh OS X, Microsoft Windows, or Linux Web server: Apache version 1.3.x or later or Microsoft IIS version 5.0 or later PHP application server version 4.3.4 or later MySQL database server version 3.23.54 or later Tutorials and sample files: blog2_samples.zip (ZIP, 37K) Prerequisite knowledge: Prior completion of Part 1 Familiarity with the Dreamweaver workspace and interface Basic concepts of web application development

Planning Your Application

In this article, you will create the administration section of your blog. This section performs the authentication of the blog administrator and contains pages for modifying, creating, and deleting articles as well as for modifying and creating topics. The application requires a new database table that stores information about the users of the blog. You will create the users table in the next section. You need the following files to build the administration section. The SQL files are contained in the sample files download (blog2_samples.zip) linked from the beginning of this article. MySQL script to build the users table (blg_blog.sql) and the script to populate that table with a default administrator account (data.sql) Dreamweaver template that specifies the general layout of the administration pages Page that performs the authentication of the administrator: login.php Home page of the administration section, which users use to post a new article: index.php List of all the topics: list_top.php. You can select a topic from this list to modify List of all the articles: list_art.php. You can select to modify or delete an article from this list Dynamic form for creating a topic: insert_top.php Dynamic form for changing an existing topic: update_top.php Dynamic form for modifying a posted article: update_art.php Page for removing articles from your blog: delete_art.php Create a new folder called admin inside your site's root folder. Next, create the following files in the admin folder of your site: login.php insert_top.php update_top.php update_art.php delete_art.php list_top.php list_art.php Also, open the post.php page, which you have created in the first article and save it as index.php in the admin folder. Click OK when prompted to update the links when you save

1 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

the file. 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 (blog2_samples.zip), linked at the beginning of the article.

Building the Database

In the first article, you set up your database and created the database tables that store the topics and the articles (blg_topic_top and blg_article_art). For this article, you need an extra table to store information about the blog users. Here is the structure of the table and the corresponding SQL code to generate it: Users: id_usr username_usr password_usr email_usr firstname_usr lastname_usr address_usr regtime_usr level_usr blg_user_usr Primary key: the unique numeric identifier of each user The username that a visitor will use to log in to the blog The password for log-on The e-mail address of the user First name of user Last name of user Address of user The date and time when the user registered on the website. This will be inserted automatically in the table. A flag value that indicates the status of the user: administrator ("admin") or common user ("user"). You use this to set the corresponding permissions.

CREATE TABLE blg_user_usr ( id_usr int(11) NOT NULL auto_increment, username_usr varchar(32) NOT NULL default '', password_usr varchar(32) NOT NULL default '', email_usr varchar(100) NOT NULL default '', firstname_usr varchar(255) NOT NULL default '', lastname_usr varchar(255) NOT NULL default '', address_usr varchar(255) default NULL, regtime_usr datetime default NULL, level_usr varchar(10) NOT NULL default 'user', PRIMARY KEY (id_usr));
You will use the level_usr field in a future tutorial to differentiate between the blog administrator and the other users. Deploy the above script in the MySQL command prompt or in the phpMyAdmin interface (or any other third-party tool you may use for managing your databases). Alternatively, a SQL file (blg_blog.sql) containing the script is available in the sample files download (blog2_samples.zip) linked from the beginning of the article. To create the administrator account in the table, use the SQL script below. Again, a SQL file (data.sql) containing the script is available in the sample files download (blog2_samples.zip) linked from the beginning of the article.

INSERT INTO blg_user_usr VALUES (1, 'administrator', 'root', 'email@mydomain.com', 'John', 'Doe', 'New York', '2004-07-26 17:44:31', 'admin');
Note: You can change the values of the table fields to match your needs, but make sure you use the same information consistently throughout the tutorial. Remember the username and the password you have inserted in the table, as you will need them later to log on to the administration section. You don't need to create a new database connection or edit the existing one. When you open your site in Dreamweaver, you can see all the tables of your database by expanding the connection tree displayed in the Databases tab of the Application panel as shown in Figure 1.

Figure 1. The database tables in the Databases tab of the Application panel group Note: If you do not see the tables you have created, click the refresh button on the right side of the Databases panel.

User Authentication: Implementing Login

Next, I quickly walk you through implementing a session-based user authentication section for your blog. Jeffrey Bardzell has a beautifully-written tutorial on implementing user authentication, which thoroughly explains the concepts and the logic behind it. Here is a brief overview of the application logic behind the administration section. The blog administrator uses the login page to authenticate to the administration section. You restrict access to this area through a special server behavior, so no one else can view these pages. If someone other than the administrator tries to load one of these pages in a browser, the application redirects them to the login page. Finally, each of the administration pages contains a Log Out User server behavior. This behavior is responsible for securely clearing any session variables that might allow potentially malevolent users to gain access to your blog's back end. Implementing the Log-on First, use the following steps to add a login form that checks the identity of the user.

2 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

1. Open the login.php page and set the title to Blog: Login from the Document toolbar. 2. Insert a form from the Forms tab in the Insert bar. 3. Inside the form, insert a table configured as as shown in Figure 2.

Figure 2. The Table dialog box 4. In this table, insert two text fields and one submit button. Label them as shown in Figure 3.

Figure 3. The text fields and submit button for the user authentication form This form performs the user authentication. 5. 6. 7. 8. Select the form tag from the tag selector and set its name to adminlogin in the Property inspector. Select the first text field and set its name to username in the Property inspector. Select the second text field. In the Property inspector, set its name to password and select the password type. Finally, select the Submit button, set its name to login, and set its label to Log in.

Currently, all you have is a simple form that does not perform any action. Select the Login button and apply a Login In User server behavior to it by selecting Plus (+) > User Authentication > Log In User in the Server Behaviors tab of the Application panel group. When the Log In User dialog box appears, configure the server behavior with the values shown in Figure 4 and then click OK.

Figure 4. The Log In User dialog box Next, to ensure that the authentication starts only if the user specifies the username and the password, you need to insert a Form Validation behavior. 1. Select the Login button. In the Behaviors panel (Window > Behaviors), select Plus (+)> Validate form to add a Form Validation behavior that makes both fields required. 2. As shown in Figure 5, select each field and select the Required option. Then click OK.

3 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

Figure 5. The Validate Form dialog box Add a final touch to the login form by importing the CSS styles into your page. 1. Click the Attach Style Sheet button in the CSS Styles tab in the Design panel.

Figure 6. Attaching the style sheet in the CSS Styles tab of the Design panel group 2. In the Attach External Style Sheet dialog box, browse to the blog.css file in the Templates folder and select the Link option as shown in Figure 7.

Figure 7. The Attach External Style Sheet dialog box 3. Click OK when done. The CSS styles are now available in the login.php page. Apply the topic class to the table by clicking anywhere in the table, right-clicking on the <table> tag in the tag selector, and selecting Set Class > Topic. Figure 8 shows how the login page should appear in a browser.

Figure 8. The User Authentication form in the browser Put both the admin/index.php and admin/login.php pages on the server and then test the authentication using the username and password you entered in the database in the Building the Database section. If you use the correct username and password, the application redirects you to the admin/index.php page. If you use a bogus username and password, the application redirects you to the login.php page and resets the username and password. In the next section, you build a new template for the administration section.

Building a Template for the Administration Section

To simplify the application, you will create a template that you can use for the administration section. Except for the navigation menu, the new template page is similar to the one you currently use for your blog's front end. If you are uncertain how to work with templates, review the template section of my last article. 1. Open blgtemplate.dwt.php in the Templates folder. 2. Select the Save As Template option from the File menu. 3. In the displayed configuration window, enter admintemplate as the name of the new template and click Save.

Figure 10. The Save As Template dialog box

4 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

4. Remove the contents of the left cell and replace it with a table with 4 rows, 1 column, and width of 100%. 5. On each row of this table, write these lines and link them as follows: Administration section this is the menu name. Manage topics link it to list_top.php. Manage articles link it to list_art.php. Logout you will apply a special behavior to this link later in this tutorial. The navigation menu for the administration section should look like Figure 9.

Figure 9. The navigation menu for the administration section Note: You don't need to create an editable region for the menu. This remains unchanged throughout the administration pages. 6. Use the following steps to apply the CSS styles you have defined to the navigation menu. If you are interested, you can review the CSS section in my last tutorial for information on how you created these styles. 1. On the tag selector, right-click the <table> tag containing the Administrator section menu and select Set Class > nugget from the pop-up menu. 2. In a similar manner, right-click the <td> tag containing the menu header and select Set Class > nugheader. 3. Finally, right-click each of the <td> tags containing the menu entries and select Set Class > nugbody. Repeat this for each of the three <td> tags. 4. Save the template page. Note: Based on the way you have defined your site, you might need to modify the link to the CSS file (blog.css) to make the styles available in the current template. You can find more details on this issue in the relative path section of my first article. The template for the administration section also contains the rsTopics recordset, which was inherited from the blgtemplate.dwt.php page. Remove this by selecting the rsTopics recordset in the Bindings panel and clicking the Minus (-) button. You may get a warning dialog box alerting you that the code you are deleting will not be applied to the pages based on this template. You have not yet applied the template to any pages. Click OK to dismiss the dialog box. The login page performs the authentication. How do you know that someone will not attempt to access the administration pages directly bypassing the login page? This scenario is currently possible and could pose a serious security threat to your blog. To prevent this, restrict access to the administration pages in the next section.

Restricting Access to Pages

The administration pages are all based on the same templateadmintemplate. The easiest way to restrict access to these pages is to apply this server behavior directly to the template; the behavior automatically propagates to all pages. 1. If it is not already open, open the admintemplate.dwt.php page. 2. In the Server Behaviors panel, click the Plus (+) button and select User Authentication > Restrict Access To Page. 3. In the Restrict Access To Page dialog box that appears, select the Username, password, and access level option.

Figure 11. The Restrict Access to Page dialog box 4. To add an access level, click the Define button. The Define Access Levels dialog box appears. 5. Click the Plus (+) button and type admin. Note: Make sure you enter the correct name for the access levels. They must match the level_usr field in the users_usr database table. Dreamweaver does not check if the levels are correctly spelled to match those in the database. If you changed the value of the admin password in the Building the Database section, enter the access value you used.

Figure 12. The Define Access Levels dialog box 6. Click OK to close the Define Access Levels dialog box. 7. In the If access denied, go text box, browse to the login.php page.

5 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

8. Click OK to close the Restrict Access To Page dialog box and apply the server behavior to the template. 9. Save the template page. In the next section, you define a way for securely logging out from the administration section.

Implementing Log Out

You can log on to the administration section and deny others access to it. However, you also need to securely log out from the administration section and destroy all session variables that might allow other users to gain unauthorized access to these pages. 1. If it is not already open, open the admintemplate.dwt.php page. 2. Select the Logout text and open the Server Behaviors panel in the Application panel. 3. Click the Plus (+) button and select User Authentication > Log Out User as shown in Figure 13.

Figure 13. Selecting the Log Out User Server Behavior 4. Configure the the Log Out User dialog box as shown in Figure 14.

Figure 14. The Log Out User dialog box Note: Be sure the index.php file listed in the "When done, go to" text box is the index.php file in the root of your blog site and not the index.php page in the admin section of your site. 5. Click the OK button. The Log Out User server behavior displays in the Server Behaviors tab of the Application panel. 6. Save the template and upload it to the server. Note: For the generated server behaviors to function properly, you must make sure that the register_globals option is disabled in the php.ini configuration file. If you are not sure how to do this, contact your system administrator or consult your PHP server documentation. Since PHP 4.2, the default setting for register_globals is off. Now that the user authentication procedure has been set up, you can start building the administration pages. Note: Visitors might still be able to gain unauthorized access to your administration pages, even after you log out. This is because Internet browsers cache the contents of recently visited pages, making it possible for visitors to access restricted pages by pressing the Back button. The only solution to avoid this scenario is to close the browser window after you log out.

Changing the Template of a Page

In Dreamweaver, you can easily change how a page looks by applying a different template to it. You do this with the page for posting articles (admin/index.php). 1. Open admin/index.php and select Modify > Templates > Apply Template to Page 2. Select the admintemplate template from the Select Template dialog box as shown in Figure 15.

Figure 15. Applying the admintemplate template to the admin index.php page You should also choose to update the page when the template changes, so make sure the "Update page when template changes" option is selected.

6 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

3. Click the Select button when done. The admin\index.php page should look like Figure 16 when you view it in a browser.

Figure 16. The admin index.php page as shown in a browser (+) View larger

Managing Articles
In this section, you can build an article list for managing your posts. You can select which article you want to delete or modify from the list. 1. Open the list_art.php page and apply the administration template to it using the steps listed in the previous section. 2. In the Title field of the Document bar, enter Blog: Articles as the title of the page. 3. Use the following steps to build an advanced recordset with all the articles and the associated topics. 1. Click inside the main editable region. 2. In the Bindings tab of the Application panel group, click the Plus (+) button and select Recordset (Query). 3. Enter the following information in the Recordset dialog box: Name: rsAdminArticles Connection: connBlog Table: blg_article_art Columns: All Sort: date_art, Descending 4. Click Advanced. 5. 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 should appear like Figure 17. Click OK.

Figure 17. The advanced Recordset dialog box showing the rsAdminArticles recordset (+) View larger 4. In the editable region labeled main, insert a dynamic table for displaying the records. Use the following steps to do this: 1. Click the Dynamic Table button on the Application menu of the Insert bar. 2. Select the All Records option. 3. Click OK. 5. Trim and format the table to make it look like Figure 18. Use the following steps to do this.

Figure 18. The formatted table in Design view (+) View larger 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. 8. Type Last Updated: in the merged cell and drag the date_art dynamic text after it. 9. Select the second row and merge its cells. 10. Insert a horizontal rule to separate the articles (Insert > HTML > Horizontal Rule). You will add two buttons for each article. These perform the update and the delete operations. The buttons appear as GIF images that you store in the image folder of your site. These two files are named delete.gif and update.gif and they are available in the img folder within sample files download linked at the beginning of this article. You can use the

7 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

images provided with the sample site or you can provide your own. If you want to use the provided images, copy them to your site images folder now. 1. Insert two columns at the end of the table. To do this, click in the right column, click the down arrow button above the column, and select Insert Column Right from the pop-up menu. Repeat this step to add a second column. 2. Insert the update.gif image in the first column and the delete.gif image in the second column. To insert an image in your page, go to the Common tab in the Insert bar and click the Image button. 3. Put both images to the server. 4. Select the delete image and use the link field in the Property inspector to link it to the delete_art.php page. Pass the delete_art.php page a URL parameter which is the unique ID of the article (id_art). Name the parameter id_art, but give it a dynamic value equal to the id_art field in the database. To recall how to pass a URL parameter through a link, review the dynamic parameters section of my first article. 5. Link the update.gif image to the update_art.php page and pass it the unique ID as a URL parameter of the article (id_art). Name the parameter id_art, but give it a dynamic value equal to the id_art field in the database. Again, review the dynamic parameters section of my first article for the steps. You need to pass these URL parameters to the article update and article delete pages to specify which article to modify or delete. To add a final touch to the article list, apply the corresponding CSS styles and insert a link to the page for posting articles (admin/index.php) below the table. Apply the topheader class to the first row and the topbody class to the second row. Put your files to the server and preview them in a browser. You will probably need to log on first. Figure 19 shows how the list_art.php file should appear in a browser.

Figure 19. The admin/index.php page in a browser In the next section, you learn how to create a dynamic form for modifying your articles.

Modifying an Article
Sometimes, you might want to go back to an article posted on your blog and add to it or modify parts of it. You can do this using a Record Update Form . 1. Open the update_art.php page and apply the administration template to it. 2. In the Title text box of the Document bar, enter Blog: Modify Article as the title of the page. 3. Create an advanced recordset called rsModifiedArticle using the articles table (blg_article_art) and the topics table (blg_topic_top), filtered by the URL parameter received from the article list page. Use the following steps to do this. 1. Click the Plus (+) button in the Bindings tab of the Application panel group and select Recordset (Query) and make sure your are in the simple recordset view. If you're in Advanced recordset view, click the Simple button. 2. Enter rsModifiedArticle as the recordset name 3. Set the Connection to connBlog 4. Select blg_article_art as the table. 5. Select the All columns option. 6. In the filter section, set id_art equal to the URL Parameter id_art 7. Click the Advanced button 8. Right after article_art, type INNER JOIN blg_topic_top ON idtop_art=id_top The advanced recordset dialog should look like Figure 20.

Figure 20. The rsModifiedArticle recordset in the advanced Recordset dialog box (+) View larger 4. Click OK Use the following steps to create the record update form. 1. Click in the Main editable region. 2. Go to the Application menu or tab of the Insert bar and click the Record Update Form Wizard button.

8 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

Figure 21. The Record Update Form Wizard in the Application tab of the Insert bar. 3. Use the following values to configure the update form as shown in Figure 22. Use the defined database connection: connBlog. Select the table that you will use to store the updated article: blg_article_art. Select the recordset that contains the record to be displayed in the form: rsModifiedArticle. This recordset contains a single article, filtered by the URL parameter received from the article list. Specify the primary key of the table in the Unique key column field (id_art). This is a numeric field. After the update operation, the application must redirect you to the article list, so enter list_art.php. Configure the form fields that display in the form as follows: Remove the id_art field, because it represents the unique numeric identifier of each article and a user doesn't need to modify it. Remove the idtop_art field. This is the foreign key that relates the articles and the topics tables. You add a dynamic drop-down later so that you can change the topic to which the article is assigned. Label the title_art field as Article Title:. Label the description_art field as Article Description: and display it as a text area in the form. Label the text_art field as Article: and display it as a text area. Finally, make the date_art field hidden and set its default value to:
<?php echo date('Y-m-d H:i:s'); ?>

This is a PHP time/date function that automatically updates the article with the current date and time when a user modifies it.

Figure 22. The Recordset Update Form dialog box (+) View larger 4. Click the OK button when you're done. The update form looks like Figure 23 in Design view.

Figure 23. The updated form in Design view Next, you need to add a dynamic pop-up menu that you can use to reassign the article to a different topic. However, you first need to create a simple recordset from the topics table (blg_topic_top), that you use to display the list of topics in the menu. Create this recordset and name it rsTopicsMenu. Use these steps to create the dynamic topics pop-up menu. 1. 2. 3. 4. Insert a row below the article title line. You can do this by selecting the Article description row and selecting Modify > Table > Insert Row. Enter Topic: as the label in the left cell of the new row. Insert a List/Menu from the Forms tab of the Insert bar in the right cell of the new row. Select the menu and label it idtop_art in the Property inspector.

5. With the List/Menu still selected, click the Dynamic button in the Property inspector and use the following values to configure the Dynamic List/Menu dialog box as shown in Figure 24.

9 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

Figure 24. The Dynamic List/Menu dialog box Use the options from the rsTopicsMenu recordset. The displayed entries in the pop-up menu are the names of the topics specified by title_top. However, their real values are given by the id_top field. The updated field is idtop_art, which you will specify later. To specify the default value of pop-up menu (the value that appears selected when the page loads), click the lightning bolt icon and select the idtop_art field from the rsModifiedArticle recordset as shown in Figure 25.

Figure 25. The Dynamic Data dialog box 6. Click OK, then OK again. Finally, use the following steps to update your form to include the newly created dynamic menu. 1. Go to the Server Behaviors tab from the Application panel. 2. Double-click the Update Record server behavior as shown in Figure 26.

Figure 26. The Update Record Server Behavior 3. The Update Record dialog box opens as shown in Figure 27. In the list of columns, you can see that idtop_art is not currently assigned any value. Select this column and set its value to that of the idtop_art form field.

Figure 27. Setting the value of the idtop_art field in the Update Record dialog box

10 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

(+) View larger 4. Click OK. The update form is now ready for use. Preview it in the browser by pressing F12 and see how it works. It should look like Figure 28.

Figure 28. The update form as shown in a browser Go to the admin/list_art.php page and click the update image link for one of the articles. The application should take you to the update page that article. If you don't get the correct database record, check that the URL parameter you are passing from the list_art.php page matches the URL parameter the rsModifiedArticle recordset is expecting. Try updating one of the records to make sure the update feature works. In the next section, you learn how to remove articles from your blog by deleting records from the database.

Deleting an Article
In this section, you create a delete form for removing articles from your blog and the database. To avoid accidental deletions, the delete operation does not occur directly in the article list (list_art.php). Instead, the the list_art.php page links to a specific article in the delete_art.php page. The delete_art.php page displays the selected article and asks you to confirm that you really want to delete it. The page also displays two buttons to allow you to either confirm the deletion or cancel it. If the delete operation is successful, a confirmation message displays on the same page. 1. Open the delete_art.php page and apply the admintemplate to it. 2. In the Title field of the Document bar, enter Blog: Delete Article as the title of the page. 3. Create a filtered recordset called rsDeletedArticle containing the selected article from the blg_article_art table. The id_art URL parameter specifies the article ID. 4. Type the following line of text in the editable region of the page: Are you sure you want to delete this article?: 5. Press your enter/Return key after the line of text you just entered. 6. Using the rsDeletedArticle recordset, insert a dynamic table a table to display the article to delete. 7. Use the following steps to format and clean up the dynamic table: 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. Select the id_art, idtop_art columns from the table and delete them. You can select table columns by clicking inside the table, clicking the down arrow above each column in the table, and selecting column from the pop-up menu. Then press your delete key. If you do not see the down arrow, ensure you have the table widths visual aid enabled (View > Visual Aids > Table Widths). 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. Select the left two cells in the top row and merge them by clicking the merge cells button in the Property inspector. 6. Select the right two cells in the top row and merge them by clicking the merge cells button in the Property inspector. 7. Select the {rsDeletedArticle.title_art} dynamic text and drag it to the top left table cell. 8. Select the {rsDeletedArticle.date_art} dynamic text and drag it to the top right table cell. 9. Type Published: to the left of the {rsDeletedArticle.date_art} dynamic text. 10. Select the second row and select Modify > Table > Insert Row. Repeat this to insert another row. 11. Select all the cells in the second row and merge them. 12. Drag the rsDeletedArticle.description_art dynamic text field to the second row. 13. Merge the cells in the third row. 14. Drag the rsDeletedArticle.text_art dynamic text field to the third row. 15. Merge the cells in the forth row. 16. Select the top table row, right-click the <tr> tag in the tag selector and select Set Class > topheader. 17. Select the second row, right-click the <table> tag in the tag selector and select Set Class > topic. 18. Select the third row, right-click the <tr> tag in the tag selector and select Set Class > topbody. 8. Save the page. So far, the page should look like Figure 29 in Design view.

Figure 29. The deletion page in Design view (+) View larger

11 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

Put the delete_art.php file on your server and browse to the list_art.php page. Click the delete button for one of your articles and check to see that the correct article is displayed on the delete_art.php page. If you don't get the correct database record, check that the URL parameter you are passing from the list_art.php page matches the URL parameter the rsDeletedArticle recordset is expecting. So far, you haven't used any new tricks to create the delete page. Now, you need to create the buttons for confirming or canceling the delete operation. Because each button performs a different action, you will insert them in separate forms. 1. 2. 3. 4. In the fourth table row, insert a new table that has one row and two columns. In each of the cells, insert a form by clicking the form button from the Forms tab of the Insert bar. In each of the forms, insert a button from the forms tab of the Insert bar. Select the first form by clicking in it and selecting <form> in the tag selector. Enter delete as its name in the Property inspector. The form action will be performed on the same page, so enter delete_art.php in the Action field. 5. Select the second form and enter cancel as its name in the Property inspector. The form redirects you to the article list, so enter list_art.php in the Action field.

6. Select the button in the delete form and set its properties in the Property inspector to the following values: Button name: yes Label: Yes 7. In a similar manner, set the properties of the cancel button to: Button name: no Label: No. The form that confirms the deletion must call the delete_art.php page, which executes a Delete Record server behavior. To do that, it must pass the unique ID of the article being deleted as a form variable. You pass this value using a hidden field. Use the following steps to do this. 1. In the form labeled delete, insert a hidden field (Insert bar > Forms panel > Hidden Field button). 2. Select the hidden field and label it id_art in the Property inspector. 3. In the Property inspector, set the value of the hidden field by clicking the lightning bold icon and selecting the id_art field from the rsDeletedArticle recordset as shown in Figure 30.

Figure 30. Selecting the id_art field from the Dynamic Data dialog box 4. Click OK. Check if your hidden field is correctly configured by comparing your results with Figure 31.

Figure 31. The value of the dynamic data for the hidden field The forms you have created should look like Figure 32.

Figure 32. The forms in Design view Next, you need to create the actual delete transaction. 1. Click the Delete Record button from the Application tab in the Insert bar as shown in Figure 33.

Figure 33. The Delete Record button in the Application tab of the Insert bar 2. Configure the displayed window as follows and verify your values against those listed in Figure 34. The server behavior first checks if the Yes button was clicked, so set the First check pop-up menu to Form variable and enter yes in the text box next to it. Use the defined database connection: connBlog. The article is removed from the blg_article_art table. Specify the numeric primary key field for the articles table: id_art.

12 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

To actually delete the record from the database, the application compares the value of the primary key with the value sent through the id_art hidden field from the delete form, so select Form Variable from the Primary Key value pop-up menu and enter id_art in the text box next to it. Finally, after the delete is performed, you remain on the same page, where a confirmation message displays (you add that a bit later), so enter delete_art.php in the After deleting, go to text box. Review the values in the Delete Record dialog against Figure 34.

Figure 34. The Delete Record dialog box (+) View larger 3. Click OK when done. The server behavior now appears in the Application panel. 1. On the same page under the table, write the following confirmation message that will display when the delete operation succeeds: You have successfully deleted the article. 2. Under that message, insert a form labeled back, that redirects the user to the article list (Action: list_art.php). In the form, insert a simple button and label it Back. Figure 35 shows how your page should look so far when viewed in a browser.

Figure 35. The deletion form as shown in a browser As you can see, there is a problem with this page. It displays the confirmation message and the question at the same time. You need to control which section is displayed before the deletion and which section is displayed after the deletion. In Dreamweaver, you can achieve this behavior using conditional regions . These are server behaviors that let you show or hide a section of the page based on the results returned by a recordset. In this case, you can display the first sectionthe questionif the article has not been deleted yet, meaning if the rsDeletedArticle recordset is not empty. Only after the article has been deletedwhen the recordset becomes emptythe page displays the confirmation message. Use these steps to create the two conditional regions that accomplish this. 1. Select the first section of the page that includes the question, the article, and the two buttons. 2. Go to the Server Behaviors tab in the Application panel and click the Plus (+) button. 3. From the displayed menu, select Show Region > Show If Recordset Is Not Empty as shown in Figure 36.

Figure 36. The Show If Recordset Is Not Empty Server Behavior

13 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

4. In the Show If Recordset Is Not Empty dialog box, select the rsDeletedArticle recordset. This is recordset that the server behavior checks to see if it is empty.

Figure 37. The Show If Recordset Is Not Empty dialog box 5. Click OK. See a thin, gray border labeled Show If outlining the conditional region. Repeat steps 1-5 for the second section of the page. However, this time, select Show Region If Recordset Is Empty. Figure 38 shows how the second region should appear in Design view.

Figure 38. The Show If region in Design view Save your page and upload it to the server. You can now test how it works in the browser. Try entering a bogus article in the admin/index.php page. Then delete it.

Completing the Blog Administration Section

Next, you complete the administration section of your blog by applying what you have learned previously. Start by building the topics list, as described in the Managing Articles section. You need to: 1. 2. 3. 4. 5. Open list_top.php, apply the administration template to it, and give it a title of Blog: Topics. Create a simple recordset called rsAdminTopics with all the topics from the database. Add a dynamic table to display the list of topics. Format the dynamic table. Add a column to the table and insert the update.gif image button and link it to the corresponding page (update_top.php). Pass update_top.php the unique ID of the topic as a URL parameter (id_top from the rsAdminTopics recordset). 6. Insert a link to the page for creating a topic ( insert_top.php). 7. Apply the appropriate CSS styles to the table. Figure 39 shows how the topic list should look in the browser window.

Figure 39. The topic list shown in a browser (+) View larger Next, use the guidelines from the Posting an Article to the Blog section to build the insert_top.php page for adding a topic. To do this, you need to create a record insertion form that submits data to the topics table (blg_topic_top). The page for adding topics should be similar to Figure 40.

Figure 40. The page for adding a new topic as shown in a browser Finally, refer to section Modifying an Article earlier in this article for steps to create the page for modifying a topic. To do this you need to: Open the update_top.php page, apply the template to it, and give it a title of Blog: Modify Topic. Create a simple recordset called rsModifiedTopic from the topics table (blg_topic_top). The record is filtered by the unique ID of the topic (id_top) received through the URL parameter id_top from the topics list page (list_top.php). Create a record update form for modifying the selected topic. Figure 41 shows how the Topic update page should look in the browser.

14 de 15

25/06/2006 12:37 a.m.

Adobe - Developer Center : Building a Blog with Dreamweaver, PHP, a...

http://www.adobe.com/devnet/dreamweaver/articles/php_blog2_print.html

Figure 41. The modify topic page as shown in a browser Tip: When you work on a dynamic website, Dreamweaver automatically generates some PHP scripts which are located in a folder called _mmServerScripts, inside your site's root folder. I strongly recommend that you delete this folder before actually deploying your site to the hosting server. These scripts contain sensitive information about your site that users with bad intentions could access. Where to Go From Here In this article, I've presented how to use PHP and MySQL with Dreamweaver to build the administration section of a blog. This tutorial is just the second of a series of six articles, that will guide you through creating a fully-fledged weblog. Here is a quick glimpse into the future features that will enrich your blog: Archive calendar Search engine Comment moderation Navigation bars Forms for visually editing HTML Building a Blog with Dreamweaver, PHP, and MySQL Part 3: Creating a Search Feature and Archiving Your Blog

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 writing articles and tutorials to guide web developers, he enjoys learning new things and exploring new technologies. His interests range from web development to politics and avantgarde electronic music.

Copyright 2006 Adobe Systems Incorporated. All rights reserved.

15 de 15

25/06/2006 12:37 a.m.