Learn Servlet-JSP By Building A Social Network Website — Part VIII
Learn how to read and save data to the database by implementing the user profile feature.
Task 12: Implement Profile page
In this task, you are going to be guided to implement the user profile page, which includes two main subtasks:
- When a user has logged in, their account details should be displayed on the profile page
- Users can edit their details and save into the database
Step 1:
Once a user has signed in, their name and avatar should be displayed.
Let’s open the top_nav.jsp file:
At the top of the page, add the following imports:
<%@page import=”net.learnbyproject.helper.Keys”%>
<%@page import=”net.learnbyproject.model.User”%>Then, locate the <ul> tag and update the first <li> tag as the following:
Note I updated the href attribute value of the <a> tag to be “profile” which will be mapped to a controller that we are going to create in this task, rather than profile.jsp as before. Because the profile.jsp now is located in the Web-INF folder which users cannot directly access from the web browser.
Since we need to extract the user’s details which have already been stored in the session when logging in, we need to use JSP scriptlet tags to get the current User instance first:
<% User user = (User)session.getAttribute(Keys.USER);%>
From now on, it is convenient and easy to display any information about the current user.
To display the user’s avatar using base64 string:
<img class=”avatar24" src=”data:image/png;base64,<%= user.getAvatar() %>”>And to display the user’s first name:
<%= user.getFirstName() %>Step 2
Open the class Keys and add the following constant:
public static final String SUCCESS = “success”;Step 3
Open the profile.jsp file
At the top of the file, add the following imports:
<%@page import=”net.learnbyproject.helper.Keys”%>
<%@page import=”java.util.Objects”%>Then, scroll down a little bit, find the <div> with the class “profile-header-top” and update the tag as follows:
Because this is the profile page, we display the user’s avatar as well as their full name.
Next, scroll down and locate the <div> tag with the class “overview-form” and update its contents as follows:
The first update is we need to add a tag and corresponding code to display error or success message when the profile updating action is performed:
Next, the <form> tag needs to be updated with the action and method attributes:
<form action=”profile” method=”post”>The action is updated with the URL of “profile”. This is the URL pattern mapped with a controller we are going to create very soon in this task.
Next, the user’s details are shown in the text inputs so that they can change if needed. For instance, to display the first name:
<input required type=”text” name=”first-name” value=”<%=user.getFirstName()%>” maxlength=”30" />The last thing that needed to be updated in the form is the submit button:
<button name=”action” value=”update-profile” type=”submit”>Save Changes</button>Notice that I have added the name “action” and the value as “update-profile”.
That is because we are going to use the same controller for both showing details and saving changes, we need a way to distinguish the user’s desired action. If the form is submitted with the parameter name of “action” as “update-profile” value, then we know that the user wants to save changes in the profile.
Step 4
In the package net.learnbyproject.controller, create a new servlet called ProfileController with URL pattern as “profile”, and update the processRequest() method as follows:
This controller will check whether a user has already logged in or not in order to forward it to the profile.jsp page or to redirect to the login.jsp page respectively.
Let’s stop here for a moment and run our web application (don’t forget to clean and build the project first).
Login first and you will see the first name and the avatar displayed in the top navigation:
Then, click on the first name on the top navigation to go to the profile page, and you should see the user’s bigger avatar and details:
Now users can view their account information. Let’s update the code so that they can edit and save some changes as well.
Step 5:
In the UserService class, create a new method called updateUser() with the following implementation:
Step 6:
Go back to the controller ProfileController and update the processRequest() method as follows:
As you can see, since we use the same controller for both viewing and updating profile information, we need to verify if the current user actually wants to perform updating action by checking if the parameter “action” exists and as “update-profile”:
String action = request.getParameter(“action”);
if (sess.getAttribute(Keys.USER) != null && action !=null && action.equals(“update-profile”)) { //other code}
Another thing that needs to pay attention to is that the current user may want to change their current email address as well.
That means if the input of the new email address or phone number, the new email/phone should be stored in the database. That’s why we should not reply to the inputted email/phone value to identify the updating row in the database.
Rather, we should use the email/phone in the current session object:
String currentEmailOrMobile = ((User)sess.getAttribute(“user”)).getEmailOrMobile();The last thing needed to be noticed is that once the updating action has been conducted successfully, we need to update the user object in the session with the new details:
// update session
User user = UserService.getUser(newEmailOrMobile);sess.setAttribute(Keys.USER, user);
Otherwise, we may end up showing out-of-date details.
Now let’s run the web application and try to update some information.
If everything is done correctly, after hitting the “Save changes” button, you will see the successful message:
If you get stuck, check out the complete source code:
https://github.com/stackera/learn-servlet-jsp/blob/main/Task12_Impl_Profile.zip
