Embed Size (px)
Citation preview
Web-Applications:TurboGears
BCHB5242015
Lecture 25
12/02/2015 BCHB524 - 2015 - Edwards
12/02/2015 BCHB524 - 2015 - Edwards 2
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.
12/02/2015 BCHB524 - 2015 - Edwards 3
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.
12/02/2015 BCHB524 - 2015 - Edwards 4
Web-servers
A URL is made up of many parts.
http://hoyataxa.georgetown.edu:8080/index.html
protocol(http,https)
computer name resource
port #(80 if omitted)
12/02/2015 BCHB524 - 2015 - Edwards 5
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
protocol(http,https)
computer name resource
port #(80 if omitted)
resource/requestparameters
12/02/2015 BCHB524 - 2015 - Edwards 6
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.
12/02/2015 BCHB524 - 2015 - Edwards 7
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
12/02/2015 BCHB524 - 2015 - Edwards 8
TurboGears
http://www.turbogears.org Your class virtual image has version 1.1.3
Current TurboGears version is 1.5/2.3 TurboGears admin script is:
tg-admin TurboGears has been installed as an external
package in the class virtual image.
12/02/2015 BCHB524 - 2015 - Edwards 9
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)
12/02/2015 BCHB524 - 2015 - Edwards 10
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]
12/02/2015 BCHB524 - 2015 - Edwards 11
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
12/02/2015 BCHB524 - 2015 - Edwards 12
Start web-app and check
12/02/2015 BCHB524 - 2015 - Edwards 13
Start web-app and check
12/02/2015 BCHB524 - 2015 - Edwards 14
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
12/02/2015 BCHB524 - 2015 - Edwards 15
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. Edit controllers.py, welcome.html, and
master.html to make an "empty" application.
12/02/2015 BCHB524 - 2015 - Edwards 16
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
12/02/2015 BCHB524 - 2015 - Edwards 17
Edit welcome.html
Now looks like this
12/02/2015 BCHB524 - 2015 - Edwards 18
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.
12/02/2015 BCHB524 - 2015 - Edwards 19
Edit controllers.py
Root class declaration should look like this:
12/02/2015 BCHB524 - 2015 - Edwards 20
Edit master.html
In master.html (reload after each change) Remove <?python ?> block. Remove everything in the <body> </body> block, except for 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
12/02/2015 BCHB524 - 2015 - Edwards 21
Edit master.html
Relevant section should look like this:
12/02/2015 BCHB524 - 2015 - Edwards 22
Empty web-app
Rather than making the changes one step at a time…
Download TGEmpty.zip from course data directory to your home directory.
[student@localhost ~]$ cd ~/HoyaTaxa/hoyataxa
[student@localhost ~]$ unzip –o ~/TGEmpty.zip
[student@localhost ~]$ cd ..
[student@localhost ~]$ python start-hoyataxa.py
12/02/2015 BCHB524 - 2015 - Edwards 23
Empty web-app
Empty web-application shell looks like:
12/02/2015 BCHB524 - 2015 - Edwards 24
Dynamic title
In controllers.py, let's send a dynamic title to the welcome.html template.
12/02/2015 BCHB524 - 2015 - Edwards 25
Dynamic title
In welcome.html, change "Welcome to TurboGears" to ${title}.
12/02/2015 BCHB524 - 2015 - Edwards 26
Dynamic Title
Edit the model.py file add the necessary imports and SQLObject classes
12/02/2015 BCHB524 - 2015 - Edwards 27
Set up the model...
# Extra imports from sqlobjectfrom sqlobject import ForeignKey, MultipleJoin
class Taxonomy(SQLObject): taxid = IntCol(alternateID=True) scientific_name = StringCol() rank = StringCol() parent = ForeignKey("Taxonomy") names = MultipleJoin("Name") children = MultipleJoin("Taxonomy",joinColumn='parent_id')
class Name(SQLObject): taxonomy = ForeignKey("Taxonomy") name = StringCol() name_class = StringCol()
12/02/2015 BCHB524 - 2015 - Edwards 28
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
12/02/2015 BCHB524 - 2015 - Edwards 29
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
12/02/2015 BCHB524 - 2015 - Edwards 30
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!
12/02/2015 BCHB524 - 2015 - Edwards 31
Let's add some functionality
In controllers.py, let's add a new request
12/02/2015 BCHB524 - 2015 - Edwards 32
Let's add some functionality
Need to create taxa.html too Save welcome.html as taxa.html Change taxa.html
12/02/2015 BCHB524 - 2015 - Edwards 33
Let's add some functionality
Not pretty, but now we have dynamic title and dynamic content...
12/02/2015 BCHB524 - 2015 - Edwards 34
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>
12/02/2015 BCHB524 - 2015 - Edwards 35
Let's make it pretty
12/02/2015 BCHB524 - 2015 - Edwards 36
Fix the parent value
12/02/2015 BCHB524 - 2015 - Edwards 37
Fix the parent value
12/02/2015 BCHB524 - 2015 - Edwards 38
And make it clickable
12/02/2015 BCHB524 - 2015 - Edwards 39
And make it clickable
12/02/2015 BCHB524 - 2015 - Edwards 40
List all the children
12/02/2015 BCHB524 - 2015 - Edwards 41
List all children
12/02/2015 BCHB524 - 2015 - Edwards 42
List all names
12/02/2015 BCHB524 - 2015 - Edwards 43
List all names
12/02/2015 BCHB524 - 2015 - Edwards 44
Remove the scientific name
12/02/2015 BCHB524 - 2015 - Edwards 45
Remove scientific name
12/02/2015 BCHB524 - 2015 - Edwards 46
Let's add the lineage
12/02/2015 BCHB524 - 2015 - Edwards 47
Let’s add the lineage
12/02/2015 BCHB524 - 2015 - Edwards 48
Let’s add the lineage
12/02/2015 BCHB524 - 2015 - Edwards 49
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.
