Embed Size (px)
DESCRIPTION
Hints for HW#8. HW#6 Architecture. Apache web server. client. Use To invoke server-side script. finance.yahoo.com. Send query with arguments. Browser with web page. 1. PHP Script. 2. 5. 3. Retrieve resulting web page (html). 4. Parse the web page - PowerPoint PPT Presentation
Citation preview
Hints for HW#8
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
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
HW8 Sample Result
Facebook Output
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
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(); });
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>
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.'); } } ); }•
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;
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)
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."&lang=en-US&amp;width=300&height=180</StockChartImageURL>";
•
