age 1 of 22

Lesson 21 – Develop Website Backend System (Part 5)

Objectives:
1. Select appropriate MVC framework.
2. Install MVC framework.
3. Program web application using MVC framework.

Content:
Appropriate MVC framework is selected

The Model-View-Controller (MVC) framework is an architectural/design pattern that separates an

application into three main logical components Model, View, and Controller. Each architectural
component is built to handle specific development aspects of an application.

What is MVC?

The Model-View-Controller (MVC) framework is an architectural/design pattern that separates an

application into three main logical components Model, View, and Controller. Each architectural
component is built to handle specific development aspects of an application. It isolates the business
logic and presentation layer from each other. It was traditionally used for desktop graphical user
interfaces (GUIs). Nowadays, MVC is one of the most frequently used industry-standard web
development frameworks to create scalable and extensible projects. It is also used for designing
mobile apps.

MVC was created by Trygve Reenskaug. The main goal of this design pattern was to solve the problem
of users controlling a large and complex data set by splitting a large application into specific sections
that all have their own purpose.

Features of MVC:

 It provides a clear separation of business logic, UI logic, and input logic.

 It offers full control over your HTML and URLs which makes it easy to design web application
architecture.
 It is a powerful URL-mapping component using which we can build applications that have
comprehensible and searchable URLs.
 It supports Test Driven Development (TDD).

Components of MVC:

The MVC framework includes the following 3 components:

 Controller
 Model
 View
 age 2 of 22

MVC Architecture Design

Controller:

The controller is the component that enables the interconnection between the views and the model
so it acts as an intermediary. The controller doesn’t have to worry about handling data logic, it just
tells the model what to do. It processes all the business logic and incoming requests, manipulates data
using the Model component, and interact with the View to render the final output.

View:

The View component is used for all the UI logic of the application. It generates a user interface for the
user. Views are created by the data which is collected by the model component but these data aren’t
taken directly but through the controller. It only interacts with the controller.

Model:

The Model component corresponds to all the data-related logic that the user works with. This can
represent either the data that is being transferred between the View and Controller components or
any other business logic-related data. It can add or retrieve data from the database. It responds to the
controller’s request because the controller can’t interact with the database by itself. The model
interacts with the database and gives the required data back to the controller.

Working of the MVC framework with an example:

 age 3 of 22

Let’s imagine an end-user sends a request to a server to get a list of students studying in a class. The
server would then send that request to that particular controller that handles students. That
controller would then request the model that handles students to return a list of all students studying
in a class.

The flow of Data in MVC Components

The model would query the database for the list of all students and then return that list back to the
controller. If the response back from the model was successful, then the controller would ask the view
associated with students to return a presentation of the list of students. This view would take the list
of students from the controller and render the list into HTML that can be used by the browser.

The controller would then take that presentation and returns it back to the user. Thus, ending the
request. If earlier the model returned an error, the controller would handle that error by asking the
view that handles errors to render a presentation for that particular error. That error presentation
would then be returned to the user instead of the student list presentation.
As we can see from the above example, the model handles all of the data. The view handles all of the
presentations and the controller just tells the model and view of what to do. This is the basic
architecture and working of the MVC framework.

The MVC architectural pattern allows us to adhere to the following design principles:

1. Divide and conquer. The three components can be somewhat independently designed.
2. Increase cohesion. The components have stronger layer cohesion than if the view and controller
were together in a single UI layer.
3. Reduce coupling. The communication channels between the three components are minimal and
 age 4 of 22

easy to find.
4. Increase reuse. The view and controller normally make extensive use of reusable components for
various kinds of UI controls. The UI, however, will become application-specific, therefore it will not be
easily reusable.
5. Design for flexibility. It is usually quite easy to change the UI by changing the view, the controller,
or both.

Advantages of MVC:

 Codes are easy to maintain and they can be extended easily.

 The MVC model component can be tested separately.
 The components of MVC can be developed simultaneously.
 It reduces complexity by dividing an application into three units. Model, view, and controller.
 It supports Test Driven Development (TDD).
 It works well for Web apps that are supported by large teams of web designers and developers.
 This architecture helps to test components independently as all classes and objects are
independent of each other
 Search Engine Optimization (SEO) Friendly.

Disadvantages of MVC:

 It is difficult to read, change, test, and reuse this model

 It is not suitable for building small applications.
 The inefficiency of data access in view.
 The framework navigation can be complex as it introduces new layers of abstraction which
requires users to adapt to the decomposition criteria of MVC.
 Increased complexity and Inefficiency of data

Popular MVC Frameworks:

Some of the most popular and extensively used MVC frameworks are listed below.

 Ruby on Rails
 Django
 CherryPy
 Spring MVC
 Catalyst
 Rails
 Zend Framework
 Fuel PHP
 Laravel
 Symphony

MVC is generally used on applications that run on a single graphical workstation. The division of
logical components enables readability and modularity as well as it makes it more comfortable for the
testing part.
 age 5 of 22

MVC Framework is installed on server.

The Model-View-Controller (MVC) framework is an architectural/design pattern that separates an

application into three main logical components Model, View, and Controller. Each architectural
component is built to handle specific development aspects of an application.

Introduction

Deployment is a mandatory next step after the development of your product. Depending on your
application type and technology used; you will package your product accordingly for commercial use.
For ASP.NET MVC platforms, you need a Windows server with an IIS manager installed to deploy your
web application. You can also package your web application in the Docker environment and then deploy
your docker package on any server machine that satisfies the hardware requirement for your web
application. Note that Docker is independent of the local OS environment.

Prerequisites

Following are some prerequisites before you proceed any further in this tutorial.
1. Enable/Install Microsoft Web Deploy & IIS Server.
You can also watch this video tutorial to deploy the ASP.NET MVC5 web application on a Windows
machine with an IIS server installed.

Step 1. Right-click on your ASP.NET MVC5 application inside Visual Studio and then click "Publish".
 age 6 of 22

Step 2. Now, select the "IIS" option from the left menu and click the "Create Profile" button.

Step 3. Change your publish method to "Web Deploy Package" and provide your package location, then
click "Next".
 age 7 of 22

Step 4. Click "Save" on the next screen.

Step 5. Now, click "Publish" on the publish screen.

 age 8 of 22

You can see your web application deployment package stored as a ".zip" file on your target location.

Step 6. Now, search for "Internet Information Services (IIS) Manager" on your machine and then click it.

Step 7. Right-click on "Application Pool" and then click "Add Application Pool".
 age 9 of 22

Step 8. Type your application pool name and configure the settings, as shown below, and then click
"OK".

You will see that your application pool has been created and started.
 age 10 of 22

Step 9. Now, right-click on "Sites" and then click "Add Website".

Step 10. On the "Add Website" window, first select the application pool that you have created
specifically for your ASP.NET MVC5 web application, click the "Select" button, then choose your
application pool, and then click "OK" as shown below i.e.
 age 11 of 22

Step 11. Now, provide configuration settings on the "Add Website" screen and then click "OK" as shown
below.

You can see that your empty website is being created on the server as shown below.

Step 12. Right-click on the "Test" site then click "Deploy->Import Application" as shown below.
 age 12 of 22

Step 13. On the "Select Package" screen, provide the location path of your published ".zip" web
application file and then click "Next" as shown below i.e.

Step 14. On the next screen, select all the options and then click "Next" as shown below.
 age 13 of 22

Step 15. Click "Next" on the next screen as shown below.

Step 16. Click the "Finish" button, your web application has been deployed successfully as shown below.
 age 14 of 22

Step 17. You need to purchase & configure your custom domain name on the server, to access your web
application from a web browser using a custom URL address. To configure a custom domain name free
of cost on your local Windows machine for custom URL address access, follow the steps provided at the
end of the video tutorial, link to the video tutorial is provided above in this article. Therefore, after your
custom URL address configuration, type your URL address in the browser and you will be able to access
your ASP.NET MVC5 web application, which has been successfully deployed on the windows IIS server
i.e.
 age 15 of 22

Web application is programmed using selected MVC Framework

Model-View-Controller was traditionally used for desktop graphical user interfaces (GUIs). Today MVC is
a common choice for developers during their work on the design of web, mobile, or desktop
applications.

How to Build an MVC Web App?

Are you planning to create a simple and lightweight MVC web app for personal use? Or a large corporate
application that runs large numbers of database queries with which many clients will work?

Benefits of using MVC architecture to build web applications:

1. Ability to separate business logic and presentation.

2. Ability to change model and view independently.
3. Increase of code reusing (using software components more than once).
4. Ability to display data from one model in different views.
5. Ability to handle the same user action differently depending on the context.
6. Increase the speed of application development due to the fact that models, controllers, and
views can be developed independently of each other.
7. Changing the user interface does not affect the model in any way. Now it is very popular for web
applications to change the user interface frequently. Using the MVC architecture, you can do
this very easily. Just change the view, and do not touch any other part of the web application. In
addition, this architecture makes it easy to add new views.
8. Ability to divide programmers so that back-end developers do not know at all for which views
the data is used, and front-end developers do not know how this data is stored and processed.
9. MVC architecture can be applied to most modern programming languages.
10. Easily managing, maintaining, and debugging large and complex projects.
11. The ability to easily test a web application. MVC architecture can be used in TDD (Test Driven
Development) applications.
 age 16 of 22

12. Using the MVC framework, you can very easily create SEO-friendly URLs for your application’s
web pages, which will increase the number of visitors.

Defining the main functions of the MVC web app

Before we move on to considering the technical specifications of MVC application development, first
you need to determine its main functions. Think about and then write down the answers to these
questions:

1. What are the main functionalities of your web application?

2. How many users is the MVC web app designed for?
3. What data type and volume your MVC application needs to store?
4. How many requests should the web application process daily?
5. What are the non-functional requirements?

The answers to these questions give you the choice of technology for MVC application development.

Choosing MVC framework

Before you start developing your MVC web app project, you need to choose a programming language
and MVC framework that you will use. Let’s take a look at the most popular MVC frameworks:

 ASP.NET MVC. This platform is developed by Microsoft. It supports several programming languages, but
the most popular is C#. .NET Core MVC is cross-platform which allows you to use this platform to write
MVC apps that can be used on almost any device.

.Net framework consists of separate, independent components that can be easily expanded and
replaced. It allows you to generate clear and standards-compliant markup codes.

ASP.NET MVC provides facilities for easily creating unit tests. It is also possible to integrate it with UI
automated testing tools.

ASP.NET MVC provides URL routing, which allows you to create friendly URLs by default. This framework
is open source, so you can debug and even modify it to get your own version.

In order to build ASP.NET MVC applications, you need to use Visual Studio, which has many tools for
quick and easy web development.

 Spring MVC. This platform uses the Java language to develop web applications. The main advantages of
the platform:

A clear division of roles. Each role (controller, model object, view transformer, and others) can be
performed by a separate specialized object.

Simple and straightforward configuration of framework classes and applications.

Ready-made objects of commands, forms, and business objects that can be reused.

Ability to customize the validation of form objects, as well as bind user settings at the application level.
 age 17 of 22

A powerful JSP tag library that provides data and theme binding, simplifies the creation of forms in JSP
pages.

 Django. This framework uses Python as its programming language. Django defines a standardized
project structure that helps developers understand where and how to add new functionality.

It contains many universal modules and applications that can significantly speed up the development of
web applications. This framework has mechanisms that prevent hacker attacks.

 Ruby on Rails. This framework is very powerful and convenient for developers. In addition, it is good for
business, as it provides a high speed of development. With this framework, complex business logic can
be easily implemented, maintained, and modified.

The framework is highly reliable, it supports extensive testing capabilities, which allows you to create
more stable and easily maintainable web applications. This framework is scalable, high-performance,
and can handle high loads.

Another nice factor is that there are more highly qualified Ruby developers than developers in other
programming languages, for example, PHP.

 Laravel. It is an open-source framework that uses the PHP programming language. It is often used in
startups. The main advantages of this framework are:

High security. It protects against SQL injection and cross-site scripting.

High performance, caching. You can use caching or databases that store data in the server’s RAM to
significantly reduce the time for accessing data.

Laravel is open-source and allows everyone to take part in the modernization of the framework.

The presence of a template engine, with which you can reuse the same template in different parts of the
application.

Simple database migrations allow you to easily change the structure of the database and roll back
changes in case of an error.

Support for unit testing.

Extensive library of applications written in Laravel.

Multilanguage. Laravel provides the ability to translate your application into many languages quickly and
easily.

Database selection
 age 18 of 22

Regardless of what functions your MVC web application will perform, it must have some kind of
database. You only need to choose the type of database that suits you. There are different databases for
different purposes, so this decision is very important.

When choosing a database, it is important to understand the needs of your business. Does your product
require high-performance search capabilities? Do you have many similar queries that don’t change
frequently? Perhaps you just want to store a lot of JSON documents?

Let’s take a look at what types of databases exist:

1. Relational databases – classic tabular databases that work with SQL queries. Example: MySQL.
2. Non-relational databases. They are divided into several types.
1. Databases for storing documents. Example: MongoDB.
2. Stores of keys and values. Example: Redis.
3. Wide column shop. Example: Cassandra.
4. The database based on graphs. Example: Neo4j.

Before choosing a specific database, you need to decide on the type of database you need. For most
applications, it is better to choose a relational database.
Let’s take a look at some of the criteria to consider when choosing a database
.
1. The price of commercial databases.
2. Relational databases are fast, reliable, and have a lot of tools to work with them.
3. For large enterprise web applications, you may need scalable databases.
4. For large web applications or applications with frequent requests, you need to consider
performance.

Deployment

When your web application is ready for use, it will need to be deployed and made available to users.

You can deploy a web application in the cloud by renting a server for this via a hosting company. In this
case, you can use dynamic scaling to reduce costs. This reduces the number of servers during periods of
low load and increases them during periods of high load.

If you are using cloud deployment, then initial configuration and deployment are very simple. You don’t
need to hire a lot of system administrators, as the company that provides you with the servers is in
charge of this side of administration.

You do not need to buy server machines, store them and keep them working since all data is stored in
the cloud.

In some cases, local deployment may be more suitable for you. For example, if you have some security
or legal issues to host your server in the cloud or you have invested a lot in your private servers then
there is no point in moving to the cloud.

Popular cloud providers:

 age 19 of 22

 Amazon Web Services (AWS).

 Microsoft Azure.
 Google Cloud.
 Alibaba Cloud.
 IBM Cloud.
 Oracle.
 Salesforce.
 SAP.

Building an MVC Web App development team

As important as your choice of development technology, is the construction of a top development team
that will be involved in the development process. To create a web application, you need the following
workers:

1. The architect defines the main software components, their relationship, and their interaction.
2. The UI designer thinks over and draws how the user interface will look.
3. The back-end developer is responsible for the development of the server side. It works with
databases and models.
4. The front-end developer implements views and is responsible for displaying data to the user
and receiving data from him.
5. The tester checks the compliance of the web application with the set requirements. To reduce
the amount of manual work, as well as to reduce the likelihood of errors in the web application,
it is recommended to write automated tests. Using automated testing allows you to reduce
testing costs, as it reduces the amount of manual work several times.
6. DevOps engineer is responsible for building the code and delivering the code to production.
 age 20 of 22

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=DUg2SWWK18I&t=30s

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.geeksforgeeks.org/mvc-framework-introduction/
https://www.c-sharpcorner.com/article/asp-net-mvc5-deployment-on-windows-iis-server/
https://www.devteam.space/blog/how-to-build-mvc-web-app/

eBook:
 MVC Framework by: tutorialspoint.com
 age 21 of 22

Assessment 21-1:
Written Test

Test I: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.

_____________ 1. The tester checks the compliance of the web application with the set
requirements.
_____________ 2. As important as your choice of development technology, is the
construction of a top development team that will be involved in the
development process.
_____________ 3. You do need to buy server machines, store them and keep them working
since all data is stored in the cloud.
_____________ 4. You can deploy a web application in the cloud by renting a server for this
via a hosting company.
_____________ 5. Regardless of what functions your MVC web application will perform, it
must have some kind of database.
_____________ 6. Multilanguage. Laravel provides the ability to translate your application
into many languages quickly and easily.
_____________ 7. Spring MVC framework consists of separate, independent components
that can be easily expanded and replaced.
_____________ 8. Before we move on to considering the technical specifications of MVC
application development, first you need to determine its main functions.
_____________ 9. Django defines a standardized project structure that helps developers
understand where and how to add new functionality.
_____________ 10. Before choosing a specific database, you need to decide on the type of
database you need.

Test II: Question and Answer

A: What is MVC?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Test III: Enumeration

A: Popular MVC framework.

1. ______________________________
2. ______________________________
3. ______________________________
 age 22 of 22

4. ______________________________
5. ______________________________
6. ______________________________
7. ______________________________
8. ______________________________
9. ______________________________
10. ______________________________

Activity

Objective: Install MVC framework on server.

Steps/Procedure:

1. Follow the proper procedure in installing MVC framework referring to Lesson 21.