mvc

1. Introduction to
Model-View-Controller (MVC)
Web Programming with TurboGears
Leif Oppermann, 24.04.2008

2. WPS - your story so far
– xhtml x2
– css
– javascript
– dom, dynamic html
– java applets
– cgi/perl
– php x2
– web usability x2
– xml x2
• Seems incredible
complicated, already
• But still not everything
(by far not!)
• How to possibly get it
all under one hood?
• What did you like?

3. Course of this lecture
• What is web programming?
• What is model-view-controller?
• Introducing TurboGears

4. 1. Web programming
• The non-design bits
• Developing web applications of all scales
• “In software engineering, a Web application or webapp is an
application that is accessed with a Web browser over a network
such as the Internet or an intranet. Web applications are popular
due to the ubiquity of the browser as a client, sometimes called a
thin client. The ability to update and maintain Web applications
without distributing and installing software on potentially thousands
of client computers is a key reason for their popularity. Web
applications are used to implement Webmail, online retail sales,
online auctions, wikis, discussion boards, Weblogs, MMORPGs,
and many other functions.” – Wikipedia.org

5. Webapps summary
• Accessed with a Web Browser (client)
• Over a network
• Code is mainly run on server
• Exception: Javascript (also: Java, Flash,..)
• Code is loaded from server
• Data is mainly stored on server
• Webapps can be updated easily…
..without updating the clients!

6. General 3 tiered structure
• First tier: client side code (web-browser),
e.g. (X)HTML, Javascript, Java, Flash
• Second tier: server side code, e.g. C/C++,
Perl, PHP, Java, Ruby, Python
• Third tier: server side database

7. • Architectural Pattern from Smalltalk (1979)
• Decouples data and presentation
• Eases the development
2. Model View Controller

8. • First thought (ok, but not far enough):
– Tier 1: View (Client)
– Tier 2: Controller (Server)
– Tier 3: Model (Database)
Database
Client
Server

9. • Presentation:
– View is the user interface (e.g. button)
– Controller is the code (e.g. callback for button)
• Data:
– Model is the database
Database
Presentation
Data

10. Example Control Flow in MVC
• User interacts with the VIEW UI
• CONTROLLER handles the user input
(often a callback function attached to UI
elements)
• CONTROLLER updates the MODEL
• VIEW uses MODEL to generate new UI
• UI waits for user interaction

11. MVC – general example

12. 3. Introduction to TurboGears
JavaScript Library
XHTML template engine
Easy to use Python webserver
ORM Database Interface
(e.g. for MySQL, SQLite, etc.)
VIEW
CONTROLLER
MODEL

13. > tg-admin quickstart NewDemo
Enter package name [newdemo]:
Do you need Identity
(usernames/passwords) in this project?
[no]
[lots of output]
> cd NewDemo
> ./start-newdemo.py
3. Introduction to TurboGears

15. Let‘s get started by
watching a video
(20 Minutes Wiki)

16. So what was that?
• Created skeleton files with startup script
• Defined Data-Model
– created database tables from model
– created seeding data in toolbox webapp
• Wrote View template in XHTML
• Wrote Controller code in Python
– Index, edit, save
• At this point he had a working system
– Several iterations to add all features
• Finally wrote AJAX code (Javascript) in template

17. Benefits
• Local development
– No need to upload to server
• Quick turn around times
– No need to compile
– As CherryPy watches the file-system and
reloads when sources are changed
• Database query and update was easy
– No need to hand-write SQL
– But could be done, if necessary

18. Summary
• Web applications
– Client, Server, Database
– Easy to maintain, harder to write
• Model – View – Controller
– Eases web application development
• TurboGears
– MVC WebApp Framework written in Python
– www.turbogears.org

19. Thanks for your attention
• Next lecture: 1 PM today
• More on TurboGears (example project)
– Movie Collection tool
• Questions / Comments:
– Now
– or email: LXO@CS.NOTT.AC.UK