blog

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

In the previous part of this tutorial series, we implemented the sign-in and logout functionality for our Bucket List application. In this part of the series, we'll implement the back end and front end required for a user to add and display bucket list items.

Getting Started

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

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part2.git

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

Add Bucket List Items

Step 1: Create an Interface to Add Items

We'll start by creating an interface for the logged-in user to add bucket list items. Navigate to the templates folder inside the project directory, and create a file called addWish.html. Open addWish.html and add the following HTML code:

Open userHome.html and add a new menu item to link to the Add Wish page.

<li role="presentation"><a href="/showAddWish">Add Wish</a></li>

Save 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, click on the Add Wish link and you should have the Add Wish page displayed.

Step 2: Database Implementation

To add items to the bucket list, we need to create a table called tbl_wish.

Step 3: Create a Python Method to call the MySQL Stored Procedure

Since we'll be posting data to this method, we have explicitly declared it in the defined route.

When a call is made to the addWish method, we need to validate if it's an authentic call by checking if the session variable user exists. Once we have validated the session, we'll read the posted title and description.

Save all the source code and restart the server. Point your browser to http://localhost:5002 and sign in using a valid email address and password. Once signed in, click on the Add Wish link. Enter the title and description for your wish and click Publish. On successfully adding the wish, it should redirect to the user home page. Log in to the MySQL database and you should have the wish in your tbl_wish table.

Display a Bucket List Item

Step 1: Create a Stored Procedure to Retrieve a Wish

Let's create a MySQL stored procedure which will get the wishes created by a user. It will take the user ID as a parameter and return a data set of wishes created by the particular user ID.

As seen in the above code, this method can only be called with valid user session. Once we have validated for a valid user session, we'll create a connection to the MySQL database and call the stored procedure sp_GetWishByUser.

Save the above changes and restart the server. Once logged in with a valid email address and password, check your browser console and you should have the wish list retrieved from the database as shown:

Add the above HTML code to the jumbotron div in userHome.html. Here is how it looks:

Now, what we'll do is create the above shown list-group div dynamically for each wish list entry and append it to the jumbotron div. Inside the success callback of the getWish function call, create a div as shown:

Save the above changes and restart the server. Log in using a valid email address and password and you should be able to see the list of wishes created by the particular user.

Conclusion

In this tutorial, we implemented an interface for a logged-in user to create a wish. We also implemented the required methods and database stored procedure to fetch and display the created wishes in the user home page.

In the next part of this series, we'll see how to implement the Edit and Delete functionality for the wish list shown in the user home page.