Site icon EASY2DIGITAL

Python Web Application: Multi Calculators – NPV, P&L, CLV

Louis Lu

In this Python Tutorial, I’ll walk you through the Python web application development steps of building up a multi-calculator application using Python, flask and Sqlite3. By the end of this Python Tutorial, basically you can pick up the fundamental knowledge and skills to handle HTML5, JINJA, CSS3, flask, Python and sqlite3. Then you would find developing a web application is not tough.

Python Web Application Wireframe: UI & UX Design and Visualization

A wireframe is a diagram or a set of diagrams that consists of simple lines and shapes representing the skeleton of a website or an application. It mainly visualizes the user interface (UI) and core functionality, and presents an in-depth explanation of what UX wireframes are, what they look like, and how they can benefit your customers.

Calculator Application – Home Page UI

Calculator Application – UX (Design the Marketing Funnel)

Basically you can sign up for a wireframe account for free. The feature would be limited but it’s sufficient to outline the UI and UX after the trial period if it’s an early stage of the web development. 

Python Web Application – Python and Flask

First thing first, any application needs a core engine or functional heart to be ready before design and visualization. It’s because it deals with core algorithms and logic. Without these core elements, any application is just a model without soul. In this article, we would use Python and flask to build up the heart and soul.

Previously I walked through three calculators respectively which are the SKU P&L, membership plan CLV and investment evaluation NPV. Basically the multi-calculator application is to combine these three core functional features and algorithms together into one functional script. Regarding the details of each calculator, please check out these articles.

Rather than the details you can subscribe to the Easy2Digital newsletter to get this Python script, there are three key sections you do need to update cautiously.

1. Combine positional arguments in the self object

There are slight differences among three calculators’ OOP coding. It’s because as mentioned earlier, each calculator would have different variable metrics to impact the result. These three ones have common metrics and different ones as well. So first thing first, you need to combine 3 calculators’ self object coding into one.

For example, they all have the same set of organic and paid media metrics. So basically as long as you make sure the argument position that can match the argument position you create in the function on any new statement, that will be okay. This is for avoiding numbers used in a wrong metric.

2. Create Routes 

Compared to a single calculator, a mult-calculator application requires a more complex route map. Basically we can refer to the UX wireframe earlier I talked about, to create routes and assign tasks for each route. 

For example, the home page includes two routes because it has two assignments in the UX. First of all, the users drop by the web application, so we need a @app.route("/") and it returns return render_template("index_selector.html", all_data = data).

So this route can load the home page UI to any users before they select a calculator.

Then, users will select a calculator they like to use. So we need a second route: @app.route("/add_items", methods=["post"]). The key purpose of this route is to trigger which calculation page would open by using if conditions.

Last but not least, it’s the specific calculator route. Within each route, it has its own defined functions, and the self object position argument needs updating according to the new combined self object I talked about at the beginning.

@app.route("/CLV", methods=["POST", "GET"])

@app.route("/NPV", methods=["POST", "GET"])

@app.route("/PL", methods=["POST", "GET"])

Apart from Flask, there is another popular web application development option, which is Django. I’ll release another article regarding it soon.

3. Create and assign the relevant result page

As each calculator UI and the customer expectation is different, so there are two pages for each calculator – one is the page before calculation and the other is the result page. In the template folder where to store html5 files, you need to create those there and use the right one in each calculator route.

return render_template("result_clv.html")

return render_template("result_npv.html")

return render_template("result.html")

Python Web Application – HTML5 + Jinja

According to the UI and UX, this multi calculation application would mainly need Jinja and several HTML5 element features

1. Jinja Dynamic Content

Jinja is a function you can use in the html5 codings, to connect with dynamic and variables to show dynamic content based on actual data. It starts with {%...%} and ends with {% endfor %}. Within the framework, you can set up a variable that connect with the function or database using a double braces {{ }}

2. id, class=”column”, class=”box”

In HTML5, id represents an unique element to differentiate other elements in the same piece of script. We will use this typically for a specific area or element of CSS design and decoration, and marketing tracking.

For the class, it’s very common and popular to use for bulky actions. One class name can be used in multiple elements. It’s convenient for you to group an area or a block applied to the same settings.

3. Form

Form plus action connect with your flask route in the application script. 

<form action="/CLV" method="post">

The name of action needs to be the same with your specific route you like to connect and communicate. All the data communication would happen based on the name you set here.

CSS3

In this application, there are two signs and symbols to assign specific decoration commands to specific elements.

1. Start with a hash #

For the class element and form value, you can use and start with a hash plus the name you use in class or form element. 

2. Start with a dot .

For the id element, you can use and start with a dot plus the name you use in the id element.

Sqlite3

In this application, I use sqlite3 to show the options of calculation in the selector on the home page. 

First thing first, we use the argument select to fetch the data in the lousi2.db file. The name of the module is the column name I set before in the database file. The name of calculators is the table name. We use fetchall() to represent fetching all data in the column.

def get_db():

db = getattr(g, '_database', None)

if db is None:

db = g._database = sqlite3.connect('louis2.db')

cursor = db.cursor()

cursor.execute('''SELECT module from calculators'')

all_data = cursor.fetchall()

all_data = [str(val[0]) for val in all_data]

return all_data

Second, in the html5 script, you need to input the name of the column and the return variable in the Jinja section. What’s more, it’s a selector, so we need to set up a option value, which is the full list of module data.

<form action="/add_items" method="POST">

<select name="select_url">

{% for module in all_data %}

<option value="{{ module }}">{{ module }}</option>

{% endfor %}

Regarding using and connecitng MySQL, SQL and MongoBD database, I’ll release another article.

Heroku

For hosting the application, it’s very easy, straightforward to deploy and a fast way to develop and go live an application. For more details regarding how to set up and use, please check out this article.

https://www.easy2digital.com/automation/data/python-tutorial-26-create-a-shopify-bot-web-application-using-flask-and-heroku/

Regarding the server side like alibabacloud + Domain, I’ll release another article

Full Set of HTML5, CSS5, Python, Flask Coding Script

If you are interested in the full script of Python Web Application Development – Multi Calculators – NPV, P&L, CLV, please subscribe to our newsletter by adding the message “Python web application – multi calculator”. We would send you the script immediately to your mailbox.

I hope you enjoy reading Python Web Application Development – Multi Calculators – NPV, P&L, CLV. If you did, please support us by doing one of the things listed below, because it always helps out our channel.
Exit mobile version