Skip to content

Accepting Post Requests

Overview

So far, if the browser (a client) requested a page (homepage or courses page) they've received our (web) server's response (HTML documents). The Request/Response loop that accommodated this feature falls under HTTP Get request. Let's take it to the next level and capture clients' input to create a course. We need to kick off a brand new Request/Response loop: a HTTP Post request.

1
2
3
4
5
6
7
8
post("/courses", (req, res) -> {
    // TODO Capture user's input.

    // TODO Create (add) a new course.

    // TODO Referesh the courses page to show the new addition.

}, new HandlebarsTemplateEngine());

We'll tackle the TODOs one by one.

Capturing user input

Let's look at the form inside courses.hbs:

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>

When user clicks on the Submit button, the content (text) inside the two text-boxes will be captured and send as query parameter alongside the body of a HTTP Post request. To access these parameters (and their values), use the queryParams method on Request object: 

1
2
3
4
5
6
7
8
9
post("/courses", (req, res) -> {
    // Capture user's input.
    String name = req.queryParams("coursename");
    String url = req.queryParams("courseurl");
    // TODO Create (add) a new course.

    // TODO Referesh the courses page to show the new addition.

}, new HandlebarsTemplateEngine());

Create and add a new course

This one is simple! Use the CourseDao object:

1
2
3
4
5
6
7
8
9
post("/courses", (req, res) -> {
    // Capture user's input.
    String name = req.queryParams("coursename");
    String url = req.queryParams("courseurl");
    // Create (add) a new course.
    courseDao.add(new Course(name, url));
    // TODO Referesh the courses page to show the new addition.

}, new HandlebarsTemplateEngine());

Redirect

Once the new course is added, we want to load the courses page again to show the newly added course (in the list of courses). To do this, we can send a HTTP Get request that fetches the courses page data again. You can trigger a browser redirect with the redirect method on the Request object:

1
2
3
4
5
6
7
8
9
post("/courses", (req, res) -> {
    // Capture user's input.
    String name = req.queryParams("coursename");
    String url = req.queryParams("courseurl");
    // Create (add) a new course.
    courseDao.add(new Course(name, url));
    // Referesh the courses page to show the new addition.
    res.redirect("/courses");
}, new HandlebarsTemplateEngine());

And we have to return something in the post method; the pattern is that you return null.

1
2
3
4
5
6
7
post("/courses", (req, res) -> {
    String name = req.queryParams("coursename");
    String url = req.queryParams("courseurl");
    courseDao.add(new Course(name, url));
    res.redirect("/courses");
    retun null;
}, new HandlebarsTemplateEngine());

Alright, that sums it up! Rerun the WebServer and add a few course! Make sure everything works as expected.