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

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.

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.

Bucket List App Home Page

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 app.py and add a new route and method to display the Add Wish page.

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

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.

Add Bucket List Item

Step 2: Database Implementation

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

tbl_wish will have title, description and the ID of the user who created the wish.

Next, we need to create a MySQL stored procedure to add items to the tbl_wish table.

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

Create a method called addWish in app.py.

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.

Once we have the required input values, we'll open a MySQL connection and call the stored procedure sp_addWish.

After we have executed the stored procedure, we need to commit the changes to the database.

Here is the complete addWish method.

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. 

Step 2: Create a Python Method for Retrieving Data

Next, let's create a Python method which will call the sp_GetWishByUser stored procedure to get the wishes created by a user. Add a method called getWish in app.py.

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.

Once we have fetched data from MySQL, we'll parse the data and convert it into a dictionary so that it's easy to return as JSON.

After converting the data into a dictionary we'll convert the data into JSON and return.

Here is the full getWish method.

Step 3: Binding JSON Data to HTML

When the user home page is loaded, we'll call the getWish method using jQuery AJAX and bind the received data into our HTML. In userHome.html add the following jQuery AJAX script:

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:

Now, we need to iterate over the JSON data and bind it into the HTML. We'll be using bootstrap list-group to display our wish list items. Here is the basic template for list-group:

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

list-group in User Home

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:

We'll be cloning the above div to create the list-group div for each wish list item. Next, parse the returned JSON string into a JavaScript object. 

Now, iterate over wishObj and for each wish item, clone a new div and append it to the jumbotron div.

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.

User Home Page Populated with Wishes

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.

Source code from this tutorial is available on GitHub.

Do let us know your thoughts in the comments below!

Source: Tuts Plus

About the Author

Comments

  1. … [Trackback]

    […] There you will find 78324 more Infos: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  2. … [Trackback]

    […] Read More: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  3. … [Trackback]

    […] Read More: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  4. … [Trackback]

    […] There you will find 62153 more Infos: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  5. … [Trackback]

    […] There you will find 43315 more Infos: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  6. … [Trackback]

    […] Read More: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  7. … [Trackback]

    […] Read More here: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  8. … [Trackback]

    […] Read More Infos here: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  9. … [Trackback]

    […] Read More: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  10. click here says:

    … [Trackback]

    […] There you will find 63468 more Infos: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  11. … [Trackback]

    […] Read More here: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  12. … [Trackback]

    […] Read More: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  13. … [Trackback]

    […] Find More Informations here: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  14. … [Trackback]

    […] Read More Infos here: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  15. … [Trackback]

    […] Informations on that Topic: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  16. … [Trackback]

    […] There you will find 93367 more Infos: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  17. … [Trackback]

    […] Read More: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  18. … [Trackback]

    […] Read More here: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]

  19. … [Trackback]

    […] There you will find 34573 more Infos: designncode.in/creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-3/ […]