Learn Servlet-JSP By Building A Social Network Website — Part XIV
Using the AJAX technique to implement the suggested friend list feature
Task 21: Implement Suggested Friend
In this task, we are going to implement a feature that displaying a list of users so that the current logged in user can add those to their friend list.
Note that we are NOT going to implement the real algorithm of suggesting a list of users that can be added as friends. Because the actual algorithms to suggest related data, like people can be our friends, that Facebook and other social network sites have been using are very complex and need to be based on a huge amount of data. These kinds of algorithms belong to machine learning algorithms. If you are interested in these kinds of algorithms, you can start with the one called Collaborative Filtering Algorithms.
What we are going to achieve is that we will load a list of users that are currently NOT in a particular user’s friend list.
The purpose of this task is to help you to learns:
- AJAX technique like the previous task
- Writing SQL sub-queries
Step 1:
Since we will apply the AJAX technique, we need to break the suggested user list fragment into a separate JSP file just like the friend-list.jsp.
In the WEB-INF folder, create a new JSP file called suggested-friend.jsp. Then, add the following lines at the top of the page:
Next, in the news-feed.jsp file, find the following <div> tags:
then, move the whole <div> tags to the suggested-friend.jsp file:
Then, back to the news-feed.jsp file, add the following line at the exact position that you have just moved the <div class=”friend-item”> tags:
<div id=”suggested-friend-list”></div>This is the <div> tag where the suggested user list will be attached with AJAX loading.
Step 2:
In the UserService class, create a new method called getSuggestedFriend() with the following implementation:
To get a list of users who are not currently on the friend list, we use the select query:
Select * From tbl_user Where id != ? And id not in (Select friend_to from tbl_friend where me = ?)I have used a sub-query to get a list of current friends:
Select friend_to from tbl_friend where me = ?And then we need to select users which are not on the friend list.
The condition id != ? needs to be checked to make sure the current logged in user will not be loaded in the suggested user list.
Step 3:
Add the following constant to the Keys class:
public static final String SUGGESTED_FRIEND_LIST = “suggestedfriendlist”;Step 4:
In the package net.learnbyproject.controller, create a new servlet called SuggestedFriendController with the URL pattern as “get-suggested-friend-list” and the implementation of the processRequest() method:
The business logic in this controller is very similar to the one in the FriendListController controller. We just have to change the key as Keys.SUGGESTED_FRIEND_LIST with value loaded from UserService.getSuggestedFriend() method. And then, forward the result to the page suggested-friend.jsp
We have almost done with the task.
Step 5:
Now we need to update the suggested-friend.jsp to display a list of users retrieved from SuggestedFriendController servlet:
The code is very similar to the one we have implemented in the friend-list.jsp.
Pay attention to the <button> tags of “Add friend”, in which I have added the id attribute with the value as ${friend.id}. We don’t need to use this value right now. But in the next task, we will need this one to process adding a new friend feature.
Step 6:
We now need to write jQuery code to send AJAX request and then attach the responding result to the tags <div id=”suggested-friend-list”></div>
Go back to the news-feed.jsp file, scroll down to the <script> tags and add the following jQuery code:
The AJAX code structure for loading the suggested user list is exactly the same as the one on the loading friend list. We just need to change:
url: mapped to the SuggestedFriendController servlet
success: attach the responding result to <div> tag with id of “suggested-friend-list”
And we have done the task.
Clean and build your project.
If everything has been done correctly, once having signed in, you will see a list of suggested users.
Be sure to check in the database to see if your suggested users are listed correctly.
In my case, for instance:
There is a total of 16 users in my database. I signed in with the user who has the first name as Dan. This guy currently has 7 friends on his list. So, there should be 8 users on the suggested list. (8 because we have excluded the current logged in user, which is Dan in this case)
Check out the complete source code if you get stuck:
https://github.com/stackera/learn-servlet-jsp/blob/main/Task21_SuggestedFriendList_AJAX.zip
