How to setup your web development environment

If you want to setup a web development environment in your PC, there are many options out there, so I’m going to describe the one that just worked for me.

This is a no-frills tutorial about how to setup a web development environment for PHP, using

  • An EeePC 1000H as the local machine
  • A wireless ADSL network for the internet connection
  • WinXP/SP3 Home as the operating system
  • Apache as the web server
  • MySQL as the database management system
  • PHP as the source language
  • Subversion and Tortoise for source control management
  • Eclipse PDT as the integrated development environment
  • Zend Debugger for remote debugging
  • Zend Framework as the supporting framework

A PC connected to the internet

This is easy, you already have it, or you should. Mine is the EeePC, with WinXP Home.

Apache, MySQL, PHP

This is very easy too. There are many all-in-one packages, but I feel at home with the WampServer.

  • Download and install the WampServer 2.0

These versions are currently bundled: Apache 2.2.11, MySQL 5.1.30, PHP 5.2.8, phpMyAdmin 3.1.1

Subversion and Tortoise

XP-Dev is my choice for Subversion hosting. Easy to setup and free. Nobody else will get access to your code by default, but you can change it as needed. Slick interface, fast updates and commits, (apparently) trustworthy.

  • Create your account at XP-Dev. You’ll currently get 1500 MB of svn hosting space.
  • Login and create your first repository. Its name will be <your XP-Dev account>_<your repository name>

Tortoise is my choice for the svn administration. Easy to setup and free (again).

  • Download and install Tortoise.

Tortoise is for dummies like me. Just righ click in a folder and the contextual menu will show all the needed options.

  • Create a local folder for mirroring your remote project repository. Don’t put it under the www folder of Apache.
  • Checkout the repository there. This will setup the link between them.
  • Into the local folder create the classical trunk, tags, and branches folders.
  • Commit all back to the repository, together with a nice comment.

If all goes well, your new source control management system is correctly setup.

Eclipse PDT

Eclipse PDT is my preferred IDE for PHP. There’s an all-in-one distribution, that’s very easy to setup. Well, it couldn’t be easier: no setup at all.

  • Download and install Java
  • Download and unzip Eclipse PDT into the root of a disk unit, like C:

It’s important that you unzip into the root, otherwise some files won’t unzip due their long path names. Eventually, you’ll get an eclipse folder, containing an eclipse executable.

  • Start eclipse and learn how to move around.
  • Create a new PHP project, into the trunk folder.
  • Open the trunk folder from WinXP and add to the ignore list of Tortoise all the files automatically created by eclipse. Then commit.

Zend Debugger

Even if you think that the Zend Debugger was bundled with the all-in-one Eclipse PDT, follow this step too. In fact, that Zend Debugger is not for server debugging, while this one is.

  • Download and unzip Zend Debugger.
  • Follow the short instructions of the readme file to intall it. For editing the php.ini, use the link provided by WampServer.

Zend Framework

You could use any other framework, or no framework at all, but I know the Zend Framework quite a bit.

  • Download and unzip the Zend Framework.

The Zend Framework site provides a QuickStart tutorial that sets up an “Hello World” application.

  • Activate in Apache (WampServer) the rewrite module.
  • Create in Apache (WampServer) an alias from ‘project’ (trim apostrophes) to the trunk folder of your project.
  • Go back to the IDE and code in the QuickStart tutorial. Don’t put the ZF library into the trunk/library folder. Instead leave it where it is and put its path into the include_path directive of php.ini, using WampServer.

That’s much better, because your current ZF library version won’t replicate by means of svn to your remote repository, and when a new version will be available, you can change the include_path directive to point to it, and change it back if something goes wrond (sometimes it does), without moving files around.

Moreover, you can use the trunk/library folder for your own library files. I suggest a personal folder for your reusable classes like forms, elements, filters, and validators, and a Zend folder that mirrors the Zend Framework when you need to fix a bug in a class, or hack something into the ZF library.

Due to the fact that the PHP interpreter will scan the trunk/library folder before the external ZF library folder (if you set up the include_path as shown in the QuickStart tutorial), you can “overwrite” the ZF library classes with your copies if you need, on the fly, maintaining them well apart.

First debugging session

Now your web development environment should be setup and you can start your first debugging session.

  • Open the home page http://localhost/project/ in a browser.
  • Start the debugger at that page, using Eclipse PDT. Check that the URL into the Debug Configuration dialog is correct, and the option ‘Break at first line’ is checked.
  • Explore the code step by step.
  • If all is OK then commit, else fix bugs.

Start developing

That’s alll. Now it’s up to you.

4 Replies to “How to setup your web development environment”

  1. You forgot the browser development tools. Firebug is imprescindible. There is also a good debugger outthere for js in IE. Or, even if I like Eclipse, you may want to use NetBeans who has js debugging for IE and Mozilla incorporated.
    My setup is based on Xdebug and Xampp and is not bad at all.

  2. Thanks for the overview.
    I’m trying to create my own develop method based on this one.

    a) If you use a shared host (like many of us), and if you put the library folders outside of any specific folder, how then, do you manage to arrange things on the shared host environment, how do you deploy the library folder? I’m asking this, because if I DO NOT do that, I just need to upload that folder.

    b)
    When you write:
    “Create in Apache (WampServer) an alias from ‘project’ (trim apostrophes) to the trunk folder of your project.”

    What do you mean?
    Please confirm: We have our trunk folder and inside that truck folder you will have your project folder. The virtual host created on apache will point to (let’s say: htdocs/www/project1/truck/nameOfMyProject ?

    Best Regards,
    Márcio

Leave a Reply

Your email address will not be published. Required fields are marked *