Mobile Joomla and TERAWURFL database

 Mobile Joomla! is a great extension for making your Joomla site ready for mobile viewing but it adds in a 40M worth of tables into Joomla database. This potentially causes difficulty in database backup and recovery. So here are the steps to put all the terawurfl tables in a separate database. 

1) Go into phpmyadmin and copy you Joomla database as terawurfl.

2) Go into information_schema database and run the query

select concat("drop table ",table_name,";") from tables where substr(table_name,1,4) = 'jos_' and
substr(table_name,1,13) != 'Jos_terawurfl';

Note: I am assuming you are running Joomla database with prefix 'jos_', if not then change the above accordingly

3) Copy all the drop statements into clipboard.

4) Go into terawurl database and run SQL with statements copied from the clipboard. At this stage you have a database with just the terawurfl tables.

5) Now go back to information_schema database and run the query

select concat("drop table ",table_name,";") from tables where substr(table_name,1,13) = 'Jos_terawurfl';

6) Copy the drop statements to clipboard.

7) Now go to your Joomla database and run the SQL with statements copied from the clipboard. At this stage you have a database with just the joomla tables.

The above process would have taken out the terawurfl tables and put them in a separate database.

Now go and set database name, user and pass in plugins/mobile/terawurfl.php, They are currently picked up from the configuration.php You probably will just have to change the line to set schema to terarwurfl as the user and password would still be valid as we follow the above procedure.

TeraWurflConfig::DB_SCHEMA = "terawurfl";

Now you can backup your dynamically changing Joomla database more frequently without having the overhead of copying terawurfl tables as well. Also the database recovery time for Joomla tables will be lower too.

Mobile Development and Joomla

Here is to get you going with getting your Joomla site ready for iPhone on your local PC. We start with the assumption that WAMP has already been installed, along with Joomla.

First download the Mobile Joomla extension from here. You have to register but it is free. The extension provides the support for carrying out mobile development.  It is a rather big component which adds a number of templates, plugins and module positions. So once you kick-off the install it could take 30-50s to install. Just disable the 'Mobile - Always' plugin as you don't want to your site to be permanently served via mobile. It may be alright in development environment to leave this plugin enabled but in production environment you have to disable it as you are serving different types of clients.

In mobile development you always have two choices. Either you can have a different URL in a subdomain for iPhone (multi-site option) or you can use the same URL and let the mobile plugin decide which template to serve (multi-client option). We will opt for the latter but if you want the multi-site option then you will have to set it up in the Joomla Mobile settings. We can adjust the modules for iPhone or just serve the default before tinkering.

Now establish the ip address of your local PC by running ipconfig. It will be something like 192.168.1.2.
.
Go to iphonetester.com. If you were typing localhost/joomla to get into your local website then you will have to type http://192.168.1.2/joomla in the tester URL. Now you have full simulation of your site as viewed by iPhone. You can start playing with module positions and experimenting. Enjoy!

Exciting meeting of London's Joomla User Group

I had the pleasure of attending my first-ever Joomla User Group meeting at University College London yesterday. The minor drizzle in the evening did not dampen the enthusiasm of the attendees who were all passionate about Joomla. It turned out to a lively session of two hours where a lot of insights were parted by the members.

We had a presentation on Joomla performance tuning which covered all the aspects from caching, compression, CSS and Javascript minification, MySql tuning and image servers. A suggestion that serving images from a different server speeds up the page download as the HTTP traffic becomes parallelized was particularly good. Also the warning that many image-bloated templates and sub-optimal extensions are the main culprit in reducing performance was welcome.

A lively discussion followed on extensions. The two most memorable ones for me were Alpha Content and Store Locator. The former provided a directory listing of articles in a category in an alphabetic manner and gave A-Z index on top to navigate easily to any content beginning with that letter. The latter gave a Google Map of Excel-loaded interest-points (they could be stores or individuals) to easily zoom in at their location or associated URL.

There were a host of other useful insights and this brief introduction does slight injustice to the meeting. I would suggest that if you are interested in Joomla then make your way to the next meeting on15th of March at 7.00pm.

Migrating to Joomla 1.6

I carried out a quick test to establish the issues in migrating to Joomla1.6 on my local PC. The simple answer is that one shouldn't jump into it if one is not willing to do a considerable amount of work oneself. I used a basic site which used rhuk_milkyway template. Here are the findings:

The JUpgrade actually works quite smoothly if you are converting from Joomla 1.5.22. It successfully creates a new working environment for Joomla1.6 and preserves the 1.5 installation. Basically a new directory is created to hold 1.6 code and the MySql database gets the additional Joomla tables with j16 prefix. In ideal world it should just be required to drop the old tables and directory and point to the new installation. However the life is not that simple.

Firstly, the default templates which Joomla1.6 comes with are not production quality and rhuk_milkyway is not supported. Originally it was envisaged to include this particular template in the production release but the idea was shelved. The net effect is that various menus just disappear as one has to place them in new positions manually. Also the menu items had a value of -1 set in line Link Type Options/Link Image for various menu items. All these had to be manually set which is annoying and cumbersome.

After spending around an hour I had a functional site but it was a crude replica of the 1.5 version. I was not too fussed about extensions at this stage but obviously their availability is a critical decision in choosing to migrate. To get the site fully working I would have been forced to spend a considerable amount of time on CSS. So the bottom line is : "Don't rush in! Access control lists are great but the effort required to migrate is too much at this point in time".

Estimating project delay just from the quality of requirement specification

I was privileged to attend a course by Tom Gilb recently on quality and he produced a wonderful way of estimating project delay from just the quality of its requirement specification. Those who are not familiar with Tom should know that he is the pioneer of iterative development method. His Evo methodology with emphasis on weekly deliverables and feedback was produced in the 60s, a long before Agile and Scrum appeared on the horizon. Also he can be credited with introducing software metrics in the 70s which were incorporated as Capability Maturity Model level IV. People who have grown up in quality movement are familiar with the fact that the quality is something which has to be designed within a process and cannot be gained through mere inspection. So just by checking the number of defects in a random page of the specification we can estimate the probability of project success.

A logical page of around three hundred words is inspected for deviation from the rules like testability, ambiguousness and no-design by 3-5 people. It is no good saying that a quality like usability should be dramatically improved unless we numerically quantify it. We take the figure for the highest number of major defects discovered by a team member, D. We multiply this by a factor of two to establish the discoverable defect density (source: experience). Now any inspection only captures a third of the potential defects (source: Capers Jones) so we multiply the discoverable defect density by a factor to generate potential major defects. Now the likelihood of a major defect turning into a downstream bug is one third. Each of this downstream bugs will cost 10 hours to resolve. This gives the formula for project slippage as:

Hours slippage = D * 2 * 3 * 1/3 * 10 * number of non-comment logical pages in the specification

Now this is pure magic as it has been empirically validated on a number of projects in the field. If you don't believe it then carry out the test on a project on which you have worked in the past and see whether the slippage provided by the formula is not within plus or minus 10% of the actual slippage.

PHP essentials for Java programmers

I recently had to do a project in PHP and being from Java background one notices enumerable similarities. Obviously the whole knowledge about object-oriented programming and the procedural constructs like assignments, statements, conditions, loop etc are totally transferable. However the key difference I noticed was in the function calls. In Java all the arguments are passed by value, even for the objects, ie we pass the copy of the address for the object. But in PHP we are allowed to pass arguments by value or reference. Thus we have a simple function

function writeName($name) { echo $name; }

it passes the $name argument as value. However, by just prefixing $name with an ampersand we pass the argument by reference to give

function writeName(&$name) { echo $name; }

The other clever thing about PHP function is that we can return a value by reference too. Take the example from Joomla! library:


function &getLanguage()
{
static $instance;

if (!is_object($instance))
{
//get the debug configuration setting
$conf =& JFactory::getConfig();
$debug = $conf->getValue('config.debug_lang');

$instance = JFactory::_createLanguage();
$instance->setDebug($debug);
}

return $instance;
}

Preceding the getLanguage() function by an ampersand indicates that the function will return a value by reference, thus the return is a pointer to $instance.

The another line which will puzzle Java programmers above is

$conf =& JFactory::getConfig();

=& the syntax simply means that $conf is being assigned reference to the object created by getConfig() method of JFactory class. :: notation indicates that we are invoking a class method rather than an instance method. The normal Java dot notation of object.method() for invoking an instance method is changed in PHP to object->method()

Armed with the knowledge in this article a Java programmer is ready to do a PHP project. The only other thing to bear in mind is that the class constructor is defined by function __construct(). Obviously one will have to come to grips with various PHP functions but this should be no different from understanding a new Java API.

Selectors in Cascading Style Sheets

The indispensable tool  in every web developers portfolio is Cascading Style Sheets (CSS). Once HTML has been used to organize the contents, the presentational brilliance stems from using CSS rules. Syntactically the rules have a selector followed by a declaration containing various properties separated by semicolons:

p {color:blue; font-weight:normal;}

This simple tag selector rule colours all the contents of
tags in the HTML document. Also noted that the property-value combination is defined by separating the property from its value with a colon.  Instead of p we could have used any of the html elements like h1, h2 etc. To apply the rule to a group of elements we simply use a selector with comma separated the elements. For example, if we want to override the h3, h4, h5 and h6 header elements default definition of the browser, we can just use group selector:

h3, h4, h5, h6 {color:black; font-size:1.2em;)

The commonest way of formatting content is to use the class selector in conjunction with <div> block element or <span> inline element.

.myClass {color:black; font-size:1.2em;) class selector has a period prefix. Currently it will apply to any tag which has attribute definition of class="myClass". For example, if we have the following in our document:

<p class="myClass">...</p>
<div class="myClass">...</div>

then the .myClass selector will apply the declaration formatting to both these elements. To just restrict the formatting to
element, we change the selector to p.myClass in our rule.

Along with class, id is another attribute which can be placed on most elements. Indeed, javascript uses id to get the elements. So if we have <p id="myID"> then the hash prefixed selector for this element becomes:

#myID {color:black; font-size:1.2em;)

We also have pseudo-classes and pseudo-elements available as selectors. The anchor pseudo-classes are used to invariably define link interaction with a:link, a:visited, a:hover and a:active selectors. We know that these stages happen with links. Similarly, the first line of a paragraph or a first letter of the paragraph doesn't have a tag but it is easily identifiable pseudo-element so we can have a selectors like:


p:first-letter {color: blue;font-size:1.5em;}


or

p:first-line {color: blue;font-size:1.5em;}

Similarly there are pseudo-elements after and before for auto-generated content. To prefix a paragraph with a class="intro" with 'Thought of the day!' auto-generated content, we have the selector syntax:

p.intro:before {content: "Thought of the day!" }

or to give the text after the paragraph:

p.intro:after {content: "Thought of the day!" }

To style tags within tags we have descendant selector. For example, to highlight emphasis within a paragraph we may use the selector:

h1 strong { color: red; }

Here sub-element <strong> within element <h1> is coloured red. Similarly if we wanted to select the ordered lists which are direct children of body element the syntax is body > ol for the rule. Note the angle bracket is used for the child selector. Or to get to an adjacent sibling we use the plus ('+') sign instead of the angle bracket.

We can also select on the attributes. These selectors allow us to select element which have a certain property. For example to select all the images with title attribute we will have a selector img[title]. Or to just select text boxes in a form we can have the attribute selector

input[type="text"]

There are some further refinements to these selector but the knowledge is acquired by experimentation. The aspects covered are more than adequate.

For a good source for understanding the selectors visit here.

CSS: The Missing Manual is a very useful resource which you should have in your collection.