{"id":224,"date":"2020-02-06T13:20:00","date_gmt":"2020-02-06T13:20:00","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?p=224"},"modified":"2020-08-11T17:33:50","modified_gmt":"2020-08-11T17:33:50","slug":"create-the-user-profile-page-working-with-date-and-time","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/spring-boot\/create-the-user-profile-page-working-with-date-and-time\/","title":{"rendered":"Complete Application with Spring Boot \u2013 Part 5 – Create the User Profile Page (+ Working with Date and Time)"},"content":{"rendered":"

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\u00a0would kind of focus a little more on working with dates ad times with Thymeleaf.\u00a0 I recommend you watch the video for clarification. Also feel free to let me know in the comment section if you have any challenges.<\/p>\n

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

 <\/p>\n

Content<\/strong><\/p>\n

    \n
  1. Create the ProfileController<\/a><\/li>\n
  2. Modify the Date and Times<\/a><\/li>\n
  3. Display Country Acronym<\/a><\/li>\n
  4. Display Other Field<\/a><\/li>\n
  5. Work with Profile and Edit Profile Tabs<\/a><\/li>\n
  6. We are not Done Yet!<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    Follow the steps below:<\/p>\n

     <\/p>\n

    1. Create the ProfileController<\/strong><\/h5>\n

    Currently the profile.html page is served by the ApplicationController. We need to change that.<\/p>\n

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

       <\/p>\n

      2. Modify the Date and Time in the profile.html<\/strong><\/h5>\n

      a. Current time in 12 hour format with AM\/PM<\/strong><\/p>\n

      Find and adjust the time field using the markup below: This markup displays the current time<\/p>\n

      <span<\/span> th:text=<\/span>\"${#dates.format(#dates.createNow(), 'hh:mm a')}\"<\/span>><\/span><\/span>\r\n<\/pre>\n
      The output would be 12:00 AM<\/p>\n
       <\/p>\n
      b. Current time in 24 hour format<\/strong><\/p>\n
      Use the code below:<\/p>\n
      <span<\/span> th:text=<\/span>\"${#dates.format(#dates.createNow(), 'HH:mm')}\"<\/span>><\/span><\/span>\r\n<\/pre>\n
      The output would be 16:00<\/strong><\/p>\n
       <\/p>\n
      c. Current Date in Various formats<\/strong><\/p>\n
      Find and adjust the date field using the markup below. This displays the current date:<\/p>\n
      Markup:<\/strong> <\/p>\n
      <span<\/span> th:text=<\/span>\"${#dates.format(#dates.createNow(), 'dd MMM yyyy')}\"<\/span>><\/span><\/span>\r\n<\/pre>\n
      Output<\/strong>: 25.10.13<\/p>\n
      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.<\/p>\n
       <\/p>\n
      3. Display the Country Acronym<\/strong><\/h5>\n
      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.<\/p>\n
      Now we would work on the Country.html page to be able to edit the this fields in the Country table.<\/p>\n
      We also add an additional column to the Country table\u00a0 to hold the accronym.<\/p>\n
      All these are explained in the video. But not the SQL statement below to add an additional column to an SQL table.<\/p>\n
      ALTER<\/span> TABLE<\/span> country ADD<\/span> COLUMN<\/span> acronym VARCHAR<\/span>(3<\/span>);\r\n<\/pre>\n
       <\/p>\n
      If you made an error and wants to drop the table, use the code below:<\/p>\n
      ALTER<\/span> TABLE<\/span> country DROP<\/span> COLUMN<\/span> acronym;\r\n<\/pre>\n
       <\/p>\n
      4. Display Other Fields<\/strong><\/h5>\n
      First you need to display the Fullname of the person above the photo. You already know how to do this.<\/p>\n
      Next we need to add the JobTitle markup below the user photo. The markup is shown below:<\/p>\n
      <span<\/span> th:text=<\/span>\"${employee.jobtitleid.description}\"<\/span>><\/span><\/span>\r\n<\/pre>\n
      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.<\/p>\n
      Also change the three text fields to the right of the user details.<\/p>\n
       <\/p>\n
      5. Work on Profile and Edit Profile Tabs<\/strong><\/h5>\n
      The Profile tab contains the user details while the Edit Profiles table contains editable fields.<\/p>\n
      We would work on the Daily Activities table after now.<\/p>\n
      In the\u00a0 case of the Profile tab, simply change the names and the markups for the\u00a0 fields.<\/p>\n
      As for the Edit Profile tab, you\u00a0 need to add the names to the form text fields. This is so that you can submit the values to the server.<\/p>\n
      Also add\u00a0 FileUpload input to be able to change the user photo to upload new photo.<\/p>\n
      Finally, once you are sure that all is ok, then write the th:action of the form.<\/p>\n
       <\/p>\n
      6. We are not done yet!<\/strong><\/h5>\n
      In the next part, we would learn:<\/p>\n
        \n
      • how to upload a photo<\/li>\n
      • understand DynamicUpdate (update only changed fields)<\/li>\n
      • how to display a large image when a thumbnail is clicked<\/li>\n
      • add a related table to hold user bio details (@OneToOne)<\/li>\n
      • and more…<\/li>\n<\/ul>\n