1 PHP Tutorial 1 Getting Started with Dynamic Web Sites Setting Up Your Computer To follow this tutorial, you ll need to have PHP, MySQL and a Web server up and running on your computer. This will be your testing server, where you can build and test your database-driven Web pages The most common approach is to run Apache (a Web server) along with PHP and MySQL, but it s also possible, if you re a Windows user, to use Microsoft s Web server, IIS. Because this can be a complicated procedure you ll find three possible installation scenarios below, ranging from the Egads, I have trouble installing Microsoft Office, and you expect me to install a Web server AND a database server type of computer user, to the Back off buddy, I was installing computer systems when you were still in diapers computer jock. Scenario 1: When You ve No Idea Where to Start The easiest way to install all of the parts of the puzzle is to download an all-in-one solution a simple click to go, one stop shop for powerful Web server software. One choice is the XAMPP project from a group called Apache Friends XAMPP is essentially an Apache Web server, PHP, MySQL database server, and a bunch of other stuff rolled up into a single package that you can install on your computer. It s not a production setup meaning you wouldn t want to use this software for really hosting a Web site. It isn t optimized for working with lots of visitors, and it has some potential security holes that could be exploited if you put XAMPP out in the wild of the Internet. However, for a testing server that completely simulates a real world Web server, XAMPP is the perfect choice. It lets you create databases, build dynamic Web pages, and view them right on your own computer making it easier for you to build and test database-driven Web sites. The steps are slightly different for Mac and Windows so they ll be explained separately: Windows 1. Download the software at: Select the Installer option under the Basic Package. At the time of this writing, a direct link to version 1.5 for Windows was: installer.exe You may be taken to a page that gives you a bunch of different places to download from. Just click one of the download buttons. Once downloaded, the installer works like most Windows installers. 2. Double click the.exe file you downloaded.
2 A window opens asking you to select the language you d like to use. 3. Choose a language from the menu and click the OK button A Setup Wizard window appears, ready to step you through the set up process. 4. Click the Next button, then click the Install button. The various files needed are loaded onto your computer. 5. Click the finish button, then when a window appears saying Install XAMPP servers as service appears make a selection. A service starts up ever time you turn on your computer. In other words, do you want the Web server and database server to startup whenever you turn on your PC? If you plan on doing a lot of development, day-in and day-out, you might want to choose Yes. Otherwise you ll find that you re starting up the XAMPP control panel (see below) and turning on the servers every time you boot up. However, if you won t be building database sites frequently, or you don t have a lot of RAM in your computer, you might want to choose No. This way you can manually turn on the servers (see The XAMPP Control Panel below) when you need to work on a dynamic site. If you select Yes you will be taken through the same question for the Apache Web Server, the MySQL database server and the FileZilla FTP server. It s best to click No for the FileZilla FTP server. You won t need it for this tutorial, and since this is just a testing server, you won t need to have the ability to FTP to the computer after all, all your files are already on your computer. 6. Finally, launch a Web browser and type in the location bar. You ll encounter a page that lists a bunch of languages; click the language you prefer and you ll be taken to a kind of control panel for XAMPP on your computer (see Figure PHP Tutorial 1-1.) Figure PHP Tutorial 1-1. Once installed, you can view your XAMPP page from Once you ve installed XAMPP, there will be a shortcut called XAMPP Control Panel on your desktop. Double-click this to control the servers you can turn the servers off and on, as well as turn them into services which launch each time you start up your computer. To uninstall XAMPP, just go to C:\Program Files\ and delete the folder named XAMPP. That s it!
3 For more information on XAMPP, included detailed installation and setup instructions visit Mac 1. Download the software at: Select the first installer option (at the time of this writing it s listed as XAMPP MacOS X 0.5.) You may be taken to a page that gives you a bunch of different places to download from. Just click one of the download buttons. Once downloaded you ll have a package file on your computer in other words a file ending in.pkg, like xampp macosx-0.5.pkg. 2. Double click the package file. A window that says Install XAMPP for MacOS X appears. 3. Click the Continue button, select your hard drive in the list that appears and click the Continue button again. Even if you have more than one hard drive attached to your computer, you still have to select the drive that s currently running your system the installer will put all of the XAMPP files into your computers Applications folder. 4. Click the upgrade button and when you re prompted for you administrator password type it into the password field and click the OK button. You must have administrative privileges on the computer in order to install XAMPP, or any Web server or database server. The installer goes through the process of updating your computer, and after a few seconds completes the installation. 5. Click the Close button. Although the software is now loaded on your computer, you still have to start it up. Unfortunately, the XAMPP project hasn t supplied an easy way to do this yet, so you ll need to open the Terminal program and type some UNIX instructions don t worry, it sounds way more scary than it is. 6. Open the Terminal program (for example, by double-clicking its icon.) The program is located in the Utilities folder in your computer s Applications folder. 7. Type sudo su and hit return. Then, when prompted, type your administrator password. This gives you superuser powers to start software on your computer that everyone can use. (It also gives you the power to really mess things up, so make sure you type everything listed here very carefully and then quite Terminal as soon as you re done.) 8. Type /Applications/xampp/xamppfiles/mampp start and hit return. This starts up all the servers you ve just installed. Next, you ll turn off the FTP server, since you won t need it for this tutorial. 9. Type /Applications/xampp/xamppfiles/mampp stopftp and hit return. This turns off the FTP server. And finally, you ll turn on the latest verion of PHP, PHP Type /Applications/xampp/xamppfiles/mampp php5 and hit return. This turns off the FTP server. And finally, you ll turn on the latest verion of PHP, PHP Launch a Web browser like Safari and type in the location bar. When the splash screen appears, click the language you want to use, and you ll be directed to a page on your newly installed Web server (see Figure PHP Tutorial 1-1.) To stop the Web Server and MySQL server at any time just follow steps 6 and 7 above, and in the Terminal program type /Applications/xampp/xamppfiles/mampp stop and hit return. Unfortunately, at this time, there s no easy way to automatically start XAMPP whenever you turn on your Mac, so you ll have to
4 repeat steps 7-10, whenever you restart your computer and want to use the Web server. There are a couple of suggestions on the XAMPP forums about some techniques for making this happen: To uninstall XAMPP, all you have to do is delete the folder XAMPP in the Applications folder. For more information and detailed installation instructions visit Scenario 2: I m Comfortable Downloading and Installing Complex Software The do-it-yourself route to setting up a testing server requires visiting the Web sites for each of the software packages Apache, PHP and MySQL and downloading and installing them. There won t be detailed instructions here for how to do that, since this scenario assumes you can figure it out yourself. If you can t figure it out, just use the XAMPP package mentioned above in Scenario 1. You ll find all of the parts of the puzzle on the sites listed below. Because the process varies between Windows and Mac, each operating system will be discussed separately: Windows Apache Web Server: Visit the Apache Web site and download and install version 2 of the Apache Web server: PHP: Go to the PHP site and download the PHP 5.05 Zip Package listed under Windows Binaries at: MySQL: Visit the MySQL download page at and click the Windows (x86) link to download the installer. PHPMyAdmin: For managing your MySQL database, you ll use this free, Web-based tool. Download the latest version at You can download a ZIP file containing all of the files. These are just PHP pages and they ll go inside your Web documents folder. It s usually a good idea to create a folder in the Web site root folder with a name like pma (for phpmyadmin) and put all of the PHPMyAdmin files in there. For a quick overview of the process, you can check out this page: Mac The Mac already has an Apache Web server built into it. You just need to turn it on and install PHP, MySQL and PHPMyAdmin. To turn on Apache 1. Choose System Preferences from the Apple menu. The System Preferences window opens. You can turn on Apache from the Sharing window 2. Click the Sharing button. This opens the Sharing preferences window which lets you turn on various preferences so you can share files on your computer with other computers. 3. Make sure the Services button is selected, and check the Personal Web Sharing box. Apache is now turned on. To see if it worked, open a Web browser and type in the location bar. PHP: The easiest way to install PHP on the Mac is to download the PHP installer from Marc Liyanage. You can find the installer and good instructions here: MySQL: Visit the MySQL download page at and click the Mac OS X Standard installer package to download the installer.
5 PHPMyAdmin: For managing your MySQL database, you ll use this free, Web-based tool. Download the latest version at You can download a ZIP file containing all of the files. These are just PHP pages and they ll go inside you Web documents folder. It s usually a good idea to create a folder in the Web site root folder with a name like pma (for phpmyadmin) and put all of the PHPMyAdmin files in there. Scenario 3: Dude, I Already Have PHP and MySQL Up and Running OK. You re all set, but you should make sure you either have PHPMyAdmin installed (www.phpmyadmin.net/home_page/downloads.php) or you know how to load an SQL file into MySQL from the command line. You ll be doing that in the next phase of this setup. Setting Up the Database and Web Site To learn Dreamweaver s dynamic features, you ll be building a small Web application for the National Exasperator. In fact, you ll turn the site s online store into dynamic Web pages that will retrieve information from a database and merge it with already-created HTML code. You ll need the tutorial files to follow along. You can download them at Once you ve downloaded and unzipped the files you ll have a folder named DW_php, containing a folder called nationalex (the root folder for this Web site) and a file called nationalex.sql (a SQL file that will let you add the product data to your MySQL database).
6 Putting the Web Pages in Place To begin, move the nationalex folder into the Web server s root folder. If you followed the directions above and installed the XAMPP versions of Apache, PHP and MySQL, the root folder should be located at C:\XAMPP\htdocs on Windows, and Applications/XAMPP/htdocs on Mac. (If your Windows computer s main drive is not the C:\ drive, the root folder might be located on another drive D:\, for instance.) Place nationalex inside the htdocs folder. Note for Mac users. When you try to put the nationalex folder into the Web server s root folder, you may encounter a warning box. That s because you don t have permission to add these files to the Web root folder. However, just click the authenticate button in the window that appears, and type your administrator password. You will also have to change the permissions on the files of the nationalex folder like this. 1. Navigate to the Applications:xampp:htdocs folder 2. Select the nationalex folder 3. Choose File Get Info. This opens the Information window. 4. At the bottom of the window, click the arrow next to Details. This expands the permissions area of the window. 5. Click the lock to the right of the Owner menu (circled in the image to the right.) This will open another window that asks for you administration password. 6. Type the administration password and click OK. This unlocks the lock and lets you change the owner and group assigned to the folder 7. From the group menu select admin, if it isn t already selected, and choose Read & Write from the Access menu. 8. Select Read only from the Others menu. The Info window should look like the image to the right. 9. Finally, click the Apply to enclosed items button. A window will appear asking if you re sure you want to do this. 10. Click OK. You may have to type your administration password again. 11. OK. That s it. Essentially you ve just opened access to these files to other users besides yourself. This is important, because in order to display a Web page, the Web server must be able to read the Web page files. To make sure you ve set this up right, open a Web browser and type in the Address bar. You should see something like Figure PHP Tutorial 1-2.
7 Figure PHP Tutorial 1-2. The National Exasperator Online Store. At this point, it s just an empty shell of a PHP page, waiting for you to turn it into the living, breathing, dynamic, database-driven monster it is destined to become. Loading the Database The data for the National Exasperator store needs to be installed in your new MySQL server. There s actually a few steps you ll need to complete. First you ll create a new database (you ll be loading the data for the store into this); next, you ll load the data into this new database; finally, you ll create a new user for the database (this will be a special account that you ll use for accessing and updating the database.) Create the Database 1. In a Web browser type If you used the XAMPP program as described above, this will take you to the main XAMPP page on the new server. You ll use a program called phpmyadmin to administer the MySQL server. 2. Click the phpmyadmin link listed under Tools to go to the phpmyadmin main page. Note: If you set up the Web server, PHP and MySQL on your own, you ll need to use your Web browser to go to the PHPMyAdmin folder on your server. This might be or depending on your set up. 3. In the Create New Database box type nationalex and press the Create button (see Figure PHP Tutorial 1-3.) This creates a new database on the MySQL server. Next you ll load a SQL file which will create the required tables and add the needed data to the database (see Chapter 20 for more on SQL, databases and tables.)
8 Figure PHP Tutorial 1-3. The phpmyadmin main page. Here you can create a new database, select an already created database to work with and handle many administrative tasks for MySQL. 4. Click the SQL tab near the top of the page. This takes you to a page that lets you type in a SQL query (see page xx of printed book), or load a text file that has SQL commands in it. You ll do the latter load a text file that contains all of the SQL necessary to create the tables and data for the database. 5. Click the Browse button (see Figure PHP Tutorial 1-4. In the File Upload window that appears, navigate to and select the file nationalex.sql in the DW_PHP folder you downloaded earlier. Figure PHP Tutorial 1-4. phpmyadmin lets you load a SQL file, and execute the SQL code inside the file. This is a great way to replicate data from another database. In fact phpmyadmin can help you export all of the tables and data from any database it has access to. 6. Click the Go button.
9 The SQL in the file is executed: four new tables are created and a bunch of data is added. The last step in prepping the database is to create a new MySQL user that has access to add to and update the National Exasperator database. 7. Click the link at the top of the page labeled Server: Localhost. This returns you to the main phpmyadmin page 8. Click the Privileges link in the middle column of links. This opens the User page (see Figure PHP Tutorial 1-5.) Here you can add a new user. Figure PHP Tutorial 1-5. The Users page lists all names of all the accounts that can access the MySQL databases. You can create a particular username for just a single database, or let a user access all of the databases on the system. 9. Click the Add a new user link. This opens the Add User page (see Figure PHP Tutorial 1-6.)
10 Figure PHP Tutorial 1-6. Create a new user to access a database. 10. Type nationalex for the username and localhost for the Host. In the password field type nationalex, and in the re-type box type nationalex again. The screen should look like Figure PHP Tutorial 1-6. This will create a user whose name is nationalex, whose password is nationalex, and who can only access them database locally from the server. This means someone out on the internet can t try to login to the MySQL server using the nationalex account; only local access for example, PHP pages being run on the same computer is allowed. In general, it is a very bad idea to make a password the same as a username, since it doesn t take much imagination for a hacker to figure this out and suddenly be in control of your database. But for this example application, it s best to keep things as simple as possible, so we can get to the more interesting stuff (actually using Dreamweaver, for instance!) 11. Click the Go button at the bottom of the page. The new user, nationalex, is created and you re taken to another Web page. Now you need to give that user access to the National Exasperator database. 12. Scroll down the page to the Database-specific privileges section; select nationalex from the database menu (see Figure PHP Tutorial 1-7.)
11 This takes you to yet another page, where you can specify what the user can and cannot do to the database. Figure PHP Tutorial 1-7. You can give a user access to just a single database. 13. Check the first column of checkboxes select, insert, update and delete and click the Go button (see Figure PHP Tutorial 1-8.) It s possible to give a user many different ways of interacting with a database, including some complex administrative functions which have the potential of wreaking havoc on the database. It s best to limit the possible functions to just those needed by the user. In this case, the nationalex user can select (meaning retrieve data from the database), insert (put data into the database), update (edit data in the database), and delete (remove data from the database.) Wow. That was a lot of work, and you haven t even gotten to Dreamweaver yet. Don t worry, all of the hard work is behind you. Now it s time to start up Dreamweaver and build the site.
12 Figure PHP Tutorial 1-8. Limit user access to just those functions needed for the task at hand. In this case, you will use nationalex user account in your PHP pages to access the database for routine database tasks such as adding, editing, deleting and retrieving information from the database. Setting Up Dreamweaver The first step in working on this dynamic Web application is to define a new site. The process of defining a dynamic site, as outlined below, is slightly different than for static sites, but not any harder: 1. Choose Site New Sites. The Site Definition window opens. Use Dreamweaver s Site Wizard to help you set up this new site. 2. If it isn t already selected, click the Basic tab at the top of the window. The first step is to give this new site a name. 3. Type Exasperator Store in the first box and in the second box. You ve just told Dreamweaver the name you want to use while working on this site, and the URL of the Web site. In a real world scenario, you d type the address of your Web site. 4. Click Next. The next screen lets you choose whether you re building a static or dynamic Web site. 5. Select Yes, I want to use a server technology and choose PHP/MySQL from the pop-up menu. Click Next to proceed. In the next step, you ll tell Dreamweaver where your local files are and where you intend to put the files for the testing server. 6. Select Edit and test locally.
13 Dreamweaver provides three ways to work with dynamic Web page files and a testing server. Edit and test locally is a good choice when you ve set up a Web and application server on your computer (as you ve done in this tutorial). Essentially, this means that you re working on a Web site located on a functioning Web server. In this way, you ll preview the pages running on a real Web server, so you can immediately test out all the nifty dynamic stuff. The other two options are used when the testing server is located on another computer. This may be a computer on your local network, or a full-fledged Web server running on the Internet that you connect to using FTP. Edit locally, then upload to remote testing server is a good option when you can t run a testing server on your computer for example you don t have administrative privileges so you can t install a Web server, but you do have a Web hosting account that provides PHP and MySQL. The last option should be used when the testing server is on another computer, but you re the only developer working on the files. Since the files are available on your local network, anyone in your company or office who has access to the computer with the testing server can also edit those files. Your Web pages can end up in an unrecoverable mess if you and someone else are simultaneously editing and saving the exact same file. The next step involves telling Dreamweaver where to find the files for the Web site. 7. Click the folder at the right side of the middle of the window; navigate to and select the nationalex folder on the Web server. Click Next. If you used the XAMPP installation recommended in the set up instructions this will be C:\Program Files\xampp\htdocs\nationalEx\ (on Windows) or Applications:XAMPP:htdocs:nationalEx (on Mac). You ve nearly completed the setup. 8. Type the URL of the test server in the box and click Test. Dreamweaver may have already filled in this box. If the test server is running on your computer, the URL begins with and ends with the folder that contains the Web pages. In this case, the URL is probably If you get an error message when you click Test, you ve probably entered the wrong URL. 9. Click Next. You may get a warning box squawking about how the URL doesn t match the testing server. This just means that in step 3 above you didn t specify any folder, but in step 7 you said the site was in a folder named nationalex. This means site-root relative links (see Chapter 5) won t work. In a real world case, you d probably have your site s files in the real root folder of your local Web server so you wouldn t run into this error. But since this is a made up example, and you re using document-relative links (see chapter 5), you re safe. So click OK to close the warning box. 10. Click No, and then click Next one more time. If you were planning to move this site onto a Web server connected to the Internet, you would select Yes at this stage and provide all of the information needed to move your site files to the Internet as described in Chapter 16. But since this tutorial is just an exercise, you won t be putting it up on a live Web server. 11. Click Done. Dreamweaver has successfully set up your site. You re now ready to learn about databases and connect Dreamweaver to the National Exasperator online store database. (You may encounter the same warning from step 9; just click OK to dismiss it.)
14 Connecting Dreamweaver to a Database 1. From the Files Panel (Window Files) double-click the file index.php. The main page for the online store opens. You have to have a dynamic PHP page open, in order to connect Dreamweaver to a MySQL database. 2. Open the Databases panel by choosing Window Databases. The Application panel group opens. 3. Click the plus sign (+) button at the top right of the panel. From the pop-up menu, choose MySQL connection. The MySQL connection window opens (see Figure PHP Tutorial 1-9.) In this dialog box you let Dreamweaver know what database to connect to, where it s located, and the username and password of the account that can access the database. Figure PHP Tutorial 1-9. Setting up a connection to a MySQL database requires just 5 easy steps. 4. In the Connection Name box, type connnationalex. You can use any name you want as long as it doesn t start with a number and doesn t contain any characters other than letters, numbers, and the underscore character. In this case, conn is a helpful indicator that this is a database connection and makes identifying it easier if you ever need to look into the underlying code of the page. Next, you ll tell Dreamweaver where the database is located. 5. In the MySQL server box, type localhost. In this case, both the Web server and MySQL are set up on the same computer, so when the Web server runs the dynamic Web pages which attempt to access the database it only needs to look at the localhost where the MySQL Database Server is located. In many cases, the MySQL server provided by your Web hosting company will also be located on the same server, so localhost will work when you move your pages onto your Web server. This is helpful, because it means you can develop your sites locally on your computer, move them onto the Internet and they should be able to connect to the database without a problem. However, some Web hosts put their databases on separate machines dedicated just for that one task. In this case, you would need to edit the database connection, and replace localhost, which works for development and testing on your own computer, with the address of the MySQL server this might be
15 something like mysql.webhost.com (don t use or anything besides the server s address.) Your Web hosting company can supply this information. Unfortunately this means that you need to change the connection file Dreamweaver creates (this is what you re doing right now) to include the new address. Before uploading your site, open the connection file. Do this either from the databases panel as described on page xx of this book or by looking in a folder name Connections located in the local root folder of your site. In that folder you ll find a file named after the connection name you supplied when you created the connection in this tutorial, that s step 4 above so in this case the name of the connection file is connnationalex.php. Double-click this file, change localhost to the address of your Web host s MySQL database server. Then upload this file to your site (see page xx for information on uploading Web files). You can then open the connection file again and change the database address back to localhost. This will let you continue to work and test on your local computer just make sure you don t upload this file to the Web server, or you ll wipe out the connection file that you customized for your Web server, and your dynamic pages won t be able to connect to the database. 6. Type nationalex in the username box, and nationalex in the password box. This is the MySQL username and password you created earlier when you set up the database. 7. Click the Select button. The Select Database window appears. This lets you pick which database you wish to connect to. In this case it s the National Exasperator s online store database. If you get an error instead, check that you spelled localhost correctly, and that you supplied the right username and password. 8. Select nationalex and click OK. 9. The dialog closes and nationalex appears in the Database box at the bottom of the window. Click the Test button. A window saying Connection was made successfully should appear. 10. Click OK to close the window that appeared when you tested the connection; click OK once more to close the MySQL connection box. Behind the scenes, Dreamweaver creates a small PHP file and stores it in a folder called Connections in your site s root folder. Whenever you create a dynamic page that communicates with the database, Dreamweaver adds a line of code pointing to this connection file. (The file s name reflects the connection name you typed in step 4 here it s connnationalex.php.) Note: Don t delete the Connections folder. This folder holds scripts that let your pages connect to one or more databases. If, while cleaning your site, you throw this folder away, you ll break the database connection for all pages.