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

Learn the powerfulness of Tag Library and apply to implementing the friend list feature

Task 17: Reading: Tag Library

Previously, you have learned how to manipulate data from requests and sessions using EL expression. You have also approached a custom EL function by implementing a Java method mapped with an EL expression.

However, when it comes to a bit more complex tasks such as looping, conditional execution, and even database-related tasks, EL shows its limitations even though it does support custom functions as we had done.

To facilitate and provide more tools for front-end related tasks in the JSP context, the Java Enterprise Edition platform provides a flexible choice called JSP Standard Tag Library or in short JSTL.

JSTL is a collection of pre-defined tags that can be used for simple to complex tasks in JSP environments. It can perform trivial code as Java fundamental code or it can provide complex tags for database manipulation.

Here is an overview of tags supported in JSTL:

JSTL Overview

Of those tag libraries, we will use the Core Tag Library most of the time. With the Core tag Library, we can achieve some trivial tasks such as variable declaration, loops, conditional statements, imports, and redirect.

You can read more about JSTL at https://en.wikipedia.org/wiki/JavaServer_Pages_Standard_Tag_Library

Task 18: Implement Friend List

In this task, we are going to show a user’s friend list with the application of Core Tag Library.

Step 1:

In order to use JSTL as well as Core Tag Library, add the following dependencies to the pom.xml file:

Then, don’t forget to download declared dependencies.

Once the download has been complete, you should see the two jar files like the below:

Step 2:

In the UserService class, add a new method called getFriendList() with the following implementation:

A user’s friend list is stored in the tbl_friend as we have explained in the database section. Therefore, all we need to do is to retrieve a list of friend ids based on the current user id.

String select = “select friend_to from tbl_friend where me = ?”;

Step 3:

Add the following new key in the Keys class:

public static final String FRIEND_LIST = “friend-list”;

Step 4:

In the NewsFeedController servlet, update the processRequest() method to get the friend list and attach to the session’s attribute with the key Keys.FRIEND_LIST:

Step 5:

In order to conveniently update the friend list, later on, we need to break the friend list segment into a separate JSP file.

Step 5.1

First, create a new JSP file called friend-list.jsp in the WEB-INF folder.

Then, add the following tag library import at the top:

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

Step 5.2:

In the news-feed.jsp file, locate the tag:

<div id=”online-list”> … </div>

and move the entire tag into the friend-list.jsp file.

Your final friend-list.jsp should be like this:

Note that in the original sample HTML template, I have added 4 friends represented by 4 <li> tags. But when moving those tags in the friend-list.jsp file, I had removed the other 3 <li> tags, kept only one. That is because we are going to display real data fetched from the database, we just need to keep one as a template.

Since we have established a session attribute with a list of friends in the NewsFeedController servlet, we just need to use appropriate tags in the Core Tag Library to traverse and display all the items in the session attached list.

Step 5.3

In the friend-list.jsp, update your <ul> tags as the following:

The usage of the tag <c:set> allows us to declare a variable, in our case, named “list” with the assigned value as ${sessionScope[Keys.FRIEND_LIST]}.

Then, to get each item in the list, we use the tag <c:forEach>:

<c:forEach var=”friend” items=”${list}”>

• The items attribute refers to the list we are traversing through.
• The var attribute represents for each item in the list.

Since each item in the list is a User’s instance, we just need to invoke each member using the dot (.) operator to extract the data as we had done previously.

Also, pay attention to that for each <li> tags, I have added an id attribute with the value of emailOrPhone:

<li id=”${friend.emailOrMobile}”>

This is for convenience when we want to show a friend’s details. But this is the task we are going to process later on.

Step 5.4

Go back to the news-feed.jsp file, and make an inclusion of the friend-list.jsp so that we can have a friend list for each user.

In the news-feed.jsp file, add the following line at the exact position of <div id=”online-list”> .. <div> that you had moved earlier:

<%@include file=”/WEB-INF/friend-list.jsp” %>

It’s time to test the new feature.

Clean and build your project.

If everything has been done correctly, once having logged in, you will see a list of friends (if any):

Make sure to check your database to login with a user that has already some friends. Then, you will be able to see that user’s friend list.

Check out the complete source code if you get stuck:

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

>> Read Part XIII