How to Set Up a Webdev Environment

Setting up Your Local Webserver

Before you can do local development on Web products, you need a web server that supports PHP 5.3. The standard here at ISoft is Apache 2.2.17 in conjunction with PHP 5.3.5, and a MySQL connector or server of some kind. In the future, we will theoretically support IIS, since some clients use it on their Windows boxes, but this Wiki currently only covers the WAMP stack.

Installing WampServer 2

The easiest way to get all of this up and running from a clean install is with WampServer2, which can be downloaded and installed here.

If you've already got some installed components, you'll have to install some things separately, but none of the individual components should be too difficult to get working.

Configuring HTTPD

You can find the configuration file for httpd by going to the httpd folder (wherever you installed it), then conf/httpd.conf.

Enable the following modules:

• mod_alias
• mod_auth_basic
• mod_auth_digest
• mod_authnz_ldap
• mod_ldap
• mod_rewrite
• mod_ssl
• mod_vhost_alias

Configuring PHP

The configuration file for php is most likely located at the root of your php directory, named php.ini.

Configure the following:

• memory_limit = 128M
• error_reporting = E_ALL | E_STRICT
• variables_order = "ECGPS"
• register_globals = Off
• magic_quotes_gpc = Off

• extension = php_fileinfo.dll ; uncomment it
• extension = php_curl.dll ; uncomment it

Installing the xdebug Plugin for PHP

This plugin is needed in order to step through your PHP scripts in the IDE of your choice (read: Eclipse). You can find step-by-step instructions for properly downloading and installing the xdebug plugin here. This wizard tailors its instructions to your particular setup.

Setting Up Eclipse

The Foundation: Eclipse, Classic Edition

We're going to be starting from the Classic Edition of Eclipse, which can be found at the Eclipse project homepage. Alternately, you can grab Eclipse for PHP Developers, but if you get that version, and you want Java or other languages, you'll have to add them yourself later.

Installing Eclipse

Eclipse doesn't "install" per se... Instead, it unzips into its own folder on your local hard drive. I unzipped mine into C:\Program File\eclipse. You will have to create any Start Menu or Quick Launch shortcuts yourself, but eclipse is ready to go out-of-the-box. All you have to do when you run it for the first time is specify a workspace folder, and the default is usually fine.

Standard Eclipse Plugins

You will also need some specific tools to do development in PHP, Javascript, CSS, and HTML.

To install plugins, click Eclipse's 'Help' menu and choose "Install New Software." In the dialog that appears, choose "Helios" from the "Work with" dropdown. In the list of updates, expand the Programming Language item and check off Java, XML, Javascript, and PHP. From "Web, XML, and Java EE Development, choose Java EE, XSL, and Eclipse Web Developer tools. Also grab the Web Page Editor. Click through the install wizard and restart Eclipse if required.

Optional Plugins

Subversion Integration

The Subclipse plugin is a powerful tool that integrates subversion with Eclipse. This plugin is optional considering some developers may already be comfortable with Tortoise SVN; however, if you want to integrate subversion into your IDE, subclipse is a very slick way to do it.

To install Subclipse, go back to Help->Install New Software. In the Work with box, enter "http://subclipse.tigris.org/update_1.6.x" and click Add. Give the repository a name like "Subclipse repository," click OK and wait for the update list to refresh. From the update list, check off the boxes for Core SVNKit Library and Optional JNA Library. From the Subclipse submenu, choose all of the required items. Click through the installer.

Restart Eclipse if necessary, and you should now be ready to work with SVN from inside the IDE.

Installing Quantum DB

Quantum DB is also optional, since you might already be used to SQLYog; however, if you'd like to browse and manipulate databases from within your IDE, it's a powerful, competitive tool. The update site for Quantum DB (which can be added in similar fashion to the update site for Subclipse above) is http://quantum.sourceforge.net/update-site. Select all Core and Import-Export packages, then click through the installer.

Connecting to a Database

To connect to a database, you will need MySQL Connector/J, which can be downloaded from http://dev.mysql.com/downloads/connector/j/. Once you have the jar file somewhere on your hard drive, go to the Quantum DB perspective (Window->Open Perspective->Other->Quantum DB), right click inside the Database Bookmarks view and choose "New Bookmark..." Click the "Add driver" button, click the "External JAR file" button, browse to the Connector/J .jar file. Click browse to choose a driver object and choose the top one (com.mysql.jdbc.Driver). Click OK.

Back in the New Bookmark dialog, choose MySQL-AB JDBC Driver, click Next, and fill in the database details. Click Next, choose a name for the database, and you're almost done. The final step is to change a single setting on the database bookmark that will fix a compatibility issue between MySQL Connector/J and the way our databases are formatted.

Right click the new bookmark and choose Properties. At the end of the Connection URL, paste the string "?zeroDateTimeBehavior=convertToNull" and click OK. You should now be ready to connect to your database by double-clicking the bookmark, and you can browse and run queries in much the same way as you could in SQLYog. Take some time to experiment with the new interface.

Your First Project

Creating a Web App Project Without Subclipse

If you have the Subclipse plugin, you can check out the code for your project at the same time you create your project. Otherwise, you're better off checking out your code to Webroot before you create the project in Eclipse. Webroot can be determined by looking at the output of phpinfo(). In WampServer2, you can view the output of PHPInfo by clicking on the tray icon, choosing Localhost, and following the PHPInfo link in the webpage that comes up in the browser.

To create your project, go to File->New->PHP Project. Since we're not using Subclipse, "Create project at existing location". (If you already have a working copy checked out, you can still choose this option and the Subclipse plugin will still work.) Check "Enable Javascript support for this project" if it isn't checked, enter a project name, and click "finish."

Creating a Webapp Project With Subclipse

If you have the subclipse plugin (and you haven't already checked out your working copy into Webroot - see above), you can go to File->New->PHP Project and choose "Create new project in workspace." Again, check "Enable Javascript support" if it isn't checked, click finish.

To import code from the repository using the Subclipse plugin, right-click on the name of your new project in PHP explorer and choose "Share Project" from the Team submenu. Choose SNV, click Next, use existing repository location (https://svn.isoftdata.com/Web), click Next. To find your specific product/branch/codebase in the repository, choose Use specified folder name, and click Select to browse to your code. Click "Finish", then "Next", and your codebase will be checked out into your project. You can perform SVN operations on your new project by right-clicking on a file (or the project name) and choosing from the Team submenu. When committing, you can see a graphical diff by double-clicking on any files that have changed.

Debugging Your Projects With the xdebug Plugin

To step through the PHP in your project, you should create a Debug profile by visiting Run->Debug Configurations and double-clicking the PHP Webpage configuration. This will create a new configuration called, appropriately enough, "New configuration." (I recommend renaming it to something useful, like, "EnterpriseLX Debug"). For your Server Debugger, choose XDebug. Your PHP server should be the default PHP webserver. Under "file", browse to the index file for your project; make sure "Break at first line" and "autogenerate" are checked (unless you have an unusual URL for your project.) You may want to add this debug configuration to your favorites by checking Debug in the Display in favorites menu box on the Common tab. Once you've got everything set up the way you want it, click "Apply" and then "Debug."

If you want to look at your project in an external browser, you can choose "Default system browser" from the Window->Web Browser menu. You can also step through your Javascript if Firefox has the Mozilla Rhino plugin installed.

Resources

You can find the files used for this installation procedure on \\file\ToolsUpdates\WebDev.

Further Question

Now you have all the tools you need to create and edit projects, check them in and out of the repository, and debug them on your local development computer. If you have further questions, Eclipse has lots of online documentation, and you can always talk to your senior developer as well. Good luck, and happy coding!