Appendix A Setting Up a Local Web Server It’ll be much easier for you to run the examples in this book if you run them on a local web server. One reason for this is because of a security sandboxing feature that Internet Explorer has for running HTML files that contain JavaScript in them; the other is to replicate the manner in which you will be using Dojo for a real website or web application. Although the Mac OS X operating system includes a built-in web server as do some versions of Windows, I will be going through, step-by-step, how to install a local web server that will serve HTML, JavaScript, and PHP files. You won’t be using the included web servers built into your operating system because of the complex configurations. Instead, you will be using a turnkey solution, one for the Mac called MAMP (which stands for Macintosh, Apache, MySQL, and PHP) or one for Windows known as XAMPP (the X is for the four operating systems it supports; the other letters stand for Apache, MySQL, PHP, and Perl). These two products are great because they give you an extremely easy and straightforward method for quickly setting up a local web server that not only supports serving static files such as HTML and JavaScript files but also supports PHP and database connectivity. The best thing about both of these tools is that they are completely free to download and use. If you are on Windows, you’ll want to skip the next section and jump to “XAMPP on Windows.” MAMP on Mac OS X The latest version of MAMP supports Snow Leopard (OS X 10.6) and older. In addition, it supports both the Intel and PowerPC processors for excellent backward compatibility. Although MAMP is completely free to use, it doesn’t 265 Getting StartED with Dojo support as many features as MAMP PRO, albeit enough for the purposes of this book. You can see the differences between the two products on the MAMP website at http://www.mamp.info/en/mamp-pro/features/matrix.html. I run MAMP PRO on my Mac because I need its advanced features, and I’ve been very happy with the product. With that, let’s get on to installing it! Installation Follow these steps for installation: 1. Visit http://www.mamp.info/en/downloads/, and click the MAMP and MAMP PRO link below the Downloads page header, as shown in Figure A–1, to begin downloading MAMP and MAMP PRO. Note: When downloading MAMP, you’ll also be downloading a 14-day trial of MAMP PRO, but you won’t need to install it. Figure A–1. Download screen for MAMP and MAMP PRO from http://www.mamp.info 2. Once the download has completed, if you have your browser set to automatically open the file, you’ll be presented with a screen like Figure A–2, which shows the license agreement for installing and using MAMP and MAMP PRO. If the download did not open for you automatically, then double-click the DMG file that you downloaded in step 1, and you should see the screen in Figure A–2. 266 Appendix A: Setting Up a Local Web Server Figure A–2. License agreement for MAMP and MAMP PRO 3. If you agree to the license, click Agree. 4. A new Finder window will open, showing you a simple install screen, as shown in Figure A–3. Simply drag the MAMP folder into the Applications folder. Figure A–3. Finder window showing the contents of the MAMP disk image 267 Getting StartED with Dojo After the MAMP folder has finished copying to the Applications folder, the installation is complete. Starting the server To start the servers (Apache, PHP, and MySQL), you’ll first need to open MAMP by going to the Applications directory, then going to the MAMP directory, and finally starting the MAMP application. When you do, you’ll be presented with the startup window, as shown in Figure A–4, which contains your basic controls for starting and stopping the server as well as changing the settings for how you want MAMP to run. Figure A–4. Control panel for MAMP It’s probably obvious, but to start up the servers, click Start Servers. The first time they start, it will take a little time to complete. You’ll know that they’ve successfully started when your screen looks like Figure A–5 with green “lights” on the left status panel. 268 Appendix A: Setting Up a Local Web Server Figure A–5. The Start Servers button will change to Stop Servers when they have finished starting. Once they have started, you can click Open start page to verify that your server got set up correctly and is running. Your screen should resemble Figure A–6. You can browse around these pages to learn a little bit about what is set up on your servers. Read on to find out how to serve pages and files. Figure A–6. MAMP start page that can be started from the MAMP control panel 269 Getting StartED with Dojo Serving pages and files Now that the servers are running and everything is set up correctly, you can move files into the directory the web server reads from to enable you to view the HTML pages. By default, MAMP has a directory under /Applications/ MAMP/htdocs from which it will look for files to serve to the browser. Let’s test it. Download the demo code for this book from http://friendsofed.com. Copy the ch01 folder into the location mentioned. Once you’ve done this, you’ll be able to open a browser and navigate to http://localhost:8888/ ch01/introductions.html, as shown in Figure A–7, to see one of the Chapter 1 examples. Figure A–7. The first demo from Chapter 1 running from the newly set-up local web server Once you have confirmed that the Chapter 1 demo works, follow the steps in Chapter 3 to download the Dojo Toolkit. Once you’ve done that, drop the dojo, dijit, and dojox folders in a folder named dojotoolkit under the htdocs folder. At this point, you should have a folder structure that resembles Figure A–8. 270 Appendix A: Setting Up a Local Web Server Figure A–8. Folder structure for dojotoolkit in htdocs Once you copy the Dojo Toolkit files to the web server, you are ready to run the other examples. Copy the rest of the demo folders from the different chapters to the htdocs folder as well. After this is completed, test one of the examples such as Chapter 4’s dojoQuery.html, which should look like Figure A–9. 271 Getting StartED with Dojo Figure A–9. Chapter 4’s Dojo Query demo running on the local web server This concludes the setup and configuration for MAMP on Mac OS X. The next section will cover setting up XAMPP on a Windows operating system. Unless you plan on setting up a local web server on Windows as well, you can skip that section. XAMPP on Windows Apache Friends’ XAMPP is an excellent way to quickly set up a local web server environment on your Windows PC. It is completely free to use and includes Apache, MySQL, and PHP, along with a few other server products all configured and ready to run once installed. Let’s begin. Installation Follow these steps for installation: 1. Visit http://www.apachefriends.org/en/xampp-windows.html#646, and click the EXE link (as shown in Figure A–10) to download XAMPP Lite. Note that XAMPP Lite is a considerably smaller download than the full version since it contains only a subset of what XAMPP provides. It will, however, completely suffice for your needs in running the demos for this book. 272 Appendix A: Setting Up a Local Web Server Figure A–10. Apache Friends website showing the download links for XAMPP Lite 2. Find the EXE file you downloaded, and double-click its icon to start the installation, as shown in Figure A–11. Figure A–11. Initial installation screen for XAMPP Lite 273 Getting StartED with Dojo 3. The installer defaults to the root of your system drive (in most cases, your C drive). This location is perfectly fine, so leave it as is. Click the Install button to start the installation. 4. The installer will create a folder called xampplite in the root of your system drive and begin copying the files into it, as shown in Figure A–12. Figure A–12. XAMPP Lite installer copying files to the installation directory 5. After all the files have been copied, the installer will ask you a few questions to complete the install. The first will ask whether you want to install shortcuts to your desktop and Start menu; type y for yes. 6. You’ll then be asked whether the installer should locate the XAMPP paths correctly; again, type y for yes. 7. When it asks you next for making a portable XAMPP, type n for no. 8. Finally, you’ll get a message that states “XAMPP is ready to use.” Press the Enter key to finish. 9. The installer will finish with one final question in regard to your time zone. It should correctly estimate your location, and you should be fine with proceeding by hitting your Enter key. 274 Appendix A: Setting Up a Local Web Server 10. When your screen shows a menu like Figure A–13, type x, and press Return; or simply close the window.