5. The JavaScript then places an indication next to the username input box to show whether the name is one available to the user—perhaps a green checkmark or a red cross graphic, along with some text. 6. If the username is not available and the user still submits the form, the JavaScript interrupts the submission and reemphasizes (perhaps with a larger graphic and/or an alert box) that the user needs to choose another username. 7. Optionally, an improved version of this process could even look at the username requested by the user and suggest an alternative that is currently available. All of this takes place quietly in the background and makes for a comfortable and seamless user experience. Without using Ajax, the entire form would have to be sub- mitted to the server, which would then send back HTML, highlighting any mistakes. It would be a workable solution, but nowhere near as tidy or pleasurable as on-the-fly form field processing. Ajax can be used for a lot more than simple input verification and processing, though; we’ll explore many additional things that you can do with it in the Ajax chapters later in this book. In this chapter, you have read a good introduction to the core technologies of PHP, MySQL, and JavaScript (as well as Apache), and have learned how they work together with each other. In Chapter 2, we’ll look at how you can install your own web devel- opment server on which to practice everything that you will be learning. Test Your Knowledge: Questions Question 1-1 What four components are needed to create a fully dynamic web page? Question 1-2 What does HTML stand for? Question 1-3 Why does the name MySQL contain the letters SQL? Question 1-4 PHP and JavaScript are both programming languages that generate dynamic results for web pages. What is their main difference, and why would you use both of them? Question 1-5 If you encounter a bug (which is rare) in one of the open source tools, how do you think you could get it fixed? See the section “Chapter 1 Answers” on page 435 in Appendix A for the answers to these questions. Test Your Knowledge: Questions | 11 CHAPTER 2 Setting Up a Development Server If you wish to develop Internet applications but don’t have your own development server, you will have to upload every modification you make to a server somewhere else on the Web before you can test it. Even on a fast broadband connection, this can still represent a significant slowdown in development time. On a local computer, however, testing can be as easy as saving an update (usually just a matter of clicking once on an icon) and then hitting the Refresh button in your browser. Another advantage of a development server is that you don’t have to worry about em- barrassing errors or security problems while you’re writing and testing, whereas you need to be aware of what people may see or do with your application when it’s on a public website. It’s best to iron everything out while you’re still on a home or small office system, presumably protected by firewalls and other safeguards. Once you have your own development server, you’ll wonder how you ever managed without one, and it’s easy to set one up. Just follow the steps in the following sections, using the appropriate instructions for a PC, a Mac, or a Linux system. In this chapter, we cover just the server side of the web experience, as described in Chapter 1. But to test the results of your work—particularly when we start using Java- Script later in this book—you should also have an instance of every major web browser running on some system convenient to you. Whenever possible, the list of browsers should include at least Internet Explorer, Mozilla Firefox, Opera, Safari, and Google Chrome. What Is a WAMP, MAMP, or LAMP? WAMP, MAMP, and LAMP are abbreviations for “Windows, Apache, MySQL, and PHP,” “Mac, Apache, MySQL, and PHP,” and “Linux, Apache, MySQL, and PHP.” These abbreviations describe a fully functioning setup used for developing dynamic Internet web pages. 13 WAMPs, MAMPs, and LAMPs come in the form of a package that binds the bundled programs together so that you don’t have to install and set them up separately. This means you can simply download and install a single program, and follow a few easy prompts, to get your web development server up and running in the quickest time with minimum hassle. During installation, several default settings are created for you. The security configu- rations of such an installation will not be as tight as on a production web server, because it is optimized for local use. For these reasons, you should never install such a setup as a production server. But for developing and testing websites and applications, one of these installations should be entirely sufficient. If you choose not to go the W/L/MAMP route for building your own development system, you should know that downloading and integrat- ing the various parts yourself can be very time-consuming and may re- quire a lot of research in order to configure everything fully. But if you already have all the components installed and integrated with each other, they should work with the examples in this book. Installing a WAMP on Windows There are several available WAMP servers, each offering slightly different configura- tions, but the easiest of these is the appropriately named EasyPHP. You can download it from a link toward the top of its website at http://easyphp.org (see Figure 2-1). Follow the download link and you’ll be taken to the SourceForge download area. The version used in this book is EasyPHP-3.0-setup.exe, which is about 15.6 MB in size. Once you’ve downloaded the file, run the installer and follow the prompts, accepting the defaults you are given. Upon completion, EasyPHP will load and an icon will be added to your System Tray, at the bottom right of your screen (see Figure 2-2). Double-click the System Tray icon and the control window will pop up. From here, you can start, stop, and restart both Apache and MySQL. Sometimes you may find that the initial installation will not correctly start one or the other program, so if you don’t see a green traffic light next to one, select Restart to get it going (see Figure 2-3). Overcoming Installation Problems Should EasyPHP pop up any errors about either Apache or MySQL being unable to run because a port is blocked, this means that either a firewall you have running is preventing access, or another program is conflicting with EasyPHP. 14 | Chapter 2: Setting Up a Development Server Figure 2-1. You can download EasyPHP via the site’s main page Figure 2-2. Accessing EasyPHP’s controls from the System Tray Figure 2-3. The EasyPHP control window with both Apache and MySQL running Installing a WAMP on Windows | 15 Antivirus programs can sometimes block these ports, as can programs like Skype, which may try to grab port 80 for itself. The solution in such cases is to investigate the setup options for all such programs and ensure that port 80 for Apache and 3306 for MySQL are not blocked or otherwise taken up. Also, if you are using Windows Vista and find that either Apache or MySQL stop soon after starting, odds are that the correct permissions have not been set for the EasyPHP folders. To correct this, navigate to your Program Files folder, right-click on the EasyPHP 3.0 folder, and select Properties. Then from here click the Security tab fol- lowed by Edit to change the permissions for this folder and its subfolders, ensuring that all users have write access. This problem has been known to occur only after a Windows restart. Testing the Installation The first thing to do at this point is verify that everything is working correctly. To do this, you are going to try to display the default web page, which will have been saved in the server’s root folder (see Figure 2-4). Enter either of the following two URLs into the address bar of your browser: http://127.0.0.1/home http://localhost/home The first is the IP address that all computers use to refer to themselves. The second is an alias, which refers to exactly the same thing and is available for ease of use. If all is well, you will see the default EasyPHP home screen. Assuming that you have been successful so far, you now need to perform one more task in order to have your development server fully operational. So create a folder on your hard disk called Figure 2-4. How the home page should look 16 | Chapter 2: Setting Up a Development Server c:\web and then click Add underneath the Apache section. Now type web as the alias requested in section 2, and enter c:\web for the directory in section 3. Then click OK, leaving the settings displayed in section 4 as they are (see Figure 2-5). If you will be maintaining several projects, at some point you may wish to create all the directories you will need and the aliases Apache will recognize. An alias is a shortened, easily recognizable string used to refer to a longer path name, and it doesn’t have to be the same as a directory name. So, if you wish to save on typing, you can have a directory several levels deep aliased to a single word. For example the alias “photos” could refer to a folder called c:\myfiles\family\photos. To ensure that you have everything correctly configured, you should now run the obligatory “Hello World” program. So create a small HTML file along these lines using Windows Notepad—not a rich word processor such as Word (unless you save as Plain Text)—by selecting Start→Run, typing notepad and pressing Return: <html><head><title>A quick test</title></head> <body>A quick test</body></html> Once you have done this, save it using the full filename c:\web\index.html, making sure that the “Save as type” box is changed from “Text Documents (*.txt)” to “All Files (*.*),” Figure 2-5. Creating a directory for your project files Installing a WAMP on Windows | 17 and you’ll be able to call this page up in your browser by entering the following URL in its address bar (see Figure 2-6): http://localhost/web You should now have had a trouble-free installation, resulting in a fully working WAMP. But if you encountered any difficulties, check out the comprehensive EasyPHP FAQ at http://easyphp.org/faq.php, which should sort out your problem. Alternative WAMPs When software is updated, it sometimes works differently than you’d expect, and bugs can even be introduced. So if you encounter difficulties with EasyPHP that you cannot resolve, you may prefer to choose one of the various other solutions available on the Web instead. You will still be able to make use of all the examples in this book, but you’ll have to follow the instructions supplied with each WAMP, which may not be as easy to follow as the EasyPHP guide. Here’s a selection of the best in my opinion: • XAMPP: http://apachefriends.org/en/xampp.html • WAMPServer: http://wampserver.com/en/ • Glossword WAMP: http://glossword.biz/glosswordwamp/ Figure 2-6. Our first web page 18 | Chapter 2: Setting Up a Development Server Installing a MAMP on Mac OS X At the time of writing, probably the best MAMP solution is called simply MAMP. You can download it from http://mamp.info/en/download.html. The program comes in two flavors: regular and pro. The pro version is a commercial product that you might want to look at in the future, especially as it comes bundled with the regular version. If you have trouble accessing the http://mamp.info website, you may wish to download the installer from http://sourceforge.net/project/showfiles.php?group_id=121134. The latest version (currently 1.7.2) will show by default, but for previous ones (such as 1.4.1), just click on the link entitled “mamp” under the “Package” Heading to see them all. If you have OS X 10.4 or greater, you can download the latest version of MAMP, which will be 1.7.2 or higher. For Mac OS X 10.3, you’ll need to download the correct version for that OS, which is likely to be 1.4.1 or similar (see Figure 2-7). The downloaded file will have a filename such as MAMP_1.7.2.dmg.zip for version 1.7.2 or MAMP_1.4.1_universal.dmg.zip for the universal installer, and so on. You need to unzip the file using StuffIt Expander (or a similar product) to create a disk image Figure 2-7. Select the correct MAMP version and download it Installing a MAMP on Mac OS X | 19 with a name similar to MAMP_1.7.2.dmg or MAMP_1.4.1_universal.dmg, and double- click that image to mount it as a drive on your desktop. You are now ready to double-click the new virtual drive, which will be called MAMP 1.7.2 (or simply MAMP for version 1.4.1). When you do, the installer will appear, asking you to drag and drop the MAMP folder at the top left of the window down into the Applications folder alias at the bottom left. So go ahead and drop it in there (see Figure 2-8). Open up your Applications folder, where you will find a new folder called MAMP. Open this up, and you’ll be presented with several subfolders. The main three that should concern you for now are htdocs, which is where you will be saving your HTML and PHP files; README.rtf, which contains the latest release notes for the program; and MAMP, which is the program you will use to start and stop your web server and database. To make things easier for yourself in the future, I recommend that you make an alias to the MAMP folder and place the alias on your desktop. That way, you’ll find it a simple matter to click on that when you need to make any changes or run MAMP (see Figure 2-9). Figure 2-8. Installing MAMP takes a few simple mouse actions 20 | Chapter 2: Setting Up a Development Server . Apache, MySQL, and PHP, “Mac, Apache, MySQL, and PHP, and “Linux, Apache, MySQL, and PHP.” These abbreviations describe a fully functioning setup used for developing dynamic Internet web pages. 13 WAMPs,. opinion: • XAMPP: http://apachefriends.org/en/xampp.html • WAMPServer: http://wampserver.com/en/ • Glossword WAMP: http://glossword.biz/glosswordwamp/ Figure 2-6 . Our first web page 18 | Chapter 2: Setting. working WAMP. But if you encountered any difficulties, check out the comprehensive EasyPHP FAQ at http://easyphp.org/faq .php, which should sort out your problem. Alternative WAMPs When software is updated,