Center for the Handheld Web

Creating Twitter Widgets using JASON and PHP

October 28th, 2009

by Abhijit Gaikwad

Have you ever wondered how to create Twitter widgets?

Today I will walk you through simple steps to create a Twitter widgets using JASON, JQEURY, php.

First of you will have to select a twitter API. You can choose an API from http://apiwiki.twitter.com/Twitter-API-Documentation. For instance I will use Twitter Trends API.

Now create an php class to read this twitter API. Remeber that this API returns you the JASON object.

Lets create a read_trends.php file as following

<?php

$request = curl_init();

curl_setopt( $request, CURLOPT_URL, ‘http://search.twitter.com/trends.json’ );

curl_setopt( $request, CURLOPT_RETURNTRANSFER, 1 );

curl_setopt( $request, CURLOPT_HEADER, 0 );

$response = curl_exec( $request );

curl_close( $request );

echo ( $response );

?>

Now lets write a HTML code to read this JASON output.

For this I will use jQuery to read JASON object. Since we are using jQeury to read JASON object, do not forget to add

<script src=”http://code.jquery.com/jquery-latest.js” type=”text/javascript”>

Now we can read this JASON object and show it in table.

<table id=”trends” BORDER=2 RULES=NONE FRAME=BOX bgcolor=#eeeeee>

<thead>

<th style=”color:#800000;”><b>Current Twitter Trends</b></th>

</thead>

<tbody></tbody>

</table>

<script>

$(document).ready(function(){$(”#trends tbody”).html(”");

$.getJSON(

“read_trends.php”,

function(data){

$.each(data.trends, function(i,user){

var tblRow =

“<tr>”

+”<td><a href=’”+user.url+”‘ target=’_blank’>”+user.name+”</a></td>”

+”</tr>”

$(tblRow).appendTo(”#trends tbody”);

});

}

);

});

$(”#loadtrends”).click(function(){

});

$(’#trends tbody tr’).alternate({hover:true},function(){$(this).toggleClass(’selected’)});

</script>

Thats it we are all set.

Check working version here

Job Search

Posted in Uncategorized | No Comments »

Extending the “twitterinfo” service

May 8th, 2009

The Original Question

I have a friend in Real Life (who is also on Twitter as @practicalkatie) who tweeted me a perfectly reasonable question the other day:

hey – where do you find out the date you joined twitter? everyone is twittering about their anniversary dates, but I can’t even find mine!

and I realized I really wasn’t sure myself. So I went pawing around at the Twitter API Documentation site, and I came up with the RESTful method users/show, which uses a GET with a userID or screen name as data payload and returns extended information in JSON or XML form. So of course I tried it out in curl:

curl http://twitter.com/users/show/practicalkatie.xml

and lo and behold, there was an element returned called "created_at" to read. So I sent her the curl command-line. Then I thought about it some more, and I realized that was kind of a dumb thing for me to have sent her: how do I know she has curl installed? So I made up a little piece of code to provide that user-lookup service: twitterinfo

Let Nothing Serve But One Purpose

As long as I was writing a Web-based user interface to a user info lookup sevice anyway, I figured I might as well use the opportunity to distribute the work (no API key or such to hide in the middleware) and let the client talk directly to Twitter. And hey, why not make it so it can "already be there" on a handheld device when it is needed? Why not move towards making it a WebApp? Let them load it once from the RIT server, and thereafter get it locally.

This, of course, is a security problem. Unless you are willing to be a little twisted in your code.

The Same-Origin Policy

Like the Applet security model, the JavaScript security model says it is only allowed to open sockets and make requests (and thus send data) back to where it originated. And this stuff was not going to be originating on the Twitter server, it was going to be originating at RIT.

And so I had an excuse to play with another idea: JSONP

jQuery Makes It Easy

JSONP works by injecting a callback function into the JavaScript acting on the DOM, after the page thinks it is done loading and coming from the remote server. Weird, huh? I really didn’t want to write that code right now, I just wanted to use that capability and refine it later by writing it myself. jQuery has some already-defined functionality to do just this, and I am basically lazy. So I used jQuery’s $.getJSON function. jQuery makes it easy to do this stuff; you simply pass the fully-made-up URI for the GET and a function prototype.

  $.getJSON( fullUri,
    function( data ) {
      processJsonResults( data );
  });

The fullUri parameter contains the request we saw in curl, with a minor twist to deal with naming the callback, and the data variable in the anonymous function used for the callback ends up containing the response. The only real problem is that there is squat for error-handling. Anything other than a successful request-response cycle is unthinkable to this little bugger… There are always trade-offs for initial laziness, and this is one of them: I’ll accept this first version being stoopid about users typing in non-existent user-names to look up, for the sake of not having to write this particular code myself.

The Data Display

I figured a simple list would do, there wasn’t much in the way of depth to the "extended" user data returned and simple displays are easy for user to understand quickly. I also figured the avatar-picture should actually show in the list, and that "Web Home" field should be clickable.

Mobile? Did I Hear Someone Say Mobile?

I figure it should be made to work on mobile devices as well, I mean I do run this little Center for the Handheld Web and it would be a bit embarrassing to not make it work okay on "reasonably smart" mobile devices . And by "reasonably smart", I mean handhelds with browsers supporting the basic Holy Trinity of XHTML, CSS, and JavaScript. So I made sure it worked small, I added a bit of meta-tag magic like this:

<meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

and I added a little iPhone-specific JavaScript magic to make the address-bar roll up out of sight like this:


  document.getElementById("toolbar").style.visibility = "visible";
  window.scrollTo( 0, 1 ); // pan to the bottom, hides the location bar

and it was ready to go.

The structural markup was simple and should work on a small screen using gestures, the browser had been told not to mess with the fonts and such and to hide the address-bar, the sneaky JavaScript request/response code-injection was working, & the response-data node injection stuff was dealt with.

So What Next?

Simple things that do one thing nicely make me happy, but I can sometimes make things just a teenie bit "too simple". So I asked folks on Twitter what they would like to see as extended features for my little app. I figured there was no harm in asking, and the only responses I got involved seeing who someone was following and seeing who was following them. Followers and following, that is what folks wanted. And so that got me to thinking too, how about letting them "follow a trail"?

Wandering Through the Webs

Any list of followers or following users appears flat, but each entry in it is actually a node in a set of "interpenetrating webs of social affiliation" (as I have put it in other writing). Each person who follows me has in turn people who follow them and people who they follow. To each of us, we are at the root of a couple of webs. Looking at the larger picture, we are each embedded in interpenetrating webs (plural). If I get a list of the users following so-and-so, each of those entries should in turn be clickable so I can follow a path wanderting through the webs embodied in Twitter's persistence store.

Back to the API Docs

Of course, this meant I had to go back and look at the API documentation at Twitter. Was there any way for my WebApp to ask for user info on all the friends of someone with one call to the Twitter API? I wanted to be nice… sure enough, the REST API comes to the rescue with the method statuses/friends. So I tried that out in curl with

curl http://twitter.com/statuses/friends/jeffsonstein.xml

And it seems to work just fine. Perhaps I can add that functionality to the client and still not bang on the Twitter machines with too many API calls.

So That is Where We Are, Now

I have another week of classes, then exams to give and grade (ugh). Then I get to play with this some more. What do you think of it so far? Do you think I am going in the right direction with the follow-the-webs extension I am planning? Will it still be simple enough and work okay on a handheld device? Comments are very welcome.

Posted in Design, Logical Design, Mobile Devices, Web Apps, development, social networking, webs | No Comments »

When Collaboration, Insight, Initiatives, and Innovations meet – The Richard Tapia conference Celebration of Diversity in Computing 2009

April 21st, 2009

by Phavanhna Douangboupha

April 1-4, 2009, Portland, Oregon

: My view of the conference

Prof. Reynold Bailey (Department of Computer Science), Daniel Rabess (Software Engineering Student), and I (Phavanhna Douangboupha, MS IT Student, Department of Information Technology) – Golisano College of Computing and Information Sciences (GCCIS) attended the conference on April 1-4, 2009. A student from Kate Gleason College of Engineering also attended the conference to show cast the RIT arm robot research in the poster section.

At the end of this blog, I would like to share some insights on how to apply for the conference in the coming year. If you are one of the participants, please leave your comments and your thoughts about the conference. I am sure that many people are interested to hear.

There were approximately 400 participants from universities, industry, and government across United States. The participants compose of academia in computing field including professors, researchers, teachers, experts and people in the IT industry, PhD students, Master students, and Undergrad students. These people get together to intellect about current researches in computing field and to build up network for further collaborations, to gain an insight on current related technologies, to share knowledge for innovations, and to encourage more initiatives in this field. If you are a student in computing and technology field I encourage you to read on and you might find them useful. This conference is well known for its technical program and panel discussions. It provided papers, workshops, posters, panels, Birds of Feather sessions, a Doctoral Consortium, and a Robotics Competition.

This conference is unique as it is a place to learn from experienced and intelligent people in this field who are from different organizations such as top researchers in the computing filed, experts in the IT industry, professors, or even fellow students who are excel in the field and currently working on some projects. Most professors and experts including Dr. Richard Tapia were keen to share views with the students. At the first day of the conference they shared a valuable experience with the students on the importance of networking. Which I found is very helpful and very encouraging. It is one of the creative ways to break the ice among students and between the students and the experts who are much superior then us – professors and professionals in the field. People like Dr. Telle Whitney, the CEO & president of Anita Borg Institute for Women and Technology, Dr. Ann Quiroz Gates, the Vice president of Research, University of Texas at El Paso, Dr. Ekow J.Otoo, from Ernest Orlando Lawrence Berkeley national laboratory, Dr. Carla Faini, Microsoft academic Program Manager, and many other well known researchers in the field came and sit on the same table with us, students from the very first night.

I had never expected that they would be so warmth hearted and some of them would even spent more than 30 minutes talking to me and answering all my questions. Each of them is very inspiring and very encouraging. They showed their inspiration to see students be successful in their future careers. At the last day, Mario Pipkin, General Manager, Enterprise Experience Division, Microsoft Corporation, had a speech on the importance of exploring and seeking for opportunities that we should take the initiative to materialize it.

Moreover, I have learned from the conference that collaborations and intellects are the most successful approach for innovation. For instance, the DANCING – Dance and Choreography; an Intelligent Nondeterministic Generator project involves technologists, scientists, students, professors from two universities, and the most importantly the dancer themselves. The research was presented by Dr. Ruzena Bajcsy of University of California.

Dr. Ann Quiroz Gates presented a study about how collaboration can be used in research and education. The research is a proof of the effectiveness of working together with users. After all, computing technology can only be useful if it does solve problems and meet people’s need.

Another interesting topic from the conference is about data and information management. One of the common beliefs by three experts that I had conversation with is that online data is huge and it is certainly going to expand. It will have more impact on our society in the future (Dr. Hector Garcia-Molina of Stanford University, the professor of the two founder of Google; Dr. Bradley Jensen from Microsoft, and Dr. Juan Vargas from Google). An interesting question is how can we make the best use of the data?

Currently, Dr. Hector Garcia-Molina and his students are doing a research on web information management from search to social networks at Stanford. It is very interesting to see how Stanford students have their own Facebook like application and how the gathered data can be used to solve many problems. Unfortunately, the system is only available internally.

In addition, the other useful information I would like to share is about a free resource provided by Microsoft. Are you aware that Microsoft has a system called Microsoft Enterprise Consortium where education institutions and students around the world can access into the technology for free?

Many panel discussions involved issues on how to encourage more students to continue their study to the graduate level or even how to increase the number of students in the field. Papers and power point presentations provided at the conference can be found at ACM database, just search for key words “the Richard Tapia conference 2009″.

The conference organizers started the conference by encouraging students to introduce themselves. There were many innovative projects presented at the conference. The conference was ended by a fun dancing floor – “work hard play hard”. So, a big thanks and appreciation to everyone involved for their hard work and their innovative approach to make this conference reality.

If you are a student, how can you get there in 2011?

For more information about the conference in 2011, you can write to info@tapiaconference.org.

There are three ways that you can get financial support to attend the conference. One is to apply for a school scholarship. There are normally many emails or posters that will be announced a month or few months before the conference.

Second is to keep an eye and ear out for the scholarship program through the conference website. You can also try to apply for a support through different organizations such as the ACM’s committee on Women in computing.

Last but not least, simply just use an online search tool and type in combinations of key words including a conference’s name and scholarship. I did this and what I found was the ELA – Empowering Leadership Alliance Mentoring Program that also offered financial support for students.

All of the aforementioned opportunities require you to have a student status, an essay, and a resume. And, the school would probably require that you maintain a good GPA. The essay question might be varied from year to year and from organization to organization. Nevertheless, the common themes are as follow:

Why you do want to attend?
How will the conference benefit you?
How does the conference relevance to your study or research?
How will you share your experience?

For the essay, I believe all you have to do is to write it from your heart and show your genuine interest on the conference. For the resume, I would suggest you to keep your resume up to date at all times so you could just submit it when an opportunity presents.

Hope to see more of RIT students there or maybe we could bring the conference here. Don’t you think RIT could be a good place to host the conference especially if it coincides with our Imagine RIT festival? or the Connectology leadership advancement conference? How about the Bar Camp Rochester chapter?

It is totally a lengthy taking experience for me. If you get one of the above mentioned scholarships you could attend the conference for free or have a partial support. When the opportunity shows, all you can do is to try as you never know.

For me I did not expect to get the school scholarship either. But, I did with the helps and supports of the following people to whom I would like to express my sincere thanks and gratitude to Prof. Reynold Bailey, Prof. Sharon Mason, Prof. Jeff Sonstein, Cheryl McLean, and Adwoa Boateng for their kind supports. Most importantly I would like to thanks our Dean (Dr. Jorge L. Díaz-Herrera) and the GCCIS for providing me this unique opportunity. Also, I am very much appreciated the kind assistance from Susan Herzberg from IT Department, Susan Phillips from Office of Graduate Studies, and Fabiana Kotoriy from the Student Government who provided me with some of the RIT materials presented at RIT table at the conference.

Photos

: from left to right Prof. Reynold Bailey, Phavanhna Douangboupha, Daniel Rabess

: Town Hall Meeting

: During Plenary Session

: Celebration on the Dance Floor

: Discussion during a workshop

: Lunch and Plenary Session

: dinner the Banquet Speaker – Imagine Your Future: Invent Your Career by Mario Pipkin, Microsoft

: Prof. Reynold talked about RIT programs

: Posters from Students

: Sponsores’ Tables

: Workshop

: picture with Dr. Richard and Mrs. Tapia

: Dr. Hector Garcia-Molina and Students

Posted in Uncategorized, conference | No Comments »

REST Service Implementation using HTTP – Cross Domain Request

March 29th, 2009

By Phavanhna Douangboupha, 03/29/09

The three main basic ideas of a REST process are to process a client request, to response to the request, and return a result/data in XML format according to the request.

Two techniques that can be used are getting parameters from client through a URL query string and the use of HTTP methods. The first technique is easier to implement compared to the second technique. The main disadvantages of the first technique include the size of the URL string, the maximum length of the URL string consisting of query parameters, and a possible negative side effect. The first limitation, the size of URL string, can be overcome by using POST method instead of GET method for a client request. However, POST and GET methods should be applied according to a specific task (see the blog on Creating REST Web Service for more detail). Consequently, the HTTP methods are a better solution for REST service.

I have already talked about how to implement a REST client using a URL query string from my previous post, now I will talk about how I implement a REST service for the cross server client request using HTTP methods.

For this exercise, a database server, a web host server and a web client server are assigned in different machines and hosted by different domains. The database server is hosted at STREAMER. The web host server is hosted by CHW domain and finally the demonstrated web client request comes from GIBSON domain (Figure 1 shows system architect for the REST cross domain service). STREAMER is a house to MySQL database which is hosted in a different domain from the web server.

: System architect for REST cross domain service

Figure 1: System architect for REST cross domain service

GIBSON is used as a demonstration client to request data from another domain (CHW). The four main files implemented here are a normal HTML file (index.html), a JavaScript file (client_local.js), and two php using cURL libraries files (getclient_chw.php and postclient_chw.php). The Javascript file is used to implement Ajax to send a request and to receive responded data sent back by a server asynchronously. The data is displayed on the HTML file. The JavaScript file uses HTTP request object to send a request to either getclient_chw.php (”How Many Users?” in the database) or postclient_chw.php (”Add New User” to the database). getclient_chw.php and postclient_chw.php use cURL libraries to set up a HTTP request where getclient_chw.php uses the GET method to request to get data from a server and postclient_chw.php uses the POST method to request to post data to a server (please see table 1 for the correspondent HTTP methods to the database query). Both of the files make a request to process data with the web server on CHW. The client side has no relation to the database server on STREAMER and it only sends a HTTP request which will later be checked by the web server.

Use Gibson to act as a client to make REST request (Figure 2) - http://people.rit.edu/~pxd8840/restclient/index.html . As you click one of the two buttons – “How Many Users?” (HTTP GET) and “Add New User” (HTTP POST), you will see that the displayed results are updated asynchronously. These are done via Ajax using REST service to perform a cross-domain request instead of the <script> tag hack solution as mentioned from my previous post.

index.html, client requests on GIBSON

Figure 2: index.html, client requests on GIBSON

On the web host server (CHW), there are two main files – rest_database.php and ConnectDB.php. ConnectDB.php is an Object Oriented PHP class that contains methods to connect to the database and the required methods to process or retrieve data from STREAMER database server. The rest_database.php file also contains all the logic check method that received from a client. The rest_database.php file is used to check what kind of request being made if it is a HTTP GET request or a HTTP POST request. According to the request, it retrieves data from the database. Then it creates XML responses to the client.

Table 1: HTTP method, REST action, and SQL command for a client request

HTTP Request Method	REST Action	SQL database command	Description
GET	GET	SELECT	Search/Request for data (getdata)
POST	POST	INSERT	Add/Insert new data (postdata)

List of files

Client Side

index.html
client_local.js
postclient_chw.php
getclient_chw.php

Server Side

rest_database_php
ConnectDB.php class code on the server side contains database connection and database process methods

References:

Links to other blogs in this project

Tags: Add new tag, client, location tracking, REST, web service, web-based resource tracking, webserver
Posted in Best Practices, Design, Mobile Devices, Physical Design, Web Apps, development | No Comments »

REST Client simple Implementation and Test

March 8th, 2009

by Phavanhna Douangboupha

There are many ways to implement a REST web service client request which includes PHP, JavaScript XMLHttpRequest, C# system web HTTP web request, Java HttpClient, the command line:curl, Python, and Ruby. I am going to talk about PHP and JavaScript XMLHttpRequest techniques in this blog.

The purpose of using REST web service in this example is to enable cross domain database access and to take advantage of REST as mentioned in my previous blog about REST. Wikipedia has a good explaination about the technology.

There are three main portions in my small test system. First, it is a database server (data tier). The data tier is the MySQL database created on a server. Second, it is a logic tier that contains logical decision and evaluation functions between a client and the database server. At this logic tier, there are two separate files – a client side file and a server side file. The client side consists of an implementation method for a request made to the server. On the other hand, the server side contains implementation of logical decisions and evaluations. It handles all logic checks, retrieving data from the database and sending back response to a client (Figure 1 shows the flowchart for the server side logic tier). In this case, “getdata” type represents the retrieval request and the “putdata” represents the insert data operation request from a client.

The client side requests are created for both on the same domain with the server and a client request from a cross domain.

Finally, it is a very simple presentation layer to display results of the request.

: Logic flow for the server side logic tier (rest_database.php)

Figure 1: Flowchart for the server side logic tier

A request response in this test is in the form of XML format. Two main responses are the error notification response and the data or status response. While, the error XML response is used to indicate that there is something wrong with the request or the request is not allowed. The data or status response either contains requested data to send back or status message of the request operation performed by the server.

JavaScript:XMLHttpRequest

In this test XMLHttpRequest is used to make a request for data from the database and to insert new data to the database from a client. The client is located on the same domain with the server. First a method is set up to initiate either retrieval data request or insert data request. The rest is simply a standard XMLHttpRequest with the requested parameter passing.

Figure 2: same domain JavaScript XMLHttpRequest technique

JavaScript XMLHttpRequest is widely used and it has many advantages. One includes the idea of Ajax. However, this method only works if the client and the server are both located on the same domain. How about if a client request is made from a cross domain, then this technique will not work. A well known solution to this problem is to use a cross-domain request called <script> tag hack. In brief, the way this technique works is that the data is encoded as JavaScript objects in the file instead of being located inside a function. The file is seen as a JavaScript file from a domain instead of a data request. This way, the objects will be parsed and immediately executed. I am not going to implement the method in this test; since, there is another easier and cleaner way to do it; that is the use of PHP cURL extension.

PHP cURL extension

One of the PHP methods to make a REST request is using cURL extension. I use this technique to make a data request for cross domain web service for my database; Prof. Jeffrey Sonstein has a more complete picture of RESTful API example and I use his example as a reference for my solution.

It is pretty simple to implement cURL for a cross domain request. To implement this technique, it requires cURL extension library which can be downloaded from http://curl.haxx.se/. In addition, PHP server side is required to have cURL enable configuration. Following are the steps for implementing the PHP cURL cross domain client request. First of all, http_build_query() is used to create a query string from an array which is part of the request URI. To implement a client request using cURL, we first start by creating and initializing a cURL request by curl_init() method. Then, curl_setopt() is used to set the request. The curl_exec() method is called to make the request to a server and it returns the response from the server. Finally, curl_close() is used to close the connection of the transaction after it completes the transaction.

For this test system, to request data or to insert a new data to a database on a server located in another domain, difference query command is used – “getdata” or “putdata”. The command is checked by the server side logic tier to differentiate if the request is to retrieve data or to insert data. The logic tier handles all the operations and sends back a message after it completes executing the request.

Figure 3: A cross domain request PHP technique

Links to other blogs in this project

Tags: REST, web service, web-based resource tracking, webserver
Posted in Design, development | No Comments »

Center for the Handheld Web

Creating Twitter Widgets using JASON and PHP

When Collaboration, Insight, Initiatives, and Innovations meet – The Richard Tapia conference Celebration of Diversity in Computing 2009

REST Service Implementation using HTTP – Cross Domain Request

REST Client simple Implementation and Test

Pages

Archives

Categories

Blogroll

mobile

Meta