Introduction

Python is a programming language you can use to create various types of applications. Python is primarily used for terminal application. If you want to create other types of applications, you must use a library (or framework) that provides the objects and the functionality you want. If you want to create a Web-based application, one of the libraries you can use is Flask.

Python is a programming language. You can use it on a command prompt or the terminal to create an run your application. You cal also use a programming environment such as Visual Studio Code. For our example, we will use Mcrosoft Visual Studio.

In this exercise, we will create a small application as an introduction to Flask. We will create a small application to perform simple calculations for payroll that involves only one week of work.

Practical Learning: Creating the Application

1. Start Microsoft Visual Studio
2. On the Visual Studio 2026 dialog box, click Create a New Project
3. In the Create a New Project dialog box, in the Languages combo box, select Python
4. In the list of projects templates, click Flask Web Project
5. Click Next
6. In the Configure Your New Project dialog box, set the Project Name to PayrollEvaluation1
7. Click Create
8. In the Solution Explorer, expand PayrollEvaluation1, then expand static, and then expand content
9. Double-click site.css
10. Change the document as follows:

    . . .
    
    h3           { font-size:        2.05em;  }
    .encloser    { margin:           auto;
                   width:            350px;   }
    .maroon      { background-color: #800000; }
    .fw-bold     { font-weight:      bold;    }
    .common-font { font-family:      Garamond, Georgia, Cambria, 'Times New Roman', Times, serif }

A Webpage for Python

If you are working on a Web project, you need a webpage. If you use Microsoft Visual Studio to create a Flask application, the studio generates a few webpages as a starting point. You can then add all other files you need. For our example, we will create a webpage that contains a webform. The user will use that webpage to enter some values in webcontrols and click a button to get some results.

Practical Learning: Creating a Webpage

1. In the Solution Explorer, right-click templates -> Add -> New Item...
2. In the middle list of the Add New Item dialog box, click HTML Page
3. Change the file Name to evaluation
4. Click Add
5. Change the document as follows:

   {% extends "layout.html" %}
   
   {% block content %}
   
   <h3 class="text-center fw-bold common-font">{{ title }}</h3>
   
   <hr />
   
   <form method="post" class="common-font encloser form-horizontal">
       <div class="form-group">
           <label for="txtFirstName" class="control-label col-sm-5 fw-bold">First Name:</label>
           <div class="col-sm-7">
               <input name="txtFirstName" class="form-control" value="{{ strFirstName }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtLastName" class="fw-bold col-sm-5 control-label">Last Name:</label>
           <div class="col-sm-7">
               <input name="txtLastName" class="form-control" value="{{ strLastName }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtHourlySalary" class="fw-bold col-sm-5 control-label">Hourly Salary:</label>
           <div class="col-sm-7">
               <input name="txtHourlySalary" value="{{ strHourlySalary }}"
                      class="form-control" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtMonday" class="fw-bold col-sm-5 control-label">Monday:</label>
           <div class="col-sm-7">
               <input name="txtMonday"
                      class="form-control" value="{{ strMonday }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtTuesday" class="fw-bold col-sm-5 control-label">Tuesday:</label>
           <div class="col-sm-7">
               <input name="txtTuesday"
                      class="form-control" value="{{ strTuesday }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtWednesday" class="fw-bold col-sm-5 control-label">Wednesday:</label>
           <div class="col-sm-7">
               <input name="txtWednesday" class="form-control" value="{{ strWednesday }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtThursday" class="fw-bold col-sm-5 control-label">Thursday:</label>
           <div class="col-sm-7">
               <input name="txtThursday" class="form-control" value="{{ strThursday }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtFriday" class="fw-bold col-sm-5 control-label">Friday:</label>
           <div class="col-sm-7">
               <input name="txtFriday" class="form-control" value="{{ strFriday }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label class="fw-bold col-sm-6 control-label"></label>
           <div class="col-sm-6">
               <input type="submit" value="Calculate" id="btnCalculate" class="btn btn-primary" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtEmployeeName" class="fw-bold col-sm-5 control-label">Employee Name:</label>
           <div class="col-sm-7">
               <input class="form-control" value="{{ strEmployeeName }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtRegularTime" class="fw-bold col-sm-5 control-label">Regular Time:</label>
           <div class="col-sm-7">
               <input id="txtRegularTime" class="form-control" value="{{ strRegularTime }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtOverTime" class="fw-bold col-sm-5 control-label">Over Time:</label>
           <div class="col-sm-7">
               <input id="txtOverTime" class="form-control" value="{{ strOverTime }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtRegularPay" class="fw-bold col-sm-5 control-label">Regular Pay:</label>
           <div class="col-sm-7">
               <input id="txtRegularPay" class="form-control" value="{{ strRegularPay }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtOvertimePay" class="fw-bold col-sm-5 control-label">Overtime Pay:</label>
           <div class="col-sm-7">
               <input id="txtOvertimePay" class="form-control" value="{{ strOvertimePay }}" />
           </div>
       </div>
   
       <div class="form-group">
           <label for="txtNetPay" class="fw-bold col-sm-5 control-label">Net Pay:</label>
           <div class="col-sm-7">
               <input id="txtNetPay" class="form-control" value="{{ strNetPay }}" />
           </div>
       </div>
   </form>
   
   <hr />
   
   {% endblock %}

A Function to Perform Calculations

If you are using Python to create a webpage, you need a function that would manage the webpage. For our example, the function will also be used to perform the calculations related to the webpage. The function will be created in the views.py document.

Practical Learning: Creating a Function

1. In the Solution Explorer, double-click views.py
2. Add a function as follows:

   from datetime import datetime
   from flask import render_template
   from flask import Flask, request
   from Payroll2 import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return render_template(
           'index.html',
           title='Home Page',
           year=datetime.now().year,
       )
   
   @app.route('/evaluation', methods=['GET', 'POST'])
   def evaluation():
       fName                = ''
       lName                = ''
       hourlySalary : float = 0.00
       monday       : float = 0.00
       tuesday      : float = 0.00
       wednesday    : float = 0.00
       thursday     : float = 0.00
       friday       : float = 0.00
               
       totalTime    : float = 0.00
       ovtSalary    : float = 0.00
       regularTime  : float = 0.00
       overTime     : float = 0.00
       regularPay   : float = 0.00
       overtimePay  : float = 0.00
   
       netPay       : float = 0.00
       
       if request.method == 'POST':
           fName         = request.form['txtFirstName']
           lName         = request.form['txtLastName']
           hourlySalary  = float(request.form['txtHourlySalary'])
           monday        = float(request.form['txtMonday'])
           tuesday       = float(request.form['txtTuesday'])
           wednesday     = float(request.form['txtWednesday'])
           thursday      = float(request.form['txtThursday'])
           friday        = float(request.form['txtFriday'])
   
           totalTime = float(monday + tuesday + wednesday + thursday + friday)
           ovtSalary : float = float(hourlySalary * 1.5)
               
           if totalTime < 40:
               regularTime = totalTime
               regularPay  = hourlySalary * totalTime
               overTime    = 0.00
               overtimePay = 0.00
           else: # if (totalTime >= 40)
               regularTime = 40;
               overTime    = totalTime - 40;
               regularPay  = hourlySalary * 40;
               overtimePay = overTime * ovtSalary
               
           netPay          = regularPay + overtimePay;
       
       return render_template(
           'evaluation.html',
           title           = 'Payroll Evaluation',
           strFirstName    = fName,
           strLastName     = lName,
           strEmployeeName = fName + " " + lName,
           strHourlySalary = hourlySalary,
           strMonday       = monday,
           strTuesday      = tuesday,
           strWednesday    = wednesday,
           strThursday     = thursday,
           strFriday       = friday,
   
           strRegularTime  = f"{regularTime:.2f}",
           strOverTime     = f"{overTime:.2f}",
           strRegularPay   = f"{regularPay:.2f}",
           strOvertimePay  = f"{overtimePay:.2f}",
           strNetPay       = f"{netPay:.2f}"
       )
   
   @app.route('/contact')
   def contact():
       return render_template(
           'contact.html',
           title='Contact',
           year=datetime.now().year,
           message='Your contact page.'
       )
   
   @app.route('/about')
   def about():
       return render_template(
           'about.html',
           title='About',
           year=datetime.now().year,
           message='Your application description page.'
       )

3. In the Solution Explorer, below templates, double-click layout.html
4. Change the document as follows:

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ title }} - Payroll Processing</title>
       <link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
       <link rel="stylesheet" type="text/css" href="/static/content/site.css" />
       <script src="/static/scripts/modernizr-2.6.2.js"></script>
   </head>
   
   <body>
       <div class="navbar navbar-inverse maroon navbar-fixed-top">
           <div class="container">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <a href="/" class="navbar-brand">Payroll Evaluation</a>
               </div>
               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav common-font fw-bold">
                       <li><a href="{{ url_for('home') }}">Home</a></li>
                       <li><a href="{{ url_for('evaluation') }}">Payroll Evaluation</a></li>
                       <li><a href="{{ url_for('about') }}">About</a></li>
                       <li><a href="{{ url_for('contact') }}">Contact</a></li>
                   </ul>
               </div>
           </div>
       </div>
   
       <div class="container body-content">
           {% block content %}{% endblock %}
           <hr />
           <footer>
               <p class="text-center fw-bold common-font">&copy; {{ year }} - Payroll Evaluation</p>
           </footer>
       </div>
   
       <script src="/static/scripts/jquery-1.10.2.js"></script>
       <script src="/static/scripts/bootstrap.js"></script>
       <script src="/static/scripts/respond.js"></script>
       {% block scripts %}{% endblock %}
   
   </body>
   </html>

5. To execute the application, on the main menu, click Debug and click Start Without Debugging
6. Click Evaluation:

   

7. Enter the following values in the text boxes:

   Employee Name: Gertrude Monay
   Hourly Salary: 28.46
   Work Week
       Monday:    8
       Tuesday:   7.5
       Wednesday: 6
       Thursday:  7.5
       Friday:    6.5

   

8. Click the Calculate button:

   

9. Replace the values as follows:

   Employee Name: Dave Stillson
   Hourly Salary: 31.68
   Work Week
       Monday:    8
       Tuesday:   10.5
       Wednesday: 9
       Thursday:  8.5
       Friday:    9.5

10. Click the Calculate button:

    

11. Close the webpage and return to your programming environment
12. Close your programming environment

Home	Copyright © 2010-2026, FunctionX	Friday 26 December 2026, 16:57	Home