David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. » MySQL http://davidwalsh.name Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. Sun, 20 May 2012 22:40:48 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 MooTools Star Ratings with MooStarRatinghttp://davidwalsh.name/mootools-star-rating http://davidwalsh.name/mootools-star-rating#comments Tue, 08 Feb 2011 14:59:12 +0000 David Walsh http://davidwalsh.name/?p=5166 MooTools Star Ratings with MooStarRating is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> MooTools Star Rating

I’ve said it over and over but I’ll say it again:  JavaScript’s main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years.  Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads.  A new plugin by Lorenzo Stanco called MooStarRating has hit the MooTools Forge and I wanted to share with you how to use it.

View Demo

The HTML

The star rating system uses an HTML form with radio buttons as the base:

<form name="ratingsForm">
    <label>Do you like this post?</label>
    <input type="radio" name="rating" value="0.5">
    <input type="radio" name="rating" value="1.0">
    <input type="radio" name="rating" value="1.5">
    <input type="radio" name="rating" value="2.0">
    <input type="radio" name="rating" value="2.5">
    <input type="radio" name="rating" value="3.0">
    <input type="radio" name="rating" value="3.5">
    <input type="radio" name="rating" value="4.0">
    <input type="radio" name="rating" value="4.5">
    <input type="radio" name="rating" value="5.0">
    <input type="radio" name="rating" value="5.5">
    <input type="radio" name="rating" value="6.0">
    <input type="radio" name="rating" value="6.5">
    <input type="radio" name="rating" value="7.0" checked="checked">
    <input type="radio" name="rating" value="7.5">
    <input type="radio" name="rating" value="8.0">
    <input type="radio" name="rating" value="8.5">
    <input type="radio" name="rating" value="9.0">
    <input type="radio" name="rating" value="9.5">
    <input type="radio" name="rating" value="10.0">
	<span id="htmlTip"></span>
</form>

Note the ID of the form and the name of the radio buttons — we’ll use those when creating our MooStarRating instance.  Also note that I’m creating “half” rating options, as well as using checked to note what the current average rating is.

The CSS

This plugin requires no additional CSS.  That’s a bonus as it’s one less server request.

The MooTools JavaScript

The first step in using MooStarRating is defining the image paths for the stars:

// Configure the image paths
var MooStarRatingImages = {
	defaultImageFolder: "/js/mooStarRating/images",
	defaultImageEmpty:  "empty.png",
	defaultImageFull:   "full.png",
	defaultImageHover:  "hover.png"
};

Once the path and image names are defined, it’s time to create an instance of MooStarRating:

// A fake post ID for the sake of submission
var postId = 10;

// When the DOM is ready....
window.addEvent("domready",function() {	
	// Create our instance
	var starRater = new MooStarRating({
		form: "ratingsForm",
		radios: "rating",
		half: true,
		//imageEmpty: "star_boxed_empty.png", // For setting special images
		//imageFull:  "star_boxed_full.png",
		//imageHover: "star_boxed_hover.png", 
		width: 17, 
		tip: "Rate as <i>[VALUE] / 10.0</i>", 
		tipTarget: document.byId("htmlTip"),
		tipTargetType: "html"
	});
	
	// Listen for star clicks
	starRater.addEvent("click",function(value) {
		// Send ajax request to server
		new Request.send({
			url: "rating.php",
			data: { rating: value, postId: postId }
		});
	});
});

MooStarRating is loaded with options.  Here we pass the form ID and the name we provided to the radio buttons.  As I’m allowing half-stars, the half option is set to true.  MooStarRating also provides a “tip” functionality which allows a message to be displayed along side the star rating. Lastly, the click event provides the user’s rating for which you may send an AJAX request to the server to save the rating. Simple!

View Demo

That’s it!  I love this plugin because it’s simple and effective.  Big props go to Lorenzo Stanco for his excellent piece of work.  If there’s enough interest, I’ll create a tutorial that includes enough PHP and MySQL to get this rating system working with real data.

MooTools Star Ratings with MooStarRating is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/mootools-star-rating/feed 32 Quick Tip: MySQL date_addhttp://davidwalsh.name/mysql-date-add http://davidwalsh.name/mysql-date-add#comments Thu, 20 May 2010 00:51:11 +0000 David Walsh http://davidwalsh.name/?p=4971 Quick Tip: MySQL date_add is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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.

Quick Tip: MySQL date_add is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/mysql-date-add/feed 10 Create Custom Element Property Getters and Setters with MooToolshttp://davidwalsh.name/mootools-custom-element http://davidwalsh.name/mootools-custom-element#comments Mon, 03 May 2010 12:15:08 +0000 David Walsh http://davidwalsh.name/?p=4961 Create Custom Element Property Getters and Setters with MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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!

Create Custom Element Property Getters and Setters with MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/mootools-custom-element/feed 5 Create a Basic Web Service Using PHP, MySQL, XML, and JSONhttp://davidwalsh.name/web-service-php-mysql-xml-json http://davidwalsh.name/web-service-php-mysql-xml-json#comments Wed, 06 May 2009 12:36:25 +0000 David Walsh http://davidwalsh.name/?p=2324 Create a Basic Web Service Using PHP, MySQL, XML, and JSON is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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 '<posts>';
		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),'</',$tag,'>';
						}
					}
					echo '</',$key,'>';
				}
			}
		}
		echo '</posts>';
	}

	/* 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

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

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!

Create a Basic Web Service Using PHP, MySQL, XML, and JSON is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/web-service-php-mysql-xml-json/feed 77 Backup Your Database into an XML File Using PHPhttp://davidwalsh.name/backup-database-xml-php http://davidwalsh.name/backup-database-xml-php#comments Fri, 27 Feb 2009 14:19:35 +0000 David Walsh http://davidwalsh.name/?p=1409 Backup Your Database into an XML File Using PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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 = '<?xml version="1.0" encoding="UTF-8"?>'.$br;
	$xml.= '<database name="'.$name.'">'.$br;
	
	//for every table...
	while($table = mysql_fetch_row($result))
	{
		//prep table out
		$xml.= $tab.'<table name="'.$table[0].'">'.$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.'<columns>'.$br;
		$x = 0;
		while($x < mysql_num_fields($records))
		{
			$meta = mysql_fetch_field($records,$x);
			$xml.= $tab.$tab.$tab.'<column ';
			foreach($attributes as $attribute)
			{
				$xml.= $attribute.'="'.$meta->$attribute.'" ';
			}
			$xml.= '/>'.$br;
			$x++;
		}
		$xml.= $tab.$tab.'</columns>'.$br;
		
		//stick the records
		$xml.= $tab.$tab.'<records>'.$br;
		while($record = mysql_fetch_assoc($records))
		{
			$xml.= $tab.$tab.$tab.'<record>'.$br;
			foreach($record as $key=>$value)
			{
				$xml.= $tab.$tab.$tab.$tab.'<'.$key.'>'.htmlspecialchars(stripslashes($value)).'</'.$key.'>'.$br;
			}
			$xml.= $tab.$tab.$tab.'</record>'.$br;
		}
		$xml.= $tab.$tab.'</records>'.$br;
		$xml.= $tab.'</table>'.$br;
	}
	$xml.= '</database>';
	
	//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

<database name="my_database">
	<table name="wp_comments">
		<columns>
			<column name="comment_ID" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="1" table="wp_comments" type="int" default="" unique_key="0" unsigned="1" zerofill="0" />
			<column name="comment_post_ID" blob="0" maxlength="" multiple_key="1" not_null="1" numeric="1" primary_key="0" table="wp_comments" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_author" blob="1" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="blob" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_author_email" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_author_url" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_author_IP" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_date" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="datetime" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_date_gmt" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="datetime" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_content" blob="1" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="blob" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_karma" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="0" table="wp_comments" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_approved" blob="0" maxlength="" multiple_key="1" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_agent" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_type" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_comments" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="comment_parent" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="0" table="wp_comments" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="user_id" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="0" table="wp_comments" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
		</columns>
		<records>
			<record>
				<comment_ID>2</comment_ID>
				<comment_post_ID>4</comment_post_ID>
				<comment_author>Ryan</comment_author>
				<comment_author_email>ryantastad@hotmail.com</comment_author_email>
				<comment_author_url></comment_author_url>
				<comment_author_IP>66.84.199.242</comment_author_IP>
				<comment_date>2007-12-06 10:10:38</comment_date>
				<comment_date_gmt>2007-12-06 16:10:38</comment_date_gmt>
				<comment_content>Roethlisberger is coming to town!?  Sorry, Fred.</comment_content>
				<comment_karma>0</comment_karma>
				<comment_approved>1</comment_approved>
				<comment_agent>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)</comment_agent>
				<comment_type></comment_type>
				<comment_parent>0</comment_parent>
				<user_id>0</user_id>
			</record>
		</records>
	</table>
	<table name="wp_links">
		<columns>
			<column name="link_id" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="1" table="wp_links" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_url" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_name" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_image" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_target" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_category" blob="0" maxlength="" multiple_key="1" not_null="1" numeric="1" primary_key="0" table="wp_links" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_description" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_visible" blob="0" maxlength="" multiple_key="1" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_owner" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="0" table="wp_links" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_rating" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="0" table="wp_links" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_updated" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="datetime" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_rel" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_notes" blob="1" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="blob" default="" unique_key="0" unsigned="0" zerofill="0" />
			<column name="link_rss" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="0" primary_key="0" table="wp_links" type="string" default="" unique_key="0" unsigned="0" zerofill="0" />
		</columns>
		<records>
			<record>
				<link_id>1</link_id>
				<link_url>http://codex.wordpress.org/</link_url>
				<link_name>Documentation</link_name>
				<link_image></link_image>
				<link_target></link_target>
				<link_category>0</link_category>
				<link_description></link_description>
				<link_visible>Y</link_visible>
				<link_owner>1</link_owner>
				<link_rating>0</link_rating>
				<link_updated>0000-00-00 00:00:00</link_updated>
				<link_rel></link_rel>
				<link_notes></link_notes>
				<link_rss></link_rss>
			</record>
			<record>
				<link_id>2</link_id>
				<link_url>http://wordpress.org/development/</link_url>
				<link_name>Development Blog</link_name>
				<link_image></link_image>
				<link_target></link_target>
				<link_category>0</link_category>
				<link_description></link_description>
				<link_visible>Y</link_visible>
				<link_owner>1</link_owner>
				<link_rating>0</link_rating>
				<link_updated>0000-00-00 00:00:00</link_updated>
				<link_rel></link_rel>
				<link_notes></link_notes>
				<link_rss>http://wordpress.org/development/feed/</link_rss>
			</record>
		</records>
	</table>
</database>

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.

Backup Your Database into an XML File Using PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/backup-database-xml-php/feed 20 Animated AJAX Record Deletion Using MooToolshttp://davidwalsh.name/animated-ajax-record-deletion-mootools http://davidwalsh.name/animated-ajax-record-deletion-mootools#comments Thu, 29 Jan 2009 13:54:51 +0000 David Walsh http://davidwalsh.name/?p=1289 Animated AJAX Record Deletion Using MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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 '<div class="record" id="record-',$row['item_id'],'">
				<a href="?delete=',$row['item_id'],'" class="delete">Delete</a>
				<strong>',$row['title'],'</strong>
			</div>';
}

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!

Animated AJAX Record Deletion Using MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/animated-ajax-record-deletion-mootools/feed 49 Breaking & Fixing Dates from MySQL to PHPhttp://davidwalsh.name/dates-mysql-php http://davidwalsh.name/dates-mysql-php#comments Wed, 19 Nov 2008 12:05:55 +0000 David Walsh http://davidwalsh.name/?p=776 Breaking & Fixing Dates from MySQL to PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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!

Breaking & Fixing Dates from MySQL to PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/dates-mysql-php/feed 36 Using MooTools 1.2 For Drag, Drop, Sort, Savehttp://davidwalsh.name/mootools-drag-drop http://davidwalsh.name/mootools-drag-drop#comments Fri, 14 Nov 2008 13:57:36 +0000 David Walsh http://davidwalsh.name/?p=328 Using MooTools 1.2 For Drag, Drop, Sort, Save is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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

idtitlesort_order
1Article 11
2Article 22
3Article 33
4Article 44
5Article 55
6Article 66

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

The PHP / XHTML

<?php
<div id="message-box"><?php echo $message; ?> Waiting for sortation submission...</div>

<form id="dd-form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<p><input type="checkbox" value="1" name="auto_submit" id="auto_submit" <?php if($_POST['auto_submit']) { echo 'checked="checked"'; } ?> /> <label for="auto_submit">Automatically submit on drop event</label></p>

<ul id="sortable-list">
	<?php 
		$sort_order = array();
		while($item = mysql_fetch_assoc($result))
		{
			echo '<li class="sortme" alt="',$item['id'],'">',$item['title'],'</li>';
			$sort_order[] = $item['sort_order'];
		}
	?>
</ul>
<br />
<input type="hidden" name="sort_order" id="sort_order" value="<?php echo implode($sort_order,'|'); ?>" />
<input type="submit" name="do_submit" value="Submit Sortation" class="button" />
</form>
<?php } else { ?>
	
	<p>Sorry!  There are no items in the system.</p>
	
<?php } ?>

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?

Using MooTools 1.2 For Drag, Drop, Sort, Save is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/mootools-drag-drop/feed 70 Format Date Fields Using MySQL DATE_FORMAT()http://davidwalsh.name/format-date-mysql-date_format http://davidwalsh.name/format-date-mysql-date_format#comments Fri, 03 Oct 2008 12:51:01 +0000 David Walsh http://davidwalsh.name/?p=410 Format Date Fields Using MySQL DATE_FORMAT() is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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

SpecifierDescription
%aAbbreviated weekday name (Sun..Sat)
%bAbbreviated month name (Jan..Dec)
%cMonth, numeric (0..12)
%DDay of the month with English suffix (0th, 1st, 2nd, 3rd, …)
%dDay of the month, numeric (00..31)
%eDay of the month, numeric (0..31)
%fMicroseconds (000000..999999)
%HHour (00..23)
%hHour (01..12)
%IHour (01..12)
%iMinutes, numeric (00..59)
%jDay of year (001..366)
%kHour (0..23)
%lHour (1..12)
%MMonth name (January..December)
%mMonth, numeric (00..12)
%p AM or PM
%rTime, 12-hour (hh:mm:ss followed by AM or PM)
%SSeconds (00..59)
%sSeconds (00..59)
%TTime, 24-hour (hh:mm:ss)
%UWeek (00..53), where Sunday is the first day of the week
%uWeek (00..53), where Monday is the first day of the week
%VWeek (01..53), where Sunday is the first day of the week; used with %X
%vWeek (01..53), where Monday is the first day of the week; used with %x
%WWeekday name (Sunday..Saturday)
%wDay of the week (0=Sunday..6=Saturday)
%XYear for the week where Sunday is the first day of the week, numeric, four digits; used with %V
%xYear for the week, where Monday is the first day of the week, numeric, four digits; used with %v
%YYear, numeric, four digits
%yYear, 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!

Format Date Fields Using MySQL DATE_FORMAT() is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/format-date-mysql-date_format/feed 24 Backup Your MySQL Database Using PHPhttp://davidwalsh.name/backup-mysql-database-php http://davidwalsh.name/backup-mysql-database-php#comments Mon, 18 Aug 2008 13:26:14 +0000 David Walsh http://davidwalsh.name/?p=336 Backup Your MySQL Database Using PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> 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!

Backup Your MySQL Database Using PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

]]> http://davidwalsh.name/backup-mysql-database-php/feed 208