Web-Applications: TurboGears BCHB524 2015 Lecture 25 12/02/2015BCHB524 - 2015 - Edwards

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&nbsp;Name</th><td>${taxa.scientific_name}</td></tr>

<tr><th>NCBI&nbsp;Taxonomy&nbsp;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.