Graphics by Greg » Uncategorized

A walk on the beach

Greg — Sun, 19 Oct 2008 23:36:40 +0000

Its been a long time since I’ve written anything here…mostly due to a very busy year which included Yenari and me getting married in June. I’ll try my best to be more active (i.e. more than one post a year), but for now, I’ll just provide a link to a little experiment I put together from some pictures from our honeymoon in the Cook Islands. It’s a little slideshow-like page, built with JavaScript:

Walking into the Ocean

Nothing too crazy on the JavaScript side – just playing around with some stuff I hadn’t done before. I wrote about three quarters of this a few months ago and just finished it off this afternoon. I had to write a simple, but hopefully effective, image preloader that has nice callbacks and a decent api. The actual slideshow could be written better, but it works, and that’s all I was going for…

Photos from South Korea, India, and Singapore

Greg — Mon, 11 Jun 2007 00:57:30 +0000

I just got back from 20 days of traveling to South Korea, India, and Singapore. I went to South Korea with Yenari to see her family and friends for about a week. After this I headed to Bangalore (India) for work while Yenari stayed in South Korea a bit longer. On the way back home I had a long layover (9 hours) in Singapore and got a chance to check out the city.

Check out my pictures here: http://picasaweb.google.com/gneustaetter/SouthKoreaIndiaAndSingapore

Scriptaculous Sortables with Ajax Callback

Greg — Wed, 17 Jan 2007 06:15:34 +0000

I haven’t written anything in a long time so I figured it is time to write something up. Because a huge portion of my traffic seems to be related to my scriptaculous examples I’ve put up, I figured I’d add another one that covers the process of updating a database with the results of drag/drop with an Ajax call. Each time the user changes an item’s position in the list it updates the database.

See the example (note: example uses Scriptaculous 1.7 Beta 2)

The methodology behind this is quite simple:

Load the list values from the DB and show them on the screen
Using JavaScript, setup the sortables
Add a JavaScript callback to the drag/drop that points to a function that serializes the list and sends an Ajax request to the server
On the server, loop through the list and update the database with the proper order

To do this I created three main files:

index.php – the UI that shows the list and has the JavaScript
ajax.php – the page that processes the Ajax request
db.php – a simple database class included in both index.php and ajax.php that makes the connection to the DB and has methods to get the current list and to update the list

Reviewing Index.php

Index.php looks like this:


require('db.php');
$demo = new SortableExample();
$list = $demo->getList();
?>



	Scriptaculous 1.7 Sortables Ajax Example
	
	
	
	


 
Scriptaculous Sortables Demo with Ajax Callback
Built with Scriptaculous 1.7 Beta 2.  Drag items in the list below.  Each time you update the list an Ajax call is made
that updated the database with the new order.


 

	
	foreach($list as $item) {
		?>
		$item['catid'];?>">$item['category'];?>
		
	}
	?>

Updating database...

Let’s look at this in reverse order. At the bottom of the file there is a div with id ‘containerDiv’ (line 36). This is the container for our list. Within this is a small snippet of PHP that loops through an associative array and prints out each list item as a div with id ‘item_12′ where 12 is the ID for that record in the database (line 40). Lines 2-4 contain the PHP code that include the db.php file and use it’s class to get the associative array that is used here.

Underneath the container div is another div that has the text ‘Updating database…’ – this div is hidden by default and will be shown while Ajax calls are in progress (line 45).

Now to the JavaScript…it starts off on line 14 with a call to Event.observe that tells the browser to call the init function after the page loads. The init function (line 15) creates a new sortable list on the listContainer element, setting all divs within it to be sortable and setting the updateList function as a callback whenever the list is updated. This means that when the order of items in the list change, this function will be called with the list element passed as an argument. This function will perform the Ajax request to update the database.

The updateList function (line 18) first sets a simple variable for the url used for the Ajax request. Next (line 20) it calls Sortable.serialize, passing the id of the container as an argument, which serializes the list to a format such as listContainer[]=5,listContainer[]=7,listContainer[]=2 – here, the first three items of the list would be the items 5, 7, and 2 and the divs representing these items would have the following id values: item_5, item_7, and item_2. This serialized list is set in the variable ‘params’. Next, on line 21, an Ajax request is opened with Prototype’s Ajax.Request class. It is called with two arguments, the url and an object with various options. The options include the type of request (POST in this example, parameters to pass (the params variable constructed on line 20), and two functions (onLoading/onLoaded) that handle the showing and hiding of the ‘Updating database…’ div. Normally in an Ajax request I’d also add a callback for onComplete to handle the response from the server, but in this case the Ajax response doesn’t really matter to me because it is really only a one way communication in this demo – in a real application I’d have more error handling and would need to handle error conditions.

That’s about it for the index page…not too bad, right?

Reviewing ajax.php

The file ajax.php is a simple file that is designed to receive the Ajax request and call the appropriate methods defined in db.php to update the list. Its contents are shown below:


session_start();
require('db.php');
$demo = new SortableExample();
$demo->updateList($_POST['listContainer']);
?>

Yup, that’s it. Basically it starts off by calling session_start() – I typically call session_start() at the top of pages like this because starting the session sends the right http headers to prevent the file from being cached and I’m too lazy to look up what the right headers are! Next it requires the db.php file, instantiates an object, and calls the updateList method of the object, passing the listContainer variable from the POST request (containing our serialized list). That’s it for the ajax.php page.

Reviewing db.php

The file db.php is a simple database class that connects to the database and has methods to get the list and to update the order of the list. In a ‘real’ application I would definitely have a much cleaner implementation of the database access and would use other DB libraries to connect to the db – I used the simple mysql db functions to minimize on the number of lines needed here. Here are the contents of the file:


class SortableExample {
	protected $conn;
	protected $user = 'test';
	protected $pass = 'test';
	protected $dbname = 'scriptaculous';
	protected $host = 'localhost';
 
	public function __construct() {
		$this->conn = mysql_connect($this->host, $this->user, $this->pass);
		mysql_select_db($this->dbname,$this->conn);
	}
 
	public function getList() {
		$sql = "SELECT * FROM categories ORDER BY orderid";
		$recordSet = mysql_query($sql,$this->conn);
		$results = array();
		while($row = mysql_fetch_assoc($recordSet)) {
			$results[] = $row;
		}
		return $results;
	}
 
	public function updateList($orderArray) {
		$orderid = 1;
		foreach($orderArray as $catid) {
			$catid = (int) $catid;
			$sql = "UPDATE categories SET orderid={$orderid} WHERE catid={$catid}";
			$recordSet = mysql_query($sql,$this->conn);
			$orderid++;
		}
	}
}
?>

Important note – this file uses PHP 5 syntax in this object…you’d need some changes to get this to run in PHP 4. I’ll skip talking about the constructor (which connects to the database) and the getList function (which…gets the list) in order to focus on the last method, ‘updateList’. This function takes in an array of items, i.e. array(5,7,2), that come from the serialized list. It loops through the list and generates SQL UPDATE queries for each item. Each time it increments $orderid so that the first item has an orderid of 1, the 2nd an orderid of 2, etc. This means that whenever we get the list, as long as the SQL ‘ORDER BY orderid’ clause is used the list will show in the correct order.

Summary

That’s it…hope you enjoyed it. The hopeful moral of the story is…Ajax is easy, and so is drag and drop….especially if you’re using a good library. Personally I think that Prototype is incredibly useful for JavaScript development and Scriptaculous is a good sidekick for effects and drag/drop. I’ve also used the Yahoo YUI widgets at work where we needed to do some more dynamic widgets such as trees – it worked really well. Jack Slocum’s YUI extension is incredibly well done too…though it’s a heavy one in terms of file size! In the end, it comes down to finding the right tool for the job…

Download the sample application if you want to take a closer look….

gCards Forum Up!

Greg — Mon, 03 Jul 2006 23:41:02 +0000

Many folks have complained since I took down the forum that was up for the support of gCards. Now, I’ve got a new forum up, this one powered by Vanilla. Hopefully it’ll do a bit better than the last one.

Check it out

Moved to new webhost

Greg — Mon, 20 Feb 2006 23:04:24 +0000

I moved this site to a new webhost – Dreamhost. Be on the lookout for links that don’t work and other broken stuff – if you find anything please add a comment to this post to let me know and I’ll take care of it.

In the process of moving my stuff from my old host to the new one, I came to learn that my forum for gcards was somewhat hacked…so I’ve decided to take it down (i.e. not reinstall it) for the time being. I may setup Media Wiki in its place or find another forum alternative…

Greg

Nursing jokes…courtesy of Yenari

Greg — Thu, 16 Feb 2006 07:17:17 +0000

“Top ten reasons to become a nurse”

1. Pays better than fast food, though the hours aren’t as good.
2. Fashionable shoes and cool uniforms
3. Needles: “Tis better to give than receive”
4. Reassure your patients that all bleeding stops…eventually
5. Expose yourself to rare, exciting new diseases
6. Interesting aromas
7. Courteous and infallible doctors who always leave clear orders in legible handwriting
8. Do enough charting to navigate around the world
9. Celebrate the holidays with your friends-at work
10. Take comfort that most of your patients survive no matter what you do to them

Just for fun…pregnancy dictionary

Artery…..the study of paintings
Bacteria…..the back door to the cafeteria
Benign……what you be, after you be eight
cauterize……made eye contact with her
Dilate……live long
enema…..not a friend
Fester…….qucker than someone else
Morbid……..a higher offer
Nitrates………cheaper than day rates
Outpatient….. a person who has fainter
Seizure……….roman emperor
Terminal Illness…….getting sick at the airport
Tumor……….one plus one more
Urine…….opposite of your out

Backing up delicious with PHP, mySQL, SimpleXML, and AJAX for Live Search

Greg — Sat, 07 Jan 2006 21:49:48 +0000

I’m a constant user of the social bookmarking service delicious. I use it to store bookmarks for all of the interesting web sites I see, and I use it to find interesting sites other people have found. It’s a very useful service and I’ve grown to rely on it. They have, unfortunately, had some problems with downtime, slow service, and other unreliability. I’m sure that this will be diminished greatly due to their purchase by Yahoo!, and I’m not really complaining, because it is a free service.

Because I rely on it so much, I decided that I needed a way to back up my bookmarks and still have access to them anywhere with an internet connection. Exporting to an HTML file or to my Firefox bookmarks didn’t really have any appeal to me. So my idea was to put together a simple PHP script to load all of my delicious links into a mySQL database and provide a simple interface to browse them. Delicious provides a REST API that has a call to export all of your posts to XML – if you load up http://del.icio.us/api/posts/all in your web browser, provide your delicious username and password, you can get the full XML. I also took this as an opportunity to play around with some technology that I haven’t used much yet – PHP5, SimpleXML, and AJAX.

Some of this is spurred on by the fact that I got a new webhosting account at Dreamhost – this supports PHP5 and has a ton of other great features. As a side note, if you’re looking for a webhosting account, you can sign up for Dreamhost’s Level 1 account (20GB space, just about unlimited bandwidth, PHP5, PHP4, Ruby on Rails, SSH, unlimited domains/subdomains, and a free 1 year domain registration) for $30 if you use the code ‘GREGPHOTO‘ at checkout and sign up for a 1 year prepaid plan. Ok, enough of the advertising – onto how I made the app and a bunch of code examples!

Exporting delicious posts

As mentioned above, I used the link http://del.icio.us/api/posts/all through Firefox to download the XML file and save it as all.xml. This has a very simple format, an example is shown below:

 version="1.0" standalone="yes"?>
 update="2006-01-07T17:55:47Z" user="gneustaetter">
   href="http://www.subzane.com/projects.details.php?ID=12" description="subzane.com - Free PHP Scripts and Classes" hash="05d908f23adbb89ef3e97e5d3a6ffd9f" tag="php" time="2006-01-06T07:50:49Z"/>
   href="http://priyadi.net/archives/2005/09/27/wordpress-plugin-code-autoescape/" description="Priyadi�s Place � Blog Archive � WordPress Plugin: Code Autoescape" hash="502441799d404abcbe08a07186c32626" tag="php wordpress" time="2006-01-06T06:47:59Z"/>
    href="http://www.huddletogether.com/projects/lightbox/" description="Lightbox JS: Fullsize Image Overlays" hash="08a5a446ff39aeb04c5fdbc50d674765" tag="javascript css design" time="2005-12-30T17:58:44Z"/>
   href="http://www.kayak.com/h/buzz/flights" description="Kayak Buzz popular flight searches" hash="ea74f520caad38215201d839403fc61f" tag="travel maps" time="2005-12-21T17:37:50Z"/>
   href="http://wsfinder.jot.com/WikiHome" description="WikiHome - wsfinder - JotSpot" hash="0e85912cf399cb7469a00e8633d13a77" tag="api reference tools" time="2005-12-21T17:31:16Z"/>
>

So basically it has a top level ‘posts’ element and then ‘post’ elements inside this that detail the link href, description, the tags applied to the link, the time posted, and a hash. I’ll use all of the information except for the hash.

Parsing the XML with PHP5′s SimpleXML

One of the greatest features in PHP5 is SimpleXML, which really allows incredibly simple access to XML. For tasks such as parsing the above XML, this is a great thing to use – you basically get to iterate through the XML as if it were an Array. Let’s take a look at the parseXML function in my delicious import class:

function parseXML() {
	$xml = simplexml_load_file($this->xmlfile);
	foreach($xml->post as $post) {
		$tags = $post['tag'];
		$tags = explode(' ',$tags);
		foreach($tags as $tag) {
			$tag = trim($tag);
			if(!in_array($tag, $this->tags)) {
				$this->tags[$tag]['name'] = $tag;
			}
		}
		$this->posts[] = array(
			'href' => (string)$post['href'],
			'description' => (string)$post['description'],
			'tags' => $tags,
			'time' => strtotime((string)$post['time'])
		);
	}
}

The function takes no arguments and starts off (on line 2) by loading the all.xml file (path stored as $this->xmlfile) and creating a simplexml object called $xml
SimpleXML supports iteration, so we can loop through the XML file as if it were an array – using the foreach construct (line 3)
On lines 3 and 4, we get the tags from the tag attribute of the XML, and explode them into an array by splitting them wherever there are spaces – i.e. the tag “php5 simplexml” would turn into an array with two elements, “php5″ and “simpleXML”
From here, we loop through the tags array I just created and push the tags into a class-level array if they aren’t already in there yet (lines 6-11)
Lastly, on lines 12-18, we populate information about the post into a class-level array that stores the information about all the posts

So in this function we took the all.xml file that had all of the delicious links, loaded them into a simpleXML object, and populated two arrays – one holding a unique list of all the tags, another holding information about all of the posts.

Populating the database

At this point, we insert all of the information into the database – none of that is too exciting, so I won’t publish that in this post, though you can look at the delicious.class.php file in the zip file that includes all of the files. It’s in the inc/classes directory. This class uses the incredibly popular ADODB database abstraction library to take care of inserting all of the data. This is split into three tables:

tags – holds a record for each unique tag
posts – holds a record for each tag, including all of it’s attributes such the href, description, space-separated list of tags (for easier searching later), and posting date
posttags – holds the relationships between posts and tags. A record is created for each tag associated with a post

Building the interface

Now that we have all of the information stored in the database, we can build the user interface and backend that are needed to display the bookmarks. The final version of what we’re building can be seen here. We start by creating a class to hold get all the information from the database. I’ve called this class bookmarks.class.php and it can be found in the ‘inc/classes’ directory. Again, there really isn’t much exciting code here, so I’ll just list out the relevant functions provided by the class:

__construct($conn) – takes an ADODB connection object and instantiates the bookmarks class
getAllBookmarks() – return an ADODB resultSet object (that implements iterator functions) that includes all of the posts and their details
getBookmarksByTag($tag) – takes a tagid a return as ADODB resultSet, as above, for the boomarks in the appropriate tag
searchBookmarks($criteria) – takes a search string and return an ADODB resultSet with bookmarks that match the search criteria
getTags() – returns an ADODB resultSet with all of the tags and their tagids

All in all, a pretty simple class, weighing in just under 50 lines. Next we need to build the user interface to display the bookmarks – I could have built a simple, standard application that rendered the bookmarks. Instead, I decided that I’d use some AJAX in order to dynamically load information when searching and when choosing a tag. We’ll get to the JavaScript once we show the two PHP pages I’m using for the application.

index.php


require('config.php');
require('inc/classes/bookmarks.class.php');
 
$bmarks = new bookmarks($conn);
$tags = $bmarks->getTags();
?>

 


Delicious Backup




 


	
		
			Search 
		
	
	
		
			 require('bookmarks.php');?>
		
		
			Tags
			
			
			foreach($tags as $tag) {
				?>$tag['id'];?>);">$tag['tag'];?>

			}
			?>

bookmarks.php


require_once('config.php');
require_once('inc/classes/bookmarks.class.php');
 
if(!isset($bmarks)) {
	$bmarks = new bookmarks($conn);
}
 
if(isset($_REQUEST['tag'])) {
	$bookmarks = $bmarks->getBookmarksByTag($_REQUEST['tag']);
} elseif($_REQUEST['criteria']) {
	$bookmarks = $bmarks->searchBookmarks($_REQUEST['criteria']);
} else {
	$bookmarks = $bmarks->getAllBookmarks();
}
?>
Bookmarks ($bmarks->numRows;?> matching)

foreach($bookmarks as $bookmark) {
	?>
	
		$bookmark['href'];?>">$bookmark['description'];?> posted Date('m/d/y', $bookmark['posted']);?>

		$bookmark['tags'];?>
	
	
}
?>

The index.php requires a config file that creates a database connection object, requires the bookmarks.class.php file we just created, instantiates the bookmarks class, and then gets a list of the tags (lines 2-6). From there, it’s mostly simple HTML work, requiring the bookmarks.php file (line 27), and finally looping through and displaying the tags – each with a link, when clicked, calls a javascript function ‘setTag’ that we’ll get to later.

The bookmarks.php file requires the same files as the index.php page, with the slight difference of using require_once instead of require. This page is going to be called within index.php on the first load, but then all other actions are going to call this page directly, not in the context on index.php. For the same reason, lines 5-7 conditionally instantiate a bookmarks object if it doesn’t not yet exist. From here on, the rest of the page is very simple – it determines whether it should be showing all of the bookmarks, bookmarks for a particular tag, or the search results. Each case uses one of the functions we defined in the bookmarks class. Lastly, it loops through the resultSet returned by the function and prints out each bookmark.

Bring on the AJAX

So we’ve built the basic structure of our pages and the backend, but I’ve put off talking about the JavaScript that’s needed to run this. There’s been a revolution in the world of web design – and JavaScript is coming out as a big winner. There are a number of incredibly useful JavaScript libraries that have been lowering the bar for creating compelling, dynamic websites. The one that’s probably used the most is the Prototype library. This library makes simple AJAX work really simple. Let’s walk through JavaScript, first with a refresher on the index.php page:

index.php


 


Delicious Backup




 


	
		
			Search 
		
	
	
		
			 require('bookmarks.php');?>
		

You can see on line 7 and 8 we’re linking to two external JavaScript files – the first is the prototype library, and the second is the logic used for this application.  Now for the contents of bookmarks.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Event.observe(window, 'load', init, false);
 
function init() {
	Field.focus('searchbox');
	Event.observe('searchbox', 'keyup', doSearch, false);
}
 
function setTag(tagid) {
	var url = 'bookmarks.php';
	var pars = 'tag='+tagid;
	var target = 'bookmarks';
	var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}
 
function doSearch() {
	var url = 'bookmarks.php';
	var pars = 'criteria='+$F('searchbox');
	var target = 'bookmarks';
	var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}

Line 1 starts off by using Prototype’s Event object to add an observer that will call the ‘init’ function ‘onLoad’ of the window.  The init function (lines 1-3), sets the field focus on the text box ‘searchbox’, that is defined on index.php.  It also sets an observer on this text box that will call the ‘doSearch’ function whenever a character is entered (or cleared) from the search box element.
Skipping down to the doSearch function (lines 15-20), this just sets a couple variables – the page we want to request (bokmarks.php), the parameters that we want to send (this uses the prototype $F function to get the current value from the searchbox element), and the target element we want to update – in this case, a table cell with an ID of ‘bookmarks’.  Lastly, we use the Ajax.Updater provided by the Prototype library to send off a request to the page, get the resulting HTML, and replace the contents of the bookmarks table cell with the new contents – not too hard, huh?  The setTag function is almost identical except it takes a tagid as an input and sends that off to the bookmarks page.
Now when we open up the final results, we have a dynamic application that reloads boomarks when you click on a tag, and performs a live search on the bookmarks.  I’d didn’t spend any time to spruce up the pages, but that’s for another day.  I hope you enjoyed this walkthrough, and learned something you didn’t know yet.  You can download all of the project files below:
Download Delicious Backup Project Files (135 KB)