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
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. …
Apply the AJAX technique to implement adding a new post and comment features
Task 24: Implement Adding a New Post
In the last task, we built the feature that loaded a list of posts as well as associated comments.
In this task, we are going to implement a feature that allows users to add a new post.
AJAX techniques have been used for recent tasks. But all of those AJAX responses were JSP contents which were reasonable because those features contained quite a lot of data required in HTML formats.
However, there are some cases that we don’t need to return a response of HTML tags. …
Implement loading posts and comments features
Task 23: Implement loading posts and comments
In this task, we are going to implement features that showing posts and their comments on the news feed page.
For the currently logged-in user, we will show his/her posts as well as his/her friends’ posts. And comments for those posts, if any, will be fetched along as well.
In the Key class, add the following new constant variable:
public static final String POST_LIST = “postlist”;
Since now we are going to interact with posts and comments, we need to create model classes corresponding to the table
Applying the AJAX technique to implementing add a friend feature
Task 22: Add a user to the friend list
In the previous task, we have done loading a list of suggested users so that the currently logged-in user can select ones in the list to add as his/her friends.
As you can see from the suggested list, each friend item has a “Add friend” button.
In this task, we are going to implement the “Add friend” button so that when it is clicked, the associated user will be added to the currently signed-in user’s friend list.
Once the selected user has been added, the current user’s friend list needs to be re-loaded so that the new friend appears on the list. …
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. …
Learn AJAX and JSON by implementing loading friend list feature
Task 19: Reading: AJAX — JSON
AJAX, which utilizes many web technologies, allows developers to build asynchronous web applications. The asynchronous web application is a term referring to the environment where the clients can send requests and receive responses asynchronously. …
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. …
Learn how to handle upload file by implementing update user’s avatar feature
Task 16: Upload User Avatar
In this task, you are going to learn how to handle file uploading by building the feature allowing users to change their profile picture.
In order to be able to upload a file in general, we need two things:
<input>type of file so that users can select a file from their computers.
<input type=”file”>needs to be enclosed in
<form>tag with the attribute
So, in the
profile.jsp file, locate the
<span> tag with the attribute
id=”profile-button-add-cover”, then update the
<span> tag as the…
Learn Expression Language (EL) and how to apply to JSP pages
Task 14: Reading: Expression Language (EL)
As you have encountered so far, in JSP files, we can embed and execute normal Java code using scriptlet and expression tags to perform some actions such as getting data from the session, retrieving parameters from the request, and so on.
However, keeping embedding Java code in a JSP file can increase messy code that could lead to very hard to maintain our code. …
Learn how to use the filter technique to authenticate incoming requests
Task 13: Using Filter for authenticated checking
In the previous task, we used sessions to keep track of whether a user has logged in to our system.
Let’s take a look at the code we have used in the
NewsFeedController servlet to verify that a user has already authenticated:
And in the
As you would have noticed, the code for authenticating an already logged-in account:
sess.getAttribute(Keys.USER) != null
has repeated many times. That is not to say that in reality, the authenticated code can be much more complicated than just checking a session’s attribute. …