Inspired by Elliot Jay Stocks’ recent posts on his iMac plus Air setup, I thought I’d document how to set up a seamless development environment between desktop and laptop. If you intend to set up a similar environment, you’ll need to perform these steps identically on both machines. Part 2 of this series will deal with the basics of setting up a portable project, and Part 3 will cover setting up advanced tools and source control.

Step 1: the IDE

While it’s possible to write PHP using nothing more than a simple text editor, a good IDE will speed development with handy features like code completion, inline reference both for built-in functions and your own (if you document them properly) and integration with source control. Choice of editor is a very personal thing, but I highly recommend Netbeans so let’s download the Netbeans PHP bundle. Netbeans is written in Java, so you may need to install the latest Java runtime – you need the JDK if you intend to develop in Java, but when using Netbeans to develop in PHP the JRE is sufficient.

Further enhancement for Windows 7

If you’d like Netbeans to take advantage of Windows 7 enhancements like Jump Lists, pinning to Taskbar and icon overlays, you’ll also need to install a handy extension called Sevenbeans using the instructions here.

A Text Editor

While an IDE is essential for doing the heavy lifting of development, sometimes it’s overkill. A good text editor is a must for things like editing configuration files, so let’s install one of those as well – Notepad++ is a good choice.

Step 2: Localhost

If we’re going to be developing more than simple HTML and CSS we’ll need a web server, database server and PHP interpreter, so let’s go ahead and install one. Download Zend Server Community Edition and run the installer, selecting the “Custom Installation” option. In addition to what’s already ticked, select MySQL Server (our database server) and phpMyAdmin (a browser-based GUI for MySQL).

Accept the default settings for the rest of the installation, and once it’s downloaded the external components and finished installing we’ll have a fully working web stack installed and ready to go.

Let’s do some configuration. I like to move my web root from the default location (%ProgramFiles%\Zend\Apache2\htdocs) to somewhere with more relaxed file permissions, so let’s do that. Open up %ProgramFiles%\Zend\Apache2\conf\httpd.conf with Notepad++ and look for the following section:

170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:\Program Files\Zend\Apache2/htdocs"
#
# Each directory to which Apache has access can be configured with respect
# to which services and features are allowed and/or disabled in that
# directory (and its subdirectories).
#
# First, we configure the "default" to be a very restrictive set of
# features.  
#
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>
#
# Note that from this point forward you must specifically allow
# particular features to be enabled - so if something's not working as
# you might expect, make sure that you have specifically enabled it
# below.
#
#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:\Program Files\Zend\Apache2/htdocs">

Change the lines referencing DocumentRoot and Directory to your new location, and copy your htdocs directory to the location you specified (I use C:\Users\Public\htdocs).

Finally, near the end of the file we need to uncomment the following line by deleting the # at the beginning:

417

# Include conf/extra/httpd-vhosts.conf

This will instruct Apache to use the config directives in httpd-vhosts.conf, and enable us to set up virtual hosts. Once you’ve finished editing, save the file and restart Apache from the Apache Monitor in your system tray.

Step 3: Keeping in Sync

The biggest issue when using two machines for development is keeping everything in sync so changes made to your project on one machine are reflected on the other. There are a few ways to accomplish this, but by far the easiest is to download and install Dropbox. The free plan gives you 2GB of cloud storage, which is automatically synchronised with a folder on every machine you install the Dropbox app on, with access to a 30 day revision history on any files stored. The link above is my referral link – if you sign up using that, we’ll both be credited with 250MB of extra space. Once you’ve signed up and installed the app, create a Projects folder within your Dropbox folder.

If you’ve got to this point you should have the apps above installed on both your laptop and desktop. Stay tuned for Part 2 of this series, where we’ll set up our first portable development project.