1 / 35

WID on the Web

WID on the Web. New Directions in Web Development for the The Workforce Information Database. John Pearce Oregon Employment Department Web Development Team Leader Oregon Labor Market Information System (OLMIS) John.F.Pearce@state.or.us. Course materials. http://www.olmis.org/widapps.zip

marvin-holcomb
Download Presentation

WID on the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WID on the Web New Directions in Web Development for the The Workforce Information Database

  2. John Pearce Oregon Employment Department Web Development Team Leader Oregon Labor Market Information System (OLMIS) John.F.Pearce@state.or.us

  3. Course materials http://www.olmis.org/widapps.zip http://rubyforge.org/frs/?group_id=904

  4. Changes and Challenges • WID is changing • More data elements, greater complexity • Broader usage, economic development and analysis, WIRED. etc. • The Web is changing • Web 2.0 • Open Source • Service Orient Architecture (SOA) • Cloud, Grid and Utility computing

  5. Web 1.0 • Collection of linked documents • Touch and go interaction model • Stove piped data silos

  6. Web 2.0 • RIA (Rich Interface Applications) • Mash-ups • blogging tools • Semantically valid HTML and XHTML • Wiki or forum software • Social networking • User created content

  7. Anatomy of a Web 2.0 Application • Database - Resource Layer • MySql, Postgresql, SQLite • Microsoft SQL Server • Oracle • Middle - Service Layer • Java (Spring, Tapestry, etc. . .) • PHP (Zend) • .NET • Python (Django, Google Appengine) • Ruby (Rails) • Client - Browser Layer • HTML • CSS • JavaScript or other automation technologies

  8. Database (Resource Layer) • Data Repository • Analytical tools • Geospatial Information • Open Source Relational databases • MySQL • PostgreSql • MaxDB • Firebird • Ingres

  9. MySql • Open Source • Light-weight, easy to install • Very fast query speed • Lack of foreign keys in default MyISAM storage engine (fully supported in InoDB) • Version 5 has triggers and stored procedures

  10. MySQL Creating a database mysql - -user=root Create database wid; use wid;

  11. MySQL creating a table CREATE TABLE geog (stfips char(2), areatype char(2), area char(6), areaname varchar(60), areadesc varchar(4000));

  12. MySql – importing data "00","00","000000","US","US" "41","01","000000","Oregon","Oregon" "41","04","000001","Baker","" "41","04","000003","Benton","" "41","04","000005","Clackamas","“ . . . LOAD DATA INFILE ‘geog.txt' INTO TABLE geog FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';

  13. MySql – querying the data SELECT * FROM wid.geog WHERE stfips in('00', '41') AND areatype in ('00', '01', '04', '21‘) ORDER BY stfips, areatype, area

  14. Using the MySQL Admin Tool • url: http://localhost/mysql/ • Create databases • Execute SQL statements • Add and delete users • Grant privileges • Export data

  15. MySQL and other Database References • Head First SQL, Lynn Beighly, O’Reilly, 2007 • MySQL in a Nutshell, Russell Dyer, O’Reilly, 2008 • MySQL Cookbook, Paul DuBois, O’Reilly, 2006 • Database Hackers Handbook, David Litchfield, et. al., Wiley, 2005

  16. Server Side - Services • PHP • Java • .NET • Python • Ruby on Rails

  17. PHP • Open Source • Markup and scripting language • Object – oriented programming features

  18. PHP <html> <head> <title>PHP Say Hello</title> </head> <body> <?php echo "Hello"?>. </body> </html>

  19. PHP for XML <?php header('Content-type: text/xml'); ?> <?xml version='1.0' standalone='yes'?> <geoglist> <geog stfips="00" areatype="00" area="000000" areaname="US" areadesc="US"/> <geog stfips="41" areatype="01" area="000000" areaname="Oregon" areadesc="Oregon"/> <geog stfips="41" areatype="04" area="000001" areaname="Baker" areadesc=""/> . . . </geoglist>

  20. PHP and MySql <?php $mysql_server = "localhost"; $mysql_user = "root"; $mysql_password = ""; $link = mysql_connect($mysql_server, $mysql_user, $mysql_password); if (!$link) { die('Could not connect: ' . mysql_error()); } // Create parameterized query for labforce table $query = "SELECT * FROM wid.geog WHERE stfips in('00', '41') and areatype in ('00', '01', '04', '21') order by stfips, areatype, area"; // Perform Query $result = mysql_query($query, $link); ?>

  21. PHP and MySql (continued) // Put results in XML document header('Content-type: text/xml'); echo "<?xml version='1.0' standalone='yes'?>"; echo "<geoglist>"; while ($row = mysql_fetch_assoc($result)) { ?> <geog stfips="<?php echo htmlspecialchars($row['stfips']); ?>" areatype="<?php echo htmlspecialchars($row['areatype']); ?>" area="<?php echo htmlspecialchars($row['area']); ?>" areaname="<?php echo htmlspecialchars($row['areaname']); ?>" areadesc="<?php echo htmlspecialchars($row['areadesc']); ?>" /> <?php } // Free the resources associated with the result set mysql_free_result($result); mysql_close($link); ?> </geoglist>

  22. XML or JSON Services? • JSON – JavaScript Object Notation • Alternative format to XML • Easier to represent complex data structures • Not as universal, but growing in popularity • XML • Universal • More secure for certain types of uses • In some cases, faster than JSON

  23. Database and Service Layer • Provide data in a format that can be used by the client layer. • Technology and infrastructure specific • Provide services that are technology and infrastructure independent • Simplifies work on the server. • Real work of web application development can be done in the client layer.

  24. Client Layer • HTML • Cascading Style Sheets (CSS) • Help to simply HTML • Separate presentation from Content • Java Script and other Animation Technologies • Animate User Interface • Provide Data from Server Services

  25. HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Laborforce Data</title> <link href="layout.css" rel="stylesheet" type="text/css"></link> <link rel="stylesheet" href="lausprint.css" type="text/css" media="print"/> </head> <body> <h2>Labor Force Data</h2> <table> <tbody> <tr> <td valign="top" align="left"> <div id="placeholder" style="width:600px;height:300px;"></div> <div id="result"></div> </td> . . .

  26. Cascading Style Sheets (CSS) body { font-family: sans-serif; font-size: 11px; margin: 10px; } h2 { color: darkblue;} . . .

  27. Printing Example (CSS) #plcontrols { display: none; }

  28. HTML and CSS References • Head First HTML and CSS, Eric and Lisa Freedman, O’Reilly, 2007 • CSS the Definitive Guide, Eric Meyer, O’Reilly, 2006 • Cascading Style Sheets Separating Content from Presentaion, Owen Briggs, et. al, Apress

  29. Programming the Web Client • Plain Java Script • JavaScript Frameworks • JQuery • Prototype • Dojo • Non-Java Script Frameworks • Adobe Flex • Appcelerator (based on Java Script) • JavaFX • Microsoft Silverlight

  30. Different Automation Functions • Actions • Events • Visual Effects • Widgets – predeveloped applications that useful tasks, boxes, buttons, calendars, etc. • AJAX – Asychronous JavaScript and XML

  31. Hello Example - Appcelerator <input type="button" value="click me see message" on="click then l:mtest[payload=Hello!!]"/> <span on="l:mtest then value[payload]"></span>

  32. Hello Example - JQuery <input id="doclick" type="button" value="click me to see message“ /> <span id="message"></span> . . . <script id="source" language="javascript" type="text/javascript"> $(function () { $("#doclick").click(function () { $("#message").html("Hello!!"); }); }); </script>

  33. JavaScript and other References • JavaScript the Definitive Guide (6th Edition), David Flanagan, O’Reilly • Douglas Crockford, The Good Parts, O’Reilly • Douglas Crockford, YouTube, Java Script Course • JQuery – jquery.com • Appcelerator – www.appcelerator.org

  34. Mashups • Content from different sources • Examples • Google FLOT • Google Maps

  35. Examples • LAUS Application • Employer Database Listing Application • Employer Database Map Application

More Related