David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. » MySQL

Quick Tip: MySQL date_add

David Walsh — Thu, 20 May 2010 00:51:11 +0000

Here’s a quick MySQL tip I wanted to throw your way. I created an event system a while back and one of the requirements of the system was to show events that happened yesterday forward, meaning events older than 2 days were to be hidden. MySQL’s date_add will allow you to do just that:

The MySQL Example

SELECT title, venue, url, city, state, DATE_FORMAT(date_starts,\'%b %e\') as formatted_date
FROM events
WHERE date_starts >= DATE_ADD(NOW(), INTERVAL -1 DAY) // yesterday!
ORDER BY date_starts ASC

Note that I’m using a negative date value. You can use a positive date value to get tomorrow, next week, next month, etc..

I like the idea of showing events the from past few days — they show that there’s been action recently. Click here for more about MySQL date_add.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Quick Tip: MySQL date_add

Create Custom Element Property Getters and Setters with MooTools

David Walsh — Mon, 03 May 2010 12:15:08 +0000

One of the goals of the MooTools projects is to create very flexible methods by which developers may modify or extend the behavior of given classes. One example of that flexibility is the ability to customize the Element class’ get and set methods for specified values.

The default behavior of the get and set methods for an object are to return/modify the given Element attribute. Take the following for example:

var alt = document.id('myImage').get('title');  //returns the image's title attribute text

The above code modifies the title attribute for the given element. Simple, of course, but then MooTools also uses the get/set methods to set and retrieve items that aren’t element attributes:

var tag = document.id('myImage').get('tag'); //returns images's tag (img)

The above code retrieves the given element’s tag name. How does MooTools do this? Simple: the Element.Properties object. You can set custom get and set handling by adding your desired string to the Element.Properties object. Here’s an example:

Element.Properties.yourCustomGetOrSetName = {
	get: function() {
		//your custom programming to accomplish what should be returned...
		return yourReturnValue;
	},
	set: function(input) {
		//your custom programming to accomplish what should be set...
		//don't need to return anything
	},
	erase: function() { //erase works too!
		//programming to erase this
	}
};

Here’s the code MooTools uses internally to accomplish the get(‘tag’) ability:

Element.Properties.tag = {
	get: function(){
		return this.tagName.toLowerCase();
	}
};

So how could you use this? You could use Element.Properties to create a parent getter:

Element.Properties.parent = {
	get: function() {
		return this.getParent(); //returns the element's parent
	}
	//no need to do a setter or eraser
};
//.....
//usage
var parent = document.id('myElement').get('parent'); //returns myElement's parent element.

Pretty sweet, no? Have any other items you’d like to see in the get or set methods? Share!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create Custom Element Property Getters and Setters with MooTools

Create a Basic Web Service Using PHP, MySQL, XML, and JSON

David Walsh — Wed, 06 May 2009 12:36:25 +0000

Web services are taking over the world. I credit Twitter’s epic rise to the availability of a simple but rich API. Why not use the same model for your own sites? Here’s how to create a basic web service that provides an XML or JSON response using some PHP and MySQL.

The PHP / MySQL

/* require the user as the parameter */
if(isset($_GET['user']) && intval($_GET['user'])) {

	/* soak in the passed variable or set our own */
	$number_of_posts = isset($_GET['num']) ? intval($_GET['num']) : 10; //10 is the default
	$format = strtolower($_GET['format']) == 'json' ? 'json' : 'xml'; //xml is the default
	$user_id = intval($_GET['user']); //no default

	/* connect to the db */
	$link = mysql_connect('localhost','username','password') or die('Cannot connect to the DB');
	mysql_select_db('db_name',$link) or die('Cannot select the DB');

	/* grab the posts from the db */
	$query = "SELECT post_title, guid FROM wp_posts WHERE post_author = $user_id AND post_status = 'publish' ORDER BY ID DESC LIMIT $number_of_posts";
	$result = mysql_query($query,$link) or die('Errant query:  '.$query);

	/* create one master array of the records */
	$posts = array();
	if(mysql_num_rows($result)) {
		while($post = mysql_fetch_assoc($result)) {
			$posts[] = array('post'=>$post);
		}
	}

	/* output in necessary format */
	if($format == 'json') {
		header('Content-type: application/json');
		echo json_encode(array('posts'=>$posts));
	}
	else {
		header('Content-type: text/xml');
		echo '';
		foreach($posts as $index => $post) {
			if(is_array($post)) {
				foreach($post as $key => $value) {
					echo '<',$key,'>';
					if(is_array($value)) {
						foreach($value as $tag => $val) {
							echo '<',$tag,'>',htmlentities($val),'';
						}
					}
					echo '';
				}
			}
		}
		echo '';
	}

	/* disconnect from the db */
	@mysql_close($link);
}

With the number of persons hitting your web service (hopefully), you’ll need to do adequate validation before attempting to connect to the database to avoid injection attacks. Once we get the desired results from the database, we cycle through the results to populate our return results array. Depending upon the response type desired, we output the proper header and content in the desired format.

Take the following sample URL for example:

http://mydomain.com/web-service.php?user=2&num=10

Now, we can take a look at the possible results of the URL.

The XML Output


	
		SSLmatic SSL Certificate Giveaway Winners
		http://davidwalsh.name/?p=2304
	
	
		MooTools FileManager
		http://davidwalsh.name/?p=2288
	
	
		PHPTVDB: Using PHP to Retrieve TV Show Information
		http://davidwalsh.name/?p=2266
	
	
		David Walsh: The Lost MooTools Plugins
		http://davidwalsh.name/?p=2258
	
	
		Create Short URLs Using U.Nu
		http://davidwalsh.name/?p=2218
	
	
		Create Bit.ly Short URLs Using PHP
		http://davidwalsh.name/?p=2194
	
	
		Represent Your Repositories Using the GitHub Badge!
		http://davidwalsh.name/?p=2178
	
	
		ZebraTable
		http://davidwalsh.name/?page_id=2172
	
	
		MooTools Zebra Table Plugin
		http://davidwalsh.name/?p=2168
	
	
		SSLmatic: Quality, Cheap SSL Certificates and Giveaway!
		http://davidwalsh.name/?p=2158

Take this next sample URL for example:

http://mydomain.com/web-service.php?user=2&num=10&format=json

Now, we can take a look at the possible results of the URL.

The JSON Output

{"posts":[{"post":{"post_title":"SSLmatic SSL Certificate Giveaway Winners","guid":"http:\/\/davidwalsh.name\/?p=2304"}},{"post":{"post_title":"MooTools FileManager","guid":"http:\/\/davidwalsh.name\/?p=2288"}},{"post":{"post_title":"PHPTVDB: Using PHP to Retrieve TV Show Information","guid":"http:\/\/davidwalsh.name\/?p=2266"}},{"post":{"post_title":"David Walsh: The Lost MooTools Plugins","guid":"http:\/\/davidwalsh.name\/?p=2258"}},{"post":{"post_title":"Create Short URLs Using U.Nu","guid":"http:\/\/davidwalsh.name\/?p=2218"}},{"post":{"post_title":"Create Bit.ly Short URLs Using PHP","guid":"http:\/\/davidwalsh.name\/?p=2194"}},{"post":{"post_title":"Represent Your Repositories Using the GitHub Badge!","guid":"http:\/\/davidwalsh.name\/?p=2178"}},{"post":{"post_title":"ZebraTable","guid":"http:\/\/davidwalsh.name\/?page_id=2172"}},{"post":{"post_title":"MooTools Zebra Table Plugin","guid":"http:\/\/davidwalsh.name\/?p=2168"}},{"post":{"post_title":"SSLmatic: Quality, Cheap SSL Certificates and Giveaway!","guid":"http:\/\/davidwalsh.name\/?p=2158"}}]}

Creating a basic web service is very simple and encourages your users to spread the word about your website or service. Want more traffic? Want your website to grow without you putting in all the effort? Create a web service!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create a Basic Web Service Using PHP, MySQL, XML, and JSON

Backup Your Database into an XML File Using PHP

David Walsh — Fri, 27 Feb 2009 14:19:35 +0000

Backing up data is extremely important. Most of the time the database is the most important piece of the puzzle. Imagine losing all of the data in your database — it would be tragic. Here’s a PHP snippet that outputs your database as XML.

The PHP

//connect
$link = mysql_connect($host,$user,$pass);
mysql_select_db($name,$link);

//get all the tables
$query = 'SHOW TABLES FROM '.$name;
$result = mysql_query($query,$link) or die('cannot show tables');
if(mysql_num_rows($result))
{
	//prep output
	$tab = "\t";
	$br = "\n";
	$xml = ''.$br;
	$xml.= ''.$br;
	
	//for every table...
	while($table = mysql_fetch_row($result))
	{
		//prep table out
		$xml.= $tab.''.$br;
		
		//get the rows
		$query3 = 'SELECT * FROM '.$table[0];
		$records = mysql_query($query3,$link) or die('cannot select from table: '.$table[0]);
		
		//table attributes
		$attributes = array('name','blob','maxlength','multiple_key','not_null','numeric','primary_key','table','type','default','unique_key','unsigned','zerofill');
		$xml.= $tab.$tab.''.$br;
		$x = 0;
		while($x < mysql_num_fields($records))
		{
			$meta = mysql_fetch_field($records,$x);
			$xml.= $tab.$tab.$tab.'$attribute.'" ';
			}
			$xml.= '/>'.$br;
			$x++;
		}
		$xml.= $tab.$tab.''.$br;
		
		//stick the records
		$xml.= $tab.$tab.''.$br;
		while($record = mysql_fetch_assoc($records))
		{
			$xml.= $tab.$tab.$tab.''.$br;
			foreach($record as $key=>$value)
			{
				$xml.= $tab.$tab.$tab.$tab.'<'.$key.'>'.htmlspecialchars(stripslashes($value)).''.$br;
			}
			$xml.= $tab.$tab.$tab.''.$br;
		}
		$xml.= $tab.$tab.''.$br;
		$xml.= $tab.''.$br;
	}
	$xml.= '';
	
	//save file
	$handle = fopen($name.'-backup-'.time().'.xml','w+');
	fwrite($handle,$xml);
	fclose($handle);
}

You probably don’t NEED to add column nodes but I like including as much data as possible and they don’t add very much to the total file size.

The Sample Output


	
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		
			
				2
				4
				Ryan
				ryantastad@hotmail.com
				
				66.84.199.242
				2007-12-06 10:10:38
				2007-12-06 16:10:38
				Roethlisberger is coming to town!?  Sorry, Fred.
				0
				1
				Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
				
				0
				0
			
		
		
		
	
	
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		
			
				1
				http://codex.wordpress.org/
				Documentation
				
				
				0
				
				Y
				1
				0
				0000-00-00 00:00:00
				
				
				
			
			
				2
				http://wordpress.org/development/
				Development Blog
				
				
				0
				
				Y
				1
				0
				0000-00-00 00:00:00
				
				
				http://wordpress.org/development/feed/

XML isn’t the easiest format to restore a table with so you may prefer to export the table as SQL statements. I enjoy the additional XML backup because it’s easy to read.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Backup Your Database into an XML File Using PHP

Animated AJAX Record Deletion Using MooTools

David Walsh — Thu, 29 Jan 2009 13:54:51 +0000

I’m a huge fan of WordPress’ method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here’s how to achieve that functionality with MooTools JavaScript.

View Demo

The PHP – Content & Header

The following snippet goes at the top of the page:

if(isset($_GET['delete']))
{
	$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
	$result = mysql_query($query,$link);
}

The following is used to display the records:

$query = 'SELECT * FROM my_table ORDER BY title ASC';
$result = mysql_query($query,$link);
while($row = mysql_fetch_assoc($result))
{
	echo '
				Delete
				',$row['title'],'
			';
}

The MooTools JavaScript

window.addEvent('domready',function() {
	$$('a.delete').each(function(el) {
		el.addEvent('click',function(e) {
			e.stop();
			var parent = el.getParent('div');
			var request = new Request({
				url: 'mootools-record-delete.php',
				link: 'chain',
				method: 'get',
				data: {
					'delete': parent.get('id').replace('record-',''),
					ajax: 1
				},
				onRequest: function() {
					new Fx.Tween(parent,{
						duration:300
					}).start('background-color', '#fb6c6c');
				},
				onSuccess: function() {
					new Fx.Slide(parent,{
						duration:300,
						onComplete: function() {
							parent.dispose();
						}
					}).slideOut();
				}
			}).send();
		});
	});
});

For every link, we add a click event that triggers the AJAX request. During the request, we tween the containing element to a red background. When the AJAX request returns a “success” response, we slide the element off of the screen.

View Demo

How would you use this? Share!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Animated AJAX Record Deletion Using MooTools

Breaking & Fixing Dates from MySQL to PHP

David Walsh — Wed, 19 Nov 2008 12:05:55 +0000

The way that databases store “date” field data is:

2008-11-19 // year - month - day

The way that us humans read dates (at least in the U.S.) is:

11-19-2008 // month - day - year

I write a lot of administrative panel modules that either display dates or, better yet, allow customers to their own dates for articles, events, etc. I’ve created a couple of PHP functions that allow me to easily handle the transition from MySQL to PHP and visa versa.

The PHP: MySQL to PHP

	/* break a date */
	function break_date($date)
	{
		$date = explode('-',str_replace('/','-',$date)); 
		return $date[1].'-'.$date[2].'-'.$date[0];
	}

The PHP: PHP to MySQL

	/* fix a date */
	function fix_date($date)
	{
		$date = explode('-',str_replace('/','-',$date)); 
		return $date[2].'-'.$date[0].'-'.$date[1];
	}

You’ll see that I automatically replace “/” within the given date, break apart the date string, and rearrange the items to make the user and the database happy. Hopefully this saves someone some time!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Breaking & Fixing Dates from MySQL to PHP

Using MooTools 1.2 For Drag, Drop, Sort, Save

David Walsh — Fri, 14 Nov 2008 13:57:36 +0000

This post has been updated: Using jQuery or MooTools For Drag, Drop, Sort, Save. The code on this page is no longer best practice.

The following is a repost of an article that ran on Script & Style a few months ago….

My customers love being able to control their website’s content so I build a lot of administrative control into their website. One administrative control I frequently build is a News control. I allow the customer to add, edit, delete, and sort news items. My customers especially love sorting their articles because of the fashion of which they can sort: drag and drop. Here’s how I do it.

View Demo

The MySQL Table

id	title	sort_order
1	Article 1	1
2	Article 2	2
3	Article 3	3
4	Article 4	4
5	Article 5	5
6	Article 6	6

My news table contains more fields but these are the important fields per this example.

The PHP / XHTML

 Waiting for sortation submission...


 /> Automatically submit on drop event


	',$item['title'],'';
			$sort_order[] = $item['sort_order'];
		}
	?>







	
	Sorry!  There are no items in the system.

We query the database to get every news item. What’s extremely important is that the query sorts the items by their original sort order. We set the “rel” attribute equal to the article’s ID and the list item’s text to the article title.

The CSS

#sortable-list				{ padding:0; }
li.sortme 		 			{ padding:4px 8px; color:#000; cursor:move; list-style:none; width:500px; background:#ddd; margin:10px 0; border:1px solid #999; }
#message-box				{ background:#fffea1; border:2px solid #fc0; padding:4px 8px; margin:0 0 14px 0; width:500px; }

I use the above CSS to format the news items so that the customer knows each news item may be dragged. None of the CSS is essential to this system.

The MooTools JavaScript

/* when the DOM is ready */
/* create sortables */
	var sb = new Sortables('sortable-list', {
		/* set options */
		clone:true,
		revert: true,
		/* initialization stuff here */
		initialize: function() { 
			
		},
		/* once an item is selected */
		onStart: function(el) { 
			el.setStyle('background','#add8e6');
		},
		/* when a drag is complete */
		onComplete: function(el) {
			el.setStyle('background','#ddd');
			//build a string of the order
			var sort_order = '';
			$$('#sortable-list li').each(function(li) { sort_order = sort_order +  li.get('alt')  + '|'; });
			$('sort_order').value = sort_order;
			
			//autosubmit if the checkbox says to
			if($('auto_submit').checked) {
				//do an ajax request
				var req = new Request({
					url:'',
					method:'post',
					autoCancel:true,
					data:'sort_order=' + sort_order + '&ajax=' + $('auto_submit').checked + '&do_submit=1&byajax=1',
					onRequest: function() {
						$('message-box').set('text','Updating the sort order in the database.');
					},
					onSuccess: function() {
						$('message-box').set('text','Database has been updated.');
					}
				}).send();
			}
		}
	});
});

We use Moo 1.2′s Sortables plugin class to select all element within the list and make them sortable (drag and drop). Every time the sort order is changed, the hidden sort_order element is built and reset using a “|” as a separator. If the checkbox is checked, an ajax call is made to update the sort order in the database. Otherwise, the regular form submission via submit button will also save the sortation.

The “Header” PHP / MySQL

/* on form submission */
if(isset($_POST['do_submit'])) 
{
	/* split the value of the sortation */
	$ids = explode('|',$_POST['sort_order']);
	
	/* run the update query for each id */
	foreach($ids as $index=>$id)
	{
		if($id != '')
		{
			$query = 'UPDATE test_table SET sort_order = '.$index.' WHERE id = '.$id;
			$result = mysql_query($query,$connection) or die(mysql_error().': '.$query);
		}
	}
	
	/* now what? */
	if($_POST['byajax']) { die(); } else { $message = 'Sortation has been saved.'; }
}

View Demo

The header is where the new sort order is committed. We split the sort_order form value by the “|” and perform a query for each item to update its order. Lastly, if the byajax flag is sent, we just die out the PHP script — if not, we continue to load the page.

Hot system, right? Dragging and dropping is by far the fastest way to sort a list of items. What are your thoughts? Have any ideas for improvements?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using MooTools 1.2 For Drag, Drop, Sort, Save

Format Date Fields Using MySQL DATE_FORMAT()

David Walsh — Fri, 03 Oct 2008 12:51:01 +0000

I use MySQL DATE and DATETIME fields almost as much as VARCHAR fields. I use them mostly to track record creation, record updates, and record expiration dates. The default date format in MYSQL is:

2008-09-10 22:50:02

When I pull this information into the page, I want to show the date in human-readable format. That’s where MySQL’s DATE_FORMAT functionality comes in. DATE_FORMAT allows me to format the date in any manner you’d like.

MySQL DATE_FORMAT() Example

DATE_FORMAT(NOW(),'%W, %M %e, %Y @ %h:%i %p')
#yields 'Sunday, September 20, 2008 @ 12:45 PM'

MySQL DATE_FORMAT() Letter Representations

Specifier	Description
`%a`	Abbreviated weekday name (`Sun`..`Sat`)
`%b`	Abbreviated month name (`Jan`..`Dec`)
`%c`	Month, numeric (`0`..`12`)
`%D`	Day of the month with English suffix (`0th`, `1st`, `2nd`, `3rd`, …)
`%d`	Day of the month, numeric (`00`..`31`)
`%e`	Day of the month, numeric (`0`..`31`)
`%f`	Microseconds (`000000`..`999999`)
`%H`	Hour (`00`..`23`)
`%h`	Hour (`01`..`12`)
`%I`	Hour (`01`..`12`)
`%i`	Minutes, numeric (`00`..`59`)
`%j`	Day of year (`001`..`366`)
`%k`	Hour (`0`..`23`)
`%l`	Hour (`1`..`12`)
`%M`	Month name (`January`..`December`)
`%m`	Month, numeric (`00`..`12`)
`%p`	`AM` or `PM`
`%r`	Time, 12-hour (`hh:mm:ss` followed by `AM` or `PM`)
`%S`	Seconds (`00`..`59`)
`%s`	Seconds (`00`..`59`)
`%T`	Time, 24-hour (`hh:mm:ss`)
`%U`	Week (`00`..`53`), where Sunday is the first day of the week
`%u`	Week (`00`..`53`), where Monday is the first day of the week
`%V`	Week (`01`..`53`), where Sunday is the first day of the week; used with `%X`
`%v`	Week (`01`..`53`), where Monday is the first day of the week; used with `%x`
`%W`	Weekday name (`Sunday`..`Saturday`)
`%w`	Day of the week (`0`=Sunday..`6`=Saturday)
`%X`	Year for the week where Sunday is the first day of the week, numeric, four digits; used with `%V`
`%x`	Year for the week, where Monday is the first day of the week, numeric, four digits; used with `%v`
`%Y`	Year, numeric, four digits
`%y`	Year, numeric (two digits)
`%%`	A literal “`%`” character
`%x`	`x`, for any “`x`” not listed above

Be kind to your users and format the date for them!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Format Date Fields Using MySQL DATE_FORMAT()

Backup Your MySQL Database Using PHP

David Walsh — Mon, 18 Aug 2008 13:26:14 +0000

One of the most important tasks any developer needs to do often is back up their MySQL database. In many cases, the database is what drives most of the site. While most web hosts do a daily backup of a customer’s database, relying on them to make backups and provide them at no cost is risky to say the least. That’s why I’ve created a database backup function that I can call whenever I want — including nightly CRONs.

The PHP & MySQL Code

backup_tables('localhost','username','password','blog');


/* backup the db OR just a table */
function backup_tables($host,$user,$pass,$name,$tables = '*')
{
	
	$link = mysql_connect($host,$user,$pass);
	mysql_select_db($name,$link);
	
	//get all of the tables
	if($tables == '*')
	{
		$tables = array();
		$result = mysql_query('SHOW TABLES');
		while($row = mysql_fetch_row($result))
		{
			$tables[] = $row[0];
		}
	}
	else
	{
		$tables = is_array($tables) ? $tables : explode(',',$tables);
	}
	
	//cycle through
	foreach($tables as $table)
	{
		$result = mysql_query('SELECT * FROM '.$table);
		$num_fields = mysql_num_fields($result);
		
		$return.= 'DROP TABLE '.$table.';';
		$row2 = mysql_fetch_row(mysql_query('SHOW CREATE TABLE '.$table));
		$return.= "\n\n".$row2[1].";\n\n";
		
		for ($i = 0; $i < $num_fields; $i++) 
		{
			while($row = mysql_fetch_row($result))
			{
				$return.= 'INSERT INTO '.$table.' VALUES(';
				for($j=0; $j<$num_fields; $j++) 
				{
					$row[$j] = addslashes($row[$j]);
					$row[$j] = ereg_replace("\n","\\n",$row[$j]);
					if (isset($row[$j])) { $return.= '"'.$row[$j].'"' ; } else { $return.= '""'; }
					if ($j<($num_fields-1)) { $return.= ','; }
				}
				$return.= ");\n";
			}
		}
		$return.="\n\n\n";
	}
	
	//save file
	$handle = fopen('db-backup-'.time().'-'.(md5(implode(',',$tables))).'.sql','w+');
	fwrite($handle,$return);
	fclose($handle);
}

Of course, you'll need to provide database credentials to the function, as well as an array of tables you'd like to backup. If you provide a "*" or no tables, a complete database backup will run. The script does the rest!

Never take chances when your website is on the line. Make frequent backups or pay the price later!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Backup Your MySQL Database Using PHP

Editable Content Using MooTools 1.2, PHP, and MySQL

David Walsh — Thu, 26 Jun 2008 12:42:56 +0000

Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn’t they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for editable content blocks is the dream of many customers. I’ve taken a few hours to develop a system for in-page, editable content blocks.

View Demo

The XHTML

Editable Title

This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.

Note that any editable area is given the editable class. The “rel” attribute reflects the ID of the record that will be updated in the database. Also, if we want the form element to be a textarea instead of an input, we’ll give the editable element the “textarea” class.

The CSS

.editable:hover	{ background:#eee; }
.textarea textarea{ height:200px; padding:3px; }
.editable-empty	{ background:#fffea1; padding:20px; border:1px dashed #fc0; }
.box		{ border:1px solid #ccc; padding:5px; display:block; width:95%; }

The “box” class gets applied to both inputs and textareas. The rest is for gloss factor.

The MooTools JavaScript

//once the dom is ready
window.addEvent('domready', function() {
	//find the editable areas
	$$('.editable').each(function(el) {
		//add double-click and blur events
		el.addEvent('dblclick',function() {
			//store "before" message
			var before = el.get('html').trim();
			//erase current
			el.set('html','');
			//replace current text/content with input or textarea element
			if(el.hasClass('textarea'))
			{
				var input = new Element('textarea', { 'class':'box', 'text':before });
			}
			else
			{
				var input = new Element('input', { 'class':'box', 'value':before });
				//blur input when they press "Enter"
				input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });
			}
			input.inject(el).select();
			//add blur event to input
			input.addEvent('blur', function() {
				//get value, place it in original element
				val = input.get('value').trim();
				el.set('text',val).addClass(val != '' ? '' : 'editable-empty');
				
				//save respective record
				var url = 'mootools-editable-content.php?id=' + el.get('rel') + '&content=' + el.get('text');
				var request = new Request({
					url:url,
					method:'post',
					onRequest: function() {
						alert('making ajax call :: ' + url);
					}
				}).send();
			});
		});
	});
});

Once the DOM is ready, we find all of the elements with the editable class. We attach a “doubleclick” event to each editable item that inserts an input element (or textarea, depending on whether the original elements has the “textarea” class). Once we inject the input/textarea element, we attach a “blur” event to the form element which triggers an AJAX request that will save the content.

The PHP & MySQL

if($_SESSION['is_admin'] && is_numeric($_POST['id']) && isset($_POST['content']))
{
	$query = "UPDATE content_table SET content = '".mysql_real_escape_string(stripslashes($_POST['content']))."' WHERE content_id = ".(int)$_POST['id'];
	$result = mysql_query($query,$db_link);
}

When the PHP file receives the $_POST request, it validates credentials and updates the database with the new content. Simple! Click here to see it in action!

View Demo

A few notes about the code. First, this system isn’t meant to be for a big website. This system requires that editable content placed inside of a database with a unique ID for each area. Ideally, you’d use this one a small, simple site. Second, the textarea does not have a WYSIWYG editor attached to it so the editor (person) would need some knowledge of HTML if they wanted to add links and such. If you do want them to have that capability, download and configure FCKEditor, TinyMCE, or WMD.

Thoughts? Is this rubbish? Useful? Hit me!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Editable Content Using MooTools 1.2, PHP, and MySQL