Service - Tutorials - Development Environment - Web Development Environment Part 1: Server and IDE

Web Development Environment Part 1: Server and IDE

as platform independent as possible ...

Today we will take a look on how to setup a web development

environment on your PC with open source tools.

A strong and stable environment is the key for successful develop-

ment and will prevent you from bad code or programming mistakes,

as well it gives you a wide range of testing and evaluation possibili-

ties.

This tutorial focuses on open source utilities to make it affordable

for everyone with programs that are platform independent or with

different programs for each platform covering Windows, Linux and

MacOS and we set the focal point on local development of a PHP

and database driven based project, such as a Joomla! website. So let's take a look on what we

need for developing for the Web.

There's a web server with PHP, a database server, a PHP, Java Script and CSS editor or IDE, and

a system for cross-browser testing.

Providing the Basis

First of all we need the web and database server. Here we will use the well known Apache2 with

mySQL. It's not necessary to install everything separately. There's some nice packages available

to install everything at once.

For Windows there's the WAMP Server, for MAC there's MAMP and for Linux we recommend to

use Ubuntu. If you use the server version, Apache, PHP and mySQL will be installed by default.

Otherwise just install them as they are native for Linux.

WAMP Server comes with a great functionality to install and run several versions of Apache, PHP

and mySQL. You can install and switch them from the administration tool which gives you a great

flexibility in testing your web project on any given server setup. Also MAMP comes with some

switching options for PHP.

Now we need a reliable editor or IDE.

Let's get moving!

Now you'll have to make a choice. There's many editors or IDEs out there. Which one you might

like depends on your skill and experience.

If you'd like to go with a simple text | PHP editor with code highlighting you may want to use

Bluefish. A fast and clean editor running on mostly any OS.

Or if you want to go for a full featured IDE with intellisense, project management, plug-ins and

all the other nice features that helps saving time and effort, there's Eclipse which we recom-

mend to use with Aptana Studio as a plug-in.

Depending on your needs you can choose the Eclipse package of your choice. We will use the

PHP Edition in this tutorial, as we focus on web development with PHP.

Installation is simple ... download, unpack, run the application.

To setup Aptana in Eclipse you need to got to the Help Menu in Eclipse and select "Install new

Software". There are 2 versions of Aptana available. Studio 2 which is a stable release and

Studio 3 which is Beta. It's up to you what you'd like to use.

Depending on your preferred version you put

http://download.aptana.com/tools/studio/plugin/install/studio

for Version 2 and

http://download.aptana.com/studio3/plugin/install

for Version 3 and press Enter (or Return).

Follow the instructions, select Aptana in the table and accept the license agreement.

To finish the installation you'll need to restart Eclipse.

Now in Eclipse go to Window -> Open Perspective -> Other and choose Aptana or Web (with

the orange Aptana gear icon). Eclipse and Aptana will now check on missing libraries and

give you the choice to install them in case some are missing.

Well done. your Aptana Studio IDE is now set up for you.

Attention ... Browsers crossing!

Alright. Here we go with setting up your testing environment.

As there's different issues with different browser you have 2 choices. Rely on a online service

that test your site after it's uploaded to a server (which is always good after local tests) like

Browser Shots or to test with different browsers and OS on your local installation.

Testing locally preferred? ... Good choice for multiple reasons like debugging tools or direct

results.

For Windows Users that's a simple thing. Just download the browsers you want to test as

windows applications. Most common are: Firefox, Safari, Opera, Chrome and Internet Explorer.

As Internet Explorer won't install with different versions just use Virtual PC which is free for

Windows, set up your Windows in a new Virtual PC and install the IE Version of your choice.

For MAC Users there's a solution using WineBottler to install different IE Versions.

Linux needs to with Wine. If you need a guide on how to install wine and IE 7 or 8 on it, just

drop a line and let us know.

Congratulations! You now have a basis for successful web development with PHP or Java Script.