Tutorial 9 – Web Application

With Spring Boot (5)

 Contents:
 Create a simple blog web application.
 Use JPA-based authentication (login and registration) for this blog website
(based on the method learned in Lecture 9).
 Implement basic blog features:
o Register, login
o CRUD posts
o Home page showing some latest posts
o Author profile page showing author info and his posts
o Author details page with comments

 Part 1 - Basic requirements:

1. Go to start.spring.io and create a new Spring Boot project with the following
dependencies:
 Web
 Thymeleaf
 Spring Data JPA
 MariaDB or MySQL Driver
 Spring Security
 Validation
2. Depending on the type of your database server (either MySQL or MariaDB),
configure application.properies to connect to a database of your choice.

3. Configure Spring Security to allow everyone’s access to all URLs except URLs in
/member/ which are allowed for authenticated users only.

4. Follow the instructions from Lecture 9 to implement the registration feature:

 Create User and Post entity. User has a one-to-many relationship with Post (one
user may have many posts). A Post has title, excerpt (short summary of the post),
content, published time, and is associated with a User as its author.
 Create MyUserDetails which implements UserDetails and holds a User object
as an attribute.
 Create UserRepository which has a findByUsername method-based query.

SE2 – TUTORIAL 9
  Create a service named JpaUserDetailsService which implements
UserDetailsService and implement the loadUserByUsername method in it.
 Configure the SecurityFilterChain to use this JpaUserDetailsService.
 Create a PasswordEncoder bean (actual type: BCryptPasswordEncoder) for
hashing user password where necessary.
 Create a UserTemplate class to be used for the registration form, use Validation
annotations to validate user details in this class.
 Create an AuthController class which has:
o A method named register which shows an empty registration form in
response to a GET request to the URL /register. This form should show
an empty UserTemplate object.
o A method named registerHandle which receives the POST request
submitted by the registration form and: (1) creates and saves a User to
database if the received UserTemplate object is valid; (2) shows the
registration form with user-entered details along with error messages.
5. Create a MemberController class which has these controller methods:

 listPosts — shows a list of posts at URL /member/post/list

 addPost — shows a form to add a Post at URL /member/post/add (GET)
 addPostHandle — handles the submitted form to add a post at URL
/member/post/add (POST)
 deletePost — deletes a post when user visits /member/post/del/{id} (GET).
(*) It would be better if you shows a confirmation popup dialog (using JavaScript)
before redirecting to this URL to delete the post.
 editPost — shows a form to edit a Post at /member/post/edit/{id} (GET)
 editPostHandle — handles the submitted form to edit a post at the URL
/member/post/edit/{id} (POST)
6. Create a HomeController class which has these controller methods:
 home — shows the homepage listing 10 latest posts, showing post title, author,
published time and excerpt. The post title should be a link to the post’s detail page.
This homepage’s URL is http://localhost:8080/.
 authorProfile — shows the author profile page which shows all posts by a user
sorted by published time descending. URL: /author/{username}
 postDetail — shows all of a post’s details. URL: /view-post/{id}

SE2 – TUTORIAL 9
 Part 2 - Advanced requirements:

1. Create a Comment entity which has relationship with both User and Post. There can
be many comments per user, as well as many comments per post.

2. Display all comments below the post content in the post detail page.

3. When an unauthenticated user visits the post detail page, below the post content,
above the list of comments, show a text which says “Please login to comment”.

4. If an authenticated user visits the post detail page, shows a form to submit a comment
instead. Handles this form at: /write-comment/{id} where {id} is the post’s id.

 Run, debug & submit your project

Once finished, compress your project into a .zip file and submit the file to the tutorial’s
submission box.

SE2 – TUTORIAL 9