7AMP – Creating a Development Environment

Running a local development web server is one of the best ways of learning AJAX; reading up on it is one thing, but being able to pass the raw data back and forth between a browser and a server is really the only way to truly understand what is happening at a fundamental level. To create the dynamic and interactive apps and sites that we’ve come to know and love, you need a development server.

On Windows systems we really have only a few decent options available; we can use Microsoft’s Internet Information Services (IIS), which is usually bundled with Ultimate or Business versions of Windows, or we can use Apache, the extremely popular open-source alternative. Remember when Microsoft enjoyed a 90% market share of the browser market? Apache is the MS of the web server world and at some points in its illustrious history has enjoyed almost total domination in its respective field.

IIS is generally quite easy to configure as it uses a graphical interface and is fairly intuitive, however IIS is geared towards development with the .net framework; .net is a proprietary language and generally you need something like Visual Studio to succeed in building web applications with it. Visual Studio does not come cheap (although free express versions are available and if you’re really hardcore you could use notepad to write the code) and many people prefer the open-source alternative PHP.

Similarly, MSSql is a perfectly adequate database solution made by Microsoft, but like its other offerings, is also a proprietary technology. Mysql is free, open-source, and very, very popular. It’s easy to use, robust and scalable and that’s why many developers prefer it. To create development environment we really want to spend as little as possible so really our choices here are clear – Apache as the platform, PHP as the server-side language, and Mysql as the storage technology. But getting all these technologies talking to each other is not quite as straight-forward as running a few installers.

Getting Started

First of all, we need to download the installers for Apache and Mysql and the files required to run PHP. The installers can be found at the following locations:

• http://httpd.apache.org/download.cgi
• http://dev.mysql.com/downloads/mysql/5.1.html#downloads

On the above pages choose the appropriate MSI packages for your platform (e.g. x64 or x32) and requirements (you may as well choose the full SSL version of Apache). With PHP however, we don’t want the installer, we want the zip file that contains all of the PHP files as there is more in this package than you get with the standard installer. It can be found at the following URL:

• http://uk2.php.net/get/php-5.2.11-Win32.zip/from/a/mirror

There are two different zip files for Windows on the PHP site, make sure you do not get the one with NTS (non thread-safe) in the name as this will not work with Apache (which is thread-safe). Before running the installers or unpacking the zip file we just need to do a couple of minor system tasks; we should stop any instant messenger applications temporarily as they can interfere with the Apache installation, and we should disable Windows User Account Control (UAC) as it interferes with the Mysql configuration utility. To disable UAC visit the User Accounts application in the Control Panel:

In the applet set the slider to the bottom setting:

Click the OK button and confirm the very last UAC notification you should ever receive (w00t!), then restart your machine as directed.

Installing Apache

The first thing we need to install is the Apache web server which serves web pages to browsers following HTTP requests, and forms the foundation of our development environment. Run the installer, click the next button to get started and accept the license terms. Click next again and you should then see the following screen:

Complete the dialog as shown above and click next again; on the following screen choose the Typical option:

We can now just keep clicking next until the installation occurs. Once finished you should see the Apache icon in the notification area; it should have a green play symbol to indicate that it is running:

As a consequence of Apache running successfully, we should be able to open a browser, type http://localhost in the address bar and see the following message:

Configuring Apache

The web page we’re seeing is being served from Apache’s default content-serving directory which is probably located somewhere like this:

C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs

That’s fine, but it will be a bit of a chore having to dig that deep when we want to add or remove files. We can easily configure Apache to server content from a folder that is closer to hand; create a new directory on your C drive and call it apachesite.

In the Start menu group for Apache there is an option to Edit the Apache httpd.conf Configuration File, choose this and a text file will be opened. This is Apache’s main configuration file; unlike IIS, Apache does not have a GUI for configuration, instead we must edit this text file to make changes to the server. Scroll down to the Main Server Configuration section, which begins on line 144. On line 177 there should be the DocumentRoot directive, which will be pointing at the directory mentioned above. Change this line so that it points to the directory we created on the C drive:

DocumentRoot "C:/apachesite"

Just below this directive are several Directory directives; you’ll need to set the second one so that it points to the same path as the DocumentRoot:

<Directory "C:/apachesite">

Save the file and restart Apache which you can do by left-clicking the icon in the notification area and choosing Apache2.2 → Restart. To veryify that it works create a new HTML file called index.html in the new directory and request localhost from the browser again:

Installing PHP

Next we can install PHP so that Apache can run PHP files when necessary; create another new directory on the C drive and call it php, then open the PHP zip that we downloaded and drag the entire contents into the php folder. That’s all we need to do as far as ‘installation’ is concerned; all we need to do now is configure Apache to use it.

Configuring Apache to use PHP

Edit the httpd.conf file again; after all of the AddModule directives near start of the file add the following new code:

####### PHP Config ###########
LoadModule php5_module "C:/php/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/php"
##############################

Save the file, but don’t worry about restarting Apache yet as we need to make a couple more changes and restart the computer anyway.

Configuring PHP

Like Apache, PHP relies on file-based configuration; in the C:\php folder rename the file called php.ini-recommended to php.ini. Now we need to add a Class Variable to Windows so that it knows where the PHP files reside. You’ll need to go back to the Control Panel and open the System applet. On the Advanced tab, near the bottom of the dialog is a button called Environment Variables – click this button and a new dialog will open:

The new dialog is divided into 2 sections; in the bottom section select the line that has Path as the Variable name (you’ll need to scroll down a bit) and then click the Edit button below the second section to open the editor:

Go to the end of the Variable value line and add the following text to the exsting value:

;C:\php\;

This will map to the php folder we created on the C drive and which we unpacked the PHP files from the zip file into. It is very important that you don’t remove any of the existing text in the value (or other programs on your machine, or your entire machine, may stop working) and that you enter the new text exactly as it appears above. Once this is done click OK on the three dialog boxes and restart your computer.

Once your computer has restarted, the Apache icon should still have the green play symbol on it and PHP should be configured successfully. To test it create a page in your text editor and add the following code to it:

<?php phpinfo() ?>

Save the new file as phpinfo.php in the C:\apachesite folder and then request the page by typing the following address in the browser’s address bar:

http://localhost/phpinfo.php

Your browser should display the PHP information page:

Success! Now we just need to install Mysql and everything is ready.

Installing Mysql

Run the Mysql installer that we downloaded and keep clicking Next until you get to the configuration wizard:

Uncheck the Register box and then click the Finish button. Click next again and then on the following screen choose the default Detailed Configuration option:

On the next screen choose the Developer Machine option:

After clicking Next on the above screen choose the default option again on the following screen:

Go with the defaults that are selected on the next screen too:

And again, just go with the default option on the next page:

The next screen has both options checked, just keep them checked and move along:

Don’t worry about checking the Firewall Exception box, whether this is required will vary depending on your system and firewall so you can do this in a minute manually if need be. Provided you just want the standard Latin character set you can again just choose the default and click next:

On the next screen keep the defaults, but also check the box to add the executions path to the Windows Path variable (we did this manually when configuring PHP):

Enter a new password for the Root account and then click Next again:

On the final screen click the Execute button and the configuration changes will be applied:

Once the wizard has completed you should see confirmation:

At this point you should restart your computer again. You aren’t prompted to but Windows is fickle and the installation may not run correctly if you don’t do it. So ensure you do.

Testing Mysql

Ok, so you’re back after doing the reboot right? Good. Let’s just check Mysql is running correctly. In the start menu there should be a Mysql Command Line Client application, choose this and enter the password you set when running the Mysql configuration wizard. You should see the following screen:

Enter the following command at the prompt:

show databases;

The databases in use should be shown; a test database is installed by default:

Type the command

use test;

The test database will be selected:

Let’s create a basic table; type the following command:

create table users(name varchar(20), age int);

This will create a new table called users and add two columns to it, one to hold name data consisting of up to 20 variable characters (alphanumeric) and the second to hold age data as an integer. Hit enter and you should get the Query OK message to confirm the table was created:

To populate the table with some dummy data use the following command:

insert into users values('Dan', 31);

You should get the success message again after you hit enter:

As a final test we can check that the data has been inserted into the table corectly using the select command:

select * from users;

Which should show the table and the data we inserted:

Configuring PHP to talk to Mysql

All we need to do now is configure PHP to talk to Mysql; earlier on we renamed a file to php.ini in the C:\php folder, open this file now in a text editor. First of all, scroll down to the Paths and Directories section and find the extension_dir directive on line 536; change it so that it appears as follows:

extension_dir = "./ext"

Then scroll down to the Dynamic Extensions section which begins on line 628. In the Windows extensions section remove the semi-colon from in front of the following lines:

• extension=php_mysql.dll
• extension=php_mysqli.dll

That’s all we need to do; save the file and once again restart your machine. After restarting you can check for Mysql support in the phpinfo.php page again:

This is pretty much a guarantee of success, but really we should create one more PHP file so that we can test that we can read the data from our database; in a text editor create the following file:

<?php

  $user = 'root';
  $password = your_password_here;
  $database = 'test';
  $server = 'localhost';
  
  $connect = mysql_connect($server, $user, $password);
  $select = mysql_select_db($database, $connect);
  
  $query = mysql_query('select * from users');
  $data = mysql_fetch_assoc($query);
  
  echo 'Hi ' .$data['name']. ' you are ' .$data['age'];
  
  mysql_close($connect);
  
?>

Save this as phpmysql.php in the C:\apachesite and request it using your browser; you should see the following message:

If this doesn’t work, try putting your firewall into training mode and seeing if you get a notification asking whether to allow the application when you run the page.

Summary

We have now truly succeeded and have the perfect development environment for creating dynamic AJAX-powered pages. Sure, there may be various programs that we can run which will do some or all of the configuration for us, but which may or may not work on the latest version of Windows, but where is the fun in that?! Getting Apache, Mysql and PHP configured manually is an achievement and it gives us the opportunity to learn more about the platforms we’re using when creating modern web applications.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.