View

We already have a homepage, index.hbs that simply displays a welcome message; let's update it: replace the following line

<h1>Welcome to CourseSearch UI!</h1>

with

<h1>Course Search</h1>
<form action="/search" method="post">
    <input type="text" placeholder="" name="query">
    <button type="submit">GO</button>
</form>

Notice we have a form; an 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.

Run the application and visit http://localhost:4567/.

Let's add another view; add search.hbs to the templates folder with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JHU Course Search</title>
</head>
<body>
    <form action="/search" method="post">
        <input type="text" placeholder="" name="query">
        <button type="submit">GO</button>
    </form>
    <ul>
        <li>EN.601.226 Data Structures</li>
        <li>EN.601.280 Full-Stack JavaScript</li>
        <li>EN.601.421 Object-Oriented Software Engineering</li>
    </ul>
</body>
</html>

To be able to serve this page, we need to add a route method to WebServer.main:

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

Run the application and visit http://localhost:4567/search.

CS421 Notes

View