Introduction to Model-View-Controller (MVC) Web...
Transcript of Introduction to Model-View-Controller (MVC) Web...
![Page 1: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/1.jpg)
Introduction to Model-View-Controller (MVC)
Web Programming
Sunnie Chung
![Page 2: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/6.jpg)
• Architectural Pattern from Smalltalk (1979)
• Decouples data and presentation
• Eases the development
2. Model View Controller
Sunnie Chung CIS433
![Page 7: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/7.jpg)
• First thought (ok, but not far enough):
– Tier 1: View (Client)
– Tier 2: Controller (Server)
– Tier 3: Model (Database)
Database
ClientServer
Sunnie Chung CIS433
![Page 8: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/8.jpg)
• 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
![Page 9: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/10.jpg)
MVC – general example
Sunnie Chung CIS433
![Page 11: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/12.jpg)
LAMP(Linux, Apathe, MySQL)
Sunnie Chung CIS433
![Page 13: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/13.jpg)
WAMP/LAMP Stack
• Apache Webserver and PHP
• MySQL database Server on
• Window/Linux with ODBC
Sunnie Chung CIS433
![Page 14: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/15.jpg)
JAVA Frame Work
• Java Platform for Application Logic
• JDBC (Java Database Connectivity) API
• Any Relational Database Server
Sunnie Chung CIS433
![Page 16: Introduction to Model-View-Controller (MVC) Web ...cis.csuohio.edu/~sschung/CIS433/lecture19_MVCArchitectureCIS433… · Introduction to Model-View-Controller (MVC) Web Programming](https://reader030.fdocuments.us/reader030/viewer/2022041116/5f27a8a4d3d22177312a6461/html5/thumbnails/16.jpg)
Components Interaction During the Execution of a Database Query
Sunnie Chung CIS433