Enter your username
Let's toy with the idea of having users login to MyBooksApp. For now, we just ask for their username and welcome them! Before we dive into this, we need to learn about HTTP cookies!
Where are my cookies?
In order to capture the username from the user, we use HTTP Post. Then, we redirect that information to HTTP Get. We can do this by capturing
req.queryParams("username"); and store it in our web-server application. It would be, however, an anti-pattern! HTTP is meant to be stateless (server should not care about the state of the client, e.g. if client is signed in or not). The generally accepted way to make HTTP appear to be stateful is by storing little bits of data (that are stored on the client) and send on each request to the server. These are called cookies.
HTTP Cookie (from MDN docs)
An HTTP cookie (web cookie, browser cookie) is a small piece of data, usually in the form of a randomly encoded text file, that a server sends to the user's web browser. The browser may store it and send it back with later requests to the same server. Typically, it's used to tell if two requests came from the same browser — keeping a user logged-in, for example. It remembers stateful information for the stateless HTTP protocol.
from MDN docs
Cookies are mainly used for three purposes:
- Session management: Logins, shopping carts, game scores, or anything else the server should remember
- Personalization: User preferences, themes, and other settings
- Tracking: Recording and analyzing user behavior
Back to MyBooksApp
Now, with that intro, let us add a http post endpoint on
/ as follows:
As you can see, anytime a post request with a
username is provided to the homepage, a cookie is set on the response that sentm back to the client. The client will include this cookie in all its future requests to the server.
You browser should include the
username cookie automatically in all future requests, so you should need not to do anything further about this!
Now, instead of
index.html that we currently use, let us add
src/main/reources/public/templates as follows:
index.vm we check to see if
username cookie is supplied or not. If not, we show the login HTML form. Otherwise, we show the front page.
form is a construct to collect data from user. An HTML form contains form elements: text fields, checkboxes, radio buttons, submit buttons, and more.
Finally, we need to update our http get endpoint on
Here, we check if the
username cookie is set in which case we make it part of the model to be passed into
Now, if you point your browser to MyBooksApp homepage, you should be prompted first to enter a username. Once, you do that, you should be able to see the front page with the two links in it.