New Address - fahad19.com

Hey folks!
I have moved my blog to a top level domain now. From now on, you will see my posts at:

http://fahad19.com

I will be posting more about my open source CMS Croogo and the CakePHP MVC framework.

Thanks for everyone's support.

Create charts with Google Charts API on the fly

Google is always very well equipped when it comes to APIs. I found out about their Charts API today and want to let you all know how to use it. Its not very difficult - just like placing an image tag in your HTML document.

3D pie chart
For example, you want to have a 3D pie chart with two segments (one is 30% and the other is 70%). So, this will be the url for that graph: http://chart.apis.google.com/chart?cht=p3&chd=t:70,30&chs=300x100&chl=Segment1|Segment2

And here comes the image output (generated by Google Charts!):


You can find out more about it here: http://code.google.com/apis/chart/

Parsing XML file using CakePHP

After spending one whole evening, I found out CakePHP has its own XML class for handling xml files. In the meantime, i tried SimplePie (for RSS only, not XML), SimpleXML, and XMLize. But still they werent of any great help compared to cakephp's core XML class.

How to parse it then?
First of all, you need to import the XML class in your controller class using App::import(). Here is the controller class parsing a particular xml file and printing out (like print_r) the returned array.

Controller class:

<?

class ParseController extends AppController {
var $name = "Parse";
var $uses = array('MyModel');

function xml() {
// import XML class
App::import('Xml');

// your XML file's location
$file = "my_xml_file_location.xml";

// now parse it
$parsed_xml =& new XML($file);
$parsed_xml = Set::reverse($parsed_xml);

// see the returned array
debug($parsed_xml);
}
}

?>

Vertical CSS menu with dashes

I have been really very busy this month. Hardly had time to post anything on my blog. So thought I better post a short quick tutorial of a dashed vertical css menu.

Preview (it will look like this at the end)

(Link 1 is hovered in the image)

HTML (the ever popular unordered list!):

<div id="menu">
<h1>My menu</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Now you will require some css.

CSS code:

#menu {
font-family: Arial;
width: 150px;
padding: 0px;
margin: 0px;
}

#menu h1 {
display: block;
background-color:#666666;
font-size: 16px;
padding: 5px 0px 5px 5px;
border: 1px solid #000000;
color: #ffffff;
margin: 0px;
width:147px;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#menu ul li {
margin: 0px;
padding: 0px;
}

#menu ul li a {
font-size: 14px;
display: block;
border-bottom: 1px dashed #bbbbbb;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Search Engine Friendly URLs with CakePHP

This helper will let you create search engine friendly urls without having you to change the controller logic.

Lets assume we have an 'articles' controller (/app/controllers/articles_controller.php) in our website. And the database table looks like this:
id, category_id, title, content, updated, created

The current url structure:
yoursite.com/articles/category/[category-id]/
yoursite.com/articles/view/[article-id]/

So, it means we dont have the 'title' of our articles included in the url. Only ID is present. This helper will let you add the title as well in the url.

Helper class

<?
class SefHelper extends Helper {

var $helpers = array('Html');

function clean($string) {
return r(" ", "-", strtolower($string));
}

function article($array) {
$link = "/articles/view/";
$link .= $array['Article']['id'] . "/";
$link .= $this->clean($array['Article']['content_title']) . "/";

return $link;
}

function category($array) {
$link = "/articles/category/";
$link .= $array['Category']['id'] . "/";
$link .= $this->clean($array['Category']['title']) . "/";

return $link;
}
?>

View

<? echo $html->link("Article Title here", $sef->article($articles_result)); ?>

The return of this helper function will be: /articles/view/[id]/[title-of-the-article]

Tabbed navigation using jQuery

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

Requirements
You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<ul>
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>
</ul>

<br />

<div id="box-1">
Box 1 content here
</div>

<div id="box-2">
Box 2 here...
</div>

<div id="box-3">
Do you really need Box #3?
</div>
</div>

CSS - some floats for ul and li

.ui-tabs-hide {
display: none;
}

ul {
margin: 0px;
padding: 0px;
}

ul li {
float: left;
padding-right: 10px;
list-style: none;
}

br {
clear: both;
}

a {
font-weight: bold;
text-decoration: none;
}

jQuery
Add this code at the end of your webpage (right before the closing body tag)

<script type="text/javascript">
$(window).bind('load', function() {
$('#container-1 > ul').tabs();
});
</script>

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.

CSS form design without tables

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family: Arial, Verdana, sans-serif;
}

form p {
clear: both;
}

fieldset {
width: 350px;
border: 1px solid #ccc;
}

legend {
font-weight: bold;
font-size:1.2em;
}

label {
font-weight: bold;
width: 120px;
float: left;
}

input[type=text] {
width: 200px;
}

textarea {
width: 200px;
height: 100px;
}

input[type=submit], input[type=reset] {
font-size: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.

<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>