AL MA TE RI H e l l o We b 2 . 0 Wo r l d D When you visit a new country, a good way of getting started is to begin with a tour that gives you a first idea of what the country looks like and the key sites that you’ll want to visit in more detail. This chapter is the tour that will give you the first idea of what a Web 2.0 application looks like from the inside and help you to get the big picture. PY RI GH TE The Web 2.
Chapter 1 pages together with a title and a description so that other people can use them. This shareable aspect is what makes BuzzWatch a read/write application that fully deserves to be called a Web 2.0 application. What does the name BuzzWatch mean? BuzzWatch is about watching companies, thus the Watch in its name. With its Yahoo! financial news and del.icio.us panels, the application is good at watching how the buzz emitted by the companies is perceived, and that’s the reason for the Buzz in its name.
Hello Web 2.0 World Figure 1-1 When you open BuzzWatch, the page is empty and the Go submenu is open so that you can choose an existing page, as shown in Figure 1-2. Of course, you can also open the File menu and create a new one to get started.
Chapter 1 Figure 1-2 Char ting the Landscape With such a user requirement, you have numerous ways to reach your goal. The first big decision to make is the technical architecture. Client side, the obvious choice for this book is Ajax. The term Ajax used to be an acronym for Asynchronous JavaScript and XML, but it is now used to designate a whole set of techniques to develop rich web applications using today’s browsers, and Ajax no longer always uses XML nor asynchronous exchanges.
Hello Web 2.0 World of these tests, but it takes the burden off the shoulders of application developers. You will still need to test your scripts very frequently against different browsers to use JavaScript features that work on all of them, but cases where you need to test and write different instructions depending on the browser become exceptional. The BuzzWatch application has only one such test.
Chapter 1 To give you an idea of the complexity of BuzzWatch and of the split between technologies, the first version that you will see in the next section is composed of approximately 700 lines of JavaScript, 200 lines of XHTML, 150 lines of PHP, and 130 lines of CSS. This proportion is dependent of implementation choices and could vary a lot if different choices were taken.
Hello Web 2.0 World 12:36:00 200 GET /buzzwatch/img/aqua-hd-rt.gif (image/gif) 12:36:00 200 GET /buzzwatch/img/aqua-hd-close.gif (image/gif) 12:37:00 200 GET /buzzwatch/watch.php (application/xml) This log uses a custom log format defined as “%{%T}t %>s %m %U%q (%{Content-Type}o)” on an Apache 2.x web server.
Chapter 1
BuzzWatch 2.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-9.html>PAGE 9</a></h6><p>Hello Web 2.0 World and the images and multimedia documents referenced in the body section. This behavior explains the burst of exchanges logged by the server from the second line to the line preceding the last line. These exchanges follow the same pattern that was used to download the initial XHTML document. The scripts are executed as soon as they are loaded by the browser. However, most of the actions that are performed by these scripts require that the page and all its scripts and CSS have been loaded.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-10.html>PAGE 10</a></h6><p>Chapter 1 Figure 1-3 These categories are tightly coupled and a user interaction often triggers an exchange with a server that leads to a modification in the document. To illustrate the point, you are invited to follow some of the actions that are performed after the document is loaded. One of the functions called in init is initMenuBar(). Most of the instructions in this function are copied from examples coming with the YUI.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-11.html>PAGE 11</a></h6><p>Hello Web 2.0 World document that will be used to create the menu bar. In other words, the structure of the menu bar will be derived from the structure of this element, and the content of this element will be replaced when the menu bar is rendered by a totally new content that YUI will build so that it displays like a menu bar. The HTML element that describes the menu bar in index.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-12.html>PAGE 12</a></h6><p>Chapter 1 </div> </li> </ul> </div> </div> If you are familiar with HTML, you will have recognized an HTML division (div) that embeds a multilevel unordered list (ul). This multilevel list defines the structure of the menu bar and follows a set of conventions that are described in the YUI library. You may also notice many id attributes, such as id=”menubar.go”. These are identifiers that will be used by our scripts to attach actions to the menu items. Speaking of the Go menu, identified by menubar.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-13.html>PAGE 13</a></h6><p>Hello Web 2.0 World this.callbackList = { success: this.handleListSuccess, failure: this.handleListFailure, scope: this }; Basically, this means that if the response is OK, handleListSuccess will be called and if not, handleListFailure will be called. In both cases, the context with which these methods are called is the context of this object (this being the controller). When YAHOO.util.Connect.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-14.html>PAGE 14</a></h6><p>Chapter 1 minute (60 seconds). The second header says that the media type is application/xml. The third instruction outputs the XML declaration. The tests that follow are to check in which case we are. The first one checks if data has been posted, in which case you would be handling a request to save a document. The second one checks if you have received a parameter with a GET request.</p></li><li><h6><a class="text-decoration-none text-link fw-bold" href=/manual/wiley/978-0-470-08788-6/datasheet-english/page-15.html>PAGE 15</a></h6><p>Hello Web 2.0 World Content-Length: 831 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/xml X-Pad: avoid browser bug <?xml version=”1.0” encoding=”utf-8”?> <watches><watch><symbol>cce</symbol><tag>coke</tag><title>Coca ColaFind their secret...Chapter 1 The first instruction is to test whether there is a response. Obviously, BuzzWatch deserves better error handling when this isn’t the case. The next instruction is to set a timer with the value gathered in the Cache-Control: max-age HTTP header that has been set by the PHP script. This is done by a simple BuzzWatch function, getMaxAge()in script.js, that parses this header using JavaScript regular expressions: function getMaxAge(oResponse) { var cacheControl = oResponse.
Hello Web 2.0 World 12:18:32 200 GET /buzzwatch/watch.php?name=jw-a (application/xml) 12:18:32 200 GET /buzzwatch/yahoo_quotes.php?tag=jw-a (application/xml) 12:18:32 200 GET /buzzwatch/yahoo_chart.php?tag=jw-a& date=Sat%20Jul%2022%202006%2012:18:32%20GMT+0200%20(CEST) (image/png) 12:18:33 200 GET /buzzwatch/yahoo_finance_news.php?tag=jw-a (application/xml) 12:18:34 200 GET /buzzwatch/yui/menu/assets/menuchk8_dim_1.gif (image/gif) 12:18:33 200 GET /buzzwatch/delicious.
Chapter 1 This is because the URL is now /buzzwatch/watch.php?name=jw-a. What has been added after the question mark is called a query string. It contains parameters that are available in PHP scripts in the $_GET global variable. The function readOne is similar to what you’ve already seen with a single highly critical point to note: function readOne() { $db=openDb(); $query = $db->query( “SELECT * from watches where symbol=’”. sqlite_escape_string(trim($_GET[‘name’])).
Hello Web 2.0 World The HTTP answer to this request is: HTTP/1.1 200 OK Date: Sat, 22 Jul 2006 10:18:32 GMT Server: Apache/2.0.55 (Ubuntu) PHP/5.1.2 X-Powered-By: PHP/5.1.2 Cache-Control: max-age=60 Content-Length: 152 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/xml X-Pad: avoid browser bug jw-awileyWiley Our publisher. Back to JavaScript.
Chapter 1 This restriction is known as the same origin policy. In a nutshell, it means that a script served from a domain can only access resources from the same domain. In Chapter 15, you will see that this is a general issue for mashups and that data providers such as Google Maps and Yahoo! Maps have worked around the limitation by serving the scripts that decorate the maps from their own domain. If the script that downloads the del.icio.us RSS feed was served by del.icio.
Hello Web 2.0 World description: YAHOO.buzzWatch.editInPlace.get(‘textDescription’) } }; var o = YAHOO.util.Connect.getConnectionObject(); o.conn.open(“POST”, “watch.php”, true); YAHOO.util.Connect.initHeader(‘Content-Type’,’application/xml’); YAHOO.util.Connect.setHeader(o); YAHOO.util.Connect.handleReadyState(o, this.saveCallback); o.conn.send(xotree.writeXML(tree)); } This method uses the JKL.
Chapter 1 The $HTTP_RAW_POST_DATA variable has been initialized to contain the data that is received by HTTP POST methods. In that case, it contains the XML document that was sent by the browser, and its size is obviously greater than zero, which causes the write() function to be called: w atch.php – v1.0 function write() { global $HTTP_RAW_POST_DATA; $db=openDb(); $dom = new DOMDocument(); $dom->loadXML($HTTP_RAW_POST_DATA); if (!$dom->relaxNGValidate ( ‘watch.
Hello Web 2.0 World There are a number of XML schema languages. The dominant one is W3C XML Schema language, a language that is undeniably very complex. The support of W3C XML Schema by the libxml2 library on which PHP5 relies for its XML parsing is so limited that BuzzWatch prefers to use RELAX NG, a XML schema language outsider that is both simpler and more powerful than W3C XML Schema. RELAX NG is an ISO standard and you can find more information on RELAX NG at http://relaxng.org.
Chapter 1 Writing schemas in XML is verbose and RELAX NG has an equivalent compact syntax that is plain text. James Clark (one of the authors of RELAX NG) has published trang, a tool to convert from one syntax into the other that can also generate RELAX NG schemas from an example of a document and translate a RELAX NG schema into W3C XML Schema. The same schema written with the compact syntax is: w a t c h . rnc – v1.
Hello Web 2.0 World the system. The version of BuzzWatch presented in the last section does all that, and, even though it has been kept as simple as possible for this first chapter, it works pretty efficiently and is rather fine looking. There is, however, one big criticism that can be leveled at this version, a charge that applies to quite a few Web 2.0 applications that you see in the real world.
Chapter 1 Why is it important that your web application displays well in a text web browser since almost nobody uses one any longer? It’s important, because voice systems used by blind people see your web page and transcribe it orally in a way that is very similar to what a text browser displays. If you’re not convinced by this argument, you may find it more convincing to know that the search engine web crawlers see your document approximately the same way as text browsers.
Hello Web 2.0 World populateChart($watchRow); populateFinancialNews($watchRow); populateDelicious($watchRow); // Send the result header(“Cache-Control: max-age=60”); header(“Content-type: text/html”); print $document->saveXML(); The validation of the document is necessary for libxml2, the XML parser on which PHP5 relies, if you want to be able to get elements by their identifiers. Like their JavaScript equivalents, the functions that populate the panels receive their data as XML.
Chapter 1 setValue(‘yahoofinance.quotes.open’, tree.quote.open); setValue(‘yahoofinance.quotes.high’, tree.quote.high); setValue(‘yahoofinance.quotes.low’, tree.quote.low); setValue(‘yahoofinance.quotes.volume’, tree.quote.volume); } } } In addition to the differences of syntax between PHP and JavaScript, there are also differences in the libraries used to manipulate XML as objects.
Hello Web 2.0 World and each new feature will have to be implemented both in PHP and JavaScript. Web 2.0 applications also need to be reactive to bug reports and feature requests posted by their users, and each fix will also have to be implemented twice. To avoid that and minimize the maintenance costs, you have two options. The first of these options is to perform the operations that are duplicated between the server and the browser at only one location.
Chapter 1 cool hack for defining formats that are ready to be presented while keeping some of the information that would be available in an equivalent XML format, their rules are so flexible that they remain more difficult to process than XML formats. Another option is to expose the same information both as XML and as (X)HTML, and that would be possible without much redundancy by the same set of common PHP functions.
Hello Web 2.
Chapter 1 It is transformed with the XSLT transformation format.xsl and the result is sent to the browser: $xsltSource = new DOMDocument(); $xsltProc = new XSLTProcessor(); $xsltSource->load(‘format.xsl’); $xsltProc->importStyleSheet($xsltSource); header(“Cache-Control: max-age=60”); header(“Content-type: text/html”); print $xsltProc->transformToXML($document); To manipulate XSLT client side in a consistent way between different browsers, you need a JavaScript API such as Sarissa.
Hello Web 2.0 World The result of the transformation is imported into the window’s document and replaces the corresponding division. After this operation, the YUI panel needs to be reinitialized and rendered. The XSLT transformation itself (format.xsl) is too verbose to be printed here, and you’d need the introduction that you’ll find in Chapter 5 to understand it.
Chapter 1 ❑ Even if you keep the same technology server side, you may decide to change the distribution of the functions in the different scripts. For example, you may decide that you prefer to have a single script for all the data sources with an additional parameter to specify the source, or you may decide that you want three different scripts instead of one to get a watch, get a list of watches, and save a watch. Again, these implementation choices shouldn’t have an impact on your users.
Hello Web 2.0 World The line break between yahoo_finance_news.php?tag=$1 and [L] has been added to fit the text in the page and does not exist in the .htaccess file. Each RewriteRule is a rule that changes URLs through a regular expression. The first rule is to redirect the BuzzWatch home page to a page that has the same level in the hierarchy as the other pages (this is a hack to be able to use the same relative URIs as the other pages). The second one sets this home page.
