Introduction

The Python programming language can be used to create Web-based applications. To do that, you must use an appropriate library. One of the options you have is Flask. This is an introductory Web-based application created in Flask. For our exercise, we will use Microsoft Visual Studio to create the project.

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 project templates, click Flask Web Project
5. Click Next
6. In the Configure Your New Project dialog box, set the Project Name to PayrollEvaluation2
7. Click Create
8. In the Solution Explorer, expand PayrollEvaluation2, 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 }

Creating a Webpage

To have an interactive webpage, you can add a Web-form to it. In a Flask application, the webpage is formatted using special directives.

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. Replace the contents of the document with the following:

   {% 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="row">
           <label for="txtFirstName" class="control-label col-sm-4 fw-bold">First Name:</label>
           <div class="col-sm-4">
               <input name="txtFirstName" class="form-control" value="{{ strFirstName }}" />
           </div>
       </div>
   
       <div class="row">
           <label for="txtLastName" class="fw-bold col-sm-4 control-label">Last Name:</label>
           <div class="col-sm-4">
               <input name="txtLastName" class="form-control" value="{{ strLastName }}" />
           </div>
       </div>
   
       <div class="row">
           <label for="txtHourlySalary" class="fw-bold col-sm-4 control-label">Hourly Salary:</label>
           <div class="col-sm-4">
               <input name="txtHourlySalary"
                      class="form-control" value="{{ strHourlySalary }}" />
           </div>
       </div>
   
       <hr />
   
       <div class="fw-bold row">
           <div class="col-sm-5">
               <label class="control-label">Time Worked</label>
           </div>
           <div class="col-sm-4">
               <label>Week 1</label>
           </div>
           <div class="col-sm-3">
               <label>Week 2</label>
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1Monday" class="fw-bold col-sm-5 control-label">Monday:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1Monday"
                      class="form-control" value="{{ strWeek1Monday }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2Monday"
                      class="form-control" value="{{ strWeek2Monday }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1Tuesday" class="fw-bold col-sm-5 control-label">Tuesday:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1Tuesday"
                      class="form-control" value="{{ strWeek1Tuesday }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2Tuesday"
                      class="form-control" value="{{ strWeek2Tuesday }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1Wednesday" class="fw-bold col-sm-5 control-label">Wednesday:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1Wednesday"
                      class="form-control" value="{{ strWeek1Wednesday }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2Wednesday"
                      class="form-control" value="{{ strWeek2Wednesday }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1Thursday" class="fw-bold col-sm-5 control-label">Thursday:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1Thursday"
                      class="form-control" value="{{ strWeek1Thursday }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2Thursday"
                      class="form-control" value="{{ strWeek2Thursday }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1Friday" class="fw-bold col-sm-5 control-label">Friday:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1Friday"
                      class="form-control" value="{{ strWeek1Friday }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2Friday"
                      class="form-control" value="{{ strWeek2Friday }}" />
           </div>
       </div>
   
       <hr />
   
       <div class="row">
           <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>
   
       <hr />
   
       <div class="row">
           <label for="txtEmployeeName" class="fw-bold col-sm-4 control-label">Employee Name:</label>
           <div class="col-sm-8">
               <input name="txtEmployeeName"
                      class="form-control" value="{{ strEmployeeName }}" />
           </div>
       </div>
   
       <hr />
   
       <div class="fw-bold row">
           <div class="col-sm-5">
               <label class="control-label">Pay Summary</label>
           </div>
           <div class="col-sm-4">
               <label>Week 1</label>
           </div>
           <div class="col-sm-3">
               <label>Week 2</label>
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1RegularTime" class="fw-bold control-label">Regular Time:</label>
           </div>
           <div class="col-sm-4">
               <input class="form-control" value="{{ strWeek1RegularTime }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2RegularTime"
                      class="form-control" value="{{ strWeek2RegularTime }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1OverTime" class="fw-bold control-label">Over Time:</label>
           </div>
           <div class="col-sm-4">
               <input class="form-control" value="{{ strWeek1OverTime }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2OverTime"
                      class="form-control" value="{{ strWeek2OverTime }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label for="txtWeek1RegularPay" class="fw-bold control-label">Regular Pay:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1RegularPay" class="form-control" value="{{ strWeek1RegularPay }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2RegularPay"
                      class="form-control" value="{{ strWeek2RegularPay }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label class="fw-bold control-label">Overtime Pay:</label>
           </div>
           <div class="col-sm-4">
               <input class="form-control" value="{{ strWeek1OvertimePay }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2OvertimePay"
                      class="form-control" value="{{ strWeek2OvertimePay }}" />
           </div>
       </div>
   
       <hr />
   
       <div class="row">
           <div class="col-sm-4">
               <label class="fw-bold control-label">Weekly Pay:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtWeek1NetPay" class="form-control" value="{{ strWeek1NetPay }}" />
           </div>
           <div class="col-sm-4">
               <input name="txtWeek2NetPay"
                      class="form-control" value="{{ strWeek2NetPay }}" />
           </div>
       </div>
   
       <div class="row">
           <div class="col-sm-4">
               <label></label>
           </div>
           <div class="col-sm-4 text-center">
               <label for="txtNetPay" class="fw-bold control-label">Net Pay:</label>
           </div>
           <div class="col-sm-4">
               <input name="txtNetPay" class="form-control" value="{{ strNetPay }}" />
           </div>
       </div>
   </form>
   
   <hr />
   
   {% endblock %}

Crreating a Function for Calculations

Our application is used to perform simple calculations to evaluate a payroll. The calculations can be performed in a function, which is usually associated with a webpage. Normally, the function is created in the views.py document. That's what we will do.

Practical Learning: Creating a Function

1. In the Solution Explorer, double-click views.py
2. Change the document as follows:

   from datetime import datetime
   from flask import render_template
   from flask import Flask, request
   from PayrollEvaluation2 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      = 0.00
   
       wk1Monday         = 0.00
       wk1Tuesday        = 0.00
       wk1Wednesday      = 0.00
       wk1Thursday       = 0.00
       wk1Friday         = 0.00
   
       wk2Monday         = 0.00
       wk2Tuesday        = 0.00
       wk2Wednesday      = 0.00
       wk2Thursday       = 0.00
       wk2Friday         = 0.00
   
       wk1TimeWorked     = 0.00
       wk2TimeWorked     = 0.00
   
       wk1RegularTime    = 0.00
       wk1OverTime       = 0.00
       wk1RegularPay     = 0.00
       wk1OvertimePay    = 0.00
   
       wk2RegularTime    = 0.00
       wk2OverTime       = 0.00
       wk2RegularPay     = 0.00
       wk2OvertimePay    = 0.00
   
       wk1NetPay         = 0.00
       wk2NetPay         = 0.00
       netPay            = 0.00
   
       if request.method == 'POST':
           fName         = request.form['txtFirstName']
           lName         = request.form['txtLastName']
           hourlySalary  = float(request.form['txtHourlySalary'])
   
           wk1Monday     = float(request.form['txtWeek1Monday'])
           wk1Tuesday    = float(request.form['txtWeek1Tuesday'])
           wk1Wednesday  = float(request.form['txtWeek1Wednesday'])
           wk1Thursday   = float(request.form['txtWeek1Thursday'])
           wk1Friday     = float(request.form['txtWeek1Friday'])
   
           wk2Monday     = float(request.form['txtWeek2Monday'])
           wk2Tuesday    = float(request.form['txtWeek2Tuesday'])
           wk2Wednesday  = float(request.form['txtWeek2Wednesday'])
           wk2Thursday   = float(request.form['txtWeek2Thursday'])
           wk2Friday     = float(request.form['txtWeek2Friday'])
   
           wk1TimeWorked        = wk1Monday + wk1Tuesday + wk1Wednesday + wk1Thursday + wk1Friday
           wk2TimeWorked        = wk2Monday + wk2Tuesday + wk2Wednesday + wk2Thursday + wk2Friday
           
           if wk1TimeWorked < 40 :
               wk1RegularTime          = wk1TimeWorked
               wk1OverTime             = 0.00
               wk1RegularPay           = hourlySalary * wk1TimeWorked
               wk1OvertimePay          = 0.00
           else : # if wk1TimeWorked >= 40 :
               wk1RegularTime          = 40;
               wk1OverTime             = wk1TimeWorked - 40
               wk1RegularPay           = hourlySalary * 40
               wk1OvertimePay          = wk1OverTime * hourlySalary * 1.50
           
           if wk2TimeWorked < 40 :
               wk2RegularTime          = wk2TimeWorked
               wk2OverTime             = 0.00
               wk2RegularPay           = hourlySalary * wk2TimeWorked
               wk2OvertimePay          = 0.00
           else : # if wk2TimeWorked >= 40 :
               wk2RegularTime          = 40
               wk2OverTime             = wk2TimeWorked - 40
               wk2RegularPay           = hourlySalary * 40
               wk2OvertimePay          = hourlySalary * 1.50 * wk2OverTime
   
           wk1NetPay            = wk1RegularPay + wk1OvertimePay
           wk2NetPay            = wk2RegularPay + wk2OvertimePay
           netPay               = wk1NetPay     + wk2NetPay
   
       return render_template(
           'evaluation.html',
           title               = 'Payroll Evaluation',
   
           strFirstName        = fName,
           strLastName         = lName,
           strEmployeeName     = fName + " " + lName,
   
           strHourlySalary     = f"{hourlySalary:.2f}",
   
           strWeek1Monday      = f"{wk1Monday:.2f}",
           strWeek1Tuesday     = f"{wk1Tuesday:.2f}",
           strWeek1Wednesday   = f"{wk1Wednesday:.2f}",
           strWeek1Thursday    = f"{wk1Thursday:.2f}",
           strWeek1Friday      = f"{wk1Friday:.2f}",
   
           strWeek2Monday      = f"{wk2Monday:.2f}",
           strWeek2Tuesday     = f"{wk2Tuesday:.2f}",
           strWeek2Wednesday   = f"{wk2Wednesday:.2f}",
           strWeek2Thursday    = f"{wk2Thursday:.2f}",
           strWeek2Friday      = f"{wk2Friday:.2f}",
   
           strWeek1RegularTime = f"{wk1RegularTime:.2f}",
           strWeek1OverTime    = f"{wk1OverTime:.2f}",
           strWeek1RegularPay  = f"{wk1RegularPay:.2f}",
           strWeek1OvertimePay = f"{wk1OvertimePay:.2f}",
   
           strWeek2RegularTime = f"{wk2RegularTime:.2f}",
           strWeek2OverTime    = f"{wk2OverTime:.2f}",
           strWeek2RegularPay  = f"{wk2RegularPay:.2f}",
           strWeek2OvertimePay = f"{wk2OvertimePay:.2f}",
   
           strWeek1NetPay      = f"{wk1NetPay:.2f}",
           strWeek2NetPay      = f"{wk2NetPay:.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():
       """Renders the about page."""
       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 common-font">
                   <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 Processing</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 the Payroll Evaluation link

   

7. Enter the following values in the text boxes:

   Employee Name: Gertrude Monay
   Hourly Salary: 28.46
   First Week
       Monday:    8
       Tuesday:   7.5
       Wednesday: 6
       Thursday:  7.5
       Friday:    6.5
       Saturday:  0
       Sunday:    0
   Second Week
       Monday:    7
       Tuesday:   8
       Wednesday: 6
       Thursday:  6
       Friday:    8
       Saturday:  0
       Sunday:    0

   

8. Click the Calculate button:

   

9. Replace the values as follows:

   Employee Name: Thomas Stones
   Hourly Salary: 31.68
   First Week
       Monday:    8
       Tuesday:   10
       Wednesday: 9
       Thursday:  8.5
       Friday:    8
       Saturday:  0
       Sunday:    0
   Second Week
       Monday:    9
       Tuesday:   8
       Wednesday: 10.5
       Thursday:  9
       Friday:    8.5
       Saturday:  0
       Sunday:    0

10. Click the Calculate button:

    

11. Close the form and return to your programming environment

Home	Copyright © 2010-2026, FunctionX	Friday 26 December 2025, 22:05	Home