Disclaimer

There are specific conditions you must follow in order to qualify for MasterRental, so make sure you check the terms and conditions that came with your card. They should be similar (likely identical) to the MasterRental terms on the MasterCard site, but check with your card provider to be sure. The benefits pamphlet is actually a really great read and may enlighten you to the other benefits of using a credit card (e.g., free extended warranties and refunds for things that the store may not accept).

Deadlines

1. Report accident to rental company and police within 24 hours
2. File insurance claim within 30 days of the incident
3. Submit required documentation within 180 days of the incident

My Circumstances

I rented a car with Avis using my HSBC MasterCard, and declined the Collision/Damage Waiver (CDW). Well, after some driving on the open road, I ended up in a guardrail (I won’t go into the details of that). Thankfully, there were no other cars involved in the accident.

Documents received:

1. All rental forms (receipt, rental agreement)
2. Rental car insurance information (Avis’ insurance, in glove compartment)
3. Rental car registration (also in glove compartment)

Post-Accident Actions

Some passer-bys called the police for me and came by to see if everything was alright (nice people). After the traffic officer came, we all had a chat about the situation and the people left. An accident report was written up and I was given a summary (in MA you have to request the report by mailing a request and processing fee to a police station). The officer called the local towing facility and soon I was sitting in the waiting room there, with my car in the lot. I had to fill out forms for the towing station. Rather than have the towing station tow the car back to Avis, I called Avis’ roadside assistance line (which took FOREVER and a million call transfers). This call constituted a report of the accident on Avis’ side. I payed the release fee for the towing facility. Unfortunately, the accident happened after 5pm on Friday, so the car couldn’t be towed until Monday. A friend picked me up from the towing facility.

Documents received:

1. Accident report summary
2. Towing facility receipt

Rental and Report Charge

On Monday, I went to the Avis facility to check on the status of the car. The car was towed on Monday and arrived at the Avis repair facility. Because it took all weekend, the rental contract wasn’t closed until Avis received the car again. I was charged for the full term of the rental (I only rented it for the weekend anyway). This showed up on my credit card activity online, and in my statement at the end of the month. I also sent in a check and request for the official police accident report to be sent to MasterCard.

Documents received:

1. Credit card statement showing rental charges (end of month)
2. Police report (sent to MasterCard)

Filing the Insurance Claim

I called 1-800-MC-ASSIST the Monday after the accident. Within a week I received a packet with details and the required forms from MasterCard (sent to my credit card billing address!) I filled out the forms and sent them out with a copy of my Driver’s License and copies of all of the documents I received above.
An Avis representative called me within a week for a follow-up about the accident and for information about my insurance (MasterRental). They initiated the contact with MasterCard and supplied their documentation.

Checking the Claim Status and Lessons Learned

I was able to check the status of my claim and see what documents they had and still needed at any given time by going to their claim website: http://www.yourclaimstatus.com/. The entire ordeal was resolved within four months (~120 days. The final deadline was 180 days). Overall this was an ordeal I hope to never repeat again. If it did happen, I would call MasterCard’s roadside assistance for the towing service, since they cover towing. It won’t happen because I was able to get a corporate ZipCar membership through my employer, and accident-related issues are handled by ZipCar entirely (the car and authorized driver are covered through Liberty Mutual).

References

• MasterCard Guide to Benefits
• ZipCar Insurance Information

Internet Explorer 6 is dead. We recommend not focusing resources and time on IE6 compatibility unless your target audience is based in South Korea (under 50% market share) or China (60%). This still amounts to less than 25% of internet users in Asia. In North America and Europe, IE6 currently has under 7% market share. In the United States, the percentage is under 6%. This is sure to drop even further when YouTube drops support for it on March 13, 2010. Also, Google no longer supports IE6 in its applications. On a final note, your audience is more likely to have a better browser at home than at work because they are not restricted by corporate security policies and may update and install any software they wish.

For statistics on browser usage by country please visit this StatCounter page.

Thank you,
YOURNAMEHERE

Contents

1. Photoshop Techniques
   1. Save for Web
   2. Convert to Smart Object
   3. Selecting Layers
   4. Copy merged
   5. Slicing’s other use
   6. Actions
   7. Text
   8. Flattened Versions
2. Creating the HTML and CSS
   1. Frameworks and Resets
   2. Quickly get Image Dimensions
3. Design in Firefox
   1. HTML Validator
   2. Web Developer
   3. Computed Sizes with Firebug
   4. In Place CSS Editing with Firebug and the Arrow Keys
   5. Pixel Perfect and Inverted Overlays
4. Closing
5. References

Photoshop Techniques

I usually start a conversion by preparing the assets. Working with the design first (as opposed to starting with the framework) also gives me a better sense of where everything goes.

Save for Web

Alt+Ctrl+Shift+S, or on Macs, Cmd+Opt+Shift+S. This is the key combination you’ll use to save every piece of the PSD you’re going to use for your design. From the Save for Web window, you can choose the best filetype for the image you’re saving based on quality and size.

Convert to Smart Object

For groups of layers (including text) that doesn’t use layer blending options and aren’t affected by adjustment layers, select the layers and/or groups involved and convert them to a Smart Object. A Smart Object is a temporary vector object that you can modify as a separate file (a PSB file). The modifications will appear in the original PSD. Double click on the smart object in the layers menu to edit it as if it were a new image. From the Smart Object edit window, you can Save for Web.

Selecting Layers

Ctrl+Click on the layer thumbnail to select the contents of the layer. This beats using the wand tool or something to select the transparent pixels around it. You can also do Ctrl-shift and Ctrl-Alt clicks on additional layer thumbnails to add and subtract them from the selection.

Copy merged

A godsend of a shortcut. Ctrl+(Macs: Command)+Shift+C. I use this for layers that have blending options set or are affected by adjustment layers. After you’ve copied it, do a Ctrl+(Macs: Command)+N and paste to the new file. Then Save for Web.

Slicing’s other use

I feel that slicing is an outdated method to chop up a PSD because complex designs will use overlays of all kinds. Slicing has other uses, though. Sometimes I’ll slice the document and have Photoshop generate HTML for me. I then open the generated document in Firefox and use Firebug to get the computed sizes for block elements later on.

Actions

Actions are so underused! These are macros that you can create simply by recording what you do. You can create an action that does any of the things I’ve listed above for you. For instance, next time you make a selection, start recording an action as you Copy Merged -> Create a New File -> Paste -> Save for Web. Stop recording and save your action (you might have to delete the steps after the Save for Web dialog appears). Next time you make a selection that needs to be Copy Merged and saved into a new file, just run the action and save as a new name! Here is a more in-depth tutorial on creating Photoshop Actions.

Text

Take note of the font-face and font-sizes in pixels used before you dive into the HTML. It’s okay to use pixel font sizes these days, but if you’re old-school like I am at least you can find the relative size now that you have them all.

Flattened Versions

Save a flattened version of the site. Print it out if you want. This will be useful for reference by eye, and for working with the Pixel Perfect Firebug extension. Finally, invert the colors of a flattened version and save it as a new file. You’ll also want this for Pixel Perfect.

Creating the HTML and CSS

This part should be simple—it just involves creating the <div>, <span>, headers, and paragraphs you need. If you took note of the font information like I told you to above, now is a good time to define it in your CSS. Besides putting a body background color/image in, the font stack really helps everything look like it’s nearing completion.

Frameworks and Resets

If you haven’t already formed your own, try adopting the popular ones (not if you’re on a deadline, though). Fluency with pre- or self-built, HTML and CSS frameworks means you already have the groundwork complete and only need to add more block elements as needed. You shouldn’t waste any time finding a reset or creating the same <div id="wrapper"> you do for every layout.

Quickly get Image Dimensions

For Windows users, in Explorer you can add a Dimensions column to the detail view. Right click on the column names and Dimensions should be one of the options available.

Design in Firefox

The number of development tools in Firefox makes it the single, indisputably best browser for web development. This is not to say it is the best at rendering, or fastest browser (both of which are Opera 10.5 beta at the time of this writing), but it is close enough and will make your job easier.

HTML Validator

If you’re on a PC this instant validation cue on the bottom right of the browser is incredibly helpful. Just make sure it’s always green. Double click it to see the errors if it isn’t. If you’re on a Mac, you can use the shortcut provided in the Web Developer extension for quick validation.

Web Developer

The designer and framework you’re using and should have covered most things this extension would be used to debug, but there are a few things left that it can help with.
One thing I do is test visited link status by going to Miscellaneous -> Visited Links to test the style of visited links.
I also do a Forms -> Populate Form Fields to test form field fonts.
Again, you can access a quick shortcut to HTML validation with this extension. Use it for both regular and generated source validation. Validate your CSS as well!
Finally, Ctrl+(Macs: Command)+Shift+F will is a quick and lightweight alternative to Firebug for finding out computed styles. Just hover over your element. Press the keys again to finish.

Computed Sizes with Firebug

As I mentioned before in the Photoshop Slicing section, sometimes I’ll slice the document and have Photoshop generate HTML for me. I then open the generated document in Firefox and use Firebug to get the computed sizes for block level elements.

In Place CSS Editing with Firebug and the Arrow Keys

One of the best things about Firebug is the ability to edit CSS in place. From either the HTML or CSS tab, you can add and edit rules and properties by clicking on them. If you put the cursor on a numeric property you can use the up and down arrow keys to increment and decrement the value (tip: use Shift+Arrow to increment by 10). In this way, you can move and resize block elements and change margins and paddings. Don’t forget to copy the final value into your CSS document.

Pixel Perfect and Inverted Overlays

Firebug is much more useful with Pixel Perfect. This extension lets you place elements on the browser screen and adjust their position and opacity. Drag the overlaid image to reposition it. Use the panel to hide or adjust opacity. I usually add a flattened version of the design and an inverted color flattened version. With the inverted version, set the opacity to 0.5. If your block level elements are in the correct place, the screen should turn gray. Anything that doesn’t match up to the PSD exactly will be in color (this works similar to the Photoshop “Difference” blending mode). You can use this with the Firebug technique described earlier to quickly get everything in the exact pixel location.
Here’s an example of the inverted overlay on top of this post, one pixel off:

And here is the same overlay when the elements are in the exact positions (I shifted the overlay, but for designing you should shift the elements):

Using Firefox and Firebug to do your design, you’re just moving blocks around with the arrow keys. It’s WYSIWYG editing without the pitfalls!

Closing

I’m not a fan of those rapid PSD to HTML shops only because I am wary of the quality of work they produce. I’m sure there are a few good ones, but I still prefer to do it myself. If you’ve got any tips or tricks of your own, leave me a comment!

References

1. Firebug
2. Pixel Perfect Firefox Extension
3. Using Actions to Automate Tasks in Photoshop

This information in this article pertains to WordPress 2.8+ and Drupal 6.15. Here are some tips/parallels that may help you as a WordPress user jumping into Drupal.

Installation

The installation procedures of Drupal and Wordpress are similar, but there are a few operations you have to perform manually in Drupal:

WordPress has greatly simplified its installation procedure by automating the creation of the wp-config.php file based the the wp-config-sample.php file. Drupal has yet to do this up—you have to manually create the settings.php file in the sites/default folder by creating a copy of default.settings.php and renaming it.

A vanilla WordPress install in simple given that the directory structure is created for you. In Drupal, after you first upload the files, you have to create additional directories. From your root, go to the sites/default folder and create a files folder. Make the folder writable if it isn’t already (see the Drupal status report).

I also recommend going to the sites/modules folder and creating folders called contrib and custom. Put modules you download from Drupal.org into contrib and modules you create into custom.

Theming

Here is a table of Drupal theme file and folder equivalents:

The similarities in theming begin to diverge at page.php/index.php. From here, Drupal uses different files for “nodes,” “blocks,” and optionally “panels,” “contexts,” “views,” and so on depending on what modules you are using.

Let me know if you have any more useful parallels to draw. I hope this helps you make sense of things—I know it would have helped me when I started.

The Scenario

• You have a parent page with its own tracking code: UA-xxxxxx-x.
• The parent page has an iframe in it with a child page.
• The child page has its own tracking code as well: UA-yyyyyy-y.
• You want to independently track both pages.

Parent Page

Because we are dealing with cross-domain cookies, your page needs to serve a P3P header or link to a P3P policy to create the correct cookies in Internet Explorer 7 and 8 (and possibly Safari).

P3P Policies

P3P is one of the W3C’s failed web standards. It was implemented in Internet Explorer 7 and 8, (and possibly Safari,) and prevents browsers from creating cross-domain (third-party) cookies in the default (Medium) privacy setting (See Internet Explorer -> Internet Options -> Privacy Tab -> Settings).

To create a P3P policy in ASP.net, PHP, JSP, ColdFusion, or through Apache’s .htaccess, you only need to add some code to the top of your page. See Viral Patel’s page (and the comments) for the correct header for your pagetype. For IIS settings, see Microsoft’s support page or Scott Hanselman’s blog post. If you aren’t using IIS, Apache, or server-side scripting, you can create an XML policy file and include it into the <head> section of your page using the <link> tag. The proper code, and more information on P3P is available in the W3C’s documentation.

Parent Page Code

Following the P3P header, here is the code for the parent page (explanation is in the comments within).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Parent Page</title>
<!-- add your P3P <link> here if you aren't using server-side scripting to
	deliver a header -->
</head>
<body>
<h1>Parent Page</h1>

<!-- Here is the iframe, do not specify an src. You'll see why later. -->
<iframe height="300" width="400" id="childPage">
	<p>Your browser does not support inline frames.</p>
</iframe>

<!-- As usual, insert ga.js and run pageTracker before the end of BODY. -->
<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script type="text/javascript">

/* We are renaming pageTracker to parentPageTracker for clarity. */
try {
	var parentPageTracker = _gat._getTracker("UA-xxxxxx-x"); 

	/* The parent domain is the only one setting a cookie, so we have to define
		the cookie parameters here: */
	/* Don't include "www" or "subdomain" -- the period in front means the
		cookie will apply to them as well. */
	parentPageTracker._setDomainName(".PARENTDOMAIN.COM");
	/* Enable the linker, which is used to pass cookie information to another
		domain  */
	parentPageTracker._setAllowLinker(true);
	parentPageTracker._setAllowHash(false);

	/* Run the tracker: */
	parentPageTracker._trackPageview();
}
catch (err) {
}

/* The url of the child page (iframe src) is on a different domain.
	We have to let google analytics know about this so the src must be inserted
	with javascript. We're using the linker we enabled above: */
var iframe = document.getElementById("childPage");
iframe.src = parentPageTracker._getLinkerUrl("http://MY.CHILDPAGEURL.COM/");  

/* Now we add a second pageTracker for the child, called childPageTracker */
try {
	var childPageTracker = _gat._getTracker("UA-yyyyyy-y");

	/* Setting the domain to none allows us to track across different
		domains. */
	childPageTracker._setDomainName("none");

	/* Allow the linker again, in case the iframe has an iframe that wants to
		be tracked as well: */
	childPageTracker._setAllowLinker(true);
	childPageTracker._setAllowHash(false);
	childPageTracker._trackPageview();
}
catch (err) {
}

/* You can continue adding if you have more analytics codes to track-- e.g.
try {
	var thirdPageTracker = _gat._getTracker("UA-zzzzzz-z");
	thirdPageTracker._setDomainName("none");
	thirdPageTracker._setAllowLinker(true);
	thirdPageTracker._setAllowHash(false);
	thirdPageTracker._trackPageview();
}
catch (err) {
}
*/

</script>
</body>
</html>

Child Page(s)

The child page should contain the standard Google Analytics code. No modifications need to be made for the child page (iframe contents). Lucky you.

Conclusion

Hopefully this will soon be outdated with the adoption of the more optimized Asynchronous Tracking code and a better help document.

References

1. Google Analytics Documentation — Tracking API: Domains and Directories
2. Google Analytics Documentation — Cross-Domain Tracking
3. How to set third-party cookies with iframe?
4. How to configure IIS to use Platform for Privacy Preferences (P3P)
5. The importance of P3P and a Compact Privacy Policy
6. W3C Specification on P3P

Requirements:

• Webserver(s) running ColdFusion and SQL Server.
• ColdFusion datasource already set up (plenty of tutorials for this, too).

Objectives:

• Create database tables.
• Create rating queries.

Information Architecture

First we need to create tables in the database. Here is the database structure we will be following:

Not that it matters, but this is an identifying relationship, meaning that the games_ratings table is meaningless without the games table. Also, we have a one game to many ratings relationship.

SQL for the games table:

CREATE TABLE [dbo].[games] (
	[id] [int] IDENTITY (1, 1) NOT NULL ,
	[name] [varchar] (255) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL ,
	[url] [varchar] (255) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL ,
	[rating] [tinyint] NULL ,
	[weight] [int] NULL
) ON [PRIMARY]
GO

This is pretty straightforward. The weight is for ordering the entries, i.e., manually sorting the games. Rating is an integer from 1-5.

SQL for the games_ratings table:

CREATE TABLE [dbo].[games_ratings] (
	[game_id] [int] NOT NULL ,
	[rating] [tinyint] NOT NULL
) ON [PRIMARY]
GO

The game_id is a foreign key to the id column in the games table.

Add some sample games:

We won’t be creating a custom CMS to enter games in this exercise, so let’s just insert them via SQL:

INSERT INTO [games] ([name], [url]) VALUES('Super Happy Fun Game', '/shfg')
INSERT INTO [games] ([name], [url]) VALUES('Awesome Adventure Omega', '/aao')
GO

The IDs will be automatically generated (1 for Super Happy Fun Game and 2 for Awesome Adventure Omega), and we aren’t using rating or weight.

A Test UI

Now that we have the database architecture in place, we need a way to add entries. First, let’s create an HTML form to add entries for debugging:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Add Game Rating</title></head><body>
<form action="gamesRate.cfm" method="post">
<fieldset>
<table>
<tr><td>ID:</td><td><input type="text" size="2" name="id" id="id"></td></tr>
<tr><td>Rating:</td><td><input type="text" size="1" name="rating" id="rating"></td></tr>
</table>
<input type="submit" />
</p>
</fieldset>
</form>
</body>
</html>

I’ve named this file gamesRate.cfm. The form posts to itself, as you can see on line 4. There’s a field for the game ID and a field for the rating. If you check out this file on your server, you should see the form. You can submit values to it, but it won’t do anything yet.
For convenience, lets add a table that displays the game names and IDs underneath the form (and before the </body> tag):

<cfquery name="getGames" datasource="#MYDATASOURCE#">
	SELECT 		id, name
	FROM 		games
	ORDER BY 	id DESC
</cfquery>
<table cellpadding="8" cellspacing="0">
<thead><tr>
<th>Game ID</th>
<th>Game Title</th>
</tr></thead>
<tbody>
<cfoutput query="getGames"><tr>
<td>#getGames.id#</td>
<td><a href="#getGames.link_url#">#getGames.name#</a></td>
</tr></cfoutput>
</tbody>
</table>

Here is our first instance of a ColdFusion Query. Replace MYDATASOURCE with the correct value for your ColdFusion datasource. If you visit gamesRate.cfm now you should see the form and a table with IDs and game names. The values should be the ones we INSERTed earlier.

Next, we want to process the form in the event it is submitted. At the beginning of the gamesRate.cfm file, we are going to add a cfif statement that checks for form submissions. We’ll do some very basic sanitization checks, and finally insert the rating if the values are in the correct format. Here’s the code:

	
		
	

	
	
		
			
		
		
			
		
	

	
	
		
		
		 SELECT name
		 FROM #games_table#
		 WHERE id = #form.id#
		
		
			
		
	

	
	
		
		INSERT INTO #game_ratings_table# (
			game_id,
			rating
		) VALUES (
			#form.id#,
			#form.rating#
		)
		
	

So first we checked for a submit. Then, we checked that the fields were filled in and filled with numbers. We check to see if the game exists. Finally, if everything is ok, we insert the new rating. An error message will stored in variables.error if anything went wrong. If you try your form out now, and check your games_ratings table, you should see values inserted.

Updating the ratings

Rather than calculate the average ratings on every page request, we will be using a separate script to generate the averages. A DTS package or other query scheduler (ColdFusion has one!) can run your query on a set schedule. This can reduce your SQL server load. We’ll add the following code to updateGamesRatings.cfm and run it every half hour (or to a DTS package or other scheduled service):

>cfquery name="getRatings" datasource="MYDATASOURCE" result="getRatingsResult">
	SELECT 		AVG(gr.rating) AS new_rating, MAX(g.id) as id, MAX(g.name) as name
	FROM 		games_ratings gr
	LEFT OUTER JOIN games g ON gr.game_id = g.id
	GROUP BY	gr.game_id
>/cfquery>

>html>>head>>title>Generate Ratings>/title>>/head>>body>
>p>>cfoutput>>strong>#getRatingsResult.RecordCount#>/strong> records updated.>/cfoutput>>/p>
>cfoutput query="getRatings">
	>p>The new average rating for >strong>[#id#] #name#>/strong> is >strong>#new_rating#>/strong>>/p>
	>cfquery name="updateRating" datasource="MYDATASOURCE">
		UPDATE 	 	games
		SET 		rating = >cfqueryparam value="#new_rating#" CFSQLType = "CF_SQL_INTEGER">
		WHERE 		id = >cfqueryparam value="#id#" CFSQLType = "CF_SQL_INTEGER">
	>/cfquery>
>/cfoutput>
>/body>
>/html>

When you visit this file, it outputs the result of a query. The query output is the game ID, name, and average rating. The ratings are calculated for a particular game ID in the first cfquery and inserted in the output loop.

Conclusion

From this code you should be able to deviate any number of displays for the ratings. You can integrate this code with any number of ratings systems, such as jQuery Star Rating Plugin, Star Rating widget, or some HTML or Flash system. Simply set the $.post() or action URL to the gamesRate.cfm page you created. It could also benefit from a cookie (ok), user login (recommended), or other tracking system to prevent multiple ratings.

The Demo

In about 4 hours I’ve created a demo RPG here using jQuery, JavaScript, CSS, and the Javascript jQuery Hotkeys Plugin. I’m surprised no one has created a complete, working one yet, as tile-based RPGs are much easier to make than action games with collision detection.


If anyone is interested, I might continue building this, adding in turn-based menu battles (oh boy!), a shop system, and AJAX saving and loading with an HTML5 backend. Leave a comment!

Outro

Not that I’m against Flash (looking at you, Apple), but JavaScript is much easier to learn and there is much potential in using it for things other than special effects and Web Applications. We’ve already recreated all the basic elements used in the Nintendo games of yore using CSS and jQuery; e.g., sprite animation (with many techniques) and parallax scrolling. Combined with the super fance sliding, fading, easing, and opacity animations we are already afforded, the browser is a feature rich playground for game developers. Hopefully we’ll see more techniques emerge, and with them more games. I am looking forward to jQuery being the new QBASIC.

References

1. jQuery Browser Compatibility
2. Acid Browser Tests
3. gameQuery
4. jQuery Video Game Remake: T&C Surf
5. Javascript jQuery Hotkeys Plugin
6. JQuery Sprite Animation Plugin
7. jParallax
8. Scrolling Parallax jQuery Plugin

Unset == Upset

One way to remove the label is to unset the title element for the field in question:

unset($form['ELEMENT_NAME']['#title']);

This would be done in your theme’s (or module’s) hook_form_alter(). The downfall to this method is that it will most certainly yield unpleasant results when the theme engine is trying to render the form. The best example of this is the use of the #title element in form validation. If the field does not validate (e.g., not filled in when required or invalid format), then the theme engine outputs #title is required or whatever the case may be. With the #title missing, only the “is required” is shown.

A Better Way

You can unobtrusively extend FormAPI, creating a new property to switch labels on and off. The first step to this is to override theme_form_element(). You can add this code to your theme’s template.php file. Most of the following code is from the core file form.inc except lines 16-26.

/**
 * Overriding drupal form.inc
 * Return a themed form element.
 */
function MYTHEME_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '
*' : '';

  if (!empty($element['#title']) && !$element['#hidetitle']) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' '. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."\n";
    }
    else {
      $output .= ' '. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."\n";
    }
  }
  $output .= " $value\n";
  if (!empty($element['#description']) && !$element['#hidedesc']) {
    $output .= '
'. $element['#description'] ."

\n";
  }
  $output .= "

\n";
  return $output;
}

On line 16 we are checking for a new condition, the boolean value of $element['#hidetitle']. If the value is true, the if block is skipped, so the label is not displayed. We do a similar thing on line 26, this time with $element['#hidedesc'] to hide the description. These two conditions are the only differences from the vanilla form.inc.

Now that the boolean checks are in place for our new elements, we only have to add these new properties to our form elements. If you’re building a form using FormAPI, do something like this (example is an e-mail textfield):

$form['myfieldset']['email'] = array(
  '#type' => 'textfield',
  '#title' => t('E-mail Addresss'),
  '#default_value' => 'email',
  '#description' => t("Your e-mail address."),
  '#maxlength'=> 250,
  '#size'		=> 25,
  '#required' => TRUE,
  '#hidetitle' => TRUE,
  '#hidedesc' => TRUE,
  );

The new properties are on lines 9 and 10. When you output this field using <?php print drupal_render($form['myfieldset']['email']); ?>, the label will not be displayed. For a textfield the description is never displayed, so #hidedesc really only applies to fieldsets.

If you built your form using the Webform module, or you’re using someone else’s form, you’ll have to perform a hook_form_alter(). I made a webform_hidetitles module for one project that does only this. You would add the new properties like so:

if($form_id == 'webform_form_id') {
  $form['submitted']['email']['#hidetitle'] = true;
}

Replace form_id on line 1 with your own form id (you can find this with Devel), and the form element (email in this case) with your own form element.

Conclusion

Now that you know how this works, maybe you can go write and contribute a module that makes it easy to optionally display form labels and descriptions.

This was my oldest line of credit. I opened it in college and used it for about a year until I switched to an HSBC rewards card. Just last week I received a letter in the mail informing me that I would be charged a $60 annual fee if I did not make $2,400 worth of unreturned purchases annually.

It was a good card: the APR I had was very low (not that it mattered) and I could get a soft pull for a limit increase every six months or so. But considering that:

1. I don’t get cash back or rewards from this card
2. This was my second smallest line of credit, at $3,500
3. I haven’t used it (maybe once) since 2008
4. My next oldest line of credit is only a month apart

There shouldn’t be a big impact on my credit score given the factors. I called the number on the letter to “opt-out” of the annual fee (read: cancel the card). The operation was quick and painless, although the phone rep sounded sad to hear I was closing the account. I’m happy about this actually, here’s to a clean 2010!

Prerequisites

You should:

1. have a Drupal installation to work with.
2. know how to administer Drupal (e.g., install and activate modules, add blocks).
3. know how to create a basic block.

Learning Objectives

You will learn:

1. how to create a .install file to create a database table.
2. how to create a block with a form.
3. how to process a form in Drupal.
4. how to perform database transactions in a Drupal module.
5. how to theme a form.

The proposed block

The proposed block consists of a form with a fieldset, a text-input field, and a submit button. On submission, the text input field is validated as an e-mail address. If it does not validate, a Drupal error message is returned. Otherwise, the e-mail address will be saved to a database, an e-mail will be sent to the address, and a “thank you” message will be displayed. We will call this a “Persistent E-mail Capture Block” and use “pecapture” as its machine name.

This is what we’re aiming for:

The .info File

You know what it is and how it works from the Drupal developer’s guide. Our .info file will contain the following:

; $Id$
name = Persistent E-mail Capture
description = Provides a block with a form to enroll in subscriptions.
version = "6.x-0.0.1"
core = 6.x
php = 5.x
package = Other

If you need a refresher on what anything does, see the Drupal manual page on .info files.

The .install File

As described earlier, we are using a database table to store e-mail addresses. Here is our very simple database model:

We will now transform this model into an .install file schema:

<?php
// $Id$

/**
 * Implementation of hook_install().
 */
function pecapture_install() {
  drupal_install_schema('pecapture');
}

/**
 * Implementation of hook_uninstall().
 */
function pecapture_uninstall() {
  drupal_uninstall_schema('pecapture');
}

/**
 * Implementation of hook_schema().
 */
function pecapture_schema() {
  $schema = array();
  $schema['pecapture'] = array(
    'fields' => array(
      'capture_id' => array(
        'type' 		=> 'serial',
        'unsigned' 	=> TRUE,
        'not null'	=> TRUE,
      ),
      'email'=>array(
        'type'		=> 'varchar',
        'length'	=> '250',
        'not null'	=> TRUE,
        'default'	=> '',
      ),
    ),
    'indexes' => array('capture_id' => array('capture_id')),
    'primary_key' => array('capture_id'),
  );
  return $schema;
}

When you activate your module, Drupal executes the hook_install() function, pecapture_install() in this case. Likewise, in deactivation or removal, the hook_uninstall() function is executed— pecapture_uninstall() for us.
Our hooks are pretty simple. Their one task is to install or uninstall the pecapture schema. The function pecapture_schema() returns an array of arrays, which Drupal uses to build a table. The structure of this array of arrays is pretty straightforward and mirrors our database model exactly.

The .module File

The .module file should have an opening php tag and a CVS tag as its first two
lines:

<?php
// $Id$

After that, we will add our own code. I’ll go over each function based on its dependency on other functions. The hooks are not necessarily the order Drupal executes them, but that doesn’t matter.

General Functions

First up are the standard hooks. These are all described in the Drupal developer’s guide, so I won’t reinvent the wheel here.

/**
 * Display help and module information
 * @param path which path of the site we're displaying help
 * @param arg array that holds the current path as would be returned from arg() function
 * @return help text for the path
 */
function pecapture_help($path, $arg) {
  $output = '';  //declare your output variable
  switch ($path) {
    case "admin/help#pecapture":
      $output = '<p>'.  t("Provides a block for the persistent e-mail capture form.") .'</p>';
      break;
  }
  return $output;
} // function pecapture_help

/**
 * Implementation of hook_perm().
 */
function pecapture_perm() {
  return array('access pecapture content', 'administer pecapture');
}

Our Functions

Now for the good stuff: functions providing the unique functionality of our block. We will begin with the function that actually creates a block: hook_block(). In this case, our function is called pecapture_block().

/**
 * Implementation of hook_block
 * @param string $op one of "list", "view", "save" and "configure"
 * @param integer $delta code to identify the block
 * @param array $edit only for "save" operation
 */
function pecapture_block($op = 'list', $delta = 0, $edit = array()) {
  $block = array();
  if ($op == 'list') { // Generate listing of blocks from this module, for the admin/block page
    $block[0]['info'] = t('Persistent E-mail Capture Form Block');
  }
  else if ($op == 'view') { // Generate our block content
    $block['subject'] = ''; //'Persistent E-mail Capture Form';
    $block['content'] = pecapture_displayform();
  }
  return $block;
} // function pecapture_block

You’ll recognize the list part from the Drupal guide. Our ‘view’ operation is different, though. We aren’t giving it a subject, and we’re using a function to generate the contents.

Here is that function:

function pecapture_displayform() {
  return drupal_get_form('pecapture_blockform');
}

All this function does is return another function’s value! We use it to facilitate theming later on. The return value calls drupal_get_form(), which takes a function name as an argument.

The function name provided is pecapture_blockform():

function pecapture_blockform(&$form_state) {
  $form = array();
  $form['pecapture'] = array(
    '#type'			=> 'fieldset',
    '#title'		=> t('Don\'t Miss Out'),
    '#description'	=> t('Sign up for National Train Day updates.'),
    '#collapsible' 	=> FALSE,
    '#hidefieldsets' => TRUE,
  );
  $form['pecapture']['email'] = array(
    '#type' => 'textfield',
    '#title' => t('E-mail Addresss'),
    '#default_value' => 'email',
    '#description' => t("The e-mail address to which you will receive updates."),
    '#maxlength'=> 250,
    '#size'		=> 25,
    '#required' => TRUE,
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Keep me updated!'),
  );
  $form['#theme']     = 'pecapture_displayform';
  $form['#validate']  = array('pecapture_blockform_validate');
  return $form;
}

This function holds a Drupal form definition. Drupal has a special system for creating forms using an array of arrays. It works the same as creating a database table in Drupal. First we build a fieldset with a title (which equates to the <legend> tag and a description, which is simply the first paragraph in the fieldset. Then we create the e-mail field and submit button.

The line $form['#theme'] = 'pecapture_displayform'; tells Drupal that when outputting this form, use ‘pecapture_displayform’ as the argument for the theme() function. The theme() function currently has no clue what to do with ‘pecapture_displayform’ so we have to give it a definition using hook_theme():

/**
 * Implementation of hook_theme()
 */
function pecapture_theme() {
  $path = drupal_get_path('module', 'pecapture') . '/theme';
  return array(
    'pecapture_displayform' => array(
      'arguments' => array('form' => NULL),
      'template' => 'pecapture-displayform',
      'path' => $path,
    ),
  );
}

This tells Drupal that when theme(‘pecapture_displayform’) is called, the file pecapture/theme/pecapture-displayform.tpl.php should be returned for output. We have to create that file:

<div class="sidebar-email">

<img src="<?php print base_path().path_to_theme(); ?>/images/headline_dontmissout.jpg" alt="Don't Miss Out" width="211" height="30" border="0" />
<p><?php print $form['pecapture']['#description']; ?></p>
<br />
	<?php print drupal_render($form['pecapture']['email']); ?>
	<?php print drupal_render($form['submit']); ?>
	<div style="display: none;">
	<?php
		unset($form['pecapture']);
		unset($form['submit']);
		print drupal_render($form);
	?>
	</div>
</div>

This creates a <div> for the block, displays a header image, prints the description, displays the e-mail field and submit button, and flushes the rest of the form that we don’t need. You can customize this to your liking. Save this in the theme subdirectory in your module’s directory.

Now that you know what happens with $form['#theme'] = 'pecapture_displayform'; we can go back to the function pecapture_blockform(), and explain the line: $form['#validate'] = array('pecapture_blockform_validate');

This line tells drupal to use the function pecapture_blockform_validate() to validate the form before it is submitted. Here is the code:

function pecapture_blockform_validate($form, &$form_state) {
  $email = $form_state['values']['email'];
  if (strlen($email) < 1) {
    form_set_error('email', t('Please provide your e-mail address.'));
  }
  else if (!eregi('^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.([a-zA-Z]{2,4})$', $email)) {
    form_set_error('email', t('That is not a valid e-mail address.'));
  }
  else if ($email_user = pecapture_getUserByField('email',$email)) {
    if (isset($email_user)) {
      form_set_error('answers', t('Your e-mail address has already been subscribed.'));
    }
  }
}

This checks to see if the e-mail address field was blank, if it matches an e-mail regular expression, and if the e-mail address already exists in the database. We are using the function pecapture_getUserByField(‘email’,$email) to find a user in the database, but we need to write that. Here it is:

function pecapture_getUserByField($field,$data){
  $q = 'SELECT capture_id FROM {pecapture} WHERE %s LIKE \'%s\' LIMIT 1';
  $q = db_fetch_array(db_query($q,array($field,$data)));
  if (isset($q['capture_id']))
    return true;
  else
    return false;
}

This very simply selects the e-mail address from the database and returns true or false. This concludes our validation function.

The final function in our module is the hook_submit() function for the form:

function pecapture_blockform_submit($form, &$form_state) {
  $values = $form_state['values'];
  $fields = array('email');
  $q = 'INSERT INTO {pecapture} ('.implode(',',$fields).') VALUES (\'%s\')';
  $insert = array();
  foreach ($fields as $f) {
	$insert[] = $values[$f];
  }
  db_query($q, $insert);
  $user = $insert;
  drupal_set_message('Thanks for subscribing!');
}

This just creates a query based on the form values and runs it, then queues a Drupal message.

Conclusion

This could have been accomplished with the modules Webform and Webform Block or Node As Block or PHPTemplate to insert a node into a region, but creating your own module in this case offers a level of theme output greater than what Webform allows without some intricate hooks (try and remove the form label!). You should now also have a better understanding of how to create a Drupal module, form, and hook into themes.

Further Reading

I recommend following these tutorials next, in order:

1. Creating Our First Module using Drupal 6
2. Creating “Simple” Drupal Modules, and Filling the Functionality Gap