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.

Image for post
Image for post

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. …


Apply the AJAX technique to implement adding a new post and comment features

Image for post
Image for post

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

Image for post
Image for post

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.

Step 1:

In the Key class, add the following new constant variable:

public static final String POST_LIST = “postlist”;

Step 2:

Since now we are going to interact with posts and comments, we need to create model classes corresponding to the table tb_post and tbl_comment. …


Applying the AJAX technique to implementing add a friend feature

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

Task 19: Reading: AJAX — JSON

For the next tasks, we are going to apply AJAX (short for Asynchronous JavaScript And XML) in some features, and also this is one of the most common techniques used in web development, encountering the AJAX technique is inevitable.

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.

Step 1:

In order to be able to upload a file in general, we need two things:

  • An <input> type of file so that users can select a file from their computers.
  • The <input type=”file”> needs to be enclosed in <form> tag with the attribute enctype=”multipart/form-data”

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

Image for post
Image for post

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 ProfileController servlet:

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. …

About

Sera Ng.

Breath . Live . Tech . Breath

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store