Introduction to Model-View-Controller (MVC)

Web Programming

Sunnie Chung

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?

Sunnie Chung CIS433

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

Sunnie Chung CIS433

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!

Sunnie Chung CIS433

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

Sunnie Chung CIS433

• Architectural Pattern from Smalltalk (1979)

• Decouples data and presentation

• Eases the development

2. Model View Controller

Sunnie Chung CIS433

• First thought (ok, but not far enough):

– Tier 1: View (Client)

– Tier 2: Controller (Server)

– Tier 3: Model (Database)

Database

ClientServer

Sunnie Chung CIS433

• 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

Sunnie Chung CIS433

Example Control Flow in MVC

• User interacts with the VIEW UI

• CONTROLLER handles the user input (often a callback function attached to UIelements)

• CONTROLLER updates the MODEL

• VIEW uses MODEL to generate new UI

• UI waits for user interaction

Sunnie Chung CIS433

MVC – general example

Sunnie Chung CIS433

Examples of PlatForm

JavaScript Library

XHTML template engine

Easy to use Python webserver

ORM Database Interface

(e.g. for MySQL, SQLite, etc.)

VIEW

CONTROLLER

MODEL

Sunnie Chung CIS433

LAMP(Linux, Apathe, MySQL)

Sunnie Chung CIS433

WAMP/LAMP Stack

• Apache Webserver and PHP

• MySQL database Server on

• Window/Linux with ODBC

Sunnie Chung CIS433

ASP.NET with SQL Server

• WebMatrix • Internet Information Services (IIS, formerly Internet

Information Server) is an extensible web server created

by Microsoft for use with Windows NT family. IISsupports HTTP, HTTPS, FTP, FTPS, SMTP and NNTP.

• MS SQL Server Database Server

with ODBC (for C++/C#) or JDBC for (JAVA).

• Visual Studio IDE .NET Framework for ASP Web

applications (C++/C#, JAVA) and XML Web

services

Sunnie Chung CIS433

JAVA Frame Work

• Java Platform for Application Logic

• JDBC (Java Database Connectivity) API

• Any Relational Database Server

Sunnie Chung CIS433

Components Interaction During the Execution of a Database Query

Sunnie Chung CIS433