Channels ▼

Web Development

PHP: The Power Behind Web 2.0

Source Code Accompanies This Article. Download It Now.

Proxies Are All the Same

The three Proxy classes we use in this project behave the same. For this reason, we won't go over them each in detail, but we do want to highlight one significant difference.

The Keywords.php proxy uses the Zend_Client_Rest class to talk to Yahoo's Content Analyzer. The Yahoo Content Analyzer is different in that while we still use a Representational State Transfer (REST) API to talk to it, we use an HTTP POST instead of a GET. The reason is that the description of the article could potentially be longer than the browser can send via a GET. This is why, when preparing the call to the Proxy factory, we use the $_REQUEST array instead of either $_GET or $_POST.

With Keywords and Photos, you need to register with the services and get the proper API keys to gain access. Most news feeds do not require you to register first.

Using pieces of the Zend Framework simplified the programming. Also, by structuring service.php as a factory, this solution can be reused and additional service proxies can easily be added.

The JavaScript

Almost all of the JavaScript in FNN is based on Prototype.js. There are other good JavaScript libraries such as Dojo and YUI!. Prototype.js, however, is simple to understand and implement, yet advanced enough to handle the needs of FNN. (See "Ajax: Selecting the Framework that Fits," by Andrew Turner and Chao Wang, DDJ, June 2007.)

The bulk of the JavaScript code is contained in two classes (both available online). The first of these is a class that we treat as a Static class, even though JavaScript does not have the facility to declare it as such. The class Articles contains everything we need to get the ball rolling. Because of its static nature, Articles is the one class that is not a subclass of Prototype's Class object. Because it's a static, we never instantiate it, we simply make calls to its member methods. The first call you see is in the pageLoad() method where we add a watcher to the Event Bus.

The primary method of entry is Articles.fetchArticleList() (available online), which fires off the request to services.php to fetch the feed. It passes the necessary parameters to service.php, including the action name, to properly set up and execute the proxy object. Prototype.js has a unique feature. If you are returning JSON from your service, you can set an HTTP header of X-JSON. The contents of the header are automatically evaluated creating a JavaScript object for you to use. This object is passed in as the second parameter to the onComplete method.

The thought process behind the fetching of the articles, keywords, and photos is straightforward and so is the JavaScript implementation—get articles, get the keywords for each article, get a photo for each keyword.

The second important JavaScript class in this project is NewsArticle. Once Articles has fetched the feed, it instantiates one copy of NewsArticle for each article in the feed. Each NewsArticle then goes off on its own and fetches the keywords for its story and then the best photo for each keyword according to Flickr. Finally it displays each of these items.

While the NewsArticle class contains the bulk of the code that will be executed, the concepts behind it are all pretty mundane.

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.