Source Code Discussion

This document outlines the source code for the XML Atom Feed + flickr API mashup located at http://vinoaj.com/google/mashup-blogckr/.

Primary User Interface - index.php

The entry point of the mashup is index.php. Although the page has a php extension, there is no PHP involved - the page is purely XHTML, CSS, and JavaScript.

The JavaScript methods written are primarily for making AJAX requests, and for manipulating and displaying the returned results.
The JavaScript code makes use of the Prototype library.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A simple Blogger / Flickr mashup</title>
<style type="text/css">
body {
	font-family: Georgia, serif;
	font-size: 12px;
}

#container {
	position: relative;
	width: 750px;
	margin: 0 auto;
	overflow: auto;
	height: 100%;
	min-height: 100%;
}

#left_container {
	position: relative;
	float: left;
	border: 1px solid #CCC;
	width: 330px;
	padding: 10px;
	margin-right: 20px;
	height: 100%;
	min-height: 100%;
}

#left_container ul {
		margin: 3px 0 0 0;
	}

#left_container ul li {
		cursor: pointer;
		border: 1px solid #999;
		background: #CCC;
		padding: 3px;
		list-style: none;
		margin: 0;
		margin-bottom: 3px;
	}

#right_container {
	position: relative;
	float: left;
	border: 1px solid #CCC;
	width: 340px;
	padding: 10px;
	height: 100%;
	min-height: 100%;
	overflow: auto;
}

#notice {
	position: fixed;
	top: 0;
	left: 0;
	width: 100px;
	height: 20px;
	padding: 3px;
	background: #600;
	color: #FFF;
	display: none;
}

.button {
	border: 1px solid #000;
	padding: 3px;
	background: #CCC;
}
</style>
<script type="text/javascript" language="javascript" src="../js/prototype.js"></script>
<script type="text/javascript" language="javascript" src="../js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = initPage;

var lastClickedTitle = '';

function initPage(){
	$('refresh').onclick = refresh;
}

function displayBlogRequest(xhttpResponse){
	var xml_doc = xhttpResponse.responseXML;
	
	//var node_entries = xml_doc.childNodes[0].childNodes;		//This is the ideal way to do it, but IE doesn't like it
	//IE & FF friendly
	var node_entries = xml_doc.getElementsByTagName('entry');	
	
	for (i = 0, len = node_entries.length; i < len; i++){
		var node_entry 			= node_entries[i];
		var node_title_text 	= node_entry.childNodes[0].childNodes[0].nodeValue;
		var node_content_text 	= node_entry.childNodes[1].childNodes[0].nodeValue;
		
		var li_item		= document.createElement('li');
		var li_label 	= document.createTextNode(node_title_text);
		li_item.id 		= i;
		li_item.appendChild(li_label);
		li_item.onclick = lookupFlickr;
		
		$('entries_list').appendChild(li_item);
	}
	
	$('notice').style.display = 'none';
}

function displayImages(xhttpResponse){
	var xml_doc = xhttpResponse.responseXML;
	
	var node_photos = xml_doc.getElementsByTagName('photo');
	
	$('right_container').innerHTML = '<h2>' + lastClickedTitle + '<\/h2>' +
									 'Related images on flickr<br \/><br \/>';
	
	for (i = 0, len = node_photos.length; i < len; i++){
		var img_tn_src = node_photos[i].childNodes[0].childNodes[0].nodeValue;
		var img_src    = node_photos[i].childNodes[1].childNodes[0].nodeValue;
		
		var flickr_tn_img = document.createElement('img');
		flickr_tn_img.src = img_tn_src;
		
		$('right_container').appendChild(flickr_tn_img);
	}
	
	$('notice').style.display = 'none';
}

function showFailureNotice(xhttpResponse){
	$('notice').style.display = 'none';
	alert('AJAX request failed: ' . xhttpResponse.responseText);
}

</script>
</head>
<body>
<div id="container">
	<h1>Mashup: XML Atom Feed + flickr API</h1>
	This quick mash up does 2 things:
	<ol>
	  <li>Clicking on the &quot;Load articles&quot; link loads all the titles from the Google AdWords API Blog.</li>
	  <li>Clicking on an article title will load thumbnail images from flickr using the article's title as keywords.</li>
	</ol>

<div id="left_container">
	    <a href="#" id="refresh" class="button">Load articles</a>
		<h2>Articles</h2>
	    Click on the &quot;Load articles&quot; button above to display the latest articles from the Google AdWords API Blog in here.
		<ul id='entries_list'></ul>
	</div>
	<div id="right_container">
		Once articles have loaded in the left panel, click on an article title to display related images in here.
	</div>
	
</div>
<div id="notice">Loading...</div>
</body>
</html>

AJAX RPC functions

The following scripts are referenced by the AJAX requests in index.php.

ajax_common.inc.php

The following script is included at the top of all the RPC function scripts. It serves as a bootstrap script. It does 2 things:
1. Start output buffering.
2. Provide a generic error output function.

read_blog.php

This script retrieves an RSS Atom XML feed and returns an XML document containing all the titles returned by the feed.

lookup_flickr.php

This script takes a phrase, turns it into a comma-separated keyword list, and requests flickr to return 100 photos satisfying the keywords. The flickr feed is then parsed, URLs generated for the thumbnail images and full images; and these are then returned in the form of an XML document.

<?php
include_once('ajax_common.inc.php');

define('FLICKR_API_KEY', 'xxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxx');

$keywords = isset($_POST['keywords']) ? $_POST['keywords'] : 'vinny test';
$keywords = preg_replace('/\s+/', ',', $keywords);	//Convert spaces to commas, essentially creating a comma-delimited keyword list
$each_word_array = explode(',', $keywords);

$url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=' . FLICKR_API_KEY . '&tags=' . $keywords;

$xml_response = simplexml_load_file($url);

$dom = new DOMDocument('1.0', 'utf-8');
$node_root = $dom->createElement('urls');

foreach ($xml_response->photos[0]->photo as $photo){
	/* <photo id="2636" owner="47058503995@N01" farm="1" secret="a123456" server="2" title="test_04" ispublic="1" isfriend="0" isfamily="0" /> */
	
	$farm_id	= $photo['farm'];
	$id 		= $photo['id'];
	$owner 		= $photo['owner'];
	$secret 	= $photo['secret'];
	$server 	= $photo['server'];
	$title 		= $photo['title'];
	$ispublic 	= $photo['ispublic'];
	$isfriend 	= $photo['isfriend'];
	$isfamily 	= $photo['isfamily'];
	
	//http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
	$photo_tn_url 	= "http://farm{$farm_id}.static.flickr.com/{$server}/{$id}_{$secret}_s.jpg";
	$photo_url		= "http://farm{$farm_id}.static.flickr.com/{$server}/{$id}_{$secret}_b.jpg";
	
	$node_photo = $dom->createElement('photo');
	$node_url_tn = $dom->createElement('url_tn', $photo_tn_url);
	$node_url = $dom->createElement('url', $photo_url);
	
	$node_photo->appendChild($node_url_tn);
	$node_photo->appendChild($node_url);
	
	$node_root->appendChild($node_photo);
	
	unset($node_url_tn);
	unset($node_url);
	unset($node_photo);
}

$dom->appendChild($node_root);
echo $dom->saveXML();
header('Content-type: application/xml');
ob_end_flush();
exit;