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:
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:
webapp/WEB-INF/jsp/
folder structure under the src/main/
folder; create a JSP file called welcome.jsp
under the src/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>
HomeController
under the com.packt.webstore.controller
package in the source directory src/main/java
and 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.
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.