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

In the previous part of this series, we implemented image upload functionality for the users while adding a wish. We also added a few more options related to a user's wish on the Add Wish page. In this tutorial, we'll take it to the next level by implementing the functionality to like 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.

Creating the Dashboard UI

We'll be creating a new page called dashboard where all the wishes from different users will be displayed. Any user can like or comment on the wishes displayed in the dashboard. So navigate to the templates folder and create a file called dashboard.html. Open up dashboard.html and add the following HTML code:

Open up app.py and create a new route called /showDashboard. Using this route we'll render the dashboard page.

Modify the /validateLogin method to redirect the user on successful sign-in to the dashboard page instead of the user home page.

Save the above changes and restart the server. Point your browser to http://localhost:50002 and sign in using a valid email address and password. Once signed in, you should be able to see the dashboard page.

Dashboard Page

As seen in the image above, we'll be showing all the wishes created by different users and giving access to other users to like them.

Populate the Dashboard

First, we need to fetch the data from the database to populate the dashboard. So let's create a stored procedure to get the wishes created by users.

The above stored procedure will fetch all the wishes from tbl_wish which are not marked as private.

Next, we'll create a new Python method to call the stored procedure sp_GetAllWishes. Open app.py and add the following code for the getAllWishes method.

In the above method, we have first checked for a valid user session and then created a MySQL connection. Using the MySQL connection conn, we used a cursor to call the stored procedure sp_GetAllWishes to get the required data. Once the data has been fetched, we have parsed the result and returned a proper JSON string.

We'll call the above created /getAllWishes method when the dashboard page loads. Open dashboard.html and, using jQuery AJAX, make a call to /getAllWishes on document.ready.

Save the above changes and restart the server. Once logged in to the application, check your browser console and you should be able to view the data fetched from the database.

Using the data from the response, we'll populate our dashboard page. First, remove the HTML code between the .well div from dashboard.html.

In the success callback of the AJAX call, parse the response to a JavaScript object.

We'll need to create the thumbnail HTML code dynamically using jQuery for each set of three wishes in a row. So first let's create a JavaScript function to create the HTML code dynamically. Here is the HTML code that we'll be creating dynamically using jQuery:

We'll name the JavaScript function CreateThumb. In this function, we'll create the HTML elements and append them to their parent elements to get the HTML code shown above.

The above code is quite straightforward so I won't be going into the details.

Moving forward, we'll iterate the parsed JSON response and create the HTML using the CreateThumb function. We plan to display three wishes per row. So we'll check for that and create a new row each time for three wishes. Add the following code to the success callback of the AJAX call in dashboard.html.

Save the changes and restart the server. Sign in to the application and when on the dashboard page, you should be able to view the wishes added by different users, with an option to like them.

Next, let's add a click event to the like buttons under the wishes thumbnails. Since we have dynamically created the buttons, we'll need to attach the click event to the buttons using the jQuery on method. 

Implementing Like Functionality

Let's start by creating a table which will keep track of the likes a particular wish has garnered. Create a table called tbl_likes

Now whenever a user likes or dislikes a particular wish, we'll update this table. Let's create a MySQL stored procedure to update the above table.

In this stored procedure, we have simply checked if the person has already liked the wish or not. If he or she has already liked, then we have updated that like entry or added a new one.

Let's create a Python method to call the above stored procedure.

This is the Python method which will call the stored procedure sp_AddUpdateLikes. In this method we have checked for a valid user session and then passed the wish ID and like status to the stored procedure for update. When the user clicks the like button, we need to call the Python method /addUpdateLike. So add the following code to the like button click event function in dashboard.html

For the time being, we have hard-coded the value of like in the above call. So save the changes and restart the server. Sign in to the application and click on the like button under any wish thumbnail. Now check tbl_likes and you should have an entry in there.

Conclusion

In this part of the tutorial, we populated the dashboard page of our application with the wishes created by different users. We also attached a like button to each so that users can like a particular wish. In the next part, we'll see how to toggle the like display and show the total number of likes received by a particular wish.

Post your suggestions or any corrections in the comment box below. Source code from this tutorial is available on GitHub.

Tags:

Comments

Related Articles