Học php, mysql và javascript - p 4 pps

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

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-consumintegrat-ing 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