Parsing XML with jQuery

I recently worked on a small Android App using PhoneGap & jQuery. The app did a very small task fetch the XML feed from my blog and display it. Simple. This meant parsing XML using jQuery. Most of the examples on web used this particular example in one form or another. Not all XML document are like record sets. For example a blog feed will have following structure

<?xml version="1.0" encoding="UTF-8"?>
<channel>
	<title>LAMP Web Development Blog</title>
	<link>http://www.kumarchetan.com/blog</link>
    <item id="item1" somerandomattribute="attribute value">
        <title>My first Android App or how to develop an Android App using PhoneGap and jQuery?</title>
        <link>http://www.kumarchetan.com/blog/2012/01/14/my-first-android-app-or-how-to-develop-an-android-app-using-phonegap-and-jquery/</link>
    </item>
    <item id="item2">
        <title>How not to do a CI controller? – Tips to develop CodeIgniter Controllers</title>
        <link>http://www.kumarchetan.com/blog/2011/12/11/how-not-to-do-a-ci-controller-tips-to-develop-codeigniter-controllers/</link>
    </item>
</channel>

The interesting part in this XML is that tags or nodes with similar names exist through out the document at different depth. This XML has attributes attached to its nodes. This is how a typical XML may look like. How do you actually parse this using jQuery? jQuery has find(). From the documentation

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.

We can convert this XML into a jQuery object and then use find() to actually parse it. Here is a code snippet

var xml = '<?xml version="1.0" encoding="UTF-8"?> <channel>	<title ...>', //your XML string goes here 
feedtitle = $(xml).find('channel title:first'), //find first tag or node in XML that is named title
feedlink = $(xml).find('channel link:first'); //find first tag or node in XML that is named link
$(xml).find( "item" ).each(
	function(){
        var item = $(this), 
        title =  item.find('title').text(),
        link =  item.find('link').text(),
        itemid =  item.attr('id');//get an attribute
        //you can log all attributes
        //console.log(item[0].attributes);
    }
);

You can see a complete example on this git page and check out the code as well. Things to note here:

  • You can use filters with selectors.
  • You can find() a node/element and then you have all the attributes available it in “attributes” list.
  • You can traverse the list or use .attr() to actually find and use an attribute.

My first Android App or how to develop an Android App using PhoneGap and jQuery?

I always wanted to do mobile app. The problem is I don’t know Objective C or Java or C or C++ or have those ninja skills. But we live in 21st century. If I can write a script in Python or know jQuery I can write an Android App. My skills in JS are much better than in Python. So I decided to try PhoneGap. That doesn’t mean I will not be tinkering with Python. If you know how to instructions you can develop a small hello world app using PhoneGap and JavaScript in less than 15 minutes. I didn’t want to do a plain hello world app so I decided to take a step further. I decided to develop RSS reader for my blog. And I fired up eclipse. Here is what I did

  1. Set up a PhoneGap project, exactly as mentioned here http://phonegap.com/start#android.
  2. Created two folders under /assets/www folder, css and js.
  3. Moved phonegap.xx.js under js folder and also downloaded latest jQuery in this folder from here http://docs.jquery.com/Downloading_jQuery
  4. Created a CSS file named under base.css under css folder.
  5. Updated the reference to phonegap.xx.js and also linked jquery and css stylesheet in assets/www/index.html.
  6. I had done a jQuery driven RSS reader (Code here) and used the code with some modifications, here is the code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>My Blog Feed Reader</title>
    <link rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" charset="utf-8">
    $( function() {
        var XMLURI = 'http://www.kumarchetan.com/blog/feed/';
        $.ajax({
            url: XMLURI,
            success: function(xml){
                setTimeout(
                function(){
                    var blogdescription = $(xml).find('channel description:first'),
    	                blogtitle = $(xml).find('channel title:first'),
    	                bloglink = $(xml).find('channel link:first'),
    	                blogdescription = blogdescription.text(),
    	                blogtitle = '<a href="' + bloglink.text() +'" class="bloglink">' + blogtitle.text() + '</a>',
    	                feedItem = '';
    	            $(xml).find( "item" ).each(
    	                function(){
    	                    var item = $(this), 
    	                        title =  item.find('title').text(),
    	                        link =  item.find('link').text(),
    	                        description =  item.find('description').text(),
    	                        pubDate =  item.find('pubDate').text();
    	                    feedItem = feedItem + '<div class="feeditem">';
    	                    feedItem = feedItem + '<a href="' + link + '" class="feeditemlink">';
    	                    feedItem = feedItem + '<span class="feeditemtitle">' + title+ '</span>';
    	                    feedItem = feedItem + '</a>';
    	                    feedItem = feedItem + '<span class="feeditempubDate">' + pubDate + '</span>';
    	                    feedItem = feedItem + '<p class="feeditemdescription">' + description + '</p>';
    	                    feedItem = feedItem + '</div>';
    	            });
    	            $('#blogheader').html(blogtitle);
    	            $('#blogdescription').html(blogdescription);
    	            $('#content').append(feedItem);
                    
                }
                , 5000);
            },
            error: function(){
            	$('#blogheader').html('<a href="http://www.youtube.com/watch?v=WUUptX0i55g#t=22s" class="bloglink">PC LOAD LETTER</a>');
            },
            dataType: "xml"
        });
        document.addEventListener("deviceready", onDeviceReady, false);
    });
    </script>
    </head>
    <body>
    	<div data-role="page" id="home">
    		<div data-role="header">
    			<h1 id="blogheader">Loading...</h1>
                <p id="blogdescription">This application requires a working internet connection.</p>
    		</div>
    		<div data-role="content" id="content">
    		</div>
    	</div>
    </body>
    </html>
  7. Modified /res/values/strings.xml
  8. Replaced stock Android icons with my own icons. I had to create folder named drawable in /res folder and placed my own icon.
  9. Then Run > Run As > Androidn Application.
  10. Voila!!!

I had to add sleep or delay or timeout as their was a glitch and I am unable to recall the web page that suggested to do it. Here is the GIT URL for project: https://github.com/kumarldh/My-Blog-Feed-Reader

How not to do a CI controller? – Tips to develop CodeIgniter Controllers

I cam across a post that was actually a small tutorial on CodeIgniter. The tutorial had what ever it requires to write a basic controller. I am picking up the same post and adding my comments to the post.

The original post – http://phpmaster.com/untangling-mvc-with-codeigniter/

The controller

<?php
public function index() {
    $this->load->helper("form");
    $this->load->library("form_validation");

    $this->form_validation->set_rules("first", "First Name",
        "required");
    $this->form_validation->set_rules("last", "Last Name",
        "required");
    $this->form_validation->set_rules("email", "Email Address",
        "required|valid_email");

    if ($this->form_validation->run() == false) {
        $this->load->view("phpmasterform_view");
    }
    else {
        $first = $_POST["first"];
        $last = $_POST["last"];
        $email = $_POST["email"];
        $data = array("first_name" => $first,
                      "last_name" => $last,
                      "email" => $email);

        $this->load->model("phpmasterform_model");
        $this->phpmasterform_model->insert_address($data);
        $this->load->view("formsuccess");
    }
}

What is wrong with this Controller?
The controller doesn’t utilises the full powers of a framework. Any decent framework or a develop methodology will suggest you to move configurations to a separate place. CI has configuration settings for almost everything. The configuration folder is easily identifiable and path is /application/config. In this folder is file autoload.php. This file is commented and is self explanatory. I will move the form helper and form_validation library loading tasks to autoload.php. Read more about it here, Auto-loading Resources. Then in same config folder I will create another file named form_validation.php which will hold all my validation rules. This will be a centralised place to hold all the validation rules. I can easily modify just one file and change validation rules on my whim and fancy. Read more about this here, “Saving Sets of Validation Rules to a Config File“. All these were just small tips and one can read the manual and find more about them. But the biggest mistake I found in this controller was blindly consuming the user input. The commandment of web development says

Thy shalt never trust user input.

CI provides a Input Class library. This library is so important that CI loads it by default. So if you are using CI, use this library.
This was not the only possible security hole. If run through other files in CI, they all start with following line

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

.
This restricts some one from directly accessing the file if path to that file is known.
After all this the controller is changed to following

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
public function index() {
    if (false === $this->form_validation->run(feedback)) {
        $this->load->view("phpmasterform_view");
    }
    else {
/*
    if you have set following "$config['global_xss_filtering'] = TRUE;"in your 
    application/config/config.php then you don't need to pass 2nd param as 
    true in following three lines.
*/
        $first = $this->input->post("first", true);
        $last = $this->input->post("last", true);
        $email = $this->input->post("email", true);

        $data = array("first_name" => $first,
                      "last_name" => $last,
                      "email" => $email);

        $this->load->model("phpmasterform_model");
        $this->phpmasterform_model->insert_address($data);
        $this->load->view("formsuccess");
    }
}

Following is form_validation.php, this will go in application/config/ folder.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

$config = array(
    'feedback' => array(
        array(
            'field' => 'first',
            'label' => 'First name',
            'rules' => 'required'
        ),
        array(
            'field' => 'last',
            'label' => 'Last name',
            'rules' => 'required'
        ),
        array(
            'field' => 'email',
            'label' => 'Email',
            'rules' => 'required'
        )
    ),
);

Last thing to do is to modify autload.php and load form helper and form validation library. This should give an idea how to develop a maintainable code in CI.
Happy coding!

What are some popular myths in software development?

The following one is my favorite and I have seen this in practice in most of the places I have workd.

The Mythical Man Month, the idea that adding people to a development team makes it more efficient in a linear fashion.

via What are some popular myths in software development? – Quora.

One of my cow-orker said managers thing if you can not deliver a  baby in 9 months alone they will make you do it by adding another 8 people in your team and giving you one month. The problem doesn’t end after delivering baby, none of the 8 people who helped in delivering the baby will care about the baby. It is not their baby at all. Another one which I noticed is at OSI Days talks is that OO a silver bullet, a golden hammer. Well, I work on web technologies and AFAIK, Google is bland but faster than any other known web app. More abstractions means performance hit. I want my page to load faster and if my code takes a minute to spit a text string my code is wrong how good OO patterns it may follow. Add to it the purists views of not adding markup to the script.