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

12/02/2015BCHB Edwards2 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/2015BCHB Edwards3 Web-Servers Respond to requests: with static: files, images, etc... and dynamic: your facebook page, google search results content.

12/02/2015BCHB Edwards4 Web-servers A URL is made up of many parts. protocol (http,https) computer nameresource port # (80 if omitted)

12/02/2015BCHB Edwards5 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 protocol (http,https) computer nameresource port # (80 if omitted) resource/request parameters

12/02/2015BCHB Edwards6 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/2015BCHB Edwards7 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/2015BCHB Edwards8 TurboGears Your class virtual image has version 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/2015BCHB Edwards9 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/2015BCHB Edwards10 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/2015BCHB Edwards11 Start web-app and check Check that the web-application shell is working... In the terminal: ~]$ cd HoyaTaxa ~]$ python start-hoyataxa.py Start a web-browser and access the url: Lots of stuff is printed to the terminal

12/02/2015BCHB Edwards12 Start web-app and check

12/02/2015BCHB Edwards13 Start web-app and check

12/02/2015BCHB Edwards14 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/2015BCHB Edwards15 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/2015BCHB Edwards16 Edit welcome.html In welcome.html: Delete everything between the HTML tags. Delete everything in the 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/2015BCHB Edwards17 Edit welcome.html Now looks like this

12/02/2015BCHB Edwards18 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/2015BCHB Edwards19 Edit controllers.py Root class declaration should look like this:

12/02/2015BCHB Edwards20 Edit master.html In master.html (reload after each change) Remove block. Remove everything in the 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". Hoya Taxa Change the footer as you like

12/02/2015BCHB Edwards21 Edit master.html Relevant section should look like this:

12/02/2015BCHB Edwards22 Empty web-app Rather than making the changes one step at a time… Download TGEmpty.zip from course data directory to your home directory. ~]$ cd ~/HoyaTaxa/hoyataxa ~]$ unzip –o ~/TGEmpty.zip ~]$ cd.. ~]$ python start-hoyataxa.py

12/02/2015BCHB Edwards23 Empty web-app Empty web-application shell looks like:

12/02/2015BCHB Edwards24 Dynamic title In controllers.py, let's send a dynamic title to the welcome.html template.

12/02/2015BCHB Edwards25 Dynamic title In welcome.html, change "Welcome to TurboGears" to ${title}.

12/02/2015BCHB Edwards26 Dynamic Title

Edit the model.py file add the necessary imports and SQLObject classes 12/02/2015BCHB Edwards27 Set up the model... # Extra imports from sqlobject from 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/2015BCHB Edwards28 Set up the model... Create the model: In the terminal: ~]$ 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/2015BCHB Edwards29 Check the data in the model... In the terminal: ~]$ tg-admin shell >>> print Taxonomy.byTaxid(9606) >>> t = Taxonomy.byTaxid(9606) >>> print t.names

12/02/2015BCHB Edwards30 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: Try it!

12/02/2015BCHB Edwards31 Let's add some functionality In controllers.py, let's add a new request

12/02/2015BCHB Edwards32 Let's add some functionality Need to create taxa.html too Save welcome.html as taxa.html Change taxa.html

12/02/2015BCHB Edwards33 Let's add some functionality Not pretty, but now we have dynamic title and dynamic content...

12/02/2015BCHB Edwards34 Lets make it pretty Place the following HTML between the body tags in taxa.html: Scientific Name ${taxa.scientific_name} NCBI Taxonomy ID ${taxa.taxid} Rank ${taxa.rank} Parent ${taxa.parent}

12/02/2015BCHB Edwards35 Let's make it pretty

12/02/2015BCHB Edwards36 Fix the parent value

12/02/2015BCHB Edwards37 Fix the parent value

12/02/2015BCHB Edwards38 And make it clickable

12/02/2015BCHB Edwards39 And make it clickable

12/02/2015BCHB Edwards40 List all the children

12/02/2015BCHB Edwards41 List all children

12/02/2015BCHB Edwards42 List all names

12/02/2015BCHB Edwards43 List all names

12/02/2015BCHB Edwards44 Remove the scientific name

12/02/2015BCHB Edwards45 Remove scientific name

12/02/2015BCHB Edwards46 Let's add the lineage

12/02/2015BCHB Edwards47 Let’s add the lineage

12/02/2015BCHB Edwards48 Let’s add the lineage

12/02/2015BCHB Edwards49 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.