hints for hw#8. hw#6 architecture result of query goog browser with web page php script client...

12
Hints for HW#8

Upload: kathleen-greene

Post on 23-Dec-2015

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Hints for HW#8

Page 2: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

HW#6 Architecture

Result of Query GOOG

Browserwith web

page

PHP Script

clientApache web server

finance.yahoo.comSend query witharguments

Retrieve resulting web page (html)

Parse the web pageusing regular expressionsand for each music typebuild an html page

1 2

3

4

5

Use <form>To invokeserver-sidescript

Page 3: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

HW#8 Architecture Overview

Browserwith web

page

Java Servlet invokes PHP script;

Java Servlet transforms XML into JSON

clientTomcat web Server running on SCF

Finance.yahoo.com

Resulting screen

Posting to Facebook (done programmatically)

Uses Xmlhttprequestto invoke JavaServlet

PHP script sends query witharguments

XmlhttprequestObject retrieves JSON

Userclicks on Facebook

As part of the exercise useyahoo’s autocompletewidget to predict the stock symbol

PHP script send query with arguments

Retrieve web page and convert to XML

AWS

Page 4: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

HW8 Sample Result

Page 5: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Facebook Output

Page 6: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Outline for the Initial Page (1 of 3)• A set of includes

• <link rel="stylesheet" href="http://yui.yahooapis.com/3.13.0/build/cssbutton/cssbutton.css">

• <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/tabview/assets/skins/night/tabview.css">

• <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

• <script type="text/javascript" src="yui-min.js"></script>

• define the autocomplete YUI element which uses this URL to get the autocomplete options http://d.yimg.com/autoc.finance.yahoo.com/autoc

• Define the Facebook interface, e.g.• function postToFeed(result) {

• Define method:, name:, caption:, description:, link:, picture:• function (response) //the post was published, or not

• Call your servlet using Ajax and a URL of the form• http://cs-server.usc.edu:YOURPORT/examples/servlet/SearchServlet

Page 7: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Outline for the Initial Page (2 of 3)

• Process the result• Handle +/-• Handle stock chart, e.g.

• <img src=\""+result.result.StockChartImageURL+"\" width=\"260\" height=\"140\" />• Handle Facebook icon

• <img src='facebook_logo.jpg' style='cursor: pointer; padding-top:10px;' onclick='postToFeed. . . >

• Build a table containing: Previous close, today’s high, Year high, bid, ask, etc• Build a table with the latest News items• Render both using the YUI tabview• YUI().use('tabview', function(Y) { var tabview = new Y.TabView({srcNode:'#tabs'});• tabview.render(); });

Page 8: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Outline for the Initial Page (3 of 3)

• Here is where the <body> begins• Initialize Facebook• FB.init({ appId : xxxxxxxxxxxxxxxx', // App ID from the App Dashboard

• channelUrl : 'http://cs-server.usc.edu:yourport/examples/servlets/producer/channel.html',

• status : true, // check the login status upon init?

• cookie : true, // set sessions cookies to allow your server to access the session?

• xfbml : true // parse XFBML tags on this page? });

• // Load the SDK's source Asynchronously

• <form class="yui3-form">

• Company: <input type="text" id="company" name="company“ placeholder="Enter company symbol" size="90" />

• <button class="yui3-button" onClick="return verify(this.form.company.value);">Search</button>

• </form>

Page 9: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Posting to Facebook• function postToFeed(result) {• result = JSON.parse(unescape(result));

FB.ui( {• method: 'feed',

name: (result.result.Name ? result.result.Name : "NA") ,• caption: "Stock Information of "+(result.result.Name ? result.result.Name : "NA")• + " "+(result.result.Symbol ? "("+result.result.Symbol+")" : "") ,• description: "Last Trade Price: "+ (result.result.Quote.LastTradePriceOnly ?

result.result.Quote.LastTradePriceOnly : "NA") • +", Change: "+ (result.result.Quote.ChangeType ? result.result.Quote.ChangeType : "")• +""+ (result.result.Quote.Change ? result.result.Quote.Change : "NA")• +"("+ (result.result.Quote.ChangeInPercent ? result.result.Quote.ChangeInPercent : "NA") +")",• link: (result.result.Symbol ? "http://finance.yahoo.com/q?s="+result.result.Symbol :

"http://finance.yahoo.com"),• picture: (result.result.StockChartImageURL ? result.result.StockChartImageURL : "") },

• function(response) {• if (response && response.post_id) { alert('Post was published.');• } else { alert('Post was not published.'); } } ); }•

Page 10: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Java Servlet running on Tomcat (1 of 2)• import java.io.BufferedReader;• import java.io.IOException;• import java.io.InputStreamReader;• import java.io.PrintWriter;• import java.net.URL;• import java.net.URLEncoder;

• import javax.servlet.ServletException;• import javax.servlet.http.HttpServlet;• import javax.servlet.http.HttpServletRequest;• import javax.servlet.http.HttpServletResponse;

• import org.json.JSONObject;• import org.json.XML;

Page 11: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Outline for Your Java Servlet Running on Tomcat (2 of 2)

• Public class SearchServlet extends HttpServlet {• Protected void doGet (request, response) throws . . . {

• Response.setContentType(“application/json; charset=utf-8”);• Retrieve company name; check if it is null;• Try { URL url = new URL(“http://. . . elasticbeanstalk.com/?companyname=“, encode

company name);• bufferedReader = new buggeredReader(new INputStreamReader(url.openStream(),. . . );• While ((line = bufferedReader.readLine()) !- null) {

• xmlContent += line; }• JSONObject jsonObject = XML.toJSONObject(xmlContent);• Out.print(jsonObject);

• Notes: modify the web.xml file• Include servlet.jar and json.jar (converts XML to json)

Page 12: Hints for HW#8. HW#6 Architecture Result of Query GOOG Browser with web page PHP Script client Apache web server finance.yahoo.com Send query with arguments

Outline for Your Php Program• <?php

• Header(“Content-type: text/xml”); retrieve stock info and output as XML

• $symbol_url = "http://autoc.finance.yahoo.com/autoc?query=".$name."&callback=YAHOO.Finance.SymbolSuggest.ssCallback";

• $url = "http://query.yahooapis.com/v1/public/yql?q=Select%20Name%2C%20Symbol%2C%20LastTradePriceOnly%2C%20Change. . .";

• $output .= "<Name>".htmlspecialchars($name, ENT_QUOTES)."</Name>";

• $output .= "<Symbol>".htmlspecialchars($symbol, ENT_QUOTES)."</Symbol>";

• $output .= "<Quote>";

• $changeType = substr($change,0, 1);

• $output .= "<ChangeType>".$changeType."</ChangeType>";

• $output .= "<Change>".substr($change, 1)."</Change>";

• $output .= "<ChangeInPercent>".substr($changeinPercent, 1)."</ChangeInPercent>";

• $output .= "<LastTradePriceOnly>".number_format((double) $lastTradePriceOnly, 2)."</LastTradePriceOnly>";

• Also <PreviousClose>, <DaysLow>, <DaysHigh>, <Open>, <YearLow>, <YearHigh>, <Bid>, <Volume>, <Ask>, <AverageDailyVolume>, <OneYearTargetPrice>, <MarketCapitalization>,

• </Quote>";

• displayHeadlines($symbol); /* a separate routine that goes to http://feeds.finance.yahoo.com/rss/2.0/headline?s=SYMBOL, ETC*/

• $output .= "<StockChartImageURL>http://chart.finance.yahoo.com/t?s=".$symbol."&amp;lang=en-US&amp;amp;width=300&amp;height=180</StockChartImageURL>";