Tutorial on creating a Students List page
This is what we will cover in class today, and is equvalent to what i will show you from the blackborad.
The goal is to create a Students List and diplay it in the browser like this:
- Before we start you need to have an up an running Spring Boot Application. You can see here how to manage that.
- Create a StudentsController and from that return an index.html . You can see here how to manage that.
- Create a Student.java Class with the following attributes
public class Student {
private int studentId;
private String firstName;
private String lastName;
private Date enrollmentDate;
private String cpr;
}- Create Getters & Setters in the class
- As parameter to your index method put in
Model model.
@GetMapping("/")
public String index(Model model) {
return "index";
}This meens that when the method is called, it expects an obejct of the type of Model to be passed in.
- Add an Arraylist of Student to the model object with
model.addAttribute().
ArrayList<Student> students = new ArrayList<>();
@GetMapping("/")
public String index(Model model) {
model.addAttribute("students", students);
return "index";
}In the index.html files between the two <body> </body> tags create a table
<body>
<table>
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Enrollment Date</th>
<th>Cpr</th>
<th></th>
</tr>
</thead>
</table>
</body>This will create the header of the table.
Add the body of the table
<body>
<table>
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Enrollment Date</th>
<th>Cpr</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="student: ${students}">
<td th:text="${student.studentId}"/>
<td th:text="${student.firstName}"/>
<td th:text="${student.lastName}"/>
<td th:text="${student.enrollmentDate}"/>
<td th:text="${student.cpr}"/>
<td></td>
</tr>
</tbody>
</table>
</body>