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.