Archive for September, 2009

Technorati Site View

Advertisements

Introduction to Flex Using PHP

With all the hype (and money) surrounding buzzword terms like Web 2.0 and Rich Internet Applications (RIA), it’s easy to wonder, “How can I integrate that into my PHP application?” Certainly, Asynchronous JavaScript and XML (Ajax) technologies that use JavaScript code are a good option. But you should also have a look at the Adobe Flex framework. With Flex, you can quickly build functional, attractive user interfaces in Adobe Flash that communicate to your PHP web application through XML.

Let’s step back and look at what Flex is and how it compares to standard HTML development with a language like PHP. Both the traditional Web 1.0 HTML architecture and the Flex-based architecture are shown in following Figure.

The Flex architecture compared to the standard PHP web page architecture
Figure 1. The Flex architecture compared to the standard PHP web page architecture

On the left, you can see the standard PHP workflow you’ve come to know. The browser makes a request of the PHP web page, which talks to the database and sends back HTML to satisfy the customer’s request.

On the right is the Flex approach. The customer navigates to the page, where a Flex application (a SWF file) is loaded that contains the user interface for the form. This Flex application then uses XML to read or write data to the PHP pages on the server. Those new PHP pages talk to the database and return XML to the Flex application for display. The dashed lines on the list.html and list.swf files indicate that they were generated by Adobe Flex Builder 2.

The advantage of Flex is that the framework provides an amazing set of interface tools that make it easy to build highly interactive user interfaces. In addition, there are many advantages to having the PHP pages return XML instead of (or in addition to) HTML. Here are just a few:

  • Desktop applications, such as Microsoft Office Excel, are starting to consume XML, making it easier for your customers to access their data.
  • Your customers can write or modify their own applications to use your XML instead of screen scraping your HTML pages.
  • If you choose a standard XML data format, such as RSS, specialized readers support the format.
  • You can use XSL to query or format the data from the server however you choose.

WAMP guide

Sooner or later you’ll want (and need) a local web server on your machine to test your websites.

When talking about web server software one usually talks about Apache. Apache is one of the most widely used web servers nowadays and is also free of charge unlike Microsoft’s web server technology.

Apache supports a variety of modules and plug-ins that let you configure your server just the way you want. WAMP (Apache, PHP and MySQL for Windows) provides the popular combination of Apache with the PHP server-side language and the MySQL database in one easy-to-install package

First you’ll have to download the latest version of WAMP. Once downloaded double-click the file to launch the installer.

The setup is pretty self-explanatory. At one point you will be asked where you want to have your www root folder. This www folder is simply where your web pages will be loaded from. It doesn’t really matter what you choose and you can always change it later.

After the installation you should have a fully functional Apache web server with PHP and MySQL.

Starting WAMP

To launch your web server go to Start › All Programs › WampServer (or wherever you installed WAMP to) and click start WampServer.

You’ll notice a small icon in the bottom right corner of your screen changing from red to white. That was just the WAMP server that booted up. By left-clicking on the icon you’ll get to the server options. The meaning of the icon status changes are shown below:

WAMP offline modeWAMP offline mode

Offline mode means that only you, from your computer, can access your server. External access will be blocked (indicated by the black lock in the icon). This is the default setting and should always be used for website testing.

WAMP online modeWAMP online mode

Online mode on the other hand means that everyone can access your server from anywhere. This is option is for using your computer as a live web server should you intend to do that.

Accessing your server locally

Now we’re going to try to access your server locally with a web browser:

  1. Make sure WAMP is up and running in offline mode.
  2. Enter localhost into your browser bar and hit enter.

If you didn’t provide a different www root directory when installing WAMP the default page should have loaded:

WAMP default page WAMP default page

What localhost does is simply to look for an index file (in this case index.php) in your www root folder and load it into the web browser. You can go to that folder (usually C:/Program Files/wamp/www/) and check for yourself that such file indeed exists.

You could now start building your own website by replacing the index file with your own index file (index.php, index.html, …). Every time you’d have made a change to your website you’d hit F5 in your web browser to load the most recent version.

Accessing your server from anywhere

Suppose you’ve created a cool website and want to show it to your friend who’s living halfway around the globe, sitting in front of his computer. You only have your website on your local machine. Very similar to the looking up a web page with its IP example you’re going to tell your buddy to enter your IP into his web browser bar.

Your friend’s web browser will then try to establish a connection with your computer over port 80 (standard port for speaking to web servers). Apache will catch this request and send the index page located in your www root folder to the web browser which in turn will interpret its containing HTML code and display it as a good old web page.

However, if WAMP runs in offline mode your friend will see the following in his web browser upon entering your IP:

WAMP external access error WAMP external access error

Try it for yourself:

  1. Make sure WAMP is running in offline mode.
  2. Enter your IP 121.246.243.112 into your web browser bar and hit enter.

To allow external connections to your server you have to restart WAMP in online mode.

  1. Left-click the WAMP icon and select Put Online.
  2. Wait for the icon status to change to white again.
  3. Enter your IP 121.246.243.112 into your web browser bar and hit enter.
  4. If you get the same forbidden page as before hit F5 to let the browser load the newest version.
  5. If it’s still not working you probably have to enable port 80 forwarding in your router configuration.

Finally your buddy can see your homepage!

WAMP external access success WAMP external access success

Changing Apache’s www root directory

Sometimes it’s necessary to change your current www root folder to something else. Maybe you have all your work files on a different partition than where you installed WAMP to or you have several websites you’re working on and need to make one of them your primary site for a while (the one that shows up when entering localhost).

Anything that has to do with Apache configuration can be done within a file called httpd.conf.

  1. WAMP provides quick access to certain important files, one of them being httpd.conf.
  2. Left-click WAMP icon and select Config files › httpd.conf.
  3. The file will probably open up in Notepad.
  4. Press Ctrl+F and enter documentroot.
  5. Make sure case sensitive search is disabled and hit enter.
  6. You should find a line that looks like DocumentRoot “C:/Program Files/wamp/www/”.
  7. Copy that line then put a # in front of it: #DocumentRoot “C:/Program Files/wamp/www/”.
  8. Paste the copied line just below and adjust it to where your custom root folder is located (e.g. DocumentRoot “C:/my_cool_site/”).
  9. Resume the search (usually by pressing F3) and you’ll find a line like: <Directory “C:/Program Files/wamp/www/”>.
  10. Again copy the line, put a # in front, paste copied line below and adjust it (e.g. <Directory “C:/my_cool_site/”>).
  11. Save and close the file.

Whenever you make a change to httpd.conf you have to restart Apache for it to take effect. The # we’ve added in front of the old lines turns them into a comment which Apache ignores. We just added them so that we can easily switch back to an old configuration by uncommenting the lines.

  1. Left-click the WAMP icon and select Apache › Restart Service.
  2. Wait for the icon status to change to white again.

The root directory should now have changed to then one you’ve entered in httpd.conf. You can test this by entering localhost in your web browser. The index page in that folder (or the lack thereof) should show up now.

Final words

You now have all the tools necessary for developing and testing dynamic and database driven websites on your local machine! If you installed WAMP to try out the tutorial examples you just need to copy the website template into a new index.html or index.php text file and place it in your Apache root directory.

What is WAMPServer?

WAMP is a form of mini-server that can run on almost any Windows Operating System. WAMP includes Apache 2, PHP 5 (SMTP ports are disabled), and MySQL (phpMyAdmin and SQLitemanager are installed to manage your databases) preinstalled.An icon on the taskbar tray displays the status of WAMP, letting you know if;

a) WAMP is running but no services are opened (the icon will appear red),

b) WAMP is running and one service is opened (the icon will appear yellow)  or

c) WAMP is running with all services opened (the icon will appear white).

Apache and MySQL are considered to be services (they can be disabled by left-clicking on the taskbar icon, guiding your cursor over the service you wish to disable and selecting “Stop Service”).

The files/web pages that are hosted on your WAMP server can be accessed by typing http://localhost/ or http://127.0.0.1/ in the address bar of your web browser. WAMP must be running in order to access either of the above addresses.

If you would like to share your files/web pages with others, click on the icon located on your taskbar tray and select “Put Online.” You must have access to the Internet in order to continue.

Send the people that you would like to give access to the files/web pages hosted on your WAMP server your IP Address. Your can find your IP address here:

Your IP Address and Browser Details

Your IP: 218.248.25.5
Hostname: 218.248.25.5
Web browser: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2

(notes: IP address based on your current browser)

If you are a dial-up user or if you have a dynamic IP Address (one that changes every so often), you will need to keep the people that have your IP Address updated every time you connect to the internet.

You can download WAMPServer from WampServer.com.

What Is REST?

The Technorati API

Feel free to search the blogosphere all you want using the Technorati Web page. However, as a Web application developer, you might want to automate that search or enable your Web page visitors to view information retrieved from the blogosphere based on their own search criteria.

To make that happen, use the Technorati API. Like many APIs on the Internet, the Technorati API uses REST.

What Is REST?

REST is an acronym for Representational State Transfer. The full explanation of everything entailed in a proper REST definition is outside of the scope of this article; however, it is available elsewhere on IBM developerWorks (see the links provided in Resources). For the subject covered here, it is sufficient to state that REST enables developers to access information and resources using a simple HTTP invocation.

Think of REST this way: To obtain domain-specific data, you simply point a URL to a specific location. For the purposes of this article, that’s really all it is. You can also think of it as a simplified Web service, but if you say that too loudly around the wrong people, you might find yourself in the middle of a debate.

In reference to the subject at hand, the Technorati API is a REST service that enables users to point to a specific URL and retrieve a variety of articles from the blogosphere that meet the criteria specified in the URL. This enables you, as a developer, to accept input within a Web application and dynamically query the blogosphere based on that input using a simple URL that encodes the input into a format the API understands.

Getting started: A simple example

Consider the example in Listing 1:
Listing 1. A simple search

http://api.technorati.com/search?key=xxxx&query=Obama

This is a fairly simple URL with only two request parameters.

Note that the actual Technorati API function is the word that follows the final slash (search). This indicates, unsurprisingly, that this REST invocation will perform a search against the blogosphere.

The first parameter is the key. The actual key used varies from user to user and is not really the xxxx character string. To obtain the key that you will use, you need to register with Technorati and request a key. Fortunately this is easy and free. Unfortunately, this means that you cannot simply copy and paste the URLs from this article into a browser and see the results. You have to substitute your own key for this xxxx string.

The second request parameter is the actual query. Just like in the manual example, the search uses the keyword Obama.

After you substitute your own key for the xxxx string, you can then plug that URL into a Web browser and see what results are returned. Your results will vary depending on your Web browser brand and version. Whatever the results on the screen, it’s best to right click on the page and select View Source to view the actual XML that is returned.

While the actual contents will also vary based on when your query is executed, the results should resemble Listing 2.
Listing 2. Output from a simple search (partial output)

<?xml version="1.0" encoding="utf-8"?>
<!-- generator="Technorati API version 1.0 /search" -->
<!DOCTYPE tapi PUBLIC "-//Technorati, Inc.//DTD TAPI 0.02//EN"
	"http://api.technorati.com/dtd/tapi-002.xml">
<tapi version="1.0">
<document>
<result>
    <query>Obama</query>
    <querycount>2270581</querycount>
    <rankingstart></rankingstart>
</result>
<item>
   <weblog>
      <name>Critica Pura</name>
      <url>http://criticapura.com</url>
      <rssurl>http://criticapura.com/feed/</rssurl>
      <atomurl></atomurl>
      <inboundblogs>7</inboundblogs>
      <inboundlinks>10</inboundlinks>
      <lastupdate>2009-06-21 17:13:23 GMT</lastupdate>
   </weblog>
   <title>Jib Jab Obama</title>
   <excerpt>Try JibJab Sendables</excerpt>
   <created>2009-06-21 17:13:23 GMT</created>
   <permalink>http://criticapura.com/2009/06/jib-jab-obama/</permalink>
</item>
...

Interestingly enough, the first query result as of this writing is a foreign language blog entry (at least, foreign to those who speak English).

The result element provides metadata information about the query results. The query child provides the actual query keyword. The querycount child provides the number of articles from the blogosphere that matched the query.

Many item elements follow the result element. Each item element corresponds to a blog article that matched the search criteria.

The weblog element provides information about the blog itself. This is information about the entire blog as opposed to just the article that matched the criteria. Table 1 describes the weblog child elements.
Table 1. weblog child elements

Element Description
name Actual name of the blog itself
url URL of the blog
rssurl URL of the Really Simple Syndication (RSS) feed for that blog
atomurl URL of the Atom feed for that blog
inboundblogs Number of blogs that link to that blog
inboundlinks Number of external sites that link back to that blog
lastupdate Date and time the blog was last updated

The elements described in Table 2 are children of item as opposed to weblog. These children refer to the article itself.
Table 2. item child elements

Element Description
title Actual title of the blog article
excerpt Synopsis of the blog article
created Date and time the article was written
permalink URL for the blog article


Add to Technorati Add to Del.icio.us Add to Furl Add to Yahoo My Web 2.0 Add to Reddit Add to Digg Add to Spurl Add to Wists Add to Simpy Add to Newsvine Add to Blinklist Add to Fark Add to Blogmarks Add to GoldenFeed

Flickr Photo Download: Technorati API perl query in action

3163377107_490d4e1e21_o


Add to Technorati Add to Del.icio.us Add to Furl Add to Yahoo My Web 2.0 Add to Reddit Add to Digg Add to Spurl Add to Wists Add to Simpy Add to Newsvine Add to Blinklist Add to Fark Add to Blogmarks Add to GoldenFeed

DuckSoup documentation for Technorati API

Getting started

As said in the overview, the whole ducksoup code is wrapped into a single class, which resides in the script duckSoup.php in the Duck Soup package.

The name of the class is duckSoup . So to get started, first you include duckSoup.php in your script and create an object from the duckSoup class

include "duckSoup.php";

$api = new duckSoup;

Parameters / Variables

The most important parameter that is to be assigned to the duckSoup class is your 32 character Technorati API key. You assign it to your newly created object as follows

$api->api_key="c21f9630e84e582895e5e9da586d792f";

The next important parameter is the type parameter. It is the type of API you want to use. (cosmosQuery,searchQuery,bloginfo..). Duck Soup supports all technorati APIs and here is the table values that are accepted by the ‘type’ parameter

API name Parameter (type) value
CosmosQuery cosmos
SearchQuery search
GetInfoQuery getinfo
BlogInfoQuery bloginfo
OutboundQuery outbound
TagQuery taginfo
TopTags toptags
KeyInfo keyinfo
BlogPostTags blogposttags
DailyCounts dailycounts

So assigning the ‘type’ would look like

$api->type = 'search';

And now comes the ‘params’ parameter. It is an array of parameters that is to be passed as query to the Technorati server. Every API has its own supported parameters (defined by Technorati). Full information can be found on the TechnoratiAPI wiki. Here is a brief list of supported parameters for each API

CosmosQuery (cosmos)
url *   type   limit   start   current   claim   highlight

SearchQuery (search)
query *   start   limit   claim   language   authority

GetInfoQuery (getinfo)
username *

BlogInfoQuery (bloginfo)
url *

OutboundQuery (outbound)
url *  start

TagInfoQuery (taginfo)
tag *   limit   start   excerptsize   topexcerptsize

TopTagsQuery (toptags)
(no parameters)

KeyInfoQuery (keyinfo)
(no parameters)

BlogPostTags Query (blogposttags)
url *  limit

DailyCounts Query (dailycounts)
q *  limit

Here’s an example parameter assignment

$api->params = array('query' => 'Apples', 'limit' => '10');

Now everything’s set, all we need to do is connect to Technorati and retrieve the data. For that the duckSoup class has the method (function) get_content(). It does all the processes and returns the data in trees.

$my_data = $api->get_content();

There we go! To see the structure of the data array, refer to the Tree structures. All the code we wrote in this section, would be like this in a nutshell

<?php
	include "duckSoup.php";

	$api = new duckSoup;
	$api->api_key="c21f9630e84e582895e5e9da586d792f";
	$api->type = 'search';
	$api->params = array('query' => 'Apples', 'limit' => '10');
	$my_data = $api->get_content();

	print_r($my_data);	// Prints the array

?>


Add to Technorati Add to Del.icio.us Add to Furl Add to Yahoo My Web 2.0 Add to Reddit Add to Digg Add to Spurl Add to Wists Add to Simpy Add to Newsvine Add to Blinklist Add to Fark Add to Blogmarks Add to GoldenFeed