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

2. 12/02/2015BCHB524 - 2015 - 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.

3. 12/02/2015BCHB524 - 2015 - Edwards3 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.

4. 12/02/2015BCHB524 - 2015 - Edwards4 Web-servers A URL is made up of many parts. http://hoyataxa.georgetown.edu:8080/index.html protocol (http,https) computer nameresource port # (80 if omitted)

5. 12/02/2015BCHB524 - 2015 - 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 http://hoyataxa.georgetown.edu:8080/taxa?taxid=9606&format=XML protocol (http,https) computer nameresource port # (80 if omitted) resource/request parameters

6. 12/02/2015BCHB524 - 2015 - 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.

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

8. 12/02/2015BCHB524 - 2015 - Edwards8 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.

9. 12/02/2015BCHB524 - 2015 - 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)

10. 12/02/2015BCHB524 - 2015 - 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]

11. 12/02/2015BCHB524 - 2015 - Edwards11 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/ http://localhost:8080/ Lots of stuff is printed to the terminal

12. 12/02/2015BCHB524 - 2015 - Edwards12 Start web-app and check

13. 12/02/2015BCHB524 - 2015 - Edwards13 Start web-app and check

14. 12/02/2015BCHB524 - 2015 - 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

15. 12/02/2015BCHB524 - 2015 - 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.

16. 12/02/2015BCHB524 - 2015 - 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

17. 12/02/2015BCHB524 - 2015 - Edwards17 Edit welcome.html Now looks like this

18. 12/02/2015BCHB524 - 2015 - 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.

19. 12/02/2015BCHB524 - 2015 - Edwards19 Edit controllers.py Root class declaration should look like this:

20. 12/02/2015BCHB524 - 2015 - 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

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

22. 12/02/2015BCHB524 - 2015 - 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. [student@localhost ~]$ cd ~/HoyaTaxa/hoyataxa [student@localhost ~]$ unzip –o ~/TGEmpty.zip [student@localhost ~]$ cd.. [student@localhost ~]$ python start-hoyataxa.py

23. 12/02/2015BCHB524 - 2015 - Edwards23 Empty web-app Empty web-application shell looks like:

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

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

26. 12/02/2015BCHB524 - 2015 - Edwards26 Dynamic Title

27. Edit the model.py file add the necessary imports and SQLObject classes 12/02/2015BCHB524 - 2015 - 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()

28. 12/02/2015BCHB524 - 2015 - Edwards28 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

29. 12/02/2015BCHB524 - 2015 - Edwards29 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

30. 12/02/2015BCHB524 - 2015 - 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: http://localhost:8080/taxa?taxid=9606 http://localhost:8080/taxa/9606 Try it!

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

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

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

34. 12/02/2015BCHB524 - 2015 - 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}

35. 12/02/2015BCHB524 - 2015 - Edwards35 Let's make it pretty

36. 12/02/2015BCHB524 - 2015 - Edwards36 Fix the parent value

37. 12/02/2015BCHB524 - 2015 - Edwards37 Fix the parent value

38. 12/02/2015BCHB524 - 2015 - Edwards38 And make it clickable

39. 12/02/2015BCHB524 - 2015 - Edwards39 And make it clickable

40. 12/02/2015BCHB524 - 2015 - Edwards40 List all the children

41. 12/02/2015BCHB524 - 2015 - Edwards41 List all children

42. 12/02/2015BCHB524 - 2015 - Edwards42 List all names

43. 12/02/2015BCHB524 - 2015 - Edwards43 List all names

44. 12/02/2015BCHB524 - 2015 - Edwards44 Remove the scientific name

45. 12/02/2015BCHB524 - 2015 - Edwards45 Remove scientific name

46. 12/02/2015BCHB524 - 2015 - Edwards46 Let's add the lineage

47. 12/02/2015BCHB524 - 2015 - Edwards47 Let’s add the lineage

48. 12/02/2015BCHB524 - 2015 - Edwards48 Let’s add the lineage

49. 12/02/2015BCHB524 - 2015 - 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.