An example of a Flask application done with the Flask command line tool

An example of a Flask application done with the Flask command line tool
An example of a Flask application done with the Flask command line tool

An example of a Flask application done with the Flask command line tool

In a previous post I described a command line tool I have made to simplify and speed up the process of creating Flask  based web applications. The post contained some screenshots showing how the starting application looked like and a link to the live website deployed on my server. If you visit the website you will see a Boostrap based page but nothing more so not much of a showcase for the tool.

In this post I decided to show how to create a simple Flask based application involving one or two views (controllers) and at least one form, a model and one or two templates, deploy it to my server and host its code in git to serve as reference. Additionally the steps mentioned in this post can be found here containing further technical details such as command line output, generated directory and code structure and more. Having an example application like this should be enough to showcase the tool.

An example of a Flask application done with the Flask command line tool
An example of a Flask application done with the Flask command line tool

For the tl;dr guys

Create this Flask project using this command line tool with 6 lines in terminal, ~10 lines of code and ~15 lines of HTML text and editing in about 10 minutes, that’s it!

Without further ado here are the required steps to create a database application with Flask – SQLAlchemy and WTForms using the Flask command line tool. Note you will find reference links at the bottom of the post, additionally in order to be able to follow-up with the example you will have to get the tool from here. The instructions on how to set a working environment are mentioned in project’s wiki. The example project will be named vote and will be about a voting application where the site visitor will be able to upvote or downvote our application.

The steps

The steps are divided in two parts, the first part describes the commands typed in terminal to invoke the Flask command line tool in order to auto generate most of the work. The second part is about the manual editing of the produced content in order to enrich and tweak application’s code and content.

1. Create a new Flask project named vote using jQuery & Bootstrap. The tool will create a directory structure for our newly created project, download jQuery and Bootstrap libraries and register them in the base template. Finally it will generate the first blueprint and various useful files containing settings, Python, CSS, JavaScript and HTML boilerplate code. Note that for each generated blueprint a set of files and directories are being generated. The most notable among them are the blueprint’s directory containing a views.py, models.py, forms.py, helpers.py and an __init__.py files. Additionally for each blueprint a new directory is generated in app/templates/ to host the templates of the blueprint.

Command details: flask is the name of the command line tool, new is the command that generates a new project vote is the name of the project, jquery and bootstrap tell the tool that we want to use jQuery and Bootstrap in our project.

2. Our application will have one model named Voteresult with one field named result to hold a negative or a positive vote. Here is how to create the model.

Command details: generate model is the command that generates the model, VoteResult is the name of the model, main tells the tool that the model belongs to the main blueprint which is auto generated at project’s creation, result:integer tell the tool that the model will have one field named result of type integer.

3. We will create one form named vote containing two buttons, one for the positive vote and one for the negative vote.

Command details: generate form is the command that generates the form, vote is the name of the form, main again tells the tools that the form belongs to the main blueprint, positive:submit and negative:submit are both form controls of type submit. Along with the auto generated form code, the tool also creates a template named vote (as the form’s name) to render the form.

4. We will create one template named results to show the voting results to our site’s visitors.

Command details: generate template is the command that generates the template, results is the name of the template, main tells the tool that the template belongs to the main blueprint, base tells the tool that the template will extend the base.html template so it will inherit the layout of our application.

5. In the final step we will create two views (controllers) to contain the logic of our application.

Command details: generate view is the command that generates the view, vote is the view’s name, main tells the tool that the view belongs to the main blueprint, template:vote is the template the view will render, route:vote is the view’s routing url, method:get/post is the view’s HTTP methods. As with the first generated view, the second view follows the same concept, except the HTTP method.

After six tiresome entries in the terminal our example application is almost ready to be deployed. The only work left is to tweak the generated model, instantiate the form in the vote view and pass it to the template, add the voting logic and save each vote to the database; accordingly in the results view we will load the results and pass them to the results template. Finally we will write some text not lorem ipsum to introduce the application to the potential visitor. I will not include all the work as you can see it live or check out the final example application which is more or less the same.

1. In the produced model I have set the result field default value to be 0 and changed it’s unique attribute to false. Bellow is the relevant code part:

2. The two views are posted in their final form (note that the imports are left out). Additionally you can see that no exception prediction is made, the example is just to showcase the command line tool not good code writing. The results view queries the database and counts the positive and negative votes and passes them to the results template. The vote view instantiates the vote form, if the request method is POST checks which button was pressed and stores the respective result to the database, finally renders the redirects to the results page. If the request method is GET the view renders the vote template.

3. In the visual part the changes are simple HTML editing so not of much interest. The main changes worth mentioning are the removal of the initial text in the main page which involves the deletion of one {{ include “info.html” }} tag and the removal of the initial submit button in the vote template which is auto generated by the tool.


Leave a comment

Your email address will not be published. Required fields are marked *