Skip to content

MVC Pattern

Model–view–controller (usually known as MVC) is a software design pattern that is commonly used for developing web applications. In fact, most web development frameworks (like Spark) support this design pattern by default (i.e. they expect you to follow it).

This pattern is used to separate application's concerns:

  • Model represents an object or JAVA POJO carrying data.
  • View represents the visualization of the data that model contains.
  • Controller is the bridge between the model and view. It controls the data flow into model object and updates the view whenever data changes.

In our application, we are building the Views using handlebar templates. Given our wireframe, we need two views: the homepage and the courses page.

Updating View

We already have the homepage, let's make the courses page; add the following to resources/templates/courses.hbs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CourseReVU App</title>
</head>
<body>
    <h1>Courses</h1>

    <ul>
        <li>name1  at  url1</li>
        <li>name2  at  url2</li>
    </ul>

    <form action="/courses" method="post">
        <input type="text" placeholder="course name" name="coursename"/>
        <input type="text" placeholder="course url" name="courseurl"/>
        <button>Submit</button>
    </form>
</body>
</html>

Note that we have a placeholder to show a list of courses

1
2
3
4
<ul>
    <li>name1  at  url1</li>
    <li>name2  at  url2</li>
</ul>

At the moment, this prints dummy data and it is not connected to our application data (i.e. not connected to Model).

We also have a form:

1
2
3
4
5
<form action="/courses" method="post">
    <input type="text" placeholder="course name" name="coursename"/>
    <input type="text" placeholder="course url" name="courseurl"/>
    <button>Submit</button>
</form>

HTML form is a construct to collect data from user. An HTML form contains form elements: text fields, checkboxes, radio buttons, submit buttons, and more.

Let's also update homepage to contain a link to courses page; add the following after the <h1>Welcome to CourseReVU App</h1> in index.hbs

1
<p>View <a href="courses">courses</a></p>

When someone clicks on the courses link, the browser will go to http://localhost:4567/courses

Updating Controller

Now we must tell our web server to route to courses page when browser is pointed at http://localhost:4567/courses; add the following to WebServer.main:

1
2
3
get("/courses", (req, res) -> {
    return new ModelAndView(null, "courses.hbs");
}, new HandlebarsTemplateEngine());

After running the WebServer, point your browser to http://localhost:4567/; on the homepage, click on the courses link and you must be redirected to http://localhost:4567/courses.