Create the User Profile Page (+ Working with Date and Time)

Create the User Profile Page

In this part, we are going to be creating the user profile page for our application. I’m going to provide a step by step on how to do this. We would kind of focus a little more on working with dates ad times with Thymeleaf.  I recommend you watch the video for clarification. Also feel free to let me know in the comment section if you have any challenges.

Remember that in the previous lesson, explained how to encrypt your password using BCrypt Password Encoder (Video here). So before we proceed on this lesson, i recommend you make sure that all the passwords are encrypted. See the Video Playlist

 

Content

  1. Create the ProfileController
  2. Modify the Date and Times
  3. Display Country Acronym
  4. Display Other Field
  5. Work with Profile and Edit Profile Tabs
  6. We are not Done Yet!

 

Follow the steps below:

 

1. Create the ProfileController

Currently the profile.html page is served by the ApplicationController. We need to change that.

  1. Create a ProfileControlle file in the controllers package
  2. Move the profile() method from the ApplicationController to the ProfileController
  3. Adjust the links in the pages to link to the “/profile” endpoint
  4. Test the application to make sure the changes are working

 

2. Modify the Date and Time in the profile.html

a. Current time in 12 hour format with AM/PM

Find and adjust the time field using the markup below: This markup displays the current time

<span th:text="${#dates.format(#dates.createNow(), 'hh:mm a')}"></span>

The output would be 12:00 AM

 

b. Current time in 24 hour format

Use the code below:

<span th:text="${#dates.format(#dates.createNow(), 'HH:mm')}"></span>

The output would be 16:00

 

c. Current Date in Various formats

Find and adjust the date field using the markup below. This displays the current date:

Markup:

<span th:text="${#dates.format(#dates.createNow(), 'dd MMM yyyy')}"></span>

Output: 25.10.13

Now, you can try to adjust the formats specification by changing the case of each of the components. Then you can see what the output would look like.

 

3. Display the Country Acronym

We know that countries and state can be represented by 2-letter or 3-letter acrynyms. For example, United States (USA), Hungary(HUN), Nigeria (NGA) etc.

Now we would work on the Country.html page to be able to edit the this fields in the Country table.

We also add an additional column to the Country table  to hold the accronym.

All these are explained in the video. But not the SQL statement below to add an additional column to an SQL table.

ALTER TABLE country ADD COLUMN acronym VARCHAR(3);

 

If you made an error and wants to drop the table, use the code below:

ALTER TABLE country DROP COLUMN acronym;

 

4. Display Other Fields

First you need to display the Fullname of the person above the photo. You already know how to do this.

Next we need to add the JobTitle markup below the user photo. The markup is shown below:

<span th:text="${employee.jobtitleid.description}"></span>

Then you also need to add your twitter handle. I don’t think we have this field in our table. So we add it both in SQL and in the Model. Do same with other field above the twitter handle.

Also change the three text fields to the right of the user details.

 

5. Work on Profile and Edit Profile Tabs

The Profile tab contains the user details while the Edit Profiles table contains editable fields.

We would work on the Daily Activities table after now.

In the  case of the Profile tab, simply change the names and the markups for the  fields.

As for the Edit Profile tab, you  need to add the names to the form text fields. This is so that you can submit the values to the server.

Also add  FileUpload input to be able to change the user photo to upload new photo.

Finally, once you are sure that all is ok, then write the th:action of the form.

 

6. We are not done yet!

In the next part, we would learn:

  • how to upload a photo
  • understand DynamicUpdate (update only changed fields)
  • how to display a large image when a thumbnail is clicked
  • add a related table to hold user bio details (@OneToOne)
  • and more…