The most common way to indicate the path to a resource on the same site is with links that
are relative to the document. For example, if index.php, contains a link to journey1.php,
the code looks like this:
Read more
And a link back to index.php inside journey1.php looks like this:
Back to main page
Similarly, if index.php contains the image called fountains.jpg, the
this (I have omitted all attributes other than src, because that’s the only one we’re interested
in at the moment):
A reference to the same image in journey1.php, however, looks like this:
The ../ before index.php and the images folder name tells the web server that it needs
to look one level higher in the website hierarchy to find the correct folder. If you change
the structure of the website using the Files panel, Dreamweaver automatically updates all
links, adding or removing the requisite number of ../ to ensure that everything works as
intended.
Root-relative links
An alternative way of indicating the path to a resource on the same site is to make the
links relative to the site root, rather than the document. With root-relative links, the two
links look like this:
Back to main page
The
Figure 4-1.
A simple website structure displayed in
the Dreamweaver Files panel
SETTING UP A PHP SITE
105
4
The difference is that the pathname always begins with a leading forward slash, which indicates
the top level of the site—in other words, the site root.
Why does this matter? After all, both achieve the same thing. When building static sites
with .html pages, it doesn’t make any difference which you choose. However, root-relative
links can be extremely useful with PHP. The advantage is that the link to the image is identical
in index.php and journey1.php, even though the pages are at different levels of the
site hierarchy. This means that you can put some of your code, such as a navigation menu,
in an external file and the links will always work. As you’ll see in Chapter 12, the menu can
be included in multiple pages using a simple PHP command, and changes to the external
file are automatically propagated to all of them—a great time saver.
Because root-relative links are so useful, you may think that they’re the best choice for a
PHP site. Unfortunately, life is not quite so simple. Although root-relative links are essential
inside external files, PHP expects the include command to use a document-relative
link. Moreover, Dreamweaver uses code that fails on IIS if you select root-relative links as
the default for your site. I’ll show you how to get around these problems at the appropriate
points later in the book.
First, let’s look at the alternative ways of organizing your files.
Keeping everything together in the server root
The server root is a directory or folder where the web server expects to find all public files.
The simplest way of organizing a test environment is to create a subfolder for each site
inside the server root. You can then test the site in a browser by adding the subfolder’s
name after http://localhost/. So, a site in a subfolder called egdwcs3 is accessed by the
address http://localhost/egdwcs3/.
Putting everything in the server root has the advantage that the web server automatically
recognizes any new subfolders inside the server root, eliminating the need for any further
setup.
There are, however, two significant disadvantages:
All files need to be in the same parent folder, so if your web files are in different
parts of your system, you need to move them before working with PHP.
Because each site is in a subfolder of the server root, you cannot test pages locally
if they use root-relative links.
One way round this is to create your site in the server root, but this restricts you to only
one site. A better solution—although only if you’re using Apache as your local testing
server—is to use virtual hosts.
Working with virtual hosts
Without getting into technical details, the web server treats a site in a virtual host as
though it’s in a dedicated server root of its own, even though everything is outside the
main server root. You can emulate this setup on your development computer so that
instead of http://localhost/egdwcs3/, the address becomes simply http://egdwcs3/.
This has two main advantages:
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
106
It doesn’t matter whether your web files are scattered in different parts of your system—
as long as each individual site is inside a single parent folder.
Because a virtual host is treated as a dedicated server root, there is no problem
with testing links relative to the site root.
There are no prizes for spotting that the advantages of virtual hosts overcome the disadvantages
of keeping everything in the server root. So why don’t I just tell you to create
virtual hosts? Three reasons:
Virtual hosts are slightly more complicated to set up. Each new one needs to be
added to the web server’s main configuration.
To support virtual hosts with IIS, you must be running a server version of Windows.
The version of IIS that runs on Windows XP or Vista supports only virtual directories,
which are not the same as virtual hosts.
Even if you never put anything in the server root, you still need one.
Don’t worry if you’re not sure which to choose. Using the server root is simpler, faster, and
adequate for most local development.
Finding the server root
On Windows, Apache 2.2 creates the server root at the following location:
C:\Program Files\Apache Software Foundation\Apache2.2\htdocs
I don’t think it’s a good idea to store your web files in among all your program files, so I
suggest that you move the Apache server root on Windows to a different location, as
described in the next section.
The IIS server root is located at
C:\Inetpub\wwwroot
On Mac OS X, you have two choices of server root. The main one is located at
Macintosh HD:Library:WebServer:Documents
Every user account on a Mac also has its own dedicated server root at
Macintosh HD:Users:username:Sites
Any site within this folder can be viewed in a browser using the address http://
localhost/~username/ followed by the name of the site’s subfolder, where username is
the name of your home folder. The address for the main server root is simply http://
localhost/, so it is probably the most convenient to use unless you share the computer
with others and want to keep things separate.
Moving the Apache server root on Windows
To avoid clogging up C:\Program Files with unrelated files, it’s a good idea to move the
Apache server root on Windows. All it involves is creating a new folder and a couple of
simple edits to the main Apache configuration file, httpd.conf. I normally create a folder
SETTING UP A PHP SITE
107
4
called htdocs at the top level of my C drive, but if you have another hard disk, it’s a good
idea to use a drive other than C, as—among other things—it makes it easier to recover
your files in case of a hard drive failure. The name of the folder is unimportant. I use
htdocs because that’s the traditional name for an Apache server root.
After you have created the new folder, open C:\Program Files\Apache Software
Foundation\Apache2.2\conf\httpd.conf in Notepad or a text editor and locate the following
section:
Change the pathname shown on line 149 of the preceding screenshot to the same as your
new folder (use the line numbers simply as a guide. They are not part of the file and may
be different in a later version of Apache). In my case, I change it to this:
DocumentRoot "C:/htdocs"
Scroll down about 30 lines until you find this section:
The instruction shown on line 175 is pretty straightforward: change the pathname to
match the previous change. In my case, I end up with this:
That’s all you need to do. While you have httpd.conf open, though, it’s a good idea to add
a default PHP page to your Apache configuration.
Setting a default file for Apache on Windows
With httpd.conf still open, scroll down to the following section:
Make sure that you use forward slashes in the pathname, instead of using
the Windows convention of backward slashes.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
108
This setting tells web servers what to display by default if a URL doesn’t end with a file name
but contains only a folder name or the domain name (for instance, www.friendsofed.
com). Apache will choose the first available page from a space-separated list. Add a space
followed by index.php at the end of the command shown on line 212 of the preceding
screenshot like this:
DirectoryIndex index.html index.php
If you want to create one or more virtual hosts, leave httpd.conf open, and skip to
“Creating virtual hosts on Apache.” Otherwise, save httpd.conf, and restart Apache for
the changes to take effect.
Adding a default PHP file to IIS
Since you’ll be working with PHP, it’s useful to add index.php to the list of default documents
that IIS serves up whenever you enter a URL in the browser address bar that doesn’t
include a file name (such as www.friendsofed.com). The following instructions explain
how to do it.
1. Open the Internet Information Services panel (Start ä Control Panel ä Administrative
Tools ä Internet Information Services), and expand the tree menu in the left pane.
Select Default Web Site.
2. In Windows XP, right-click, and choose Properties from the context menu. Then
select the Documents tab of the Default Web Site Properties dialog box, and click
Add. In the dialog box that opens, type index.php in the Default Document Name
field, and click OK. Use the up and down arrows to move index.php to the position
you want in the list, as shown in the following screenshot. If there are any default
documents listed that you never intend to use, highlight them, and click Remove.
Make sure that Enable Default Document is checked, and click OK.
SETTING UP A PHP SITE
109
4
In Windows Vista, double-click Default Document in the IIS section of Default Web
Site Home, as shown in the following screenshot:
Add index.php to the comma-separated list in the File name(s) field. Remove any
document types that you have no intention of using, and click Apply in the Actions
panel at the top right of the Internet Information Services (IIS) Manager.
3. Before your changes can take effect, you need to restart the web server. In
Windows XP, with Default Web Server still highlighted in the Internet Information
Services panel, click the Stop Item button (a black square) in the toolbar. After the
web server stops, click the Start Item button (a right-facing arrow). In Windows
Vista, return to the Default Web Site Home screen, and click Restart under Manage
Web Site in the Actions panel (at the top right of the preceding screenshot).
Creating virtual hosts on Apache
This section is entirely optional. If you don’t want to set up virtual hosts, skip ahead to the
section “Defining a PHP site in Dreamweaver.” You can come back and set up virtual hosts
at any time.
Apache allows you to create as many virtual hosts as you want. It’s a two-stage process.
First, you tell the operating system the names of the virtual hosts, and then you tell
Apache where the files will be located. There are separate instructions for Windows and
Mac OS X.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
110
Registering virtual hosts on Windows
Although you can locate your virtual hosts anywhere on your hard drive system, it’s a good
idea to keep them in a single top-level folder, as this makes it easier to set the correct permissions
in Apache. The following instructions assume that all your virtual hosts are kept
in a folder called C:\vhosts and show you how to create a virtual host called egdwcs3
within that folder.
1. Create a folder called C:\vhosts and a subfolder inside it called egdwcs3.
2. Open C:\WINDOWS\system32\drivers\etc\hosts in Notepad or a script editor. It’s
normally a very short file. Look for the following line at the bottom:
127.0.0.1 localhost
127.0.0.1 is the IP address that every computer uses to refer to itself.
3. On a separate line, enter 127.0.0.1, followed by some space and the name of the
virtual host. For instance, to set up a virtual host for this book, enter the following:
127.0.0.1 egdwcs3
4. If you want to register any further virtual hosts, add each one on a separate line,
and point to the same IP address. Save the hosts file, and close it.
The remaining steps involve editing two Apache configuration files. On Windows XP, you
don’t need to take any special steps. Just edit them in Notepad or a text editor.
If you are using Vista and User Access Control (UAC) is still turned off from the previous
chapter, you can edit these files in the normal way. If you want to add additional virtual
hosts after turning UAC back on, run Notepad as administrator as described in step 2.
5. Open C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.
conf in a text editor, scroll down to the Supplemental configuration section at the
end, and locate the following section:
6. Apache uses the hash or pound sign (#) to indicate comments in its configuration
files. Uncomment the command shown on line 463 in the preceding screenshot by
removing the #, like this:
Include conf/extra/httpd-vhosts.conf
This tells Apache to include the virtual host configuration file, which you must now
edit. Save httpd.conf, and close it.
In Vista, you need to open Notepad using the Run as administrator option.
Otherwise, you won’t be able to save the file. From the Windows Start menu,
right-click Notepad (it’s in the Accessories folder), and select Run as administrator
from the context menu. Click Continue when prompted. In Notepad,
choose File ä Open, and set the drop-down menu alongside File name to All Files
(*.*). Navigate to the hosts file and click Open.
SETTING UP A PHP SITE
111
4
7. Open C:\Program Files\Apache Software Foundation\Apache2.2\conf\extra\
httpd-vhosts.conf in Notepad or a text editor. The main part of the file looks like
this:
8. Position your cursor in the blank space shown on line 15 in the preceding screenshot,
and insert the following four lines of code:
Order Deny,Allow
Allow from all
This sets the correct permissions for the folder that contains the sites you want to
treat as virtual hosts. If you chose a location other than C:\vhosts as the top-level
folder, replace the pathname in the first line. Remember to use forward slashes in
place of backward slashes. Also surround the pathname in quotes if it contains any
spaces.
9. Lines 27–42 in the preceding screenshot are examples of virtual host definitions.
They show all the commands that can be used, but only DocumentRoot and
ServerName are required. When you enable virtual hosting, Apache disables the
main server root, so the first definition needs to reproduce the original server root.
You then add each new virtual host within a pair of
location of the site’s web files as the value for DocumentRoot and the name of the
virtual host for ServerName. If the path contains any spaces, enclose the whole path
in quotes. If your server root is located, like mine, at C:\htdocs, and you are
adding egdwcs3 as a virtual host in C:\vhosts, change the code shown on lines
27–42 so they look like this:
DocumentRoot c:/htdocs
ServerName localhost
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
112
DocumentRoot c:/vhosts/egdwcs3
ServerName egdwcs3
10. Save httpd-vhosts.conf, and restart Apache. All sites in the server root will continue
to be accessible through http://localhost/sitename/. Anything in a virtual
host will be accessible through a direct address, such as http://egdwcs3/.
Registering virtual hosts on Mac OS X
This is a two-stage process. First, you register the names of any new hosts in NetInfo Manager,
and then you add the details of where to find them to the Apache configuration file.
1. Create a new folder on your hard disk to house your virtual hosts. I created a folder
called vhosts in my home folder.
2. Open NetInfo Manager, which is in the Utilities subfolder of Applications.
3. Click the lock at the bottom left of the dialog box that opens, and enter your
administrator’s password when prompted.
4. Select machines, then localhost, and click the Duplicate icon. When prompted, confirm
that you want to make a copy.
5. Highlight the copy, and double-click the name in the lower pane, as shown in the
following screenshot.
SETTING UP A PHP SITE
113
4
6. Change localhost copy to whatever you want to call the virtual host. For example, to
create a virtual host for this book, enter egdwcs3.
7. Click any of the other entries in the left column of the top pane. The operating system
will ask you twice if you really want to make the changes. You do. This registers
the name of the virtual host with your computer. The next stage is to tell Apache
where to find the web files.
8. Repeat steps 4–7 for any other virtual hosts you want to create. When you have finished,
click the lock icon in the bottom-left corner of the NetInfo Manager, and
close it.
9. Open BBEdit or TextWrangler, and select File ä Open Hidden. In the Open dialog
box, select All Files from the Enable drop-down menu, and open Macintosh
HD:etc:httpd:httpd.conf.
10. Scroll almost to the bottom of httpd.conf, and locate the following section:
11. Click the pencil icon at the top left of the editor window, and confirm that you
want to unlock the document, entering your administrator password when
prompted. Uncomment the command shown on line 1076 in the screenshot by
removing the hash sign (#). This enables virtual hosting but disables the main server
root, so the first virtual host needs to reproduce the Mac’s server root. The example
(on lines 1084–90) is there to show you how to define a virtual host. The only
required commands are DocumentRoot and ServerName. After uncommenting the
NameVirtualHost command, your first definition should look like this:
NameVirtualHost *:80
DocumentRoot /Library/WebServer/Documents
ServerName localhost
12. Add any further definitions for virtual hosts. To create one for this book, I used this:
DocumentRoot /Users/davidpowers/vhosts/egdwcs3
ServerName egdwcs3
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
114
13. Save httpd.conf, and restart Apache. All sites in Macintosh HD:Library:
WebServer:Documents can still be accessed using http://localhost/ and those in
your Sites folder using http://localhost/~username/sitename/, but named virtual
hosts can be accessed directly, such as http://egdwcs3/. Of course, a site must
exist in the location you defined before you can actually use a virtual host.
Registering virtual directories on IIS
The version of IIS that runs in Windows workstations (the vast majority of personal computers)
does not support virtual hosts. Instead, it allows you to set up virtual directories.
However, localhost always remains the basic address of the web server, so you cannot use
root-relative links with virtual directories. The main advantage of using virtual directories
is that they avoid the need to locate all web files in the default IIS server root at
C:\Inetput\wwwroot. This means you can leave your sites wherever they are on your hard
disk but still get IIS to parse your PHP scripts when viewed through a browser. A virtual
directory can be anywhere, but don’t use spaces or special characters in the virtual directory
name. Also, putting virtual directories on your desktop is likely to lead to permission
problems.
To set up a virtual directory in IIS, open the Internet Information Services panel (Start ä
Control Panel ä Administrative Tools ä Internet Information Services), highlight Default Web
Server, right-click, and select New ä Virtual Directory (XP) or Add Virtual Directory (Vista). On
XP, a wizard will appear and walk you through the process. In Vista, type the name of the
virtual directory in the Alias field, and click the button alongside the Physical path field to
browse to the folder where the files are kept. If you create a virtual directory called
egdwcs3, the URL becomes http://localhost/egdwcs3/.
Defining a PHP site in Dreamweaver
Site definition is fundamental to working successfully with Dreamweaver. It allows you to
create an exact copy of your website on your development computer, update existing files
and create new ones locally, test them, and then upload them to the remote server on the
Internet. For the benefit of Dreamweaver newcomers, I will go through the whole process
step by step. Old hands should take particular notice of the sections titled “Defining the
testing server” and “Setting up for Spry.”
By this stage, you should have decided where you are going to store your local files. The
setup process is basically the same whether you test your PHP files locally or on your
remote server.
Opening the Site Definition dialog box
There are several ways to open the Site Definition dialog box. If the Dreamweaver Welcome
screen is open, you can choose Dreamweaver Site from the bottom of the Create New column.
It’s probably more convenient, though, to choose New Site from the Site menu,
because the menu is always available, even if you have web pages open in the Document
SETTING UP A PHP SITE
115
4
window. Another convenient way is to select Manage Sites from the bottom of the site list
at the top left of the Files panel.
Dreamweaver has been designed with both beginners and more advanced users in mind,
so you may see either the basic dialog box shown on the left of Figure 4-2 or the advanced
one on the right.
Figure 4-2. The Site Definition dialog box has two interfaces: Basic (left) and Advanced (right).
If you see the screen on the left of Figure 4-2, click the Advanced tab at the top left (it’s in
the center of the Mac version). Dreamweaver is good at remembering your previous
choices, so, if you use the Site menu to open the Site Definition dialog box, it will automatically
display the advanced version after the first time. Opening it from the Dreamweaver
Welcome screen always displays the basic version.
If you select Site ä Manage Sites by mistake, you will be presented with the dialog box
shown in Figure 4-3. This presents you with a list of sites that you have already defined in
Dreamweaver. The buttons on the right let you perform a variety of management functions
that are described in “Managing Dreamweaver sites” later in the chapter. To create a
new site, click the New button at the top right, and select Site from the mini menu that
appears.
Figure 4-3.
The Manage Sites dialog box lets you
create a new site or edit an existing one.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
116
Telling Dreamweaver where to find local files
The first stage of site definition involves defining the basic details of the site. Open the Site
Definition dialog box, and make sure the Advanced tab is selected. If necessary, select Local
Info from the Category column on the left. You should see the same screen as shown on
the right of Figure 4-2.
Let’s take a look at what each option means, with particular reference to defining a PHP
site for use with this book. If you plan to use a virtual host in your local development environment,
I assume that you have set up a virtual host called egdwcs3 in C:\vhosts\
egdwcs3 on Windows or in a folder called vhosts inside your home folder on a Mac.
Site name This identifies the site within Dreamweaver. The name appears in the dropdown
menu at the top of the Files panel (Figure 4-1) and in the Manage Sites dialog box
(Figure 4-3), so it needs to be reasonably short. It’s used only within Dreamweaver, so
spaces are OK. I used Essential Guide.
Local root folder This is the top-level folder of the site. Everything should be stored in this
folder in exactly the same hierarchy as you want to appear on the live website. When testing
a PHP site locally, this folder should either be inside your server root, a virtual host, or
a virtual directory (IIS only). Click the folder icon to the right of the Local root folder field
and navigate to the appropriate location on your hard disk. If the folder doesn’t exist, navigate
to your server root or virtual host’s top-level folder, and click Create New Folder in
the Choose local root folder dialog box. Depending on your setup, your local root folder for
this book should be one of the following:
Server root on Windows: C:\htdocs\egdwcs3\
Virtual host on Windows: C:\vhosts\egdwcs3\
Main server root on Mac OS X: Macintosh HD:Library:WebServer:Documents:
egdwcs3:
Server root inside your home folder on Mac OS X: Macintosh HD:Users:username:
Sites:egdwcs3:
Virtual host on Mac OS X: Macintosh HD:Users:username:vhosts:egdwcs3:
If you plan to use a remote server or an IIS virtual directory to test your files, the local root
folder can be anywhere on your local computer.
Default images folder This field is optional but is very useful if you plan to use images that
are on other parts of your file system or even in other Dreamweaver sites. Whenever you
insert an image in a web page, Dreamweaver automatically copies it to this folder and creates
the correct link in the
to the right of the Default images folder field, navigate to the local root folder that you
selected for the previous option, and select the images folder. If the folder doesn’t exist,
click the Create New Folder button to create it.
With large sites, it’s sometimes convenient to create a site definition in Dreamweaver
for just part of the site. If the local root folder is already in another defined site,
Dreamweaver warns you that some functions, such as site synchronization, won’t
work. However, it won’t prevent you from creating the subsite.
SETTING UP A PHP SITE
117
4
Links relative to This option lets you select the default style of links used in the site (see
“Understanding document- and root-relative links” earlier in the chapter). Unless your
testing server and remote server both run on Apache, I strongly advise you to accept the
default Document. When you select root-relative links as the site default, Dreamweaver
attempts to connect to your database using code that works only on Apache. Although
you can amend the code manually, it’s easier to use document-relative links throughout
the site, and switch to root-relative ones only when necessary.
HTTP address This field should contain the URL of the final site on the Internet. If you are
using the site only for local testing, you can leave this field empty. If you have selected
root-relative links, Dreamweaver will display the following warning:
You can safely ignore this warning for local testing, and click OK. However, it is important
to get the URL correct for remote testing or a site that you plan to deploy on the Internet.
Case-sensitive links I recommend that you select this option since the vast majority of PHP
websites are hosted on Linux servers, which treat products.php and Products.php as
completely different file names. Even if your remote server runs on Windows, selecting
this option maintains internal integrity of your file structure.
Cache As the Site Definition dialog box explains, this speeds up various aspects of site management
in Dreamweaver. Very large sites (with several hundred pages) tend to slow down
dramatically if the site cache is enabled. However, with a PHP site, you should draw content
from a database into a dynamically generated page, rather than create a new page
every time. I suggest that you leave this option selected, and disable it only if you run into
performance problems.
After you have completed the Local Info category, select Remote Info from the Category list
on the left of the Site Definition dialog box.
If in doubt, select Document. You can always change this option later or override the
site default for individual links. If you change the site default later, it affects only links
created afterward. Dreamweaver gives you the freedom to mix different types of links
in the same site and will not override existing code. The implications of this choice
with relation to PHP includes and connection to MySQL are discussed in Chapters 12
and 14, respectively.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
118
Telling Dreamweaver how to access your remote server
When you first open the Remote Info category, you’re presented with a single drop-down
menu labeled Access. It has six options, as shown in the following screenshot (the final
option—Microsoft Visual SourceSafe—is not available in the Mac version).
First, let’s take a look at the Access options:
None: Choose this if you don’t plan to deploy the site on the Internet, or if you
don’t want to set up your remote server immediately. If you choose this option,
you can skip ahead to the “Defining the testing server” section.
FTP: This is the most common choice. It sets up Dreamweaver’s built-in FTP (File
Transfer Protocol) program to communicate with your remote server.
Local/Network: This allows you to deploy your live website to another folder on
your local computer or network. This is normally done only by organizations that
run their own live web servers.
WebDAV: This uses the WebDAV (Web-based Distributed Authoring and Versioning)
protocol to communicate with the remote server. It requires a remote server that
supports the WebDAV protocol.
RDS: This uses Remote Development Services, which is supported only by ColdFusion
servers. You cannot use it with a PHP site.
Microsoft Visual SourceSafe: This requires access to a Microsoft Visual SourceSafe
database and is not appropriate for the Dreamweaver PHP MySQL server model.
Since FTP is the most common method of connecting to a remote server, that’s the only
one I’ll describe. Click the Help button at the bottom of the Remote Info category of the
Site Definition dialog box for detailed descriptions of the options for the other methods.
When you select the FTP option from the Access drop-down menu, the Remote Info category
of the Site Definition dialog box presents you with the options shown in Figure 4-4.
Most of them are very straightforward, but I’ll describe each one briefly.
SETTING UP A PHP SITE
119
4
Figure 4-4. The FTP options for the Remote Info category of the Site Definition
dialog box
FTP host Enter your remote server’s FTP address in this field. You should normally get this
from your hosting company. It usually takes either of the following forms: ftp.example.
com or www.example.com.
Host directory This is the pathname of the top level of your website. The important thing
to realize is that the directory (folder) that you enter in this field should contain only those
files that will be accessible to the public through your site’s URL. Often it will be named
htdocs, public_html, or www. If in doubt, ask your hosting company or server administrator.
Login This is the username given to you by your hosting company or server administrator.
Password Enter your remote server password in this field. Dreamweaver displays your
password as a series of dots. It also automatically saves your password, so deselect the
Save checkbox if you want to be prompted for the password each time you connect to the
remote server. Click the Test button to make sure that Dreamweaver can connect successfully.
If the test fails, make sure Caps Lock isn’t turned on, as passwords are normally case
sensitive. Other reasons for failure include being behind a firewall, so check the remaining
options before trying again.
Use passive FTP Try this option if a software firewall prevents you from connecting to the
remote server. For more details, see www.adobe.com/go/15220.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
120
Use IPv6 transfer mode This option is designed to prepare Dreamweaver for the future.
Select this option only if you have been told that your remote FTP server uses Internet
Protocol version 6 (IPv6).
Use firewall Select this option if you are behind a firewall. Then click the Firewall Settings
button to open the Site Preferences dialog box. Enter the firewall host and firewall port (if
it’s different from 21) in the appropriate fields, and click OK to return to the Site Definition
dialog box.
Use Secure FTP (SFTP) Select this option if your remote server supports Secure FTP, which
gives you a more secure connection but is not supported by all servers. Selecting this
option automatically disables these other options: Use passive FTP, Use IPv6 transfer mode,
Use firewall, Firewall Settings, and Server Compatibility.
Server Compatibility Click this button if you are still having problems connecting through
FTP. The two options in the dialog box that opens are self-explanatory.
Maintain synchronization information This is selected by default and enables you to synchronize
your remote and local files through the Files panel.
Automatically upload files to server on save This is self-explanatory. I don’t recommend its
use, because you should always test files locally before uploading them to your remote
server. Otherwise, all your mistakes will go public. It overwrites your original files, so you
can no longer use them as backup.
Enable file check in and check out Select this option only if you are working in a team and
want to use Dreamweaver’s Check In/Check Out system. For more information, launch
Dreamweaver Help (F1) and select Check In/Check Out from the Index, or go to
www.adobe.com/go/15447. All team members must have this option enabled for it to work.
Failure to do so results in chaos.
After you have completed the Remote Info category, select Testing Server from the Category
list on the left of the Site Definition dialog box.
Defining the testing server
This is probably the most important dialog box when building dynamic sites in Dreamweaver.
It’s quite easy to fill in, but if you get the details wrong, Dreamweaver cannot communicate
with any of your databases. When you first open the Testing Server category, it looks
similar to the Remote Info category in its initial state, but with two drop-down menus
instead of one, as shown in the following screenshot.
SETTING UP A PHP SITE
121
4
Activate the Server model drop-down menu, and select PHP MySQL. What you choose for
Access depends on whether you want to test your PHP pages locally or by using your
remote server. The options are different, so I’ll cover them separately—first, local testing.
Selecting options for local testing
The Access drop-down menu determines how you communicate with the testing server. If
you have a local test environment on your computer or another computer on a LAN,
choose Local/Network. This reveals two options that Dreamweaver attempts to fill in automatically.
Figure 4-5 shows what happened when I had defined the local root folder in the
Local Info category as a virtual host on Windows.
Figure 4-5. Dreamweaver attempts to fill in the Testing Server details automatically.
Dreamweaver usually gets the value for Testing server folder correct but invariably gets URL
prefix wrong. Getting both right is crucial, so let’s take a look at what they represent.
Testing server folder This should normally be the same folder that you selected as the
Local root folder in the Local Info category. The only exception is if you want to use a testing
server elsewhere on your local network. In this case, click the folder icon to the right
of the field to browse to the correct location.
URL prefix This needs to reflect the structure that you have chosen for your testing environment.
If your testing server folder is in the server root or a virtual directory, it will be
http://localhost/sitename/. If you are using a virtual host, it will simply be http://
sitename/. If the testing server is on another computer on a local network, substitute
localhost with the correct IP address.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
122
It’s critical that URL prefix is set correctly, as it controls all dynamic aspects of
Dreamweaver. Because so many people seem to get this wrong, here are the values for
Testing server folder and URL prefix for the various scenarios described earlier:
If the site is in a subfolder of the server root of the same machine on Windows:
Testing server folder: C:\htdocs\egdwcs3\
URL prefix: http://localhost/egdwcs3/
If the site is in a virtual host called egdwcs3 on Windows:
Testing server folder: C:\vhosts\egdwcs3\
URL prefix: http://egdwcs3/
If the site is in a subfolder of the main server root of the same machine on a Mac:
Testing server folder: Macintosh HD:Library:WebServer:Documents:egdwcs3:
URL prefix: http://localhost/egdwcs3/
If the site is in a subfolder of your Sites folder of the same machine on a Mac:
Testing server folder: Macintosh HD:Users:username:Sites:egdwcs3:
URL prefix: http://localhost/~username/egdwcs3/
If the site is in a virtual host called egdwcs3 on a Mac:
Testing server folder: Macintosh HD:Users:username:vhosts:egdwcs3:
URL prefix: http://egdwcs3/
If the site is in an IIS virtual directory:
Testing server folder: Can be anywhere
URL prefix: http://localhost/egdwcs3/
In simple terms, Testing server folder and URL prefix must both point to the site’s root
folder. Testing server folder is the physical address, while URL prefix is the address you enter
in a browser.
Selecting options for remote testing
The Access drop-down menu in the Testing Server category offers fewer options than the
Remote Info category, because RDS and Microsoft SourceSafe are not appropriate for
working with the Dreamweaver PHP MySQL server model. If you decide you want to use a
remote server to test your files, the most common choice is FTP. Dreamweaver is intelligent
enough to copy across the main details from the Remote Info category and presents
you with the dialog box shown in Figure 4-6. Although most details should be correct, the
URL prefix is almost certain to need editing.
SETTING UP A PHP SITE
123
4
Figure 4-6. When you select a remote server for testing, Dreamweaver copies details from the
Remote Info category, but you normally need to change at least the URL prefix.
As you can see from Figure 4-6, Dreamweaver combines the values in the FTP host and
Home directory fields. This produces the following value for URL prefix:
http://ftp.example.com/home/egdwcs3/html_public/
It’s vital that the URL prefix and Host directory fields point to the same place. However, this
does not mean that the values should be the same. The distinction is explained in the following
sections.
Host directory This is the pathname that the FTP program uses for the top level of your
site.
URL prefix This is the address that anyone surfing the Internet uses to reach the top level
of your site. In other words, it’s normally http:// followed by the domain name and a
trailing slash.
So, if /home/egdwcs3/html_public/index.php is your home page, and users access it by
typing http://www.example.com/index.php in their browser address bar, the correct
value for URL prefix should look like this:
http://www.example.com/
One thing to note about Figure 4-6 is that, even though the Use Secure FTP (SFTP) checkbox
is selected, the three checkboxes above and the Server Compatibility button are not
grayed out as in the Remote Info category. This is a known bug in Dreamweaver CS3. Make
sure you don’t accidentally select them if you’re using SFTP. The settings should be the
same as in the Remote Info category.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
124
Points to watch when using a remote server for testing Dreamweaver tries to make everything
seamless, regardless of whether you use a local or a remote web server for testing.
However, there are several important differences that you should be aware of with a
remote testing server.
Some software firewalls prevent FTP access when running Dreamweaver as a standard
user on Windows Vista. You may need to log in as administrator or turn off
UAC to use your remote server for testing.
You miss the main benefit of Live Data view, which allows you to view dynamic output
inside the Dreamweaver Document window without the need to load your
page into a browser. This is because Dreamweaver still needs to transfer the script
across the Internet to your remote server, rather than just handle it locally.
Live Data view uses temporary files that are removed automatically when you
switch to another site in Dreamweaver or close the program. If you test a file that’s
in a new folder, Dreamweaver creates a folder with the same name on the remote
server but not the file itself.
When you preview a page in a browser, it may not display correctly if the browser
can’t find dependent files, such as images and style sheets (see “Setting options for
Preview in Browser” later in this chapter).
If you’re on dial-up and have chosen to use your remote server for testing, be
aware that Dreamweaver automatically connects to the Internet every time you use
Live Data view, and it doesn’t automatically disconnect when you toggle Live Data
view off. Unless you are careful, you could end up with very large communications
charges.
Setting up other site options
There are seven more categories in the Site Definition dialog box. Most of the time, you
should leave them at their default values. To find out what each one is for, select it in the
Category list on the left, and click the Help button at the bottom of the dialog box to
launch context-sensitive help. Perhaps the most useful category is Cloaking, which lets you
specify folders of file types that you don’t want to be uploaded to your remote server.
Since a large part of this book deals with Spry, which is new to Dreamweaver CS3, the Spry
category needs a brief description.
Setting up for Spry
Adobe’s Ajax framework, Spry, relies on code libraries that need to be uploaded to your
remote server. By default, Dreamweaver inserts these files in a folder called SpryAssets at
the top level of your site root. For most people, this is ideal. However, if you want to locate
the code libraries elsewhere, you need to specify the folder name in the Spry category of
the Site Definition dialog box. This is so that Dreamweaver can update or remove the files
when you make changes to elements that use Spry.
As you can see from Figure 4-7, there’s just one field in the Spry category. If you want to
use a different folder, click the folder icon to the right of the field labeled Spry assets
folder, and navigate to the new location or create a new folder within your site root.
SETTING UP A PHP SITE
125
4
Figure 4-7. Change the setting for the Spry assets folder if you don’t want to use
the default location.
Saving the site definition
After entering all the necessary details, click OK at the foot of the Site Definition dialog box.
This returns you to the Manage Sites dialog box (see Figure 4-3). Click Done at the bottom
left (it’s on the right in the Mac version, as shown in Figure 4-10). Dreamweaver creates
the site cache (unless you deselected that option in Local Info) and opens the site in the
Files panel ready for you to start work. If there were any files in the root folder, they will
be listed as a tree menu in the Files panel.
You can change your site definition at any time by reopening the Manage Sites dialog box
(see “Managing Dreamweaver sites” later in this chapter).
Testing your PHP site
If you have followed the instructions carefully, you should now have a PHP site within
Dreamweaver that will give you access to all the PHP server behaviors and other PHP features.
Before moving on, it’s wise to do a quick test to make sure everything’s working as
expected.
There are two ways of testing dynamic code: using Live Data view, which displays the
dynamic output inside the Dreamweaver Document window, and by previewing the page
in a browser. These instructions cover both methods.
1. In Dreamweaver, select File ä New, and in the New Document dialog box (see
Figure 1-2 in Chapter 1), select Blank Page from the options on the left side. In the
Page Type column, choose PHP (it’s the final item). For Layout, choose
the top of the column), and then click Create.
2. Save the page as datetest.php in the Essential Guide site you have just created.
If you didn’t enter a value for HTTP address in the Local Info category, you might see a
warning that the URL prefix for the testing server doesn’t match the URL prefix for the
site’s HTTP address. You can safely ignore this by clicking OK.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
126
3. Open Split view, and type the following code between the tags:
echo date('l, F jS, Y');
?>
Sure, it looks pretty cryptic, but I have never understood why so many books and
tutorials feel obliged to start by showing you how to display “Hello, world” or “Hi,
Mom!” onscreen. I want to show you the real power of PHP by demonstrating
something really useful. Make sure you copy the code exactly (the first character
after the opening quote is a lowercase “L”), or use datetest.php in examples/ch04.
The first thing you should notice is that Dreamweaver displays the opening and
closing PHP tags in a bold red font, while echo and date are pale blue. This is
Dreamweaver Syntax Coloring at work. If this doesn’t happen, check that your file
name ends with .php. Also select View ä Code View Options, and make sure that
there’s a check mark next to Syntax Coloring. If there isn’t, click Syntax Coloring to
toggle the setting on.
4. Click inside Design view, and a gold shield labeled PHP should appear, as shown in
the next screenshot. This marks the location of your PHP script.
5. Click the Live Data button, as shown in Figure 4-8 (if you’re a keyboard shortcut
fetishist, press Ctrl+Shift+R/Shift+Cmd+R). As long as your web server is running,
you should see today’s date displayed in Design view. It will be highlighted in a different
color (the default is pale yellow) to indicate that it’s dynamically generated
output. You’ll learn about the first part of the script—echo—in Chapter 10; it’s one
of the most basic commands that displays PHP output onscreen. The rather cryptic
aspects of the rest of the script will be covered in Chapter 17 when we delve into
the mysteries of working with dates in PHP.
As soon as you click the Live Data button again (or use the keyboard shortcut), the
date will disappear and be replaced by the PHP gold shield.
SETTING UP A PHP SITE
127
4
6. Now press F12 (Opt+F12 on a Mac). Depending on your settings in Preferences, you
may see the following alert (see “Setting options for Preview in Browser” below).
This warns you that Dreamweaver is about to overwrite the file on your testing
server. Since it’s only a test file, click Yes. You will then probably see this dialog box:
Click No. The significance of these two alerts is explained in “Setting options for
Preview in Browser” shortly.
Your default browser should launch and display datetest.php. The result will be
similar to that shown in Figure 4-8, except that the output won’t be highlighted in
a different color. More importantly, if you view the page’s source code in the
browser, you’ll see only XHTML. PHP is a server-side language: only the output of
the PHP code is sent to the browser; the code itself remains on the server.
Troubleshooting
This is the part of the chapter that I hope nobody ever needs to read. As I said earlier, PHP
site definition in Dreamweaver is not difficult, but a lot of people do seem to get it wrong.
Troubleshooting is basically a process of elimination: find out what is working, and it
frequently helps identify where the problem lies. If you’re banging your head on the keyboard
at this point, try the following suggestions:
Figure 4-8.
If Live Data view displays the current
date, you’re ready to start working with
PHP in Dreamweaver.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
128
The first thing to check is whether your web server is running. Try an ordinary
.html page first. If it doesn’t display, Apache or IIS needs to be restarted.
Then check that PHP is properly configured. Use test.php as described in the previous
chapter. If the page of PHP configuration information doesn’t display, go back
to Chapter 3, and fix your PHP setup.
If the web server and PHP are OK, do you get any error messages? If you got a
blank screen, check your PHP configuration as described in the previous chapter,
and make sure that display_errors is turned on.
If an error message says something like Parse error or Fatal error, the mistake is in
the PHP code. Use the version of datetest.php from the download files instead.
If you get an error message about the URL prefix not mapping correctly, the problem
lies in the details you entered in the Testing Server category of the site definition.
If the web server and PHP are OK, but you see nothing in Live Data view, check that
a software firewall, such as Norton Internet Security or ZoneAlarm, isn’t blocking
communication between Dreamweaver and the web server.
Setting options for Preview in Browser
Pressing F12/Opt+F12 or using the menu option File ä Preview in Browser automatically
launches your default browser and displays the page currently open in the Document window.
Dreamweaver normally detects your default browser the first time that you use this
option, but you can also designate other browsers by opening Preferences from the Edit
menu (Dreamweaver menu in a Mac) and selecting the Preview in Browser category (see
Figure 4-9). If Dreamweaver has detected other browsers on your system, they are listed in
the Browsers field. You can designate one of them as your secondary browser, which can
be launched using Ctrl+F12/Cmd+F12 as a shortcut.
Figure 4-9. When previewing pages, Dreamweaver gives you the option to use a
temporary file.
SETTING UP A PHP SITE
129
No comments:
Post a Comment