This is Part 2 of the “Hello World” article. In this followup article, we enhance our code to:

1. Render a form on the landing page which asks user to enter his/her name
2. Process the data on the submitted form
3. Say “Hello {user}” rather than “Hello World”

What we will learn through all this is:

1. One of the various possible options to accept data to the server
2. Process incoming data
3. Apply business logic and create the data to be rendered

Let’s get started with customizing the view to create a form…

1. Customizing View to create a Form

If you recollect from the earlier article, the index-view resides in {mojit-dir}/views/index.mu.html. Let’s modify the file to reflect a form:

<div id="{{mojit_view_id}}">
    <form method='post' action='/'>
        <div>Enter Name: <input type='text' name='name' /></div>
        <div><input type='submit' value='Submit' /></div>
    </form>
</div>

With this content, if you restart the server, you should see a form as below:

Great. Just type in your name and hit the Submit button… what do you see?

Well, I think this is pretty much expected and I also think that you know what to fix. Open the routes.json and update the “verbs” to include “POST” as well. The final contents of routes.json should be as below:

[{
    "settings": [ "master" ],
    "root": {
        "path": "/",
        "verbs": [ "GET", "POST" ],
        "call": "hello_mojit.index"
    }
}]

Now, if you restart the server and click on the Submit button, it should not give an error but should show the form again.

It’s now time to bring the form in action…