Related Posts

1. A Simple Page Click Count System Using PHP And MySQL (22.3)
2. A Simple PHP Script (MySQL, Too) To Track Radio Station Song Requests, Part 4 (20.4)
3. A Simple PHP Script (MySQL, Too) To Track Radio Station Song Requests, Part 3 (20.1)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Asked recently on Formspring:

how to increment count in database on clicking radio button

There are a few ways to go about this. I’ll demonstrate two: a traditional, PHP / MySQL only, postback approach, and a jQuery version that uses AJAX to asynchronously record and update the counts.

Just to be clear: In order to complete this solution, we have to use both JavaScript and a server-side scripting language. We use JavaScript to intercept the user clicking the radio button, but process the fact that the button was clicked on the server.

Also, for the purpose of this tutorial, I’ll assume that the radio button involved is part of a group. That is, we have several radio buttons, all with the same name, but different values, e.g.:

<form id="myform" name="myform" method="post">
	<p>Select a color:</p>
	<label id="l_red"><input type="radio" id="r_red" name="color_name" value="red" />Red</label> (<label id="c_red">0</label>) |
	<label id="l_green"><input type="radio" id="r_green" name="color_name" value="green" />Green</label> (<label id="c_green">0</label>) |
	<label id="l_blue"><input type="radio" id="r_blue" name="color_name" value="blue" />Blue</label> (<label id="c_blue">0</label>) |
	<label id="l_black"><input type="radio" id="r_black" name="color_name" value="black" />Black</label> (<label id="c_black">0</label>)
</form>

Example 1: PHP / MySQL Postback

The easiest way to process a click is right on the page that contains the radio button, via a simple postback.

We begin with a MySQL table that will hold our count. It has two columns: color_name, which will contain unique values and thus can act as our table’s primary key; and color_count, the number of times that color has been clicked.

CREATE TABLE IF NOT EXISTS `colorcounter` (
  `colorname` varchar(5) NOT NULL,
  `colorcount` int(10) unsigned NOT NULL DEFAULT '0',
  PRIMARY KEY (`colorname`)
)

Next, we query the database for the current counts, which we’ll display in our form, later. We’ll dump the results set into an associative array, which will make outputting the counts in our form a little easier.

$link = mysql_connect('server', 'user', 'password') or die('Cannot connect to database server');
mysql_select_db('database') or die('Cannot select database');

// click-count increment routine will go here; more on that shortly ...

// get current color click counts
$rs = mysql_query("SELECT * FROM colorcounter") or die ('Cannot process SQL count totals query');
if(mysql_num_rows($rs) > 0) {
	while($row = mysql_fetch_array($rs)) {
		$count[$row['colorname']] = $row['colorcount'];
	}
}

We now need to set up our form to be ready to process the user click, and to display the click count records we previously received.

• We set the form to submit to itself.
• We add an onclick event to each radio button, instructing it to submit the form. (The logic that will process the click follows shortly; we’re just assuming that every time the form is submitted, we need to increment a counter.)
• We display the current click counts after each radio button.

<form id="myform" name="myform" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
	<p>Select a color:</p>
	<label id="l_red"><input type="radio" id="r_red" name="color_name" value="red" onclick="this.form.submit();" />Red</label> (<label id="c_red"><?php echo $count['red']; ?></label>) |
	<label id="l_green"><input type="radio" id="r_green" name="color_name" value="green" onclick="this.form.submit();" />Green</label> (<label id="c_green"><?php echo $count['green']; ?></label>) |
	<label id="l_blue"><input type="radio" id="r_blue" name="color_name" value="blue" onclick="this.form.submit();" />Blue</label> (<label id="c_blue"><?php echo $count['blue']; ?></label>) |
	<label id="l_black"><input type="radio" id="r_black" name="color_name" value="black" onclick="this.form.submit();" />Black</label> (<label id="c_black"><?php echo $count['black']; ?></label>)
</form>

Finally, we need to add some code to the page that will see if the form has been submitted, and increment the appropriate count.

// if this is a postback ...
if(isset($_POST['color_name'])) {
	// create array of acceptable values
	$ok = array('red', 'green', 'blue', 'black');
	// if we have an acceptable value for color_name ...
	if(in_array($_POST['colorname'], $ok)) {
		// update the counter for that color
		$q = mysql_query("UPDATE colorcounter SET colorcount = colorcount + 1 WHERE colorname = '" . $_POST['color_name'] . "'") or die ("Error updating count for " . $_POST['color_name']);
	}
}

Note that this code block should appear before the code block that gets the current click counts (where I included the comment in the first block of PHP code), in order to ensure the counts are up-to-the-minute.

You can see a working demo here: http://www.dougv.com/demo/ajax_radio_clickcount/index.php

Example 2: Using AJAX

The previous example has a number of drawbacks, not the least of them being that each time you click on a radio button, the entire form posts back to the server.

That limits its usefulness quite a bit. We could work around this problem a few ways; perhaps making sure we repopulate our form fields following the postback, and only performing final processing when the submit button is clicked (by adding an onclick event to that button, which hands off the results to a JavaScript function or a different processing page).

That’s an awful lot of work for very little benefit. It makes way more sense to leverage AJAX, and update our click counts without having to post the form itself back to the server.

JavaScript — more specifically, jQuery — to the rescue!

To get our jQuery solution to work, we need to create two PHP “helper” pages: one that will update our click counts whenever a radio button is selected, and the other that will get the current click counts, both on initial page load and following a click.

The get_counts.php Helper Page

Let’s start by calling the helper page that gets our click counts get_counts.php. It works almost exactly like the code block that gets the counts in our PHP postback example, except this page is going to output our results in JSON.

We’re putting the results out that way because it’s very easy for jQuery to process data in JSON format.

Let’s look page will expect to see a querystring variable named “color,” which indicates which value needs to be incremented. The page code itself will be very similar to the processing code in our postback version.

$link = mysql_connect('server', 'user', 'password') or die('Cannot connect to database server');
mysql_select_db('database') or die('Cannot select database');

// get new count totals, pass as JSON
$rs = mysql_query("SELECT * FROM colorcounter") or die('Cannot get updated click counts');
if(mysql_num_rows($rs) > 0) {
	$out = "{ ";
	while($row = mysql_fetch_array($rs)) {
		$out .= "\"$row[colorname]\" : $row[colorcount], ";
	}
	$out = substr($out, 0, strlen($out) - 2);
	$out .= " }";

	header("Content-type: application/json");
	echo $out;
}

The increment_counter.php Helper Page

Now that we have a way to get the counts, we need a way to increment them. Once again, we make a PHP helper page — increment_counter.php — that works fundamentally the same as the code block that increments the click counts in our PHP postback page, except that it calls upon GET, instead of POST.

(Yes, you can use jQuery to make POST and GET AJAX requests. When I’m sending a single variable that just needs to meet a range, I prefer to use GET.)

$link = mysql_connect('server', 'user', 'password') or die('Cannot connect to database server');
mysql_select_db('database') or die('Cannot select database');

// if this is a postback ...
if(isset($_GET['color'])) {
	// create array of acceptable values
	$ok = array('red', 'green', 'blue', 'black');
	// if we have an acceptable value for color_name ...
	if(in_array($_GET['color'], $ok)) {
		// update the counter for that color
		$q = mysql_query("UPDATE colorcounter SET colorcount = colorcount + 1 WHERE colorname = '" . $_GET['color'] . "'") or die ("Error updating count for " . $_GET['color']);
	}
}

The Form And JavaScript

With our helper pages out of the way, we can proceed to work on the form and the jQuery JavaScript needed to make this work.

As usual, our first step is to procure and include a copy of jQuery on our page. Lately, I prefer to simply link to the version hosted by the Google Libraries API, but you can download jQuery directly and run it off your server if you prefer. Either way, call it somewhere in your page’s head section:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Next, I want to strip the form back to its basic components.

<form id="myform" name="myform" method="post">
	<p>Select a color:</p>
	<label id="l_red"><input type="radio" id="r_red" name="color_name" value="red" />Red</label> (<label id="c_red">0</label>) |
	<label id="l_green"><input type="radio" id="r_green" name="color_name" value="green" />Green</label> (<label id="c_green">0</label>) |
	<label id="l_blue"><input type="radio" id="r_blue" name="color_name" value="blue" />Blue</label> (<label id="c_blue">0</label>) |
	<label id="l_black"><input type="radio" id="r_black" name="color_name" value="black" />Black</label> (<label id="c_black">0</label>)
</form>

Notice that I no longer have onclick events assigned to each radio button. That’s because I’ll wire up that event via $(document).ready.

More on that shortly. First, I want to declare a global variable, lastChecked. It will keep track of the value of the last radio button that was checked.

This will keep our page from recording multiple clicks on the same radio button, over and over again; clicks won’t be recorded unless, and until, a new value is clicked. In other words, if I just keep clicking Red, it will only be recorded once; if I then click Blue, that will be incremented, and clicking Red again will increment its value, once again.

var lastClicked = '';

I next want to write JavaScript functions for each of my helper pages. The first, getTotals(), will — as its name suggests — send an AJAX request to get the current click totals. It will then assign those totals to the labels after each radio button.

function getTotals() {
	// function to get click counts as JSON from helper page
	// expects get_count.php to be in same directory level

	$.ajax({
		type: "GET",
		url: "get_count.php",
		dataType: "json",
		error: function(xhr, status, msg) {
			alert("Failed to get click counts: " + msg);
		}
	})
	.done(function(data) {
		// loop through JSON variables, assign to count labels
		$.each(data, function(key, value) {
			var tmp = "#c_" + key;
			$(tmp).text(value);
		});
	});
}

I can now write the JavaScript function that will increment click counts. It’s named, quite cleverly, processClick, and takes as its argument the radio button (obj, for “object”) that was clicked.

function processClick(obj) {
	// function to increment click count via ajax
	// expects increment_count.php to be in same directory level

	if(lastClicked != obj.val()) { // don't count clicks on currently active radio button
		lastClicked = obj.val(); // set currently clicked radio button to this one

		var qs = "color=" + obj.val(); // set query string value

		$.ajax({
			type: "GET",
			url: "increment_count.php",
			data: qs,
			error: function(xhr, status, msg) {
				alert("Failed to process click count: " + msg);
			}
		})
		.done(function() {
			getTotals(); // update totals on successful processing
		});
	}
}

Finally, we want to use $(document).ready to initially populate the click total labels, and to assign processClick as the event handler for clicks on all the radio buttons on the page.

$(document).ready(function() {
	getTotals(); // get click totals on initial page load

	$(document).ready(function() {
		// add click incrementing event handler to all radio buttons on page
		$('input:radio').click(function() {
			processClick($(this));
		});
	});
});

You can see a working example here: http://www.dougv.com/demo/ajax_radio_clickcount/example2.htm

Notes And Code

A few notes about this project:

It’s not overly difficult for someone to click spam what I have here, either by simply clicking a radio button multiple times, or by calling the increment_count.php helper page multiple times.

A way around that would be to create single-use tokens for each iteration of the form, so that only one click per rendering of the form would be allowed.

You could do that by creating a session variable or cookie, if you’re using the PHP postback example; setting a Boolean in that session / cookie to be true the first time the form is submitted; and refusing to process the click if that session / cookie Boolean is true.

Or, for more security, you could add another MySQL table, which counts the number of times your form has been rendered. It would consist of an autoincremented primary key, which would act as an identifier for this instance of the form; and an tinyint column for recording a Boolean, which would indicate if the form had been submitted.

Every time your form is rendered, you would insert a new record in your form-rendering table, with a Boolean value of false indicating that the form has not yet been processed, then use mysql_insert_id to get the primary key value of the record you just created.

Using mcrypt, you would then create a single-use token by encrypting that record ID with a secret key only you know, and pass that to whatever method you are using to increment the counter.

That processing code would decrypt the token, make sure the record with that ID has a Boolean false as its “form has been submitted” value. If not, the code would not process the click; but if so, the code would process the click, then mark the form’s Boolean value as true.

An added benefit of this method is that it also inhibits forgeries and cross-site scripting attacks, since the only way to create legitimate tokens is via your secret key. (Theoretically, a hacker could crack your key, but use a sufficient passphrase and a good crypto algorithm, and the chances of anyone even taking a crack at it, nonetheless succeeding, are infinitesimal.)

Sounds more complex than it is. I’ve got demonstrating how to make a single-use token like this in Evernote blog column ideas. If significant interest is expressed, I’ll move it to the top of the list.

You can download the code in this post here: https://www.dougv.com/wp-content/uploads/2012/04/ajax_radio_clickcount.zip

All links in this post on delicious: http://delicious.com/dougvdotcom/how-to-increment-a-counter-in-mysql-based-on-a-radio-button-click

Related Posts

1. Displaying Selected YouTube Video Thumbnails On An ASP.NET Web Forms Page (64.7)
2. Automatically Hash Tagging Text With ASP.NET Web Forms (VB.NET) (24.5)
3. Parent-Child DropDownList Controls In ASP.NET Web Forms (VB.NET) (23.9)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Previously, I blogged about “Displaying Selected YouTube Video Thumbnails On An ASP.NET Web Forms Page,” when you know the video IDs of the thumbnails you want to hyperlink.

A reader recently asked me how to hyperlink YouTube video thumbnails based on searching for a keyword. I promised to address that, so here goes.

Interestingly enough, searching the YouTube Data API is accomplished in a REST-like manner quite similar to the methodology I used for shortening URLs in ASP.NET via the bit.ly API.

• Form a simple request URL to the YouTube Data API that contains the appropriate search parameters;
• Use a WebRequest to send that URL to Google, which returns an XML document with results;
• Use WebResponse to dump that stream into an XmlDocument;
• Use XPath and XmlNode‘s SelectNodes method to recursively get the thumbnails from each entry; and
• Bind up a pile of Hyperlink controls, which are added dynamically to a Panel control.

Sounds more complicated than it actually is. Let’s do it.

Overview Of The YouTube Data API

First step in leveraging the YouTube Data API: Get a Youtube Data API developer key.

With our developer key in hand, we can proceed to build a simple keyword query. In this case, we’re going to get the top 12 videos that meet the search criteria “Miss Maine.”

For our purposes, “top 12 videos” means the 12 videos YouTube deems most relevant to the exact search term “Miss Maine.” In other words, our search is going to work exactly as though we had typed “Miss Maine” (including the double quotes) into the search box at youtube.com; the results we get back should be the same as the first 12 results we would get via a default search on youtube.com. (For the usual vague reasons, this won’t always be the case, but the results sets will be similar.)

The YouTube Data API tells us that, to do a search query, we can GET a request to its servers, with our search parameters as querystring variables, and Google will return to us an XML document containing records that match our query.

Because we’re not requesting user-specific data, we don’t need to authenticate our requests; as previously mentioned, we don’t even need to send along our developer key. (But, again, being courteous and thorough, we will send it, as requested.)

So, the methodology we use to get our records is exactly the same as we used to shorten a URL via the bit.ly API; we’re going to create a URL containing all our parameters, then make a WebRequest to the YouTube Data API; we’ll get its returned XML via a WebResponse, and push that into an XmlDocument, from which we can extract the information we want.

Querying The YouTube Data API

There are three distinct phases in our solution: query the API, get the information we need from its response, and put that information on the page. Therefore, we will use three distinct functions and subroutines to do the work.

First up, a function to submit our query. It accepts as arguments our developer key and a formatted querystring, and it puts the response into an XML document for us. If the request fails, it will report as much in a Label control, and return an empty XML document.

Function QueryYouTubeDataAPI(ByVal strAPIKey As String, ByVal strQuery As String) As XmlDocument
	'Returns empty XMLDocument on failure, results XML on success
	'This function requires your page to have a label control named lblStatus for error reporting

	'build URL to shorten method resource
	Dim strUri As New StringBuilder("https://gdata.youtube.com/feeds/api/videos?")
	strUri.Append("v=2")
	strUri.Append("&")
	strUri.Append(strQuery)
	strUri.Append("&key=")
	strUri.Append(Server.HtmlEncode(strAPIKey))
	strUri.Append("&prettyprint=true") 'adds line breaks & white space to response; useful for debugging

	Dim objRequest As HttpWebRequest
	Dim objResponse As WebResponse
	Dim objXML As New XmlDocument() 'This is the document the function will return

	Try
		'create request for shorten resource
		objRequest = WebRequest.Create(strUri.ToString)
		'since we are passing querystring variables, our method is get
		objRequest.Method = "GET"
		'act as though we are sending a form
		objRequest.ContentType = "application/x-www-form-urlencoded"
		'don't wait for a 100 Continue HTTP response
		objRequest.ServicePoint.Expect100Continue = False
		'since we are using get, we need not send a request body; set content-length to 0
		objRequest.ContentLength = 0

		'read the Data API response into XML document
		objResponse = objRequest.GetResponse()
		objXML.Load(objResponse.GetResponseStream())
	Catch ex As Exception
		lblStatus.Text = "Error querying YouTube Data API. Message: " & ex.Message
	End Try

	'send XML Document
	Return objXML
End Function

<feed xmlns='http://www.w3.org/2005/Atom' xmlns:app='http://www.w3.org/2007/app' xmlns:media='http://search.yahoo.com/mrss/' xmlns:openSearch='http://a9.com/-/spec/opensearch/1.1/' xmlns:gd='http://schemas.google.com/g/2005' xmlns:yt='http://gdata.youtube.com/schemas/2007' gd:etag='W/&quot;CkYNSH07cSp7I2A9WhVSGEg.&quot;'>
	<!-- ... previous nodes -->
	<link rel='self' type='application/atom+xml' href='https://gdata.youtube.com/feeds/api/videos?q=%22Miss+Maine%22&amp;start-index=1&amp;max-results=12&amp;duration=short&amp;safeSearch=strict&amp;orderby=relevance_lang_en&amp;v=2'/>
	<!-- additional nodes ... -->
</feed>

Creating The Query String

You’ll notice that I am not very specific about the query string argument passed to the previous function. That’s because I want to give you maximum flexibility, and the best way to do that is to allow for a free-form query string to be supplied.

So let’s look at how I’ll build my sample query string. I’ll do that, of course, with key-value pairs. That is, I will specify the parameter I want to send, and set it as equal to something.

First up, the search term. We’re going to use “Miss Maine.” So, the first part of our query string is:

q="Miss Maine"

Technically, we can stop here and let the default API request variables take over. But I want to be more specific about my search results, so let’s add some more parameters.

Next, I’ll limit my responses to 12 records, by appending that key-value pair to my string:

q="Miss Maine"&max-results=12

I’d like only short (under 4 minutes) videos:

q="Miss Maine"&max-results=12&duration=short

To cull at least some offensive material, I’ll use strict safeSearch:

q="Miss Maine"&max-results=12&duration=short&safeSearch=strict

Finally, I’m going to specifically ask for English language videos that best match my search term. So my completed query string is:

q="Miss Maine"&max-results=12&duration=short&safeSearch=strict&orderby=relevance_lang_en

Examining The XML Response

Assuming our request goes through — that is, our Web server actually delivers the request to YouTube, which in turn sends a response back — we now have an XML document in storage that contains the information we requested. (Or, in the event of a malformed request, the default results set previously described.)

You can see the XML document returned for my demo query string here: http://www.dougv.net/demos/youtube_data_api_thumbs/videos.xml

In our case, we want some specific data for each video:

• Its title;
• the default thumbnail; and
• the URL to its player page on youtube.com.

We get back lots more useful information in the XML response: The name of the uploader, the run time of the video in seconds, its likes and dislikes count, the categories and keywords assigned to the video, the date and time it was uploaded, its view count, etc. But for this solution, we’ll only use the video’s title, thumbnail and URL.

Although the actual XML document contains much more data per entry, for our purposes, the relevant structure of the document looks like this (I’ve stripped out extraneous attributes):

<?xml version='1.0' encoding='UTF-8'?>
<feed>
	<entry>
		<title></title>
		<link rel='alternate' />
		<media:group>
			<media:thumbnail />
		</media:group>
	</entry>
</feed>

In practice, the parts of an entry (that is, an individual record) that we want to use look like this:

<entry gd:etag='W/&quot;DU8AQ347eCp7I2A9WhRWEEQ.&quot;'>
	<title>Miss Maine USA 2011</title>
	<link rel='alternate' type='text/html' href='https://www.youtube.com/watch?v=STm4GUqwLVo&amp;feature=youtube_gdata'/>
	<media:group>
		<media:thumbnail url='http://i.ytimg.com/vi/STm4GUqwLVo/default.jpg' height='90' width='120' time='00:00:43.500' yt:name='default'/>
	</media:group>
</entry>

Traversing The XML Response Document

We’ll need three XPath expressions that will give us, for each of the 12 videos returned:

1. the inner text of title,
2. the inner text of the link node that has the attribute ‘alternate’, and
3. the url attribute of whichever media:thumbnail node that has the additional attribute of yt:name=’default’.

The XML returned by the YouTube Data API uses several namespaces (atom, media, yt, etc.). Therefore, we first have to make reference to those namespaces in order to traverse the response XML.

We do that by creating an XmlNamespaceManager, then adding the specification URLs to it:

'add namespaces so we can traverse this thing
Dim xmlNSM As New XmlNamespaceManager(xmlDoc.NameTable)
xmlNSM.AddNamespace("atom", "http://www.w3.org/2005/Atom")
xmlNSM.AddNamespace("media", "http://search.yahoo.com/mrss/")
xmlNSM.AddNamespace("yt", "http://gdata.youtube.com/schemas/2007")

(We got these URLs from the root (“feed”) node’s attributes. That’s where they always appear, any time an XML document references namespace(s).

Now that we have the namespaces referenced, we can go ahead and create our XPath arguments. Here they are:

'let's get our entry node values
Dim xmlTitleNodes As XmlNodeList = xmlDoc.SelectNodes("/atom:feed/atom:entry/atom:title", xmlNSM)
Dim xmlURLNodes As XmlNodeList = xmlDoc.SelectNodes("/atom:feed/atom:entry/media:group/media:player", xmlNSM)
Dim xmlThumbNodes As XmlNodeList = xmlDoc.SelectNodes("/atom:feed/atom:entry/media:group/media:thumbnail[@yt:name='default']", xmlNSM)

Note that I use the namespace:node syntax to select the nodes I want. If I didn’t do that, the XML parser wouldn’t understand what I meant if I said simply, “feed”, for example. I have to let the parser know which namespace the element “feed” belongs to, so it can find it.

With our nodes on hand, we just need to iterate each XmlNodeList, get our values, and pass them to a subroutine that adds hyperlinked thumbnails to our page.

We can use a simple For loop here, because by design, the number of title, thumbnail and hyperlink nodes will be the same, and the nodes will be in the same order in all three XmlNodeLists. (That is, the first node in each XmlNodeList will be for the first record; the title, URL and thumbnail values will match up, because they were listed in order in the XML document.)

'For loop will iterate them; by definition, counts are the same for each XmlNodeList
For I = 0 To xmlTitleNodes.Count - 1
	strTitle = xmlTitleNodes.Item(I).InnerText
	strURL = xmlURLNodes.Item(I).Attributes("url").Value
	strThumb = xmlThumbNodes.Item(I).Attributes("url").Value

	CreateHyperlinkedThumb(strTitle, strURL, strThumb)
Next

Here’s what the entire subroutine looks like:

Sub MakeThumbnailLinks(ByVal strAPIKey As String, ByVal strQuery As String)
	'create XML document we will parse
	Dim xmlDoc As New XmlDocument()
	xmlDoc = QueryYouTubeDataAPI(strAPIKey, strQuery)

	'add namespaces so we can traverse this thing
	Dim xmlNSM As New XmlNamespaceManager(xmlDoc.NameTable)
	xmlNSM.AddNamespace("atom", "http://www.w3.org/2005/Atom")
	xmlNSM.AddNamespace("media", "http://search.yahoo.com/mrss/")
	xmlNSM.AddNamespace("yt", "http://gdata.youtube.com/schemas/2007")

	'let's get our entry node values
	Dim xmlTitleNodes As XmlNodeList = xmlDoc.SelectNodes("/atom:feed/atom:entry/atom:title", xmlNSM)
	Dim xmlURLNodes As XmlNodeList = xmlDoc.SelectNodes("/atom:feed/atom:entry/media:group/media:player", xmlNSM)
	Dim xmlThumbNodes As XmlNodeList = xmlDoc.SelectNodes("/atom:feed/atom:entry/media:group/media:thumbnail[@yt:name='default']", xmlNSM)

	'for debugging, we'll also get the url that represents what the Data API actually used
	Dim objNode As XmlNode = xmlDoc.SelectSingleNode("/atom:feed/atom:link[@rel='self']", xmlNSM)
	lblStatus.Text = "<strong>Request URL returned by YouTube Data API:</strong> " & Server.HtmlEncode(objNode.Attributes("href").Value)

	'strings to store values
	Dim strTitle As String
	Dim strURL As String
	Dim strThumb As String

	'looping variable
	Dim I As Integer

	'For loop will iterate them; by definition, counts are the same for each XmlNodeList
	For I = 0 To xmlTitleNodes.Count - 1
		strTitle = xmlTitleNodes.Item(I).InnerText
		strURL = xmlURLNodes.Item(I).Attributes("url").Value
		strThumb = xmlThumbNodes.Item(I).Attributes("url").Value

		CreateHyperlinkedThumb(strTitle, strURL, strThumb)
	Next
End Sub

Creating Thumbs From Results

The CreateHyperlinkedThumb subroutine takes the title, URL and thumbnail strings we got, applies them as properties to a Hyperlink control, and adds those controls to a Panel on our page.

Sub CreateHyperlinkedThumb(strTitle As String, strURL As String, strThumb As String)
	'create hyperlink
	Dim ctlLink As New HyperLink()

	'set values
	ctlLink.Text = strTitle
	ctlLink.ToolTip = strTitle
	ctlLink.NavigateUrl = strURL
	ctlLink.ImageUrl = strThumb
	ctlLink.CssClass = "margin-5"
	ctlLink.Target = "video"

	'add to panel
	pnlThumbs.Controls.Add(ctlLink)
End Sub

And with that, we’re done!

To invoke, we simply call the MakeThumbnailLinks subroutine, passing to it our YouTube Data API developer key and the querystring we built:

MakeThumbnailLinks("YOUTUBE_DATA_API_DEVELOPER_KEY", "q=""Miss Maine""&max-results=12&duration=short&safeSearch=strict&orderby=relevance_lang_en")

You can see a working demo here: http://www.dougv.net/demos/youtube_data_api_thumbs/Example2.aspx

The code for this solution, as well as “Displaying Selected YouTube Video Thumbnails On An ASP.NET Web Forms Page,” can be downloaded here: http://www.dougv.com/wp-content/uploads/2012/03/youtube_data_api_thumbs.zip

All links in this post on delicious: http://delicious.com/dougvdotcom/displaying-selected-youtube-data-api-thumbnails-on-a-web-page-via-asp-net-web-forms

Related Posts

Related Posts

1. Automatically Hash Tagging Text With ASP.NET Web Forms (VB.NET) (24)
2. Parent-Child DropDownList Controls In ASP.NET Web Forms (VB.NET) (23.8)
3. Displaying An Image Stored In A SQL Server Database On An ASP.NET Page Using VB.NET (22.5)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> I received a kind email recently from a reader, thanking me for my article titled “Retaining Values In A Form Following PHP Postback And Clearing Form Values After Successful PHP Form Processing“.

He also asked how he could use the YouTube Data API to search for videos by keyword; display thumbnails of those videos on an ASP.NET page; then either hyperlink to those videos on YouTube, or display them on his page via the YouTube Player API.

I’ll address that specific question in an upcoming post. First, I want to show how to do what the questioner asks if you already know the video IDs of specific YouTube videos you want to show on a page.

If you know the video ID(s) for the YouTube videos you want to display on a page, you can call them directly from YouTube’s image servers, thanks to a predictable URL and naming scheme, and hotlinking.

As this thread at Stack Overflow notes, every YouTube video has at least three thumbnails, numbered 1.jpg to 3.jpg. These images are 120px by 60px and are roughly taken at the start, middle, and end of the video, respectively.

The file named default.jpg is the default thumbnail at 120px x 90px resolution. Two others — 0.jpg and hqdefault.jpg — are 480px x 360px. All three of these default images are copies of whichever of the three video thumbnails has been set as the default frame capture for the video.

Finally, a maximum resolution version, available as maxresdefault.jpg, is available if there is a high-definition (720p or 1080p) version of the video. It measures 1280px x 720px. When there isn’t a high definition version of the video, this appears as the generic YouTube thumbnail icon, at 120px x 90px resolution.

So, here are all the thumbnail images available for Lisa Hannigan’s “What’ll I Do” music video (hover over each image to see its name):

And here are the thumbnails for a decidedly low-res video for The Monkees’s song, “Last Train To Clarksville”:

ASP.NET Web Forms Code To Display And Hyperlink Known YouTube Video Thumbnails

Here’s some simple ASP.NET Web Forms code to add hyperlinked thumbnails for five different YouTube videos, the IDs of which we know, to a Panel control. (I’m assuming here that the Panel control is named pnlThumbs.)

Sub AddVideoThumbs()
	'create ArrayList of known video IDs
	Dim arrIDs As New ArrayList
	arrIDs.Add("STxXS5lLunE")
	arrIDs.Add("Mwrl6bWfvrc")
	arrIDs.Add("4nTo8rjo-lM")
	arrIDs.Add("eVVXtknZVf0")
	arrIDs.Add("pxg113O_SRI")

	'some temp string variables for our processing loop
	Dim strTemp As String
	Dim strLink As String
	Dim strSrc As String

	For Each strTemp In arrIDs
		strSrc = "http://img.YouTube.com/vi" & strTemp & "/default.jpg" 'path to default thumbnail
		strLink = "http://www.YouTube.com/watch?v=" & strTemp 'path to video on YouTube

		Dim objLink As New HyperLink 'create hyperlink
		objLink.NavigateUrl = strLink
		objLink.ImageUrl = strSrc
		objLink.Text = strTemp 'sets alt text to ensure XHTML compliance
		objLink.Target = "video" 'will open all videos in same, new window / tab
		objLink.CssClass = "margin-0-5" 'a specific-to-me CSS class to space out the thumbnails

		pnlThumbs.Controls.Add(objLink)
	Next
End Sub

You can see this in action here: http://www.dougv.net/demos/youtube_data_api_thumbs/Default.aspx

In an upcoming post, I will describe how to use the YouTube Data API to search for videos, display their thumbnails on a page, and hyperlink to those videos. I’ll also package all the demo code together for download at that time.

All links in this post on delicious: http://delicious.com/dougvdotcom/displaying-selected-youtube-video-thumbnails-on-an-asp-net-web-forms-page

Related Posts

1. Calculating The Bearing And Compass Rose Direction Between Two Latitude / Longitude Coordinates In PHP (43.3)
2. Displaying A Random Yahoo! Search Every 30 Seconds With JavaScript And PHP (15.4)
3. Getting All ZIP Codes In A Given Radius From A Known Point / ZIP Code Via PHP And MySQL (5.9)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> I received an email yesterday from a reader who needed help with implementing my blog post, “Calculating The Bearing And Compass Rose Direction Between Two Latitude / Longitude Coordinates In PHP.”

His problem: He has latitude and longitude coordinates in his database tables that are in degrees-minutes-seconds (DMS) format, rather than decimal format. In other words, his coordinates look more like 55° 45′ 06″ N, 37° 37′ 04″ E than 55.751667, 37.617778.

So, my reader needed a way to convert back and forth between the two.

Fortunately, that’s easily done with a couple PHP functions. And since there’s not a lot that comes up in a Google search about how to make those conversions in PHP (lots of standalone converters, some JavaScript code, little PHP), I’ll fill the void here.

I should also note this function can be used for my other PHP latitude / longitude post, “Getting All ZIP Codes In A Given Radius From A Known Point / ZIP Code Via PHP And MySQL.”

Converting From DMS To Decimal

The easier of the two conversions is going from degrees-minutes-seconds to decimal. That’s because just as in an hour of time, each degree has 60 minutes, and each minute has 60 seconds.

So, to convert from DMS to decimal, we simply start with the degrees; then add the minutes value divided by 60, and the seconds value divided by 3600 (60 * 60). If the coordinates are South (latitude) or West (longitude), we need to make the decimal coordinate negative; North and East coordinates are positive.

Thus, a North latitude or East longitude is converted as:

$decimal = $degrees + ($minutes / 60) + ($seconds / 3600);

A South latitude or West longitude is calculated as:

$decimal = ($degrees + ($minutes / 60) + ($seconds / 3600)) * -1;

Here’s a simple function that makes these conversions. It takes, as arguments, the degrees, minutes and seconds of either a latitude or longitude coordinate, as well as its direction (N, S, E or W), and returns a decimal response.

function DMS2Decimal($degrees = 0, $minutes = 0, $seconds = 0, $direction = 'n') {
	//converts DMS coordinates to decimal
	//returns false on bad inputs, decimal on success

	//direction must be n, s, e or w, case-insensitive
	$d = strtolower($direction);
	$ok = array('n', 's', 'e', 'w');

	//degrees must be integer between 0 and 180
	if(!is_numeric($degrees) || $degrees < 0 || $degrees > 180) {
		$decimal = false;
	}
	//minutes must be integer or float between 0 and 59
	elseif(!is_numeric($minutes) || $minutes < 0 || $minutes > 59) {
		$decimal = false;
	}
	//seconds must be integer or float between 0 and 59
	elseif(!is_numeric($seconds) || $seconds < 0 || $seconds > 59) {
		$decimal = false;
	}
	elseif(!in_array($d, $ok)) {
		$decimal = false;
	}
	else {
		//inputs clean, calculate
		$decimal = $degrees + ($minutes / 60) + ($seconds / 3600);

		//reverse for south or west coordinates; north is assumed
		if($d == 's' || $d == 'w') {
			$decimal *= -1;
		}
	}

	return $decimal;
}

You can test this function here: http://www.dougv.com/demo/php_lat_lon_conversion/dms2decimal.php

You call this function as you would any built-in PHP function. For example, assuming you have DMS coordinate values stored in the PHP variables $deg, $min, $sec and $dir, you could assign a value to a decimal equivalent variable, $dec, thus:

$dec = DMS2Decimal($deg, $min, $sec, $dir);

Converting Decimal To DMS

Going from decimal coordinates to degrees-minutes-seconds is a bit more complicated.

• Set the DMS direction to South (negative latitude), West (negative longitude), North (positive latitude) or East (positive longitude);
• set the decimal to its absolute (i.e., unsigned) value;
• set degrees to be the floor of the decimal;
• subtract degrees from decimal, to get its fractional portion;
• multiply that by 3600, to get the total number of seconds;
• divide the seconds by 60, to get the total number of minutes;
• subtract the total number of minutes, times 60, from seconds; then
• set seconds value to its floor.

To accomplish this task via a PHP function, we will pass to it six arguments: the decimal coordinate; variables for degrees, minutes, seconds and direction; and a Boolean indicating if this is a latitude or longitude coordinate.

Four of our six arguments — degrees, minutes, seconds and direction — will be passed by reference. What that means to a layman is, the values of those arguments will be set by the function, without the need to specifically set them via an evaluation.

In other words, in PHP, you usually set a variable value via a function like this:

$foo = myfunction($bar);

But we’ll do it this way:

myfunction($bar, $foo);

An example of that in practice follows the function code.

function DecimalToDMS($decimal, &$degrees, &$minutes, &$seconds, &$direction, $type = true) {
	//set default values for variables passed by reference
	$degrees = 0;
	$minutes = 0;
	$seconds = 0;
	$direction = 'X';

	//decimal must be integer or float no larger than 180;
	//type must be Boolean
	if(!is_numeric($decimal) || abs($decimal) > 180 || !is_bool($type)) {
		return false;
	}

	//inputs OK, proceed
	//type is latitude when true, longitude when false

	//set direction; north assumed
	if($type && $decimal < 0) {
		$direction = 'S';
	}
	elseif(!$type && $decimal < 0) {
		$direction = 'W';
	}
	elseif(!$type) {
		$direction = 'E';
	}
	else {
		$direction = 'N';
	}

	//get absolute value of decimal
	$d = abs($decimal);

	//get degrees
	$degrees = floor($d);

	//get seconds
	$seconds = ($d - $degrees) * 3600;

	//get minutes
	$minutes = floor($seconds / 60);

	//reset seconds
	$seconds = floor($seconds - ($minutes * 60));
}

You can see this in action here: http://www.dougv.com/demo/php_lat_lon_conversion/index.php

Let’s suppose you have the variables $deg, $min, $sec, $dir, for degrees, minutes, seconds and direction, respectively. You also have a decimal coordinate stored in $dec.

This is how you would invoke the function above to assign values to your DMS variables:

//if your decimal coordinate is a latitude:
DecimalToDMS($dec, $deg, $min, $sec, $dir, true);

//if your decimal coordinate is a longitude:
DecimalToDMS($dec, $deg, $min, $sec, $dir, false);

You can download the demo code here: http://www.dougv.com/wp-content/uploads/2012/03/php_lat_lon_conversion.zip

All links in this post on delicious: http://delicious.com/dougvdotcom/converting-latitude-and-longitude-coordinates-between-decimal-and-hours-minutes-seconds

Related Posts

1. Tumblr Mangles Developer Relations (7.3)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> If you aren’t reading Seth Godin’s blog, you ought to be. Especially if you’re an entrepreneur, independent contractor, in sales or a client-facing role, or are otherwise responsible for leadership or the bottom line.

Since that describes pretty much every developer, probably you should be checking out Seth’s Blog.

He posts once a day, usually in the morning. Which is actually a trick he recently blogged about: Rather than looking at Twitter or Facebook or whatever first thing, and thus following, make a point of doing something — anything — productive, first thing, so that you’re leading. Then you can check out your social media channels.

I’m trying to learn that habit; it’s difficult, but it does make a huge difference in terms of productivity.

Detractors and naysayers consider Godin’s posts tripe and self-promotion. Sure, some of it can come off as a bit pandering, important or simplistic. Don’t confuse the words for the message. And it’s always good to be reminded of the basics.

I subscribe to Godin’s RSS feed via Google Reader. He notes blog posts on Twitter at @ThisIsSethsBlog and on his Facebook page.

However you get Godin’s thoughts, get them. You’ll be doing yourself a favor.

All links in this post on delicious: http://delicious.com/dougvdotcom/subscribe-to-seth-godins-blog-do-it-now

Related Posts

1. The Lessons We Should All Relearn From HBGary (5)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Last week I logged on to Tumblr and was confronted with this abomination:

Missing e notice from tumblr. Way to encourage API development, guys.

Needless to say, this is pretty disturbing, and I wonder what Tumblr is thinking by posting this.

Background

Some background: Tumblr is a blogging site, with social media overtones. Basically, you can easily follow other bloggers’ posts through a dashboard / search posts via tags, and it’s quite easy to repost material you find on other blogs.

Like most other major providers, Tumblr maintains an API. Until last year, it was mostly restricted to retrieving and submitting posts; it was recently expanded to allow some manipulation of blog settings and managing followers.

I like Tumblr a lot. I’ll go on a couple of times a day, and like most other Tumblr blogs, my blog is mostly reposts; it’s where I’ll dump links / reposts of things I see on the Web that I want to share.

Missing e has been around for a while. It’s a browser add-on for Webkit-enabled browsers; as its name implies, it leverages the API with some neat features that aren’t directly available through Tumblr itself.

For example, Tumblr has a lot of image posts. Missing e includes a magnifier feature that lets one see a full-sized image right from his dashboard, rather than having to engage in the several clicks it takes to see a full-sized image. Missing e also lets me more easily reblog items (including the automatic addition of tags to reblogged posts), manage my post queue, and otherwise make Tumblr easier to use.

I should note that I don’t know the developer of this plugin personally, nor have I spoken to him about this notice. (I have read his response to this outrage, however, and I find it remarkably calm, fair and responsible.) I don’t know if Tumblr has contacted him about its concerns or tried working with him on those issues (reading the developer’s responses, it sure sounds like they haven’t).

I also haven’t contacted Tumblr about this. I’m not interested in hearing whatever nonsense they intend to proffer as justification. I know what I read and I know how I feel about it as an API developer.

To Tumblr’s credit, they haven’t cut off API access to the plugin, which was certainly an option others might have pursued. It wouldn’t surprise me if a number of Tumblr users can’t tell where Tumblr ends and missing e begins, and thus they are swamped with support requests they can’t do much about. And it does make sense to me that missing e uses a lot of resources to accomplish its tasks.

A Completely Wrong-Headed Approach

That’s where my empathy for Tumblr’s plight ends.

First, Tumblr’s reliability, both in terms of its primary service and its API uptime, rivals Twitter for embarrassingly inadequate. (At least Twitter has the common sense to not blame third-party developers for their failure to stay up.)

That’s on Tumblr alone. It’s up to them to keep their service running.

I especially find odious the insinuations contained in this notice. While missing e is, in the base definition, a “hack” of Tumblr, the tone of this message suggests that the plugin isn’t well-written and may be up to no good.

Well, you can go to GitHub and look at the code yourself. Yes, it sends data to intermediary servers. Yes, it is technically possible for missing e to steal a user’s Tumblr credentials, to track Tumblr users’ activities, to obtain personally identifiable information, etc.

Let me be clear: I agree with another user that missing e in no way compromises user information right now. However, it could do so, by virtue of being a browser add-on; to that extent, the notice Tumblr posted is accurate, as they don’t directly accuse missing e of privacy violations, but do note it is possible for browser plugins to capture information a user never anticipated having captured.

Absent proof that there is an intention behind missing e to do that specifically, and to use such information for nefarious purposes — evidence Tumblr clearly could provide, if it existed — I find the tone of this note beyond insulting; it’s chilling.

My interpretation of this notice is, “We don’t like missing e. We’d just as soon ban it. But that’s not very Web 2.0 and it’s likely to generate PR static. So we’ll scare you, push you toward getting rid of it, then continue to serve those who want to use it.”

That’s being a dick. That’s being lazy. That’s being stupid.

A Proper Response

Were I in charge at Tumblr, we’d be going about this in an entirely different way.

• The first thing we would have done is offered the guy who wrote missing e a job.
• If not that, we would have offered to buy missing e outright.
• And if that didn’t pan out, we’d ask missing e users to rate its features, then build those into our platform.

Because what does Tumblr’s approach to this issue say? It says, “We aren’t interested in the reasons why missing e is a problem for us. We don’t care about our end users and why so many of them are using this plugin. It’s not that our product is inferior, and someone has made it better; it’s that we have what we have, and even though it can clearly be better, we’re more interested in the status quo.”

Or, as I’ll coin it, The MySpace Response: “Do what you like, so long it fits in our picture of our service.”

You saw how well that worked out for them.

I don’t suspect this blog post will cause any change whatsoever in Tumblr’s approach. I simply want to lament what is an absurd and insulting response to a relatively minor problem by a company that I expected knew better than that.

If Google brought you here because you’re worried about that notice, suffice it to say that I looked at the missing e code and, as of this writing, I see nothing there to be concerned about.

I do, however, see a lot to be concerned about in Tumblr’s handling of this matter.

All links in this post on delicious: http://delicious.com/dougvdotcom/tumblr-mangles-developer-relations

Related Posts

1. At New England GiveCamp This Weekend (30.9)
2. New England GiveCamp 2010: What A Great Experience (21.7)
3. Designers And Developers: Donate Your Time, Talent At New England GiveCamp, June 11-13, 2010 (21.1)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> Last weekend was New England GiveCamp 2011, in which 100+ developers, designers and other volunteers gathered to donate time and skills to some 30 charities who needed IT help.

This year, I was project lead for Alex’s Team Foundation, based in Andover, Mass. Our team was Saurabh Moondhra and William Wade, both experienced ASP.NET developers.

Alex’s Team Foundation, named after 16-year-old Alex Miliotis, who passed away from leukemia in 2002, raises money to support nurses and other oncology professionals, and supports youth sports. The foundation is largely the labors of Patti Rae Miliotis, Alex’s mother, and a handful of reliable volunteers. Like every small nonprofit, Alex’s Team doesn’t have a lot of money.

From the right to left: William Wade, Doug Vanderweide, Saurabh Moondhra and Patti Rae Miliotis of Alex's Team Foundation. The lady with her feet up is Deanna Lohnes, who worked on another project; the woman in green, whose name I do not know, was her charity's contact person.

Like every other leader of a small nonprofit, Patti is pulled in a lot of different directions and has all she can do to keep track of the people with whom she comes in contact, nonetheless all the donations she gets. Patti also hosts a few events every year. She basically needs a way to keep track of who attends those events or otherwise supports her organization, and to mail merge thank-you notes.

So that was the project I led this weekend: Converting a bunch of data stored in (of course!) Excel spreadsheets into a more relational database, with the ability to export that data in order to mail merge thank-you and fundraising letters.

CiviCRM: Too Much, Too Late

At first, I thought we could use CiviCRM, which is a Joomla / Drupal extension to manage membership, events, capital campaigns, email lists and the like.

The primary benefit in it, to my thinking, was that it does most of what Patti needed done; so, if she could use it, most of the work would already be done. That would allow us not only to import her spreadsheets, but also pay some attention to re-skinning the foundation’s current Web site (which is sorely needed).

CiviCRM’s biggest drawback is a huge learning curve. It is not easy to understand out of the box, especially if someone doesn’t have prior experience with customer relation management software. That was Patti’s problem: It was too daunting, much like the system she had tried previously.

So our task played directly to our strengths: Make an easy-to-use contact database on the Web, which could also track donations and event registrations.

Friday: Three Ways To Skin A Cat

Patti asked that we use Access to make her database, since she has some experience with it. Unfortunately, nobody on our team knew much about Access, and at least two of us have had negative experiences with it.

At last year’s GiveCamp, William wound up having to become an on-the-spot Access developer, and it left something of a sour taste. I’ve never had much success building standalone Access databases, largely because I find its visual query and form designers extremely limiting. Saurabh said he had little to no experience with Access.

The one thing we all knew was ASP.NET Web Forms. Well, to be specific, we knew three different versions of ASP.NET Web Forms. Saurabh programs in C#. William and I prefer VB.NET. William likes using Linq; I prefer old-school stored procedures; Saurabh likes inline SQL statements.

The good thing in that is, an ASP.NET Web application doesn’t need to run under just one language, and so long as the connections and queries are good, you can mix and match database layers to your hearts’ content.

So we settled in to design a database schema that could record contacts, donations and events. That consumed most of Friday night’s efforts. Here’s how it looked on the whiteboard. (Saurabh took this with his cell phone camera. Click it for full-size, which is easier to read.)

Saturday: Tackling The Obstacles

Saturday started with a lot of little hiccups.

DiscountASP.NET very kindly donated the Web hosting for our application. However, they require a domain name in order to host a site, and wouldn’t donate that. Because we weren’t redesigning the Alex’s Team site, which needed to remain on its current server, we couldn’t use the one domain name Patti had. So I popped on over to GoDaddy and bought a special domain for the occasion.

With a domain in hand, we could go ahead and create our application. Except that DiscountASP.NET, which would also donate a SQL Server database, has a separate ordering process for add-on services, which meant we would be delayed for several hours while we waited for the database to be set up.

Since our entire application was basically just a GUI to a relational database, we really couldn’t get much done without a database. So I tried to use one of my free GoDaddy Web hosting credits to set up service sufficient to get us started.

Unfortunately, I couldn’t use the newly registered domain to access any free service, because I guess the registration was too new; also, all the other domains I have registered through GoDaddy point to something, so I couldn’t use one of those.

Thankfully, GoDaddy will sell Web hosting for $8 for one month without need for a contract, so I just went ahead with that; and within 30 minutes, we were able to build our database and start making forms.

• I didn’t pre-install Visual Studio on my crappy laptop; that took two hours out of Saturday morning. A new laptop will definitely be in the offing for next year.
• While waiting for that install to finish, I went on a wild goose chase for a convenience store in Cambridge. Suffice it to say, the one nearest to NERD is a 7-Eleven about a half-mile away; but I wound up hanging around for about 45 minutes outside the Coop, waiting for it to open, because I was mistakenly led to believe it sold tobacco. (I fell off the no-smoking wagon for the weekend; I knew there would be some stress, and nicotine definitely keeps me calm.) So what should have been a 20-minute break turned in to an hour and a half.

I was gone so long in search of smokes, Saurabh accused me of going to get stoned. It was a reasonably accurate portrayal.

• Somewhere around 1 pm, I mistakenly thought we would have to work in ASP.NET 2.0 in order to resolve some namespace and other issues, and I communicated as much to my team. This led them to delete what they had made to that point. Within 5 minutes, William had corrected my error. Saurabh was nonplussed.
• After dinner, we were ready to start integrating our files. Non unexpectedly, we ran into a number of small issues. It took a little while to get William’s files working on my laptop, but try as we might, we just couldn’t get Saurabh’s C#-based solution to work. So he wound up converting them to VB.NET. I went back to the hotel to finish my part of the solution.

On Saturday night, I gave a quick overview on WordPress for the non-profits that I fear was a real snoozer. (Memo to self: Never host a seminar after dinner.) During that, I won my choice of a number of software prizes; but what was left available in the first-come, first-served prize pool didn’t really thrill me.

William had his eye on a copy of DevExpress DXPerience Enterprise, a bunch of .NET controls, worth about $1,300 on the retail market. I seldom program in Windows and he does all the time, so I transferred my winnings to him.

A Word About The Royal Sonesta

While many GiveCampers — William and Saurabh among them — spent the night at NERD, I stayed at a hotel, because I’m too old and fussy to be sleeping on hard floors. Also, I’m in Cambridge, which is quite a treat for me, and I wanted a chance to spend at least a little time in the city each night, even if it was just walking a half-mile to the hotel and having a drink or two in the lounge. So I opted to stay at the Royal Sonesta, which had the best rates.

View New England GiveCamp 2011 in a larger map

This simple plot was foiled, however, by the Royal Sonesta’s unfathomable renting out of the first-floor lounge on both Friday and Saturday night. On Friday, I was able to get a single beer, but it felt very strange crashing a private event and I wound up calling it a night early. On Saturday, they just turned me away, period, because a wedding reception was being held there.

Also, while the Sonesta loudly advertised its local shuttle service, they require you to register for it; and nobody saw fit to remind me of it at the concierge desk, when I asked for a shuttle schedule. As a result, I stood outside for a half-hour on Friday night, waiting for a shuttle that never showed up.

Overall, the Sonesta’s staff was courteous and friendly; especially the front desk, porters and valets. But the concierges were inexplicably surly, brusque, unapologetic and unhelpful.

So while the price was great ($144 per night, amazingly good for Cambridge), the hotel was clean and the room / amenities nice, I cannot recommend the place. I mean, what kind of hotel closes its lounge to guests? And has concierge service that basically looks to do as little as possible, and that with a frown on its face?

Sunday: It All Comes Together, Like Magic

The great benefit of having competent, skilled and motivated team members is that their sense of urgency and their ability to adapt and overcome adversity are both fine-tuned. That was certainly the case with William and Saurabh; they were pretty much done by Sunday morning, and all we had to do was take one more crack at getting all three parts to play nicely with one another.

I let that task fall to William, and he did an extraordinary job getting everything to work; certainly, a much better job than I would have done. Meanwhile, Saurabh settled in to help Patti make some upgrades to her Web site, notably in getting her Paypal donation button working again, adding in some alternative donation options and adding Google Analytics to her site.

Saurabh also won an instant drawing on Sunday and scored a copy of Age of Empires III for PC. I had my heart set on winning a WiFi-enabled Kindle, which was being given away at the end of GiveCamp; but that didn’t happen.

Not to say we didn’t get some great swag:

• A full-boat copy of Microsoft Office 2010 Professional. Awesome!
• A thumb drive. You can never have too many of those.
• A set of jewelers’ screwdrivers. Again, you can never have too many of them.
• A screw-top sippy cup with durable straw. Which is exactly what my spill-prone self needs to have on his work desk.
• A miniature Nerf football. Awesome stress reliever.
• A pen and pad of paper. Again, never can have enough of either.
• A puzzle book. Not that I had time during the weekend to mess with puzzles.
• A GiveCamp T-shirt. I like T-shirts as mementos.

During the weekend, Jim O’Neil dropped scores of additional treats on a giveaway table, many of which were O’Reilly books. I managed to get a spare puzzle book, several notepads, a PL/SQL quick pocket reference, Access 2010: the missing manual and Visual Basic 2010 Step By Step. There were a number of other books available but I was too slow to score them. However, I understand I am allowed a free ebook from O’Reilly, as well.

The bottom line is that we got our project done, it works, Patti seems fairly pleased with it and we had a great time this weekend. It’s definitely renewed my commitment; I’ll be a GiveCamper until I can’t do it any more.

All links in this post on delicious: http://www.delicious.com/dougvdotcom/new-england-givecamp-2011-what-a-weekend

Related Posts

1. Sorting Your MySQL Results Set In PHP Using jQuery (And A More Traditional Approach) (17.4)
2. A Simple Page Click Count System Using PHP And MySQL (17.2)
3. Multilingual Web Pages Via PHP, Arrays And MySQL (16.4)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> My recent work on the Google Reader to Twitter interface led me to recognize a serious shortcoming of such a basic system: A lack of support for hash tags.

For those unfamiliar with Twitter, hashtags are basically words proceeded by a hash mark (#). When a word is “tagged”, it becomes a hyperlink to content also containing that term.

Tagging isn’t unique to Twitter. It’s integral to WordPress, Tumblr and many other blogging platforms; Google uses tags (which they call “labels”) in most of their major applications, including GMail and Google Documents.

The reason is simple: People tend to organize information in terms of categories, so interrelating content by linking items that belong to the same categories to one another makes it easier on us to find and process that information.

So here’s a quick and easy script that lets you take keywords / tags / labels / categories / what have you from a MySQL table, run those terms over a string / subject text, and automatically tag that string with those terms.

(In a later tutorial, I will describe how to add new terms to the database.)

An HTML Form To Input A Subject String

We need a simple way to get our subject string (that is, the text we want to have tagged). Here’s a form to do that; you could, of course, alter this script to open up a file, or retrieve data from some other store, as your subject text.

I am also including an echo statement, just before the form, that will show the autotagged text once the form has been submitted.

<p class="notice"><?php echo $content; ?></p>
<form id="tform" name="tform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
	<textarea id="ttext" name="ttext" cols="50" rows="3"><?php echo $_POST['ttext']; ?></textarea>
	<br />
	<input type="submit" name="submit" id="submit" value="Submit" />
</form>

A MySQL Table To Contain Terms

We need to have some sort of data store to hold the terms. Eventually, we’re going to put these terms into an array, so you could simply hard-code your terms as a PHP array. Also, you could use an XML file, JSON, a CSV or other text file, etc. to hold your terms.

In my case, I am storing terms in a MySQL table. Here’s the code for my table:

CREATE TABLE IF NOT EXISTS `php_auto_hashtag` (
  `term_text` varchar(255) NOT NULL,
  UNIQUE KEY `term_text` (`term_text`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `php_auto_hashtag` (`term_text`) VALUES
('adsense'),('amazon'),('android'),('aol'),('api'),('apple'),
('bing'),('canvas'),('cbs'),('chrome'),('cloud'),('comcast'),
('darpa'),('eff'),('facebook'),('firefox'),('google'),
('hacker'),('hackers'),('hacking'),('html'),('html5'),
('http'),('https'),('ie9'),('ietf'),('intel'),('internet'),
('ios'),('ipad'),('ipv6'),('javascript'),('kinect'),('malware'),
('microsoft'),('mozilla'),('mvc'),('nokia'),('pentagon'),('php'),
('ps3'),('rackspace'),('safari'),('silverlight'),('sony'),
('stuxnet'),('symbian'),('tablets'),('twitter'),('vb'),
('verizon'),('virus'),('windows'),('xml'),('youtube');

Note that we don’t have a primary key. That’s because we have a unique key. We don’t want the same term in the database twice, and that’s what a unique key does: prevent duplicate entries. As a result, a primary key isn’t necessary for tuning / optimization if we have a unique key, since their purposes in indexing are similar.

A PHP Function To Retrieve Terms From The Database

To get the terms out of the database and into a PHP array, I’ll make a function. The reason why I am doing it this way will be noted shortly. The function returns false on an error, an array on success.

The function assumes the database table contains at least one term, but if it doesn’t, it’s not a fatal error (but will show a warning to the end user).

Finally, you’ll note I am using globally defined constants for taking in database credentials. This isn’t really elegant, but I want I want this script to work out-of-the-box for those who have limited programming skills; by defining DB variables globally, an end user can simply plug in the right values and use this script out of the box.

//your database server variables
define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'db_user');
define('MYSQL_PASS', 'db_password');
define('MYSQL_DB', 'db_name');
define('MYSQL_QUERY', 'SELECT term_text FROM php_auto_hashtag');

function at_get_terms() {
	//retrieve terms from database
	//returns Boolean false on failure, array of terms on success

	if(!$link = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS)) {
		trigger_error('function at_get_terms: Cannot connect to database server. Please check your host name and credentials', E_USER_WARNING);
		return false;
	}

	if(!mysql_select_db(MYSQL_DB)) {
		trigger_error('function at_get_terms: Cannot select the database. Please check your database name', E_USER_WARNING);
		return false;
	}

	if(!$rs = mysql_query(MYSQL_QUERY)) {
		trigger_error('function at_get_terms: Error parsing query. MySQL error: ' . mysql_error(), E_USER_WARNING);
		return false;
	}

	if(mysql_num_rows($rs) == 0) {
		trigger_error('function at_get_terms: No terms found in database', E_USER_NOTICE);
		return false;
	}

	$out = array();
	while($row = mysql_fetch_array($rs)) {
		$out[] = $row[0];
	}
	return $out;
}

A PHP Function To Autotag The Subject

We can now create a function that does the autotagging. It takes as arguments the subject text and the array of terms we want tagged; it returns false on an error and the tagged subject string on success.

In this case, we’re using preg_replace to do the tagging. There’s a lot of argument as to whether str_replace or ereg_replace is faster / better than preg_replace, but I find such arguments to be counting angels dancing on the head of a pin. I use preg_replace because it works quickly enough, regular expressions are an elegant way to find text, and PCRE is PHP’s preferred regular expression processing extension.

function autotag($input, $terms) {
	//tags $input with $terms
	//returns false on error, tagged string on success

	if(strlen(trim($input)) < 1) {
		trigger_error('function autotag: string to be tagged is empty', E_USER_WARNING);
		return false;
	}
	if(!is_array($terms)) {
		trigger_error('function autotag: terms is not an array', E_USER_WARNING);
		return false;
	}

	$tmp = array();
	foreach($terms as $term){
		//matches will be terms exactly as in database,
		//followed by space or newline
		$tmp[] = "/($term)(\s|$)/i";
	}
	$out = preg_replace($tmp, '#$0', $input);
	return $out;
}

Note the second argument in the preg_replace call, above. # is just the hash mark, which in the case of Twitter will be turned automatically into an tag link. $0 means, in regular expressions, the entire part of the subject text (the third argument) that matched the pattern (the first part of the argument).

So, if you wanted to use hyperlinks instead of hashtags, and use the found terms as querystring variables to a page named term.php, your preg_replace statement would be something like this:

	$out = preg_replace($tmp, '<a href="term.php?term=$0">$0</a>', $input);

(Always sanitize your querystring variables before using them in your PHP code. You have been warned. Don’t come crying to me or pointing fingers in my direction if you fall victim to an XSS or injection attack. Sanitize your variables.)

Get The Terms And Tag The Target String

We now have everything we need to autotag the target string. It’s as simple as a single-command if statement:

$content = "Enter text in the textarea below, then click Submit. The text will be automatically tagged with terms contained in the database. ";

if(isset($_POST['submit'])) {
	$content = "<strong>Hashtagged string:</strong> " . autotag(htmlspecialchars($_POST['ttext']), at_get_terms());
}

And that’s all there is to it. You can see a working demo here: http://www.dougv.com/demo/php_auto_hashtag/

You can also download the source code. I distribute this code under the GNU GPL version 3.

All links in this post on delicious: http://www.delicious.com/dougvdotcom/automatically-hash-tagging-text-with-php-and-mysql

Related Posts

1. Using AJAX To Update A Non-Map DIV Via Google Maps API’s GDownload() And GMarker OnClick Event (42.6)
2. Using YOURLS And The Twitter API With Google Reader’s Custom SendTo Link (18.7)
3. Hacking WP-PluginsUsed To Remove Plugin Version Numbers (15.5)

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post. ]]> I believe the objects and methods are the same between the two versions of the API, so the answer is probably. Unless, of course, they objects and / or methods have changed. In which case, no.

Ask me anything