Sage of Code

If delivering quality software on time and on budget is the goal, then a great team is a must. A good team simply will not do. A great team required great tools. And great tools cannot run in the ether. Therefore, lets start at the beginning: IT.The first software project that I started had a “shoe string” budget. I applied all the money to hardware and ran the project on 100% Open Source software. This project thought me a very costly lesson: the installation, configuration, and management of IT systems will consume valuable time from the project time line and quality software will not be delivered on time or on budget.

The minimal IT infrastructure that is required to efficiently lead and manage an Open Project is a Wiki, Project Management System, Bug Tracking System, Test Management System, and a Source Control System. My go-to applications for this minimal infrastructure are:

1. Trac - Wiki & Project Management System
2. Bugzilla - Bug Tracking system
3. Testopia - Test Management system
4. SVN - Source Control System

In conclusion, the bedrock of a successful Open Project is an IT Infrastructure that “just works” and does not consume project resources. The most cost effective way this can be realized by employing a hosting service like SVNRepository, which provides Trac, SVN, Bugzilla, Testopia, and SVN hosting services.

When I first installed Apache, MySQL, PHP, phpMyAdmin manually on a Windows machine, the whole process took hours! After learning that these applications can be installed by a single installer or package, I searched to the last page of the Internet for this time-saving program. In Open Source fashion, there is not one, but several such programs:

1. EasyPHP
2. Apache2Triade
3. WampServer
4. MAMP
5. XAMP

These technology stacks are NOT all created equal! They all have Apache, PHP, and MySQL, but the versions vary. Moreover, each stack also have additional programs like phpMyAdmin and Filezilla. Therefore, when evaluating what stack to exploit, determine if the programs and versions satisfy your requirements.

After researching, installing, and evaluating several stacks, my go to “*AMP” solution is XAMP because:

1. Windows Support
2. Linux Support
3. Mac OS X
4. Easy install
5. Clean un-install
6. Easy to use Web UI

Installing Apache, MySQL, PHP, and phpMyAdmin on an Windows machine via XAMP took less than 5 minutes!

How to hide the login block from all pages:

1. Navigation to: Administer –> Site building –> Blocks
2. Set the region of the “User Login” block to “none”
3. Click Save.
4. Open another webbrowser and append “?q=user” to the site url to login.
5. Enter the user and and password in the rendered User Login block.

I have been searching for an Open Source alternative to Visio for some time.  I found several alternatives.  The application that I have found most flexible and usable is Dia.

Dia supports several diagram types (e.g., flow chart, UML, etc.), as noted in the online help.  To view objects for each of these diagram types, select the ” ” in the In the floating window with objects and select ” ”

…and a list of all the diagram types will appear:

This is the coolest feature!

<<RAW>>

Summary

This module takes the values entered for pre-defined “source” fields and dynamically sets the values of predefined “target” fields via jQuery and AJAX.  The “source” and “target” fields can be of any field type; i.e., they are not limited to drop down menu fields.  There are two primary use cases for this module: Creating content and Editing content. For Example, there is a Drupal site that allows it users to create “Location” and “Field Trip” content:

Fig. 1 Location content

Fig. 2 Field Trip content

Creating Content Use Case

1. Create a new location. (Fig. 1)
2. Create a new Field Trip. (Fig. 2)
3. Enter Title
4. Select a date
5. Select a location from the drop down menu.
6. The Capital, Sunrise, and Sunset are populated with values based on the date and location selected.
7. Submit.
8. Extensions:
   1. The Editing Content Use Case (steps 2 - 7) is also applicable while creating content.
   2. If a value is not set for one of the source fields, then the target fields are not set.

Editing Content Use Case

1. Edit an existing Field Trip
2. Select a new date
3. The Capital, Sunrise, and Sunset are populated with new values based on the new date.
4. Select a new location
5. The Capital, Sunrise, and Sunset are populated with new values based on the new location selected.
6. Select a new date and a new location.
7. The Capital, Sunrise, and Sunset are populated with new values based on the new date and new location selected.
8. Save.

Technical Description

Technically speaking, these two use cases above represent a bidirectional communication between jQuery (client side) and Drupal (server side) via AJAX: $.get(url, params, callback); More specifically:

Fig. 3 Active Field Sequence Diagram

(1) The change event of the source field triggers an (2) AJAX call to a URL (i.e. “add/field-trip”), (3) which is mapped to a Drupal function via ActiveField_menu() hook that (4) calls the ActiveField_getTargets() function, which executes a SQL query to the Drupal database and (5) returns a JSON via drupal_to_js() function; (6) this JSON is then passed into anonymous function (i.e. the “call back”), which (7) sets the value of the target fields.

The params parameter of the AJAX $.get(url, params, callback) function is not specified in Fig. 3 above because its value depends on respective use case scenario being solved.  For example, if the target fields are not dependent on the values of the selected source fields, then value is “null”; in this scenario, the target field will be populated with default values when the change events of the source fields are fired.  In scenarios where the values of the target fields are in fact dependent on the values selected for the source fields, then params would look something like:

In the Location/Field Trip scenario, params would look something like:

The exact selector ids may vary from system to system.

A Drupal module can define its own theme and forms or interoperate  with an existing theme and forms.  The ActiveField module is an example of the latter.  In order to realize this, the .js file containing the JavaScript must be called from the ActiveField module itself and not from the theme layer (c.f.).  One way to realize this is via hook_alter_form().  This hook utilizes a form id to alter a form.  The form id of the Field Trip form is “field_trip_node_form”:

<input id=”edit-field-trip-node-form” type=”hidden” value=”field_trip_node_form” name=”form_id“/>

FireBug, can be used to obtain the field ids on the  page:

1. Go to the webpage.
2. Open up FireBug.
3. Click the HTML tab.
4. Click the Ispect menu item.
5. Move the mouse cursor over the fields (e.g. Capital, Sunrise, Sunset) and the respective HTML with the field id will be displayed to the console.

Code

The ActiveField module has the following files:

1. ActiveField.info
2. ActiveField.js
3. ActiveField.module

A .install file was not created because no database tables need to be created or deleted when the module is activated or disabled; or at least, not at this time.  Currently the “source” and “target” fields are pre-defined via code (i.e. hard-coded) and a separate instance of the module (i.e. copy/paste/modify) may be required for each set of “source” and “target” fields.  In ActiveField 2.0, the follow features will be implemented:

1. Pre-define “target” and “source” fields via Admin interface
2. Create multiple sets of “target” and “source” fields

Software

1. Drupal 5.3
2. CCK Module 5.x-1.6-1
3. Devel Module 5.x-0.4
4. jQuery Interface Library 5.x-1.0
5. jQuery Update 5.x-1.0
6. JSCalendar 5.x-1.0
7. FireFox
8. FireBug

References

Drupal API

1. drupal_ad_js()
2. hook_alter_form()
3. hook_menu()
4. check_plain()

jQuery

1. jQuery
2. Learning jQuery
3. Visual jQuery

Books

1. Building Online Communities with Drupal, phpBB, and WordPress
2. Drupal: Creating Blogs, Forums, Portals and Community Websites
3. Drupal 5 Themes
4. Pro Drupal Development
5. Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques
6. jQuery in Action

Videos

1. Lesson 12: jQuery Resurrected
2. Lesson 07: An intro to jQuery magic
3. Show login block using jQuery modal window
4. Tutorials:Quick and Dirty Ajax (Screencast)
5. Essentials of DOM and JavaScript
6. Drupal School: Tasty JQuery Modules
7. jQuery - Google Tech Talks
8. AHAH! - Ajax + FormAPI = More Responsive UI
9. jQuery AJAX forms

Blogs

1. Leaning jQuery
2. 15 Days of jQuery

Articles

1. Javascript, jQuery and AJAX
2. jQuery Hints and Snippets
3. Drupal and Ajax working together
4. Using jQuery
5. How to pass a value in a form (jQuery) to Drupal (PHP)
6. Using Ajax in Drupal 6
7. Storing what jQuery returns in a PHP variable
8. Tutorials: How to Get Anything You Want
9. Simplify Ajax development with jQuery
10. Modifying Forms in Drupal 5 and 6
11. Adding JavaScript to your theme or module
12. An Introduction to Unit Testing in Drupal

“Debugging”

1. Drupal Module Development Support
2. Drupal Dojo Discussion
3. Debugging Drupal via XDebug & Eclipse PDT
4. Quick-and-Dirty Debugging
5. Drupal Podcast No. 31: Drupal Development Tools
6. Methodology
   1. Client Side
      1. FireBug - use the ‘console’ tab to determine whether the AJAX callback is being invoked and to examine what is being returned
      2. FireBug - Click the “Profile” button.  Execute the respective use case. Click the “Profile” button again.  Review the resulting JavaScript function execution profile.
      3. FireFox - Delete the cache: Tools menu –> Clear Private Data…
   2. Server Side
      1. There are several options here.
      2. Quick Option: use  drupal_set_message(”FunctionName: entered”);

<<RAW>>

Querying a Drupal database requires knowledge of SQL and Drupal’s Database Abstraction Layer.  Once you have the result from the query, how you manipulate this returned object depends on how you want to utilize that data.  For example:

1. Adding a default value to a text field in a CCK content type
2. Adding values to a select field (a.k.a “drop down menu”) in a CCK content type

Steps

1. Define the SQL Query and store it in a variable
2. Call db_query with the SQL Query variable
3. Manipulating the Returned Object
   1. If you only need one field, then call db_result()
   2. Else, call db_fetch_object() or db_fetch_array()

Articles

1. Database Abstraction Layer
2. Making a database enquiry using db_query

Drupal API

1. db_query
2. db_fetch_object
3. node_get_types
4. db_result()

1. db_query
2. db_fetch_object
3. node_get_types
4. db_result
5. drupal_add_js
6. hook_nodeapi
7. hook_form_alter

NOTE: download and activate the Devel module

Resources

• What is screencasting
• Wikipedia Screencast
• Tools Comparison

Tools

• Wink - Freeware, Windows + Linux support
• Screen Kast - Open Source, Linux only
• Windows Media Encoder - Free MS Download, Windows Only

1. Dimdim - Free Web Meeting Application
2. Skype - Free Instant Messaging and Teleconference