I recently upgraded my computer hardware due to aging components like AGP, 1GB of RAM, single-core processing, SATA 1.5GBs, and a power supply that lacked a few necessary power wires required for new components. That being said, I’m still stuck in the old world when it comes to operating systems. I use Windows XP Professional because I can’t afford to upgrade to Vista, I don’t want to learn Vista, and I have yet to find a reason to upgrade. A dual-boot system with Windows XP and Ubuntu 9.04 for every day computing is more than suitable for my needs.

As soon as I finished installing all of the hardware components and configuring the BIOS, I began the tedious process of installing Windows XP. While Windows took over the partition I carved out for it, I started to compile a list of software that I wished to install: OpenOffice, Firefox, Thunderbird, Adobe CS4, games, and a bunch of smaller programs like Winamp and IRC. What I noticed missing from my list were programs that dealt with any sort of web development like MySQL, PHP, Perl, and Apache. I wondered why this was so.

My web developing and programming is usually reserved for the Linux side of the house as it feels more natural to me. LAMP, which stands for Linux, Apache, MySQL, and PHP/Perl is my development platform of choice. Linux makes configuring and administrating Apache and MySQL a breeze since everything is open source. As much as I love this setup, it has one drawback given my system configuration: I enjoy playing with Adobe Photoshop. Like I said earlier, my system is dual-booted with Windows and Linux so any time I wanted to code I’d have to reboot to Linux and any time I’d want to use Photoshop I’d have to reboot to Windows. So what software would I need to develop for the web on Windows?

In short, I would need a WAMP package, a graphics program, WordPress, and a code editor or IDE to program with. What’s WAMP you ask? WAMP stands for Windows, Apache, MySQL, and PHP/Perl. It is the backbone to any web development platform and there are a variety of WAMP packages available. Take a quick look at this Wikipedia WAMP comparision table for proof. I decided to use WampServer because it seemed easy to install, easy to use, and the support available on their forums is outstanding. I already had Adobe Photoshop CS4 handy. In case you don’t have Photoshop, I would highly recommend GIMP for 2-D graphics creation because it’s a lot like Photoshop and it’s free. Now I needed a code editor. I knew that the code editor I used in Linux had a Windows port so I decided to use Geany. Geany is a lightweight integrated development environment and I would highly recommend it and not just for web programming. If you’d like to know what other options are available, give the 22 Neat Code Editors For Windows article from Nettuts+ a read.

So let’s begin to construct our sandbox.

Step One: Code Editor

I’m going to begin this tutorial by installing a code editor. The reason I’m installing this first is that we’re going to need it to configure a few things later on.

I use Geany and downloading and installing it is quite simple. You can find a code editor or IDE from the Nettuts+ article listed above if you don’t want to use Geany or want to try something different. If you decide to use Geany, you will need to download the Windows binary (Windows Binaries) that includes the full installer (most people).

After installing your code editor or IDE of choice you should spend a few minutes orienting yourself with the program. Reading the help files is probably a good idea. Time invested now will only benefit you later as you begin developing.

Step Two: WampServer

Download and install WampServer. The installation is easy and intuitive unless you start to customize it. If you have any problems installing WampServer please leave me a comment or request help on the WampServer forum.

You should now have a directory located at “C:\wamp” and have a shortcut to WampServer in your Start Menu. Before we start WampServer we need to configure a few things.

Step Three: Configure WampServer

By default, WampServer doesn’t set a root password for MySQL and does not require a password to login. If you plan on using WampServer to actually host a website on your own computer or wish to increase system security then you should set a root password. You can do this by opening phpMyAdmin from the WampServer menu after you have started WampServer.

Click the “Privileges” link at the top of the phpMyAdmin page. This should produce the following image:

Then you need to click the little human/pencil icon at the end of the row for both root user entries. The following screen should have this option somewhere in the middle:

Set a root password and click the “Go” button. Do this for the other root user entry and exit phpMyAdmin and exit WampServer by right-clicking the system tray icon and selecting Exit. Now you need to reflect this password change in the WAMP configuration file. Unless you changed the default install directory for WampServer then you should be able to open this file: “C:\wamp\apps\phpmyadmin3.1.3.1\config.inc.php”. This is what it looks like when you open the file:

You will enter the same root password you just used twice before in between the apostrophes. An example:

You also need to change the next line to:

Start WampServer again and attempt to open phpMyAdmin. You should be able to open it without an error. If you receive an error let me know and I’ll do my best to help you figure out what’s going on. Next we need to install and configure WordPress.

Step Four: Install & Configure WordPress

I’m going to use regular old WordPress but some of you might wish to use WordPress MU. WordPress MU makes it possible for anyone with a website to host their own blogging community, control, and moderate all the blogs from a single dashboard using one installation instead of having to install multiple copies of WordPress in separate directories. Many of you will not need this capability unless you’re developing many projects simultaneously.

Now we need to download and install WordPress. After the download completes, extract the contents of the file. This should create a directory called “wordpress”. Move this directory to the “www” directory located within the WAMP directory, usually “c:\wamp\www\”. Now rename this directory from “wordpress” to something of your choosing; I use the name of the site currently being developed.

Next, let’s configure WordPress and our database. Open phpMyAdmin from the WampServer menu. You should see a page similar to this:

Select a name for your database and enter it in the input field. You can leave “Collation” and “utf8_general_ci” alone as they specify the default database character set and the default database collation. After you’ve entered a name for your database click Create. You should see a new page that says your new database has been created. You can close phpMyAdmin now.

In order for WordPress to know where to install itself within your new database we need to configure WordPress. This isn’t any more difficult than anything else we’ve done. We need to open the file “wp-config-sample.php” in the WordPress directory that you have probably renamed by now. This is what the contents of the file look like:

We need to alter three lines, the first is:

Change putyourdbnamehere to the name of the database you created using phpMyAdmin.

The next line we need to alter is:

Change usernamehere to root. If you intend to host your own website I would recommend creating a new user for this purpose within phpMyAdmin and be sure to reflect these changes here and within your database.

Lastly, we need to change this line:

Change yourpasswordhere to the password you supplied for your root account (we did this earlier).

Once you’ve changed these three lines you need to save this file as “wp-config.php” (remove the sample portion of the file name) in the same directory. Now we can install WordPress. For example, let’s say I created a site called commondork (this is what I renamed that wordpress directory to), I would point my browser to http://localhost/commondork/. You will need to point your browser to the name of your site after http://localhost/. You will be greeted by a WordPress installation page. Follow the directions given by WordPress. Once it has installed it will give you a password for an “admin” account. Be sure to write this down somewhere because you will need it again to login to your new WordPress site.

Step Five: Testing

Let’s login to our new site by browsing to http://localhost/yoursite/wp-login.php. You will need to replace yoursite with the name of your site. You should be greeted with a page similar to this:

Enter the user name of admin and the password that was generated for you earlier. If you logged in successfully you’ll be presented with the WordPress dashboard. From the dashboard you can make changes to your site. Discussing the details of the dashboard is beyond the scope of this article. For more information consult Getting Started With WordPress.

Step Six: Graphics

If you have Adobe Photoshop you’ll need to follow the instructions provided by Adobe. If you have decided that you would like to try GIMP (available for free at Download GIMP). Follow the download and installation instructions provided by GIMP.

Conclusion

We just installed a lot of new software that will enable you to develop websites based on the WordPress engine for free. Support is readily available for each piece of software should you run into any issues. If you have any questions or comments please feel free to use the comment form below and I will attempt to answer you as best I can.