Set up a local test server in
Adobe Dreamweaver CS4
by Tommi West
These days, web developers are taking advantage of the content management systems (CMSs) available online to build database-driven sites that include functionality such as blogs, forums, web forms, and more. Integrating these types of interactive, collaborative features requires a great deal of coding in a traditional static website. However, if you install and use an existing CMS framework to build out a site, the development process becomes much easier. Once your local sandbox is set up, you can enable and configure the desired functionality based on your requirements.
In this article, I describe how to install MAMP — a free software distribution bundle — to add Apache, MySQL, and PHP to your local machine and set up a development environment. I also describe how to configure Dreamweaver and install Drupal, Joomla, and WordPress — three of the most popular CMS solutions — so you can begin developing a dynamic site locally.
Use this table of contents to jump to the corresponding topics of interest:
Note: If you are a Windows user, skip to the section titled Installing MAMP on Mac OS X and read Installing Apache, MySQL, and PHP on Windows from the Dreamweaver Developer Center tutorial series, Building a website with Web Premium CS4. Be aware that the current WAMP installer includes PHP 5.3.0. As I write this article, Joomla and Drupal are not yet compatible with PHP 5.3.0. WordPress is compatible with PHP 5.3.0, but you need to make a small edit to the php.ini file to manually set the time zone for your location.
In Drupal, the following error occurs when you run the installation wizard:
Deprecated: Function ereg() is deprecated in C:\wamp\www\drupal\includes\file.inc on line 895
If you are using WAMP, you can address this error by downloading the latest 5.2.x version of PHP. Click the WAMP icon in the system tray and choose PHP > Version > Get More. The current MAMP installer ships with PHP 5.2.10, so this issue does not affect MAMP and Mac users.
Installing MAMP on Mac OS X
MAMP is an acronym that stands for Mac, Apache, MySQL, and PHP. You can use the free version, rather than MAMP Pro (unless your project requires setup of multiple virtual servers).
- Download the most current version of the MAMP software bundle.
- Save the MAMP installer file to your desktop, and then double-click the icon to launch it. Follow the instructions to accept the license agreement, and drag the MAMP icon from the installer to your Applications folder.
- After the files have finished copying, launch MAMP from Hard Drive/Applications/MAMP/MAMP.app. If an alert box appears asking if you want to open a file you downloaded from the Internet, click Yes.
- The MAMP start page appears in your default browser, and the MAMP Interface window appears. The MAMP start page indicates that MAMP is successfully installed.
- In the MAMP interface window, ensure that both of the servers are running (indicated by the green dots to the left of the server names). If red dots are displayed, click the Start Servers button.
- In addition to installing the Apache and MySQL servers (and PHP), MAMP also installs a utility program called phpMyAdmin, which enables you to create, manage, and delete MySQL databases. To access phpMyAdmin, click the link on the MAMP start page to see it appear in a new browser window (see Figure 1).
Figure 1. The phpMyAdmin home page makes it easy to maintain your databases.
- If you are a Mac OS X user, check your system preferences and disable Web Sharing if it is currently turned on. If you are a Windows user, skip the section titled Configuring Dreamweaver CS4.
- If you are a Mac OS X user, click the Preferences button in the MAMP interface window. Select the Ports tab. In the Apache Port field, change the default setting (8888) to 80. In the MySQL Port field, change the default setting (8889) to 3306, and then click OK to save the new port settings. Note: If prompted, enter your system password in the dialog box that appears.
Now that MAMP is successfully installed, you can follow the instructions below to define a new site in Dreamweaver and install the desired CMS software. If you are not sure which CMS to use, read Review of open source content management systems from the April 2008 issue of the Edge to learn more.
Configuring Dreamweaver CS4
To connect Dreamweaver to your local web server, you need to define a new site. This process involves selecting the local root folder as well as setting the site name and testing server. To select the local root folder:
- Choose Site > Manage Sites to begin defining a site in Dreamweaver.
- The Site Definition dialog box appears (see Figure 2). Click the Advanced tab at the top, if it is not already selected, and then click the Local Info category on the left side. Then enter the site's name, and click the folder icon to select the local root folder.
Figure 2. The Site Definition dialog box.
- On Mac OS X, navigate to Hard Drive/Applications/MAMP/htdocs/. On Windows, navigate to C:\wamp\www\. In the Choose Local Root Folder dialog box, click the New Folder button in the bottom left corner. Name the folder local_folder, using all lowercase characters and no spaces or special characters.
The new folder you just created is your local root folder—the directory that will contain all the site files and assets for your website. Once the CMS is installed, you can select a subfolder within your local installation of the CMS software as the local root of your site.
Later, when the site is ready to be deployed, you'll use the Files panel in Dreamweaver to upload the contents of your local root folder to your hosting server via FTP. When you have the login information, you'll use the Remote Info category to add the username and password to access your hosting account.
Make sure to save all of your site files inside your local root folder to ensure that the files retain the same relationship to each other; the folder structure on the live server must exactly match the structure of the site root folder on your hard drive. Also, use descriptive names for any folders that contain source files (such as Photoshop comps, Flash authoring files, and so forth) so you'll remember not to upload those files when you upload (put) the rest of your site files.
To set the site name and testing server:
- Enter the full URL in the HTTP Address field of the Site Definition dialog box (for example, http://www.mysite.com) if you know the domain name you'll use when the site is launched. This step is optional, so leave the field blank if you haven't purchased a domain name yet.
- Ensure the Enable Cache option is selected.
- Select Testing Server from the left menu (see Figure 3). Choose PHP MySQL from the Server Model pull-down menu. Then choose Local/Network from the Access pull-down menu.
- In the Testing Server Folder field, enter /Applications/MAMP/htdocs/local_folder for Mac OS X or C:\wamp\www\local_folder for Windows.
- In the URL Prefix field, enter http://localhost/local_folder. Click OK to save your new site definition.
Note: Later, you'll replace all instances of "local_folder" with the actual name of your local root folder. For example, you'll replace "local_folder" with "drupal," "joomla," or "wordpress," depending on the CMS you plan to install. You may find it easiest to edit your site definition settings once the CMS software is installed. Then you can browse and select the appropriate folder located inside the MAMP/htdocs folder (Mac) or the wamp/www folder (Windows). At that point, you may choose to reset your local root folder as well to point to a subfolder in the installed CMS folder.
Figure 3. Setting up the testing server.
- Click Done to close the Manage Sites dialog box. The Files panel updates to display the local root folder that will contain your site files.
Note: When you begin development and choose File > Preview In Browser, click Yes if you see the additional dialog box that asks if you want to update the files on the testing server. This message may appear in addition to the prompt asking if you'd like to put the dependent files, depending on your Dreamweaver preference settings.
- Download the most recent version of Drupal. (As I'm writing this article, the current version is Drupal 6.14.) Decompress the installer and save the Drupal folder in Hard Drive/Applications/MAMP/htdocs/drupal-6.14 for Mac OS X or C:\wamp\www\drupal-6.14 for Windows.
- Rename the drupal-6.14 folder something like drupal. (The rest of these steps assume that the drupal-6.14 folder was renamed drupal, but you can rename the folder as desired.)
- Use phpMyAdmin to create a MySQL database. Name the database something descriptive, such as drupal6 (to include Drupal's major version number for future reference). In the MAMP Interface window, click Open Start Page. When the MAMP start page loads, click the second link from the top to visit the phpMyAdmin home page.
- In the Create New Database field, enter the name of your database. (The rest of these steps assume that the database is named drupal6.) Click Create.
- Use Dreamweaver to open the file Hard Drive/Applications/MAMP/htdocs/drupal/sites/default/default.settings.php for Mac OS X or C:\wamp\www\drupal\sites\default\default.settings.php for Windows.
- Choose File > Save As and name the copy settings.php. Place the new version in the same folder (drupal/sites/default/) next to the original default.settings.php file. Close both files.
- Use a text editor, such as TextEdit, to open the file located at Hard Drive/Applications/MAMP/htdocs/drupal/conf/php5/php.ini for Mac OS X or C:\wamp\www\drupal\conf\php5\php.ini for Windows.
- Choose Edit > Find to locate the term "memory" in the php.ini file. Locate the line of code that says,
memory_limit = 8M.
- Edit the page by replacing the "8" in 8M with "16" to increase the memory limit from 8 MB to 16 MB. Save the file, and then close it.
Note: It is a best practice to increase the memory because otherwise Drupal will display out-of-memory error messages; the default memory settings in MAMP are not sufficient to run Drupal properly.
- In the MAMP interface, click the Stop Servers button and then click the Start Servers button to restart the MAMP servers (see Figure 4). You may be prompted to enter your system password.
Figure 4. Click the Stop Servers button, and then click it again to Start Servers.
- Using the Firefox browser, enter http://localhost/drupal/install.php.
Note: If you renamed the drupal-6.14 folder something other than drupal, adjust the link above accordingly. Don't include MAMP in the URL. Because you previously reset the Apache server port to 80, you don't want to use the default URL http://localhost:8888/drupal/install.php to access Drupal. You could include the updated port number in the URL, such as http://localhost:80/drupal/install.php. However, that's not necessary because this link redirects to the URL shown in step 13 automatically.
- The Drupal installation page appears. Click the link to install Drupal in English.
- The Database Configuration screen appears, prompting you to enter the name of the MySQL database you created (see Figure 5). Leave the Database Type set to mysqli. Enter drupal6 as the Database Name, root as the Database Username, and root as the Database Password (for Mac OS X users only). If you are a Windows user, leave the Database Password field blank.
- Click Save and continue. If warning messages appear about the mail server, ignore them.
Figure 5. The Drupal Database Configuration window.
- The Configure Site screen appears (see Figure 6). Follow the remaining prompts onscreen to begin entering the site information. In the Site Name field, type the same site name you entered in Dreamweaver. Enter your e-mail address in the Site E-mail Address field.
- In the Administrator account section, enter your desired username, e-mail address, and password. Be sure to record this information so you can easily access it in the future to ensure you don't accidentally lock yourself out of the site as the admin user.
Figure 6. Configure your Drupal site and administrator information.
- Scroll down to the Server Settings section, and select the time zone that matches your location. Leave all the other default settings and click Save and continue.
- The Finished screen appears, indicating that the Drupal installation is complete. Click the link to visit your new site.
Now that Drupal is successfully installed, you can start enabling and configuring the desired modules. Read the Drupal Handbooks to get up-to-date information about using modules, applying themes, and more. Be sure to visit the Getting Started section to get up to speed quickly.
Note: To learn more about administering Drupal, be sure to read the INSTALL.txt file that is located inside the /drupal/htdocs folder.
Tip: If you like working with the command-line for Drupal development, try using Drush, a tool that greatly simplifies the process of downloading, enabling, and disabling modules. For example, you can use a single command (drush update) to update all your modules at once.
- After installing MAMP, download Joomla. (As I write this article, the current version is Joomla 1.5.14.)
- Decompress the Joomla installer. Rename the folder (which is currently named Joomla_1.5.14-Stable-Full_Package) to joomla, and then place the joomla folder in Hard Drive/Applications/MAMP/htdocs/joomla for Mac OS X or C:\wamp\www\joomla for Windows.
- Using the Firefox browser, enter http://localhost/joomla in the Address field.
- The Joomla installation wizard appears. Select your preferred language and click Next. English is selected by default.
- The Pre-installation Check screen appears, confirming that your system meets the necessary system requirements; the list in the top right section should display a green Yes next to each item. Click Next.
- On the License screen, read the license information and then click Next for the Database Configuration screen (see Figure 7). Leave the Database Type set to the default (MySQL) and then enter localhost as the Host Name, root as the Username, root as the Password (for Mac OS X users), and joomla as the Database Name. (Note: If you are a Windows user, leave the password field blank.) Save a copy of your admin password so you can easily access it in the future.
Figure 7. The Joomla Database Configuration screen.
- The FTP Configuration screen appears. Under Basic Settings, leave the default FTP setting (No). Click Next.
- The Main Configuration screen appears (see Figure 8). Enter your desired site name, your e-mail address, and your desired admin password as directed.
Figure 8. The Joomla Main Configuration screen.
- Ensure that the Install Default Sample Data option is enabled, but don't click the Install Sample Data button. Click Next.
- The Finish screen appears, confirming that Joomla is now installed.
- For security purposes, be sure to delete the Installation directory located at Hard Drive/Applications/MAMP/htdocs/joomla/installation for Mac OS X users and C:\wamp\www\joomla\installation for Windows users. Control-click the Installation folder and choose Move To Trash.
- To begin administering your new Joomla site, use Firefox to visit http://localhost/joomla/administrator. Enter admin as the username, and enter your password to log into your new site.
- After making changes, click the Preview link to see how your website will appear to site visitors
To learn more about building your Joomla site, see the Joomla documentation. Specifically, check out the section titled Absolute Beginner's Guide to Joomla to get started.
- After installing MAMP, download the WordPress installer from WordPress. As I write this article, the current version is WordPress 2.8.4. Mac OS X users should download the .tar.gz version, while Windows users should download the ZIP version.
- Decompress the installer, and copy the wordpress folder to Hard Drive/Applications/MAMP/htdocs/wordpress for Mac OS X or C:\wamp\www\wordpress for Windows.
- Create a MySQL database for WordPress named wordpress2. In the MAMP interface window, click Open Start Page. When the MAMP start page loads, click the second link from the top to visit the phpMyAdmin home page.
- In the Create New Database field, enter the name of your database. Since you're installing WordPress version 2, it is a good idea to include the major version number for future reference in the database name. The rest of these steps assume that your database is named wordpress2. Click Create.
- Use Dreamweaver to open the wp-config-sample.php file, which is located inside the wordpress folder. Choose File > Save As and rename the file wp-config.php (in the same directory as the original).
- Edit the new wp-config.php file in Dreamweaver. Locate the text string "putyourdbnamehere" and replace it with your database information. (Be sure not to delete the single quotation marks surrounding the placeholder text.) Then replace the text string "usernamehere" with "root." If you are a Mac OS X user, replace the text string "yourpasswordhere" with "root." If you are a Windows user, delete the text string "yourpasswordhere" and leave a single space between the single quotes. Save the wp-config.php file and close the file. Also close wp-config-sample.php.
- Use Firefox to run the WordPress installation script by entering the URL http://localhost/wordpress/wp-admin/install.php in the address field.
- The WordPress page appears. Enter your desired blog title (your site name) and your e-mail address, and then click Install WordPress.
- The Success screen appears, confirming that WordPress is now successfully installed. Copy the randomly generated password, and then click Log In.
- The Log In page appears. Enter the username (admin) and the password that was provided in Step 9, and then click Log In.
- The Dashboard appears. At the top, an alert asks if you would like to reset your password. Click the link that says: Yes, Take Me To My Profile Page.
- On your Profile page, enter a new password, and then retype it for confirmation. Enter any other profile information you like and then click Update Profile (see Figure 9).
Figure 9. Update your profile information.
- Click the Posts link to edit and manage the existing posts; one sample post is provided that you can edit or delete (see Figure 10).
Figure 10. Edit or delete the Hello World sample post.
- Click the Dashboard button to return to the main administrative page and begin creating content using the QuickPress form. Write your post and then click Publish (see Figure 11).
Figure 11. Enter the content for your first post and click Publish.
- Click the Visit Site button to view the home page of your new WordPress site.
Now that you've installed WordPress, you can begin building your site. To learn more about working with WordPress, visit the WordPress codex to see the online documentation. Be sure to read the section titled New to WordPress – Where to start.
I hope this information is helpful as you set up your own local development environment. Once you've finalized the local version, FTP the entire site root folder to a hosted server to launch the site. Always create incremental backups of your site files and take snapshots of your database. Archive your data on a separate backup drive, in case something goes terribly wrong and you have to restore the data on your live site. Remember the web developer's maxim: If your data doesn't exist in at least three places, it doesn't exist at all.
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.