Adding Python Apps in Flask Web App
Above is a snippet of my code on Github which shows the original code I was using for my Python apps in my Flask Portfolio App. Github is a good way to version control, I can work on my app on my MacBook safe in the knowledge that I can rollback to the last known good config that I have pushed to Github. I encountered a couple of issues, here are the main ones.
- When I posted the form, I was directed to a blank page on submission. The blank page returned was the index page, although the index page appeared to be working fine.
- The add_numbers_post function returned the addition of two numbers, however the subtract_numbers_post function also returned the add_numbers_post function.
- The index page returned as blank really had me puzzled. What escaped me was the fact that the POST method returns a different view of the index page than the GET method of the index page. I hand not included a GET request for the python add_numbers function.
- There was an issue with submitting two separate forms on a single page. I could look into solving this issue but, as I need to prioritise the important things, the simpler thing to do is to put these forms on separate pages and link to them from the python_apps page.
When I created a html page to render the add numbers page I ran into a number of stylistic issues. On areas of the page the containers seemed to be almost thrown together. For instance, there was a section of green at the bottom where there should be nothing. These issues often happen when you are missing closing html tags. I am using BootStrap for my app and when I look at the source code in my text editor it can feel overwhelming to try and match up each tag, to find those that aren't closed.
The more effective way is to use the inspect element tool. I am using Chrome so if you right click on the webpage you will see the option to 'Inspect'. This tool allows you to highlight your code in the console and a corresponding element on the page lights up. Instead of scrawling over an entire section of code to catch that trailing tag, this tool allows you to pinpoint where the issue is graphically.
Within the BootStrap Freelancer template, the form tag has a few attributes within it by default that need to be changed.
<form name="sentMessage" id="contactForm" action="/add_numbers" method="POST">
'Form name' and 'id' can be left as they are. The action on the form needs to be changed to direct to the specified html POST request page, in this case /add_numbers. The method on the form is "." by default with the BootStrap template. This needs to be changed to "POST" so the form knows what to do.
App.py is the controller file within my app. It is where I write the python logic to the app. Within this file I needed to change the wrapper above the add_numbers function to include the POST request for handling the form submission:
You may have noticed that there are other errors, like the logic to the subtract_numbers_post function. I have found that it is easier to focus my attention when I first prioritise. In this instance I was concentrated on obtaining a different result from the second form on the python_apps page, I would then focus on the logic once a solution was reached. Another thing I want to emphasise is that you can progress without knowing everything and being uncertain about things. This action creates momentum and the practical space required to spot your knowledge gaps.
Did you find this blog post useful? Are you currently building a project in Flask? Do you see a more efficient way of solving the form submission issue I had? If so I would love to hear from you in the comments section below or by dropping me an e-mail.