Home » Blogs » david's blog

Developing Drupal Applications for iPad, Part 1

Developing Drupal Applications for iPad, Part 1

Submitted by david on Tue, 03/08/2011 - 11:38

Note: This tutorial is written for Drupal 7 and uses hooks not available in Drupal 6. However, the same techniques can be applied to D6 websites with slightly different hooks.

Developing a mobile version (for example an iPad version) of your Drupal 7 website can be a fairly straight forward process. Without getting into performance and optimization, I'll demonstrate how a simple custom module can provide you the flexibility to change the output for an iPad ready version of your site. Bear in mind there are a number of ways to do this, and the best solution for you will depend on your application or website and your end goal. For instance, you may want to load a completely different theme, or simply output alternative html and slightly modified node templates (for example). I'll demonstrate how you can replace your theme's html with HTML5 and using a modified node template. This should get you started if you've ever been wondering how to do this.

First things first: We'll need a way to test if a device is an iPad or not. If you don't have an iPad, you can setup Safari on your mac to simulate an iPad user agent by following this guide. Note: This simply sends a string to the web server that says it's an iPad, even though it is not. It will not render like an iPad, so keep that in mind when you think your website is performing well if you haven't tested it on an actual iPad!

Next, we'll need a way for your application or website to detect your browser's user agent and decide what to do with it. There's a number of stages and ways to detect the user agent, but for an iPad this guide clearly outlines ways you can target an iPad in JavaScript, PHP and .htaccess. We'll be targeting the user agent at the PHP level.

In Drupal 7, there's an html.tpl.php which you can override by creating your own template in hook_theme() and preprocessing the html with hook_preprocess_html(). It is in the hook_preprocess_html, hook_preprocess_page, and hook_preprocess_node (as well as for views, etc), where the magic will happen.

Create a custom module, and add the following code to tell Drupal to use an alternative html template if the device is an iPad. This is one way you can start integrating html5 into your site, or extending this functionality to only privileged users-- say for testing a next version of your site on a different device.


/**
* Implementation of hook_preprocess_html()
*/
function mobile_preprocess_html(&$vars) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($isiPad) {
$vars['theme_hook_suggestions'][] = 'html__mobile';
}
}
/**
* Implementation of hook_theme().
*/
function mobile_theme() {
$items = array();
$items['html__mobile'] = array(
'template' => 'html--mobile',
'arguments' => array('variables' => array()),
);
return $items;
}

Now you can create a new file called html--mobile.tpl.php (notice the dashes "--" instead of underscores "__"). It's in this file that we'll customize the output of the html. I've chosen to go with HTML5 for this example.

html--mobile.tpl.php

<!DOCTYPE html>
<html lang="<?php print $language->language; ?>">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width" />
<?php //print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>

Now, if you load this page in an iPad (or your simulated Safari browser), you'll notice the site looks identical to the regular version. That's because we're still using the same theme and outputting the same styles and scripts. You may want to preprocess your scripts and styles to limit how much is sent to your iPad. If you go with full HTML5, you'll probably want to start fresh and load your own css and js files to take advantage of CSS3 and touch specific javscript. So I'll show you how you can do this. Note: You may not always want to start from scratch with css and js, so take a look at hook_alter_js() in Drupal 7. Or, you may be able to create a hook_add_mobile_js() depending on your needs. Keep in mind, if you're creating an iPad specific version of your site, you might as well take advantage of some of the frameworks and groundwork others have already built. So why not start from scratch and utilize lightweight css and js.

To start your css and js from scratch, you can add the following code to your mobile.module

/**
* Implementation of hook_process_html()
*/
function mobile_process_html(&$vars) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($isiPad) {
global $baseurl;
$vars['styles'] = '<style type="text/css" media="all">@import url("'. $baseurl . drupal_get_path('module', 'mobile') .'/mobile.css");</style>';
$vars['scripts'] = '<script type="text/javascript" src="'. $baseurl . drupal_get_path('module', 'mobile') .'/mobile.js"></script>';
}
}

It's barebones, at this point, but hopefully it gives you enough insight to tackle your very own iPad specific application or website in Drupal. Good luck, and as always if you've found a better solution or have another way of doing things, share your thoughts in the comments below.

Now you're ready to build additional features for your website, such as location based services and all of the HTML5 and CSS3 features.