Writing / Building widget: a simple approach

1) There will be three files for this widget
1) style.css
2) script.js
3) widget.php

style.css : This file contains your all styles regurding to view the page. Below is a sample of this page code:
#someId{
border:1px solid #000000;
}
.someclass{
background-color: #cccccc;
}

script.js : this file contains your all javascript codes. Below is a sample of this page code:
function someFunction(){
// do something
}

widget.php: This is the main file that contains all of your html as well as php codes for the widget. Below is a sample of this page code:

document.write(’ <link rel=”stylesheet” href=”http://www.yourdomain.com/style.css” type=”text/css” /> ‘);
document.write(’ <script language=”javascript” src=”http://www.yourdomain.com/script.js”></script>’);
document.write(’ <div id=”someid0″ class=”someclass”> ‘);
document.write(’ <div id=”tab”> ‘);
document.write(’ <ul> ‘);
document.write(’ <li><span id=”someid1″ style=”padding-left:3px;” onClick=”return someFunction1();”>ABCD</span></li> ‘);
document.write(’ </ul> ‘);
document.write(’ </div>’);
document.write(’ <div class=”someclass2″>’);
document.write(’ <div id=”someId4″ style=”display:block” class=”someclass”> ‘);
document.write(’ <?php
$db_host = “yourhostname”;
$db_user = “yourdbusername”;
$db_pass = “yourdbpassword”;
$db_name = “yourdbname”;
$db_table_prifix = “yourdbtableprefix”;
if (($conn = mysql_connect($db_host, $db_user, $db_pass)) != NULL){
if (mysql_select_db($db_name,$conn)){
$get_post_sql = “YOUR QUERY “;
$get_post_res = mysql_query($get_post_sql);
while ($row = mysql_fetch_array($get_post_res, MYSQL_ASSOC)){
?> ‘);
document.write(’ <div class = “dataDiv”> ‘);
document.write(’ <div class = “topdata”> ‘);
document.write(’ <a href=”http://anydomain/index.php?Id=<?php echo $row["col1"]; ?>” target=”_blank”> ‘);
document.write(’ <?php
echo $row["col2"].”…”;
echo “</a>”;
echo “</div>”;
?> ‘);
document.write(’ <?php
echo “</div>”;
}
mysql_close($conn);
}
}
else echo “No database connection”;
?> ‘);
document.write(’ </div>’);
document.write(’ </div>’);
document.write(’ </div> ‘);
document.write(’</div> ‘);

Now in any HTML file inside the body tag add the following line:
<script type=”text/javascript” src = “http://www.yourdomain.com/widget.php”> </script>

Thats all. Open this HTML file with any web browser. You will see the widget.