Creating widget with Javascript and PHP

Hi,

For those who do not know, a widget can be considered as a small section in your web page, whose content is being rendered from a different website. To understand this, google adsense is a very good example of a widget. In Adsense, you are provided with a javascript. All you need to do is to copy and paste the code in any part of your website to generate the advertisement. Now how the advertisement is getting generated, is not your concern.

But you need to configure the google adsense according to your need, e.g. the dimension of the adsense. After you are done with configuring it you are given a javascript code, as I mentioned above. Which you just need to copy and paste in your website or blog.

Click here to download the entire source code of the example given below, with full database.

So the basic things that we need to program for creating a widget is as:
1. A configuration section where the user will configure the widget, which may include color, title etc. as per your needs
2. Most importantly the embeddable code, which the end user will copy and paste after their configuration is done.

How ever there is one more thing needed from a programmers perspective, that is the content of the widget. The content of the widget is completely dependent on your business logic and the configuration data that the end users have set.

Example:

Consider I have a website for doctors and their details. Now I decide to create widgets, so that the end users can embed them in their website or blog, which would show doctor details from my website. First I need to provide the end users with a user interface that will configure the widget as follows:

The above configuration section will be a part of my website. Whenever the user is changing some value, a auto generated HTML code is being generated in the textarea. Now the end user will just copy and paste the above code in their website or blog. For testing, you can simply copy and paste it in a simple ".html" file and get the following output:

The embedded script just contains a javascript file in your website, then a function,"init_widget()" is called with the parameters set by the end user while configuring the widget. Now the trick here is in the init_widget(). Along with the 2 <script> tags, there is also a div with id="wd_id". Now in init_widget() I am creating an <iframe> with a src in my server along with the various parameters as follows:

document.getElementById("wd_id").innerHTML='<div style="font-family:trebuchet ms;font-size:14px;">'+arguments[4]+'</div><iframe src="http://localhost/php/widgets/widget.php?country='+arguments[2]+'&g='+arguments[3]+'" width="'+arguments[0]+'" height="'+arguments[1]+'" style="border:1px solid #ccc" border="0"></iframe>';

Now in widget.php file I wrote my business logic to fetch doctor details with specific country and gender as specified by the end user. The code in widget.php is:

<table>

<?php

$countries=$_GET['country'];

$gender=$_GET['g'];

$query="select * from doctors where country='".$countries."' and gender='".$gender."'";

$doctors=mysql_query($query);

while($rec=mysql_fetch_array($doctors)){

?>

<tr>

<b><?php echo $rec['name']; ?>(<?php echo ucwords($rec['country']) ?>)</b><br/>

<i><?php echo $rec['description']; ?></i><br/>

<a href="<?php echo $rec['website']; ?>">Website</a><div class="divider"></div>

</tr>

<?php

}

?>

That's it, the widget is complete. Download widget.zip