The Challenge: Add new “pages” (page divs) during execution in a mobile app. This was part of a project using jQuery Mobile and PhoneGap, and the information that I wanted to display wouldn’t be available until the app ran and was subject to change. In this case, the app lists a number of companies, and each was supposed to have their own “page” within the app. Tap the company name, see the company info. Simple, right?

The Reason: The app I was working on had a basic layout that could be coded beforehand, but much of the data would be unknown until the app actually ran and pulled that data from a server. Since the various companies that the app listed could change at any time, this needed to be dynamic. While the approval time for apps on mobile devices is enough of a burden (up to three weeks or more), I had the additional hurdle that an update for every new company might degrade user confidence. Yes, updating your apps too frequently can erode confidence, because the users start wondering what, exactly, you’re screwing up so bad that you need to patch it every week or two.

The Failed Approach: On an initial build of the app, I used a simple method to accomplish this: update a single page. Yep. When the user clicked the button to see a particular company, the app would have to dig through it’s little database, pull out the company name, logo, and other information, then shove it into containers for each piece of info. Sounds great. Well, it worked, but it was slow. Local storage on a device can be quite slow, especially when it comes to images (the logo, in this case). The speed gets worse if you’re pulling the images from the web. It was slow enough that users would sometimes see the logo of another company before the app had a chance to update the container with the new image. Nasty.

The Goal: Make a “page” (a page div) for each company as soon as the data comes in. Modern browsers, including the browser implementation within a PhoneGap project, lives and dies by the DOM. If you’re not familiar with it, long story short is that it is the “living” version of web pages and web data that your browser actually interacts with. My goal, then, was to find a good, reliable way to make new pages inside the DOM, as the data came in.

The Solution: I tried a lot of things that did not work. This included trying to create new page divs and append them to the page’s body element. No dice. By the way, as the title says, this was for a jQuery Mobile project on PhoneGap. PhoneHap is not necessary for this to work, but jQuery Mobile and jQuery are. Here’s the one method that did work:

1) Create a (just one) static “template” page in your html document. It can be as simple or as in-depth as you want. It can be empty, or you can structure the whole thing the way the rest of the pages will look. In my case, I could create a header area for the company name, an area for the logo, a text box for additional information about the company, and another text box for the phone number. Whatever you like. The below example is a simple one, but it doesn’t have to be. Important: assign the template div an id so it will be easily referenced later in code.

<!–// BASIC COMPANY VIEW PAGE //–>
<div data-role=”page” id=”page_basic_company”>

<div data-role=”header”> <h1></h1> </div>
<div data-role=”content”> </div>

</div>
<!–// END BASIC COMPANY VIEW PAGE//–>

2) Clone the template div, change its id  and data-url values to the same thing, and then attach it to the body. Yes, all in one step. For editing simplicity, I’ve also assigned the new div to a jQuery variable. By the way, the [a] below is because I was iterating through an array of companies (called company_list). The array came in as JSON via AJAX, and here we go.

var $new_company_page = $(‘#page_basic_company’).clone().attr(‘data-url’, company_list[a].business_id).attr(‘id’, company_list[a].business_id).appendTo(‘body’);

3) Use the jQuery variable to reference the new page div and go to town. Add content. This can be anything from completely replacing the contents with new html to picking specific children elements to modify.

$new_company_page.children(‘.phone_box’).text(’555-555-5555′);

 

Hope this helps. If anyone figures out a better way, please do let me know. Enjoy.

Usually, processing form data means getting either POST or GET data from a form, and trying to figure out, in code, what you have, and then do something with it.  This can be easy or complicated, depending on how much is being passed in.  Email address only? Easy.  Checkboxes, optional fields, and so on, all together?  Pain.  Often, a lot of form processing is done with stacks of “if” statements.  This sucks.  Here is a better way:

From now on, I want you to name all of your “real” form elements (ones that have data that could change, so not buttons) using the name you would have given then, plus an array name, that they will all share.

So,

<input type="text" name="username" id="username" />

becomes

<input type="text" name="formdata[username]" id="username" />

Why?  Instead of having one array ($_POST), you’ll now have two ($_POST and ‘formdata’, within $_POST).  Your buttons and other “static” form elements will still live in $_POST, but everything containing data that needs handling will be in the ‘formdata’ array, which you can access as $_POST[formdata].

Why does this rock?  I find I have to go through all of the data in a form, even if I know what and how much is coming in, and that the amount wont change.  For example, it’s a good idea to clean all user input.  Since users can change any form value, this needs handled.  Why bother with a ton of ‘if’ statements when we can just iterate through the ‘formdata’ array?

  foreach ($_POST['formdata'] as $key => $value)
    $_POST['formdata'][$key] = makesafe($value);

Cautionary note: this definitely seems ideal for updating data in a database and saving time, doesn’t it?  Maybe something like (let’s assume “$user_id” is the current user’s account, and we determined that earlier somehow) :

  foreach ($_POST['formdata'] as $key => $value)
    mysql_query("UPDATE info_table SET $key = '$value' WHERE index = $user_id");

This is a bad thing.  Why?  SQL injection.  At the very least, clean all input, including the field names, if you think something like the above statement is a good idea.  If you don’t, don’t say I didn’t warn you if you get owned.

We used and modified phpBB.  My portion of the project was to re-skin the bulletin board system, act as lead moderator, prevent non-UAT students from registering, and implement the post voting system.  phpBB version 3, RC5 was used and updated to subsequent release candidates.

Two php files were added to the core of phpBB3, one core file was modified, and additional tables were created in the database.  Currently this project only works with phpBB3 on a MySQL database, but I hope to make it database-independent.  Below is a snippet of code from the new files.

<?php
	$sql = 'INSERT INTO ' . VOTES_TABLE . ' ' . $db->sql_build_array('INSERT', array(
		'post_id'		=> (int) $post_id,
		'user_id'		=> $user->data['user_id'],
		'adjust'		=> 1,
		'vote_time'		=> time(),
		'voter_ip'		=> $user->ip)
	);
?>

A working example of these modifications in a live phpBB3 environment can be seen at The Rogue Forums.  Please contact me for a login, as account creation is limited to UAT students only.  The new files associated with this project are linked below.

pbpBB voting system files

Background: This projects began as a request from a friend.  His site, acting as a working demo, is at Fried Pope.  He wanted the ability to have different stylesheets govern the look of his site, and be chosen randomly for each visitor.  In short, he wanted to rotate his style sheets.

Project: The result from that request, plus a major recode, is linked below.  The system is designed to pick a stylesheet from the directory you specify, and redirect the user to it.  It will remember the stylesheet selected for the user for their entire visit, so your site doesn’t keep changing its look.  That would be confusing.

Compatibility: This project works in all known browsers.

Use: Using this tool is extremely simple.  You must have a web host that supports PHP.

1. Uncompress the source code, and put ‘cssrotate2.php’ in your website’s directory
2. Open ‘cssrotate2.php’ with an HTML editor
3. If you need to, change the the line under the comments to specify where your styles are ($stylesdir = “./styles”;)
4. Save and close it
5. Open any pages in your site that you want to have use CSS Rotate
6. Add a link to it like you would any other stylesheet (<link href=”./styles/cssrotate2.php” rel=”stylesheet” type=”text/css” />)
7. Save and close those pages

download css rotate 2

For those not familiar with it, but familiar with PHP, this function takes the results returned by mysql_query(), and turns it into an array of values.  There are two other functions that do similar things: mysql_fetch_row() and mysql_fetch_assoc().

mysql_fetch_row() ”fetches one row of data from the result associated with the specified result identifier.  The row is returned as an array.  Each result column is stored in an array offset, starting at offset 0″. source

So, first value is $result[0], second is $result[1], and so on.

mysql_fetch_assoc() “returns an asociative array of strings that corresponds to the fetched row”. source  That is, each value that is returned is part of a pair: a “key” (index) value, and the actual value.  The “key” names correspond to the name of the field in the database.

So, first value is $result['name'], second is $result['email'], and so on.

When I’m coding, I like to have access to both the “key” values, and the numeric index.  Now, in all honesty, I almost always use “key” values, over numeric, but I still like having the option.  This is where mysql_fetch_array() comes in.

mysql_fetch_array() will give you “an array with both associative and number indices.” source

Many other languages can do both associative (“key” index) and numeric indices by default.  Others are constrained to just numeric.  Here, PHP is giving us both.  

The question: how?

The answer: it cheats!

Seriously.  It cheats.  What do I mean?  I mean that the numeric indices are not truly referencing the position of the value.  One would expect that “$result[0]” would reference the value in the first position.  It does not.  This can easily be verified with a handy print_r(), or the following loop:

$result = mysql_fetch_array($result);
foreach ($result as $key => $value)
echo $key . ‘=’ . $value . ‘<br />’;

The result of that loop, on a data set I was working with, returned the following:

0=mack
username=mack
1=1
job_num=1
2=Mack Staples
name=Mack Staples
3=5415551234
phone_num= 5415551234
4=test@example.com
email=test@example.com

What do you notice?  Every value is in there twice, and while the ’0′ value is indeed in the first position, the rest of the numbers don’t correlate.  So what is it doing?

mysql_fetch_array() is building a larger array (twice the size of either of the other functions) and using the numbers not as true indexes, but as associative “key” values.  This means a couple of things.

1 – You are wasting speed if you reference the values, but don’t use quotes.  According to Reinhold Weber’s Blog:  #17: “$row[’id’] is 7 times faster than $row[id]“.  If you’re doing this a lot, and often… ouch.

2 – You’re wasting speed just using it.  From having to initially populate twice the data into an array, to a slowdown copying the array to other memory locations, this can cost you performance.

So, what can we do about it?

1 – Use quotes!  1/7th of the time to get $result['2'] compared to $result[2].  Simple speed fix.

2 – Using mysql_fetch_array() is up to you.  For what I usually use database results for, the difference is negligible.  I do small, infrequent queries, and I like having both numeric and associated indices.  To me, it’s worth the minor performance hit.

Code Safe. Code Smart.  Be paranoid.