Creating a Web App From Scratch Using Python Flask and MySQL: Part 8

In the previous part of this tutorial series, we populated the dashboard page of our application with the wishes created by different users. We also attached a like button to each wish so that a user could like a particular wish.

In this part of the series, we'll see how to toggle the like/unlike display and show the total number of likes received by a particular wish.

Getting Started

Let's start by cloning the previous part of the tutorial from GitHub.

Once the source code has been cloned, navigate to the project directory and start the web server. 

Point your browser to http://localhost:5002/ and you should have the application running.

Adding a Like Count

We'll start by implementing a feature to show the total number of counts a particular wish has garnered. When a new wish gets added, we'll make an entry into the tbl_likes table. So modify the MySQL stored procedure sp_addWish to add an entry into the tbl_likes table. 

As seen in the above stored procedure code, after inserting the wish into the tbl_wish table, we fetched the last inserted ID and inserted the data into tbl_likes table.

Next, we need to modify the sp_GetAllWishes stored procedure to include the number of likes each wish has garnered. We'll make use of a MySQL function to get the total number of wishes. So create a function called getSum which will take the wish ID and return the total number of likes.

Now, call the above MySQL function called getSum in the stored procedure sp_GetAllWishes to get the total number of likes for each wish.

Modify the getAllWishes Python method to include the like count. While iterating the result returned from the MySQL stored procedure, include the like field as shown:

Modify the CreateThumb JavaScript method to create an additional span which we'll use to display the like count.

And append the likeSpan to the parent paragraph p. Here is the modified CreateThumb JavaScript function.

Include the like parameter while calling the CreateThumb JavaScript function from the success callback of the jQuery AJAX call to /getAllWishes.

Save the changes and restart the server. Once signed in to the application you should be able see the like count corresponding to each of the wishes.

Dashboard With Like

Show If a Wish Is Liked

Seeing the likes under each wish, it isn't very clear whether the logged-in user has liked the wish or not. So we'll show a proper message like You & 20 Others. In order to implement that, we need to modify our sp_GetAllWishes to include a bit of code indicating whether the logged-in user has liked a particular wish or not. To check if a wish has been liked, we make a function call. Create a function called hasLiked which takes in user ID and wish ID as the parameters and returns whether the wish has been liked by the user or not.

Now call the above MySQL function hasLiked inside sp_GetAllWishes to return an extra field in the returned data set indicating the user like status.

Open app.py and modify the call to the MySQL stored procedure sp_GetAllWishes to include the user ID as a parameter.

Now modify the getAllWishes method to include the like status of the user for a particular wish. Modify the code to include HasLiked in the created dictionary.

Inside the CreateThumb JavaScript function, we'll check for HasLiked and add the HTML accordingly.

As seen in the above code, we are showing the like count if the user has not liked a particular wish. If the user has liked the wish we are showing a more descriptive message.

Dashboard With Like Status

Refreshing the Like Count

At the moment when we click on the like button, the like status gets updated in the database, but doesn't change in the dashboard. So let's update it in the success callback of the AJAX call on the like button click.

We'll start by making a change in the MySQL stored procedure sp_AddUpdateLikes. Earlier we were passing in the like status, 1 for a like and 0 for unlike. We'll modify that and toggle the like/unlike in the stored procedure. Open sp_AddUpdateLikes and select the like status into a variable and check the variable status. If the variable status is a like, we'll update the status to unlike and vice versa. Here is the modified sp_AddUpdateLikes stored procedure.

In the CreateThumb JavaScript function, assign an ID to the likeSpan that we created earlier, so that we can update the status as required.

Open up app.py. Inside the addUpdateLike method, once the data has been updated successfully, we'll fetch the wish like count and status using another stored procedure call. So create a MySQL stored procedure called sp_getLikeStatus. Inside sp_getLikeStatus we'll be calling the already created MySQL functions getSum and hasLiked to get the status.

Once a call to sp_AddUpdateLikes from the Python method addUpdateLike has been made, close the cursor and connection.

Now make a call to the stored procedure sp_getLikeStatus.

Return the like count and like status along with the response.

In dashboard.html, in the success callback of the AJAX call made to the addUpdateLike method, parse the returned response and based on the like status show the like count.

Save the changes, restart the server, and sign in using valid credentials. Once on the dashboard page, try to like a particular wish, and see how the like status gets updated accordingly.

Wrapping It Up

In this part of the series, we implemented the like/unlike functionality for the wishes displayed in the dashboard page. In the coming parts of the series, we'll implement some more new features in the application and refine some of the existing features.

Do let us know your thoughts and suggestions, or any corrections, in the comments below. Source code from this tutorial is available on GitHub.

Tags:

Comments

Related Articles