Scribd
Upload
5 views8 pages

Tutorial 2 (3)

This tutorial provides a step-by-step guide to creating a web application using Spring Boot, including project setup, database integration with Hibernate, and implementing CRUD functionality with Spring JPA. It covers creating views with Thymeleaf and includes instructions for building an Employee List and Detail page. The tutorial concludes with submission requirements for the completed project and relevant screenshots.

Uploaded by

dodaihocccccc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views8 pages

Tutorial 2 (3)

This tutorial provides a step-by-step guide to creating a web application using Spring Boot, including project setup, database integration with Hibernate, and implementing CRUD functionality with Spring JPA. It covers creating views with Thymeleaf and includes instructions for building an Employee List and Detail page. The tutorial concludes with submission requirements for the completed project and relevant screenshots.

Uploaded by

dodaihocccccc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Tutorial 2 – Web Application

With Spring Boot (1)

 Contents:
 Create Spring Boot project using start.spring.io and import into IntelliJ
IDEA

 Create table with Hibernate

 Make CRUD feature with Spring JPA

 Create views for the web application with Thymeleaf

 Concepts:
 Spring Framework: a Java platform that provides comprehensive
infrastructure support for developing Java application
 Spring Boot: a tool that makes developing web application and
microservices with Spring framework faster and easier with
autoconfiguration
 Hibernate: an object-relational mapping (ORM) tool for Java
programming language that simplifies the interaction with the database
 Spring JPA: a collection of classes and methods to persistently and
conveniently store data in a database from Spring application
 Thymeleaf: a modern server-side Java template engine for both web
and standalone environments

SE2 – TUTORIAL 2
 Create & Configure a Spring Boot project:
1. Create a Spring Boot project by visiting https://start.spring.io

2. Click GENERATE to download a zip file, which contains the newly created Maven
project . Extract it to a suitable folder in your computer. For example:
D:\Study\Spring2024\SE2\Week2\springboot1

3. Open that folder as a project in IntelliJ IDEA:

SE2 – TUTORIAL 2
4. Create 3 packages: controller, model and repository. Following is a sample project
structure:

5. Configure parameters for MySQL connection, JPA & Hibernate. The config file is
src/main/resources/application.properties

SE2 – TUTORIAL 2
 Implement the Employee List page:
1. Create Java class for model (entity) called Employee which is associated with the
Employee table in database (located at sub-package model). Generate getters and
setters for all attributes of this class.

2. Create Java interface which extends JpaRepository for CRUD features (located at
sub-package repository)
SE2 – TUTORIAL 2
3. Create Java class for controller which gets data from database and renders view
(located at sub-package controller)

4. Run the application once by running the main application class to let Spring create the
table in the database.

SE2 – TUTORIAL 2
5. Add more sample data into the created table:
(You can store images in the main/resources/static folder)

6. Create employeeList.html template under src/main/resources/template folder

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Employee List</title>
</head>
<body>
<div>
<h2>EMPLOYEE LIST</h2>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Image</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr th:each="employee : ${employees}">

SE2 – TUTORIAL 2
<td th:text="${employee.id}"/>
<td th:text="${employee.name}">
</td>
<td>
<img th:src="${employee.image}" width="100" height="100"/>
</td>
<td>UPDATE</td>
<td>DELETE</td>
</tr>
</table>
</div>
</body>
</html>

7. Run the web application again and visit http://localhost:8080/ on a browser (e.g.
Google Chrome, Firefox…)

 Implement the Employee Detail page:


1. Create a new method in EmployeeController which maps to the /detail/{id} URL.
Note that this URL contains a path parameter named id. Which is accessed using
the @PathVariable annotation.

SE2 – TUTORIAL 2
2. Create a new Thymeleaf template for the Employee Detail page named
employeeDetail.html under the folder src/main/resources/templates :

(*) Pay attention to the relationship between the employee attribute that was added
into the template from the controller method above and the variable with the same
name that is available inside the template.

3. Modify the employeeList.html template so that employee names become links to


employee details:

 Submission:
 Submit a zip file which contains your full source code project along with a Word
(docx) document containing the following screenshots:
1. Your finished project structure with all the relevant packages expanded.
2. The console inside IntelliJ IDEA when you run the Spring application.
3. The Employee List page displayed on a browser.
4. The Employee Detail page displayed on a browser.

SE2 – TUTORIAL 2

You might also like