We have created our project and added all the required jars, so we are ready to code. We are going to incrementally build an online web store throughout this book, chapter by chapter. As a first step, let's create a home page in our project to welcome our customers.
Our aim is simple; when we enter the URL http://localhost:8080/webstore/ on the browser, we would like to show a welcome page that is similar to the following screenshot:
Showing the welcome page of the web store
We are going to take a deep look at each concept in detail in the upcoming chapters. As of now, our aim is to have quick hands-on experience of developing a simple web page using Spring MVC. So don't worry if you are not able to understand some of the code here.
To create a welcome page, we need to execute the following steps:
Create a
webapp/WEB-INF/jsp/folder structure under thesrc/main/folder; create a JSP file calledwelcome.jspunder thesrc/main/webapp/WEB-INF/jsp/folder, and add the following code snippets into it and save it:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="jumbotron"> <h1> ${greeting} </h1> <p> ${tagline} </p> </div> </body> </html>Create a class called
HomeControllerunder thecom.packt.webstore.controllerpackage in the source directorysrc/main/javaand add the following code into it:package com.packt.webstore.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HomeController { @RequestMapping("/") public String welcome(Model model) { model.addAttribute("greeting", "Welcome to Web Store!"); model.addAttribute("tagline", "The one and only amazing web store"); return "welcome"; } }
In step 1, we just created a JSP file; the important thing we need to notice here is the <h1> tag and the <p> tag. Both the tags have some expression that is surrounded by curly braces and prefixed by the $ symbol:
<h1> ${greeting} </h1>
<p> ${tagline} </p>
So, what is the meaning of ${greeting}? It means that greeting is a kind of variable; during rendering of this JSP page, the value stored in the greeting variable will be shown in the header 1 style, and similarly, the value stored in the tagline variable will be shown as a paragraph.
So now, the next question is where we will assign values to those variables arises. This is where the controller will be of help; within the welcome method of the HomeController class, take a look at the following lines of code:
model.addAttribute("greeting", "Welcome to Web Store!");
model.addAttribute("tagline", "The one and only amazing web store");
You can observe that the two variable names, greeting and tagline, are passed as a first parameter of the addAttribute method and the corresponding second parameter is the value for each variable. So what we are doing here is simply putting two strings, "Welcome to Web Store!" and "The one and only amazing web store", into the model with their corresponding keys as greeting and tagline. As of now, simply consider the fact that model is a kind of map data structure.
Tip
Folks with knowledge of servlet programming can consider the fact that model.addAttribute works exactly like request.setAttribute.
So, whatever value we put into the model can be retrieved from the view (JSP) using the corresponding key with the help of the ${} placeholder expression. In our case, greeting and tagline are keys.