Channels ▼
RSS

Web Development

PHP: The Power Behind Web 2.0

Source Code Accompanies This Article. Download It Now.


Andi is cofounder and cochief technology officer of Zend Technologies. Cal is editor of Zend's DevZone. They can be contacted at www.zend.com.


To understand why websites and applications might be considered Web 2.0, we first need to agree on a definition of the term. While there is no formal definition for it, we believe there are three essential components to Web 2.0:

  • Delivering a richer desktop-like user experience (Ajax).
  • Exposing functionality as easily consumable services (web services).
  • Leveraging the user-base to create, enhance, and categorize information.

The notion of Rich Internet Applications is all about delivering desktop-like experiences in the browser. JavaScript and Ajax are commonly used on the client side to deliver this experience. The main advantage of these technologies is their presence in popular web browsers, and that they can be implemented incrementally without requiring rewrites of existing web applications. In this model, the client depends on the server for orchestrating and delivering its data. PHP has been popular with Ajax applications because it's exceptionally well suited for this task. Not only is PHP a rich integration platform that includes connectivity to all popular databases, languages, file formats, and services, but it also has user-friendly and robust support for both the XML and JSON formats, typically used in client/server communications.

The second component of Web 2.0 is exposing functionality via web services. Although Service-Oriented Architectures (SOA) have been around for a few years, no one has been exactly sure how to bring them to life. Web services, with their ubiquity and ease of implementation, deliver on the promise of SOA. Likewise, an even more popular buzzword for Web 2.0 is "mash-up." Strictly speaking, mash-ups are any web service that combines two or more services to create a new service. Mash-ups are the poster-children for what the Web can be. Again, PHP has excellent support for web services, with its built-in support for SOAP, XML, and HTTP.

Finally, user-generated content is where these applications leverage users not only for creating content, but also for enhancing it by categorization.

In this article, we show the power of these communities by leveraging Flickr's photo collection and the categorization its users have contributed. For this project, we use pieces of the Zend Framework (framework.zend.com) on the back end and the Prototype.js (www.prototypejs.org) and Script.aculo.us libraries on the front end. The services we mash up are:

  • A news feed.
  • The Yahoo Content Analyzer service (developer.yahoo.com/ search/content/V1/termExtraction.html).
  • Flickr's API (www.flickr.com/services/api).

We call this mash-up the "Flickr News Network" (FNN) (the complete source code for FNN is available at www.ddj.com/code/). As Figure 1 illustrates, the concept behind FNN is simple: We want to show pictures from Flickr to augment an article from a given news feed. The implementation is straightforward—take the articles from a news feed and select pictures for it.

[Click image to view at full size]

Figure 1: The Flicker News Network architecture.

Because Flickr lets people tag photos, all we need to do is identify the keywords in the article and ask Flickr to search the tags for those keywords. Luckily, Yahoo has an API, the Yahoo Content Analyzer, which does just this. It takes in as a parameter the content you want analyzed, then returns a list of what it feels are the keywords.

When searching Flickr for keywords, you usually get multiple hits. For simplicity, we take the one with the highest "interestingness" rating and display it with the article.

In the process, we take advantage of all three Web 2.0 themes: We make heavy use of Ajax and JavaScript in the client, leverage web services (including RSS feeds and services from Yahoo), and take advantage of the tagging contributed by Flickr's user-base.

As you see in Listing One, there's not much HTML. Typical of many mash-ups, the heavy lifting is done by JavaScript, not HTML. As a disclaimer, the sample code we present illustrates one way the code could be written, but it's not the only way. In many cases, we omit important steps (filtering input, escaping output, error checking, and other important security measures) that production applications would include.

<?php
 session_start();
 $_SESSION['sak'] = md5(mktime());
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Flickr News Network</title>
    <script src="/js/prototype.js"></script>
    <script src="/js/scriptaculous.js"></script>
    <script src="/js/EventBus.js"></script>
    <script src="/js/Articles.js"></script>
    <script src="/js/NewsArticle.js"></script>
    <script src="/js/RequestWatcher.js"></script>

<link rel="stylesheet" type="text/css" href="/css/main.css" media="all" />
<script>
function pageLoad()
{
    Articles.sak = '<?PHP echo $_SESSION['sak'];?>';
    Articles.getEventBus().addObserver(new RequestWatcher('requestCount'),'requests');
    Articles.fetchArticleList();
} // function pageLoad()

</script>
</head>
<body onLoad="pageLoad();">

<center>
<div class="welcome">
<h2>Welcome to the Flickr News Network.</h2>
// On FNN, we mash-up a newsfeeds with Flickr to bring you pictures from Flickr 
// that may or may not be relevant depending on how good a job people do tagging them.
</div>
</center>
<br /><br />
<div class="monitor" >
    Requests Active: <span id="requestCount">0</span>
</div>
<br /><br />
<div id="stories"></div>
</body>
</html>
Listing One

Other than the list of included JavaScript libraries in the <head>, the only JavaScript we actually show in the HTML is the function called on page load. pageLoad() handles the things that we can't do inside the JavaScript files or that have to be done at runtime. Specifically, since the web server's PHP interpreter does not interpret the JavaScript files and we need to set a value from PHP, we set that value in the pageLoad(). The other thing we do is set up a RequestWatcher so that whenever anything changes, we can update our outstanding requests display.

The PHP

All communication with the necessary service partners is through Ajax. Because of security restrictions, Ajax calls can only be made to the same server that served the original page.

The heart of service.php (available at www.ddj.com/code/) are the two lines that get a proxy from the factory and call its main() function. Proxy:;factory() takes the action passed in. It then looks to see if a class named Proxy/ACTION.php is anywhere in the include path.

Once we have the proxy class, we call its main() function. The factory handed our list of unfiltered options into the constructor. The generic options that apply to all Proxy classes were filtered in the base class, Proxy_Abstract. Each proxy class can filter additional options by overriding _filterOptions(). Make sure that if you override _filterOptions(), you call the parent method.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV