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

In the previous part of this tutorial series, we implemented the required functionality for a logged-in user to add a wish. We also saw how to display the wishes entered by a user on the user home page.

In this part, we'll implement the functionality for editing and deleting the wishes entered by a user.

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.

Editing the Wish List

Step 1: Display the Edit Icon

We are already binding the received data using jQuery to our HTML. We'll modify that code and use jQuery templates to make it easier to bind data. We'll also add an edit icon to our HTML to provide a way to update the wish. Open userHome.html and include a reference to jQuery templates.

Remove the existing list-group div and replace it with the following HTML code:

Inside the UL with class list-group we'll be binding our data. Define a listTemplate as shown in the body of the HTML:

Modify the jQuery AJAX success callback to bind the data to the listTemplate.

Also, include some styles in userHome.html:

Save all the changes and restart the server. Point your browser to http://localhost:5002 and sign in using a valid email address and password. Once logged in, you should be able to see the wishes created by the user.

User Home with Edit Icon

Step 2: Display the Edit Popup

We'll be using Bootstrap to show a popup to provide an interface to edit the wishes. Include a reference to Bootstrap in userHome.html.

Once the reference has been included, add the following HTML to userHome.html.

The above HTML will serve as the popup. When the user clicks the edit icon the popup will show. We have already added the attributes data-target and data-toggle which will trigger the modal popup.

Save the above changes and restart the app. Once signed in to the application, click on the edit icon and you should be able to view the popup.

Edit Wish Popup

Step 3: Populate the Edit Popup

When the user clicks the edit icon, we'll show the update popup with the title and description to update. In order to get started, first we need the wish ID to fetch the particular wish details once the user clicks the edit icon. So modify the jQuery template code to include an extra attribute data-id on the edit anchor element.

We have also attached an onclick event to call the method Edit. Inside the Edit function, we'll make an AJAX call to a python method called getWishById which will return the wish details.

Next, open up app.py and create a method called getWishById. Using this method, we'll get the particular wish details from the database.

As you can see in the above method, we have passed in the wish ID to this method and it gets the data from the database using the user ID and wish ID. Once the data has been fetched, it converts that data into a list and then returns it as JSON data.

Next, let's create the required MySQL stored procedure to fetch data from the database.

The code shown above is the stored procedure to get particular wish details using the wish ID and user ID.

Save the changes and restart the server. Once signed in to the application, click on the edit icon and you should have the details logged in your browser console.

To bind the received data to the HTML popup, first remove the data-target and data-toggle attributes from the edit icon anchor tag. Then add the following code to the Edit JavaScript function success callback to populate the popup and trigger it.

Save the changes and restart the server. Once signed in to the application, try to click the edit icon and you should have the popup with the title and description.

Populated Edit Pop Up

Step 4: Update Wish Details

To implement the update functionality, let's first create a MySQL stored procedure.

As seen in the stored procedure above, we'll be passing in the modified title and description along with the ID of the wish and the user to update the details in the database.

Next, let's create a new method called updateWish to update the details. Here is the updateWish method:

As seen in the above code, after validating for a valid session, we have collected the posted data and called the stored procedure sp_updateWish to update the details.

In order to call the updateWish method, we need to attach an event on the Update button click. So, name the update button btnUpdate and attach an onclick event as shown:

As seen in the above code, we have collected the editId from localStorage, so inside the Edit function save the ID into localStorage.

Wrap up the getWish AJAX call into a function, so that we can call it again once the data has been updated.

Call the GetWishes function in the success callback of the update AJAX call.

Save all the changes and restart the server. Once signed in to the application, try to edit the available wishes created by the user.

Deleting a Wish

Step 1: Show a Confirmation Popup

Add the following HTML code to userHome.html.

Add a delete icon inside the listTemplate by adding the following HTML:

On clicking on the above delete icon, we'll call a JavaScript function called ConfirmDelete where we'll trigger the confirmation popup.

Save the changes and restart the server. Once signed in, click on the delete icon in the wish list and you should be able to see the confirmation popup.

Delete Confirmation Popup

Step 2: Delete a Wish

To implement the Delete wish functionality, first let's create the MySQL stored procedure to delete.

The above procedure takes in the wish ID and user ID and deletes the corresponding wish from the database.

Next, let's create a method inside app.py to call the procedure sp_deleteWish

We'll create a method called deleteWish for wish deletion.

In the above method, we have first validated the session. Once we have validated the user session, using the wish ID and the user ID we have called the stored procedure sp_deleteWish.

To call the above method deleteWish, add an onclick event to the Delete button in the delete confirmation popup.

Create a JavaScript function called Delete, and inside Delete make an AJAX call to the python method deleteWish.

On the success callback of the above Delete function, we'll check for the returned status, and if it's OK we'll hide the modal popup and reload the wishes.

Save the changes and restart the server. Once logged in to the application, try to delete a wish from the user home page.

Conclusion

In this part of the series, we saw how to implement the Edit and Delete wish functionality for our Bucket List Application. In the next part of this series, we'll implement pagination for our user home list and also implement a few more features.

Source code from this tutorial is available on GitHub.

Do let us know your thoughts in the comments below!

Tags:

Comments

Related Articles