Web-Applications: TurboGears

Web-Applications:TurboGears BCHB5242013 Lecture 25 BCHB524 - 2013 - Edwards

Web-Applications • Use the web-browser as the user-interface • All application specific functionality comes directly from the web-server • No installation impediments for the user • Fast way to provide your tools to others with little operating system or user-interface barrier • Natural way to supply views into complex datasets that cannot feasibly be installed elsewhere. BCHB524 - 2013 - Edwards

Web-Servers • Respond to requests: • http://google.com • http://edwardslab.bmcb.georgetown.edu/ • with static: • files, images, etc... • and dynamic: • your facebook page, google search results • content. BCHB524 - 2013 - Edwards

protocol (http,https) resource computer name Web-servers • A URL is made up of many parts. port # (80 if omitted) http://hoyataxa.georgetown.edu:8080/index.html BCHB524 - 2013 - Edwards

port # (80 if omitted) resource/requestparameters protocol (http,https) resource computer name Web-servers • A URL is made up of many parts. • A dynamic resource may return different results depending on its parameters • Additional request parameters may not be visible in the URL • Cookies, POST requests http://hoyataxa.georgetown.edu:8080/taxa?taxid=9606&format=XML BCHB524 - 2013 - Edwards

Web-server • Web-servers return data in HTML format for display by the web-browser. • Any program can request URL resources and store (and display) the response. • Any program can handle the URL request and return data in whatever format they like. • TurboGears provides a pythonic web-framework for building dynamic data-driven web-application servers. BCHB524 - 2013 - Edwards

TurboGears • One of many web-stacks which simplify development of web-apps • Model-View-Controller (MVC) paradigm • Model stores the data/information required • View decides how to format/display the results • Controller takes requests and determines the data to output BCHB524 - 2013 - Edwards

TurboGears • http://www.turbogears.org • Your class virtual image has version 1.1.3 • Current TurboGears version is 1.5/2.2 • TurboGears admin script is: • tg-admin • TurboGears has been installed as an external package in the class virtual image. BCHB524 - 2013 - Edwards

Hoya Taxa • TurboGears web-application for navigating the NCBI taxonomy of organisms • Simple view and navigation of the data stored in a relational database • Read-only (no modification of the data) • No users (no login or accounts) • No fancy javascript (AJAX or otherwise) BCHB524 - 2013 - Edwards

Application creation • TurboGears provides an administration script to construct an initial web-application shell • In the terminal: tg-admin • and then: tg-admin quickstart -o • Answer the questions (what you type is in red): Enter project name: HoyaTaxa Enter package name [hoyataxa]: Do you ...? [no] BCHB524 - 2013 - Edwards

Start web-app and check • Check that the web-application shell is working... • In the terminal:[student@localhost ~]$ cd HoyaTaxa[student@localhost ~]$ python start-hoyataxa.py • Start a web-browser and access the url:http://localhost:8080/ • Lots of stuff is printed to the terminal BCHB524 - 2013 - Edwards

Start web-app and check BCHB524 - 2013 - Edwards

Tour the primary files • Lets take a tour of the HoyaTaxa folder: • Controller: • hoyataxa/controllers.py • (Data) Model: • hoyataxa/model.py • View / Template: • hoyataxa/templates/welcome.html • hoyataxa/templates/master.html BCHB524 - 2013 - Edwards

Trace the execution path • Spend some time understanding how these files interact. Things to notice: • Request is translated to function call in controller • Dynamic content (date and time) is passed from the controller function to the template • Lots of crazy stuff in the welcome.html and master.html templates, but we can remove a lot. • Lets edit controllers.py, welcome.html, and master.html to make an "empty" application. BCHB524 - 2013 - Edwards

Edit welcome.html • In welcome.html: • Delete everything between the <body></body> HTML tags. • Delete everything in the <?python ?> block • Reload the web-site • use the reload button in web-browser • Check the result... • Still have some stuff from master.html but otherwise empty. • master.html is intended to provide common design elements (titles, menus) on every page BCHB524 - 2013 - Edwards

Edit welcome.html • Now looks like this BCHB524 - 2013 - Edwards

Edit controllers.py • In the index method in controllers.py: • Delete the flash function call • Reload the web-site and check the effect... • Remove the time and date variable • Reload the web-site and check the effect... • Notice that the server program "restarts" every time you change controllers.py. BCHB524 - 2013 - Edwards

Edit controllers.py • Root class declaration should look like this: BCHB524 - 2013 - Edwards

Edit master.html • In master.html (reload after each change) • Remove <?python ?> block. • Remove everything in the <body> </body> block, exceptfor the id="content" block. • Find the footer and remove the footer image. • Find the sidebar and menus and remove them. • Add a new header "div" as first element inside id="content".<div align="center"> <font size="+6">Hoya Taxa</font> </div> • Change the footer as you like BCHB524 - 2013 - Edwards

Edit master.html • Relevant section should look like this: BCHB524 - 2013 - Edwards

Empty web-app • Empty web-application shell now looks like: BCHB524 - 2013 - Edwards

Dynamic title • In controllers.py, let's send a dynamic title to the welcome.html template. BCHB524 - 2013 - Edwards

Dynamic title • In welcome.html, change "Welcome to TurboGears" to ${title}. BCHB524 - 2013 - Edwards

Dynamic Title BCHB524 - 2013 - Edwards

Set up the model... • Edit the model.py file • add the necessary imports and SQLObject classes # Extra imports from sqlobjectfrom sqlobject import ForeignKey, MultipleJoinclassTaxonomy(SQLObject): taxid = IntCol(alternateID=True) scientific_name = StringCol() rank = StringCol() parent = ForeignKey("Taxonomy") names = MultipleJoin("Name") children = MultipleJoin("Taxonomy",joinColumn='parent_id')className(SQLObject): taxonomy = ForeignKey("Taxonomy") name = StringCol() name_class = StringCol() BCHB524 - 2013 - Edwards

Set up the model... • Create the model: • In the terminal: [student@localhost ~]$ tg-admin sql create • Check that the sqlite database has been created in devdata.sqlite. • Use sqlitestudio to check it • No data in it! • Download devdata.sqlite from course data-directory BCHB524 - 2013 - Edwards

Check the data in the model... • In the terminal:[student@localhost ~]$ tg-admin shell>>> print Taxonomy.byTaxid(9606)>>> t = Taxonomy.byTaxid(9606)>>>print t.names BCHB524 - 2013 - Edwards

Let's add some functionality • In controllers.py, let's add a new request • Add necessary imports from model • Add new method taxa with parameter taxid • Use taxid to lookup Taxonomy object • Create dynamic title string • Send the title and taxa object to taxa.html template • Access this page/resource as: • http://localhost:8080/taxa?taxid=9606 • http://localhost:8080/taxa/9606 • Try it! BCHB524 - 2013 - Edwards

Let's add some functionality • In controllers.py, let's add a new request BCHB524 - 2013 - Edwards

Let's add some functionality • Need to create taxa.html too • Save welcome.html as taxa.html • Change taxa.html BCHB524 - 2013 - Edwards

Let's add some functionality • Not pretty, but now we have dynamic title and dynamic content... BCHB524 - 2013 - Edwards

Lets make it pretty • Place the following HTML between the body tags in taxa.html: <P/> <table> <tr><th>Scientific Name</th><td>${taxa.scientific_name}</td></tr> <tr><th>NCBI Taxonomy ID</th><td>${taxa.taxid}</td></tr> <tr><th>Rank</th><td>${taxa.rank}</td></tr> <tr><th>Parent</th><td>${taxa.parent}</td></tr> </table> BCHB524 - 2013 - Edwards

Let's make it pretty BCHB524 - 2013 - Edwards

Fix the parent value BCHB524 - 2013 - Edwards

And make it clickable BCHB524 - 2013 - Edwards

List all the children BCHB524 - 2013 - Edwards

List all children BCHB524 - 2013 - Edwards

List all names BCHB524 - 2013 - Edwards

Remove the scientific name BCHB524 - 2013 - Edwards

Remove scientific name BCHB524 - 2013 - Edwards

Let's add the lineage BCHB524 - 2013 - Edwards

Let’s add the lineage BCHB524 - 2013 - Edwards

Next time • We can now display a taxonomy record nicely if the user types a URL • ...and then navigate about its heirachy. • Need to be able to search the names based on a user query. • Search form, list of matching results, etc... • XML output for web-services. BCHB524 - 2013 - Edwards

Web-Applications: TurboGears