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.

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

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

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