30 June 2010
Note: This tutorial series was written for Dreamweaver CS5. The content is still valid for Dreamweaver CS5.5.
This is Part 1 of a three-part tutorial series. In this series, you'll build a simple content management system (CMS) for a news website or blog, using Dreamweaver CS5, PHP, and a MySQL database. PHP and MySQL are two of the most popular open source server-side technologies used to power dynamic websites. In this part, you'll learn how a dynamic website works, set up a development and testing environment for PHP and MySQL, create a database table to store the contents of articles, and prepare the forms for the CMS.
This tutorial series follows on from Creating your first website, and shows how to convert news.html from the Check Magazine site into a dynamic PHP page that draws its content from a database. You don't need to have completed the previous tutorial series to follow this one. All the necessary files are supplied in check_php_start.zip, which you should download before starting.
Note: This series is intended only as an introduction to working with PHP and MySQL in Dreamweaver. It uses the built-in Dreamweaver server behaviors, which automate the generation of PHP code for basic tasks, such as querying and updating a database. Server behaviors should be regarded mainly as a learning tool, rather than as a complete solution for building a database-driven website.
The website for a fictitious publication, Check Magazine, needs a page that can be updated regularly by your staff, without the need to write HTML or CSS. The designer has given you a piece of artwork (or comp) showing what the page should look like (Figure 1).
It's your job to create both the page and the CMS to insert, update, and delete news items in the database. The CMS needs the following files:
In Part 1, you'll lay all the groundwork for the CMS. Part 2 shows how to activate the forms to insert, update, and delete records in the database. Part 3 brings everything together by creating the dynamic version of the news page.
When you create a normal web page with HTML and CSS, all the content is fixed by the webmaster. Everyone who visits the page sees the same content—it's static.
By contrast, the content of a dynamic web page frequently changes. For example, the news page for Check Magazine displays the two most recent articles in the database. When a new item is added to the database, the PHP code in the page automatically displays it. Click an archive link, and the content changes to display the articles for that month. The code in the page controls the content depending on the request it receives from the browser.
When the web server receives a request, it hands the page to the PHP engine, which normally runs as a module within the server. Depending on the code and type of request, the PHP engine queries the database if necessary, and then builds the HTML output to send back to the browser (see Figure 2).
It sounds like a lot of work, but the process on the web server usually takes only a fraction of a second.
You build PHP pages in Dreamweaver in the same way as ordinary web pages, and add the dynamic code using server behaviors or typing it manually. The PHP engine processes everything between
?>. Code outside those tags is treated as ordinary HTML. You can have multiple blocks of PHP code in a page, so the PHP engine constantly switches between HTML and PHP mode until it reaches the end of the document.
PHP uses variables as placeholders for values that are likely to change, and functions to perform various tasks. PHP variables always begin with a dollar sign. As a simple example, you might have a paragraph like this in a PHP page:
<p>Hello, <?php echo $name; ?>. Today's <?php echo date('l'); ?>.</p>
The PHP engine processes the code in both PHP blocks, and outputs something like this, depending on who's visiting the site and what day of the week it is:
<p>Hello, David. Today's Friday.</p>
PHP also uses loops to simplify repetitive tasks, such as displaying the results of a database query. Conditional statements make decisions using simple comparisons.
Note: You don't need to know PHP to complete this tutorial, but your ability to create database-driven sites will be extremely limited if you rely solely on Dreamweaver's server behaviors to do everything for you. There's an introductory tutorial to writing PHP scripts on the PHP website. For a more detailed discussion of PHP, see Adobe Dreamweaver CS5 with PHP: Training from the Source.
The PHP code needs to be processed (or parsed, to use the correct technical term) by a PHP-enabled web server. You also need a MySQL database and phpMyAdmin, a web-based front end for MySQL. They're free, and can be installed using an all-in-one package, such as XAMPP for Windows or MAMP for Mac OS X.
If you already have all three installed on your local computer, skip ahead to Set up your PHP site.
If you don't have a PHP-enabled web server, MySQL, and phpMyAdmin installed, refer to the following pages in Setting up a PHP development environment for Dreamweaver before continuing with this tutorial:
Note: Adobe does not provide support for third-party products, such as XAMPP, Microsoft Web Platform Installer, MySQL, phpMyAdmin, or MAMP, referenced in these tutorials.
Once you have a working PHP development environment, the next stage is to define a Dreamweaver site where you'll create the CMS and build the dynamic page to display the articles stored in the database. In practice, it's best to store the site files inside the web server's document root, because the server needs to process them.
The location of the web server's document root depends on your operating system and how you installed your PHP development environment.
The files for the Check Magazine site that were used in the Creating your first website tutorial series have been modified slightly to prepare them for this tutorial.
Before you can start work, you need to tell Dreamweaver where to find the files and define the testing server.
Note: The site setup process changed in Dreamweaver CS5. If you want to follow this tutorial series in an earlier version of Dreamweaver, adapt the instructions for defining a PHP site and testing server in the first dynamic website tutorial written for Dreamweaver CS4, using check_php instead of Feedback.
Click the plus icon at the bottom left of the panel to add a new server (see Figure 5).
This changes the options in the panel.
http://localhost/check_php/. This tells Dreamweaver that your site is inside the server's document root in a subfolder called check_php.
http://localhost/ is the URL of your local testing server.
Note: If you are using MAMP on Mac OS X, and decided to use the MAMP default ports, change the value of Web URL to
http://localhost:8888/check_php/. Adding :8888 is necessary only if you're not using the Apache and MySQL defaults.
Deselect the Remote check box, and select Testing instead (see Figure 9). This is very important.
Note: In earlier versions of Dreamweaver, you need to use Preview in Browser to navigate between pages.
Note that both web pages in the Check Magazine PHP site have .php filename extensions. This tells the web server to process the pages through the PHP engine before sending the response to the browser. At the moment, neither page contains any PHP code. The only differences from the files used in the earlier tutorial series are in the navigation menu. The FEATURES link points to index.php, and the NEWS link points to news.php. Also, the menu in news.php is now active. In the previous tutorial series, it was just an image.
You'll start working on the PHP pages in Part 2 of this tutorial series. Before that, you need to set up the database for this project.
To connect to MySQL, web pages need a username and password—in other words, a MySQL user account. A new installation of MySQL has just one user account, the superuser called root. This is the administrative account for creating, defining, and deleting databases; but it should never be used for a website. The user account for a website should have more restricted privileges, and usually has access to only one database.
When developing a database-driven website to deploy on the internet, you should normally use the same database name, username, and password in your local testing environment as allocated by your hosting company or administrator of your remote server. For this tutorial series, though, create a database called php_test and a MySQL user account called phptestuser, following the instructions in Creating a MySQL database and user account. Return to this page after creating the user account. Do not continue with the section about creating a MySQL connection in Dreamweaver.
A database stores data in table rows and columns in a similar way to a spreadsheet. However, you need to specify in advance what type of data will be stored in each column. It's also common to store related data in multiple tables, but this CMS stores blog posts in a single table with columns for the title, content, and date of each post. You also need a column to store a unique identifier–known as a primary key–for each record.
Note: phpMyAdmin refers to database columns as "fields". Although the words are often used interchangeably, a field is the table cell that stores one piece of information for a single record, whereas a column contains the same field for all records. So, in a table with four columns, each row (or record) has four fields.
auto_increment, which automatically increases the number by 1 each time a record is added.
The TEXT data type allows you to enter 65,535 characters, more than enough for even the most long-winded blog post!
Note: On some versions of phpMyAdmin, the Attributes pop-up menu doesn't have the "on update CURRENT_TIMESTAMP" option. In this case, set the Default pop-up menu to None, and leave the Attributes pop-up menu blank.
This creates a column that stores the current date and time when a record is first created. The date and time are automatically updated when the record is changed.
To edit the table, select the check box(es) alongside the column name(s) that need changing, and click the pencil icon to reopen the table definition matrix. If you select three or less, the matrix is displayed vertically instead of horizontally, which is easier to edit.
Note: Collation determines the sort order of text columns. MySQL was originally developed in Sweden, which is why the default value is
latin1_swedish_ci. English and Swedish use the same sort order. Collation is concerned solely with sort order. It has no effect on encoding.
Creating a CMS always involves at least four pages: one each for inserting, updating, and deleting records, plus another to list existing records. It's also a good idea to create a menu page, so you can navigate between the different parts of the CMS.
Since all pages except the delete script need to link to the admin menu, create it first.
Alternatively. select Create > New to open the New Document dialog box. Select Blank Page, set Page Type to PHP and Layout to <none>, and click Create.
This opens the Attach External Style Sheet dialog box.
Save index.php. You'll add the other links later.
Dreamweaver has a wizard that creates an insert form and adds the Insert Record server behavior in a single operation. However, if you make a mistake or change your mind about the form layout, you need to delete everything and start again from scratch. Creating your own forms, and applying the Insert Record server behavior is more flexible.
Note: Dreamweaver handles the insertion of a form and form elements differently depending on whether the focus is in Design view or Code view. These instructions assume you're working in Design view. When the focus is in Code view, Dreamweaver displays the Tag Editor, which is more complicated to use.
Use the following settings in the Input Tag Accessibility Attributes dialog box:
Click OK to insert the text area. As before, the label appears in bold on a separate line. The styles in admin.css automatically make the text area 200 pixels high and the same width as the title text field.
The update form uses the same fields as the insert form, so you can simply copy it, and make a few changes.
The delete page is never displayed onscreen, so it doesn't need any HTML added to it. Just create a blank PHP page, and save it in the admin folder as delete_post.php.
The page that manages records in the database needs a table with two rows. The first row displays labels. The second row will be wrapped in a PHP loop to display the date and title of each record with links to the update and delete pages.
Use the following settings in the Table dialog box:
Leave the other fields blank, and select Top as Header (see Figure 19)
Click OK to insert the table.
The page should look like Figure 20.
Now that all the pages have been created for the CMS, link the first and second paragraphs in the admin menu (admin/index.php) to add_post.php and manage_posts.php respectively.
Your setup is now complete. In Part 2, Developing the back end, I'll show you how to activate the pages to insert, update, and delete records in the news table of your database.