Learn Servlet-JSP By Building A Social Network Website — Part XVIII

Implement showing popup details and searching friends features

Task 26: Implementing Showing Pop-up Details of a Friend

In this task, we are going to implement the feature that when the currently signed-in user hovers on a friend on his/her friend list, we will show the pop-up displaying the hovering friend’s details.

For the demonstration, in the pop-up, we will show avatar, full name, the number of posts, and the number of comments.

Step 1: implement service methods to count the number of posts and comments

In the PostService class, create a new method called countUserPosts() with the following implementation:

All we need to do is to write a select query with the count() function on the tbl_post and the where condition with the provided user id as the parameter.

Also, in the PostService class, create a new method called countUserComments() with the following implementation:

This method is similar to the last one with the change of the tble_comment table.

Step 2: implement the controller

In the package net.learnbyproject.controller, create a new servlet called FriendPopupController mapped with the URL pattern “/friend-popup” and with the implementation of the processRequest() as follows:

I believe the business logic is quite straightforward and they should be self-explained.

The response from this controller is also a JSON, but with more data included:

Step 3: implement frond-end code

At the end of the friend-list.jsp file, add the following <script> tag to perform ajax requests when a friend item is being hovered:

There are some points we need to discuss:

Now, the feature should be ready for a test.

Check out the complete source code for this task:

https://github.com/stackera/learn-servlet-jsp/blob/main/Task26_ShowFriendPopup.zip

Task 27: Implementing Searching Friends

In this task, we are going to implement the searching friend feature in both ways: traditional method with form submission and ajax method.

Step 1: Implement service method

In the UserService class, create a new method called searchFriend() with the following implementation:

Since we support users to search a subtring in a string, in the select query we need to apply the “like” operator, rather than using the equal (=) sign for comparison.

For instance, if users input the keyword “dan”, then, all the names containing that keyword should be shown up in the result.

Also, we need to search for both first name and last name, that’s why in the where statement we specify to look for both first_name and last_name columns with the OR operator.

The like operator requires to have the percent signs (%) prepending and appending to the searching keyword so that it can look for subtrings instead of the whole string to match. However, pay attention to that it is not allowed to place the percent signs directly in the select query; rather, we need to prepend and append the percent signs in the setString() method.

Step 2: Create search-result fragement page

Since we support end users to search for friends in both ways: traditional form submission and AJAX method, it is necessary to break the search result into a spearate JSP page so that we can update its conten on the fly when AJAX request has been done.

In the WEB-INF folder, create a new JSP file called search-result.jsp.

Then, perform the following three tasks:

1: Add the core tag lib import at the top of the page

<%@taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core" %>

2: in the search.jsp file, locate and move the entire <div class=”search-result-box-content-item”> .. </div> to the search-result.jsp

Your search-result.jsp file so far should be like:

3: back to the search.jsp file, include the search-result.jsp file at the exact position of the <div class=”search-result-box-content-item”> tag that has just been moved

Step 3: Update top_nav.jsp to allow search form submission

In the top_nav.jsp file, locate and surround the <div class=”col-md-6" id=”user-tools-left”> .. </div> tags with <form> as follows:

There are some changes in comparison with the original HTML template:

1: the <form> tag:

• The form action is mapped with the URL pattern “search”, which is mapped with the search controller that we are going to create very soon
• The method is get so that if desired, users can input directly in the web browser address bar

2: the <input> tag

• The id attribute is added so that later, we can trigget the key press events to allow searching results to be shown as the user is typing

3: the <button> tag

• The type as submit is added to allow the user to submit the form

Step 4: Update search.jsp with AJAX call

In your search.jsp file, locate the <script> tag and update with the following code:

There are some important points needed to be clarified:

Step 5: Implement search controller

Now it’s time to implement the searhc controller to conduct searching requests from the user.

In the package net.learnbyproject.controller, create a new servlet called SearchController mapped with the URL pattern “/search” and with the implementation of the processRequest() method as follows:

The controller business logics are quite straightforward.

Just pay a little attention to the if — else blocks:

• If the request action is “ajax-search”, we return the result as in the search-result.jsp page
• Otherwise, which means the request action is form submission, we return the search.jsp page

Step 6: Update the search-result.jsp page

The final step in this task would be to update the real data form the searching results.

Update your search-result.jsp file as the following:

There is only one new snippet in the above code in comparison with the previous ones:

<c:if test = “${list.size() == 0}”>
    <h4>No results</h4>
</c:if>

We use the if tag in the core tag library to show the text “No results” in case the result list is empty.

Now, everything should be ready for a test.

Check out the complete source code for this task:

https://github.com/stackera/learn-servlet-jsp/blob/main/Task27_Search.zip

This is the end of the Servlet — JSP tutorial