How to Mimic the iGoogle Interface with Database

James Padolsey wrote a great tutorial about «How to mimic the iGoogle interface» with jQuery. Thank you very much, James. I have used your code intensively.

The next step was a new article explaining how to save widgets configuration into a cookie. Very useful too. But the final part was to store that data in a database.

That’s what a have done: an example of the same code, but using a database. The changes are very easy to implement. I have just had to modify savePreferences and sortWidgets functions in inettuts.js file, and to write a new PHP file for saving and loading data.

I call jQuery post function to send the data using AJAX for savePreferences:

$.post("iNettuts_rpc.php","value="+cookieString);

As you can see, cookieString is the same variable stored into a cookie. Then iNettuts_rpc.php manages with the database. It’s a very simple PHP showing how to store the value for a user called John Doe:

header("Cache-Control: no-cache");
header("Pragma: nocache");

// User_id -> Should come from a session variable
$user_id="john doe";

// DB connect parameters
$server="localhost";
$user="root";
$password="";
$database="iNettuts";

$table="iNettuts";
$field="config";

// DB connect
mysql_connect($server,$user,$password);
@mysql_select_db($database);

if (isset($_REQUEST["value"])) {
 // SET value  

 $value=$_REQUEST["value"];

 $rs=mysql_query("SELECT * FROM $table WHERE user_id='$user_id'");
 if (mysql_numrows($rs)==0)
 mysql_query("INSERT INTO $table($field,user_id) VALUES('$value','$user_id')");
 else
 mysql_query("UPDATE $table SET $field='$value' WHERE user_id='$user_id'");
 echo "OK";

} else {
 // GET value 

 $rs=mysql_query("SELECT $field FROM $table WHERE user_id='$user_id'");
 if ($row=mysql_fetch_row($rs))
 echo $row[0];
 else
 echo "";
}

mysql_close();

And finally, the most difficult part: loading data to sort widgets:

sortWidgets : function () {
 var iNettuts = this,
 $ = this.jQuery,
 settings = this.settings;

 if(!settings.saveToCookie) {
 $('body').css({background:'#000'});
 $(settings.columns).css({visibility:'visible'});
 return;
 }

 $.post("iNettuts_rpc.php", "",
 function(data){

 var cookie=data;

 if (cookie=="") {
 $('body').css({background:'#000'});
 $(settings.columns).css({visibility:'visible'});
 iNettuts.addWidgetControls();
 iNettuts.makeSortable();
 return;
 }

 /* For each column */
 $(settings.columns).each(function(i){

 var thisColumn = $(this),
 widgetData = cookie.split('|')[i].split(';');

 $(widgetData).each(function(){
 if(!this.length) {return;}
 var thisWidgetData = this.split(','),
 clonedWidget = $('#' + thisWidgetData[0]),
 colorStylePattern = /\bcolor-[\w]{1,}\b/,
 thisWidgetColorClass = $(clonedWidget).attr('class').match(colorStylePattern);

 /* Add/Replace new colour class: */
 if (thisWidgetColorClass) {
 $(clonedWidget).removeClass(thisWidgetColorClass[0]).addClass(thisWidgetData[1]);
 }

 /* Add/replace new title (Bring back reserved characters): */
 $(clonedWidget).find('h3:eq(0)').html(thisWidgetData[2].replace(/\[-PIPE-\]/g,'|').replace(/\[-COMMA-\]/g,','));

 /* Modify collapsed state if needed: */
 if(thisWidgetData[3]==='collapsed') {
 /* Set CSS styles so widget is in COLLAPSED state */
 $(clonedWidget).addClass('collapsed');
 }

 $('#' + thisWidgetData[0]).remove();
 $(thisColumn).append(clonedWidget);
 });
 });

 /* All done, remove loading gif and show columns: */
 $('body').css({background:'#000'});
 $(settings.columns).css({visibility:'visible'});

 iNettuts.addWidgetControls();
 iNettuts.makeSortable();

 });
 }

I have used the same variable names to make it easier.

You can download the full example here.