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 projects templates, click Django 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, below PayrollEvaluation2, expand app, then expand static, then expand app, and then expand content
9. Double-click site.css
10. Add the following styles to the document:

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

Creating a Class for a Form

.

Practical Learning: Creating a Class

1. In the Solution Explorer, in PayrollEvaluation2/app, double-click forms.py
2. Change the document as follows:

   from django import forms
   from django.contrib.auth.forms import AuthenticationForm
   from django.utils.translation import gettext_lazy as _
   
   class BootstrapAuthenticationForm(AuthenticationForm):
       username = forms.CharField(max_length=254,
                                  widget=forms.TextInput({
                                      'class': 'form-control',
                                      'placeholder': 'User name'}))
       password = forms.CharField(label=_("Password"),
                                  widget=forms.PasswordInput({
                                      'class': 'form-control',
                                      'placeholder':'Password'}))
   
   class EvaluationForm(forms.Form):
       firstName    = forms.CharField(max_length=15, label='First Name',
                                      widget=forms.TextInput({ 'class': 'form-control' }))
       lastName     = forms.CharField(max_length=15, label='Last Name',
                                      widget=forms.TextInput({ 'class': 'form-control' }))
       hourlySalary = forms.FloatField(label='Hourly Salary',
                                       widget=forms.TextInput({ 'class': 'form-control' }))
       wk1Monday       = forms.FloatField(label='Monday',    widget=forms.TextInput({ 'class': 'form-control' }))
       wk1Tuesday      = forms.FloatField(label='Tuesday',   widget=forms.TextInput({ 'class': 'form-control' }))
       wk1Wednesday    = forms.FloatField(label='Wednesday', widget=forms.TextInput({ 'class': 'form-control' }))
       wk1Thursday     = forms.FloatField(label='Thursday',  widget=forms.TextInput({ 'class': 'form-control' }))
       wk1Friday       = forms.FloatField(label='Friday',    widget=forms.TextInput({ 'class': 'form-control' }))
       wk2Monday       = forms.FloatField(label='Monday',    widget=forms.TextInput({ 'class': 'form-control' }))
       wk2Tuesday      = forms.FloatField(label='Tuesday',   widget=forms.TextInput({ 'class': 'form-control' }))
       wk2Wednesday    = forms.FloatField(label='Wednesday', widget=forms.TextInput({ 'class': 'form-control' }))
       wk2Thursday     = forms.FloatField(label='Thursday',  widget=forms.TextInput({ 'class': 'form-control' }))
       wk2Friday       = forms.FloatField(label='Friday',    widget=forms.TextInput({ 'class': 'form-control' }))

Creating a View for a Form

.

Practical Learning: Creating a View

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

   from datetime import datetime
   from django.shortcuts import render
   from django.http import HttpRequest
   from .forms import EvaluationForm
   
   def home(request):
       assert isinstance(request, HttpRequest)
       return render(
           request,
           'app/index.html',
           {
               'title':'Home Page',
               'year':datetime.now().year,
           }
       )
   
   def contact(request):
       assert isinstance(request, HttpRequest)
       return render(
           request,
           'app/contact.html',
           {
               'title':'Contact',
               'message':'Your contact page.',
               'year':datetime.now().year,
           }
       )
   
   def about(request):
       assert isinstance(request, HttpRequest)
       return render(
           request,
           'app/about.html',
           {
               'title':'About',
               'message':'Your application description page.',
               'year':datetime.now().year,
           }
       )
   
   def evaluation_view(request):
       emplName               = ''
               
       wk1TimeWorked  : float = 0.00
       wk2TimeWorked  : float = 0.00
   
       wk1RegularTime : float = 0.00
       wk1OverTime    : float = 0.00
       wk1RegularPay  : float = 0.00
       wk1OvertimePay : float = 0.00
       wk2RegularTime : float = 0.00
       wk2OverTime    : float = 0.00
       wk2RegularPay  : float = 0.00
       wk2OvertimePay : float = 0.00
           
       wk1NetPay      : float = 0.00
       wk2NetPay      : float = 0.00
   
       netPay         : float = 0.00
   
       if request.method == 'POST':
           form = EvaluationForm(request.POST)
   
           if form.is_valid():
               fName     = form.cleaned_data['firstName']
               lName     = form.cleaned_data['lastName']
               hourlySal = form.cleaned_data['hourlySalary']
   
               wk1Mon    = form.cleaned_data['wk1Monday']
               wk1Tue    = form.cleaned_data['wk1Tuesday']
               wk1Wed    = form.cleaned_data['wk1Wednesday']
               wk1Thu    = form.cleaned_data['wk1Thursday']
               wk1Fri    = form.cleaned_data['wk1Friday']
   
               wk2Mon    = form.cleaned_data['wk2Monday']
               wk2Tue    = form.cleaned_data['wk2Tuesday']
               wk2Wed    = form.cleaned_data['wk2Wednesday']
               wk2Thu    = form.cleaned_data['wk2Thursday']
               wk2Fri    = form.cleaned_data['wk2Friday']
   
               wk1TimeWorked           = wk1Mon + wk1Tue + wk1Wed + wk1Thu + wk1Fri
               wk2TimeWorked           = wk2Mon + wk2Tue + wk2Wed + wk2Thu + wk2Fri
           
           if wk1TimeWorked < 40 :
               wk1RegularTime          = wk1TimeWorked
               wk1OverTime             = 0.00
               wk1RegularPay           = hourlySal * wk1TimeWorked
               wk1OvertimePay          = 0.00
           else : # if wk1TimeWorked >= 40 :
               wk1RegularTime          = 40;
               wk1OverTime             = wk1TimeWorked - 40
               wk1RegularPay           = hourlySal     * 40
               wk1OvertimePay          = wk1OverTime   * hourlySal * 1.50
           
           if wk2TimeWorked < 40 :
               wk2RegularTime          = wk2TimeWorked
               wk2OverTime             = 0.00
               wk2RegularPay           = hourlySal * wk2TimeWorked
               wk2OvertimePay          = 0.00
           else : # if wk2TimeWorked >= 40 :
               wk2RegularTime          = 40
               wk2OverTime             = wk2TimeWorked - 40
               wk2RegularPay           = hourlySal     * 40
               wk2OvertimePay          = hourlySal     * 1.50 * wk2OverTime
   
           wk1NetPay                   = wk1RegularPay + wk1OvertimePay
           wk2NetPay                   = wk2RegularPay + wk2OvertimePay
           netPay                      = wk1NetPay     + wk2NetPay
       
           emplName  = fName + ' ' + lName
   
       else:
           form = EvaluationForm()
   
       return render(
           request,
           'app/evaluation.html',
           {
               'title'               : 'Payroll Evaluation',
               'form'                : form,
               'strEmployeeName'     : emplName,
               '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}"
           }
       )

A Template for a Form

.

Practical Learning: Creating a Template

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

   {% extends "app/layout.html" %}
   
   {% block content %}
   
   <h2 class="text-center fw-bold common-font">{{ title }}</h2>
   
   <hr />
   
   <form method="post" class="common-font encloser form-horizontal">
       {% csrf_token %}
       <div class="row">
           <label for="txtFirstName" class="control-label col-sm-4 fw-bold">First Name:</label>
           <div class="col-sm-4">{{ form.firstName }}</div>
       </div>
   
       <div class="row">
           <label for="txtLastName" class="fw-bold col-sm-4 control-label">Last Name:</label>
           <div class="col-sm-4">{{ form.lastName }}</div>
       </div>
   
       <div class="row">
           <label for="txtHourlySalary" class="fw-bold col-sm-4 control-label">Hourly Salary:</label>
           <div class="col-sm-4">{{ form.hourlySalary }}</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">{{ form.wk1Monday }}</div>
           <div class="col-sm-4">{{ form.wk2Monday }}</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">{{ form.wk1Tuesday }}</div>
           <div class="col-sm-4">{{ form.wk2Tuesday }}</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">{{ form.wk1Wednesday }}</div>
           <div class="col-sm-4">{{ form.wk2Wednesday }}</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">{{ form.wk1Thursday }}</div>
           <div class="col-sm-4">{{ form.wk2Thursday }}</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">{{ form.wk1Friday }}</div>
           <div class="col-sm-4">{{ form.wk2Friday }}</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 Payroll" 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 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 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 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 class="form-control" value="{{ strWeek1RegularPay }}" />
           </div>
           <div class="col-sm-4">
               <input 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 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 class="form-control" value="{{ strWeek1NetPay }}" />
           </div>
           <div class="col-sm-4">
               <input class="form-control" value="{{ strWeek2NetPay }}" />
           </div>
       </div>
   
       <hr />
   
       <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 class="form-control" value="{{ strNetPay }}" />
           </div>
       </div>
   </form>
   
   <hr />
   
       {% endblock %}

A URL for the Web Page

.

Practical Learning: Configuring a URL for the Web Page

1. In the Solution Explorer, below PayrollEvaluation2, expand the other PayrollEvaluation2
2. In PayrollEvaluation2/PayrollEvaluation2, double-click urls.py
3. Change the document as follows:

   from datetime import datetime
   from django.urls import path
   from django.contrib import admin
   from django.contrib.auth.views import LoginView, LogoutView
   from app import forms, views
   
   
   urlpatterns = [
       path('', views.home, name='home'),
       path('evaluation/', views.evaluation_view, name='evaluation'),
       path('contact/', views.contact, name='contact'),
       path('about/', views.about, name='about'),
       path('login/',
            LoginView.as_view
            (
                template_name='app/login.html',
                authentication_form=forms.BootstrapAuthenticationForm,
                extra_context=
                {
                    'title': 'Log in',
                    'year' : datetime.now().year,
                }
            ),
            name='login'),
       path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
       path('admin/', admin.site.urls),
   ]

Setting a Layout for the Application

Practical Learning: Creating a Function

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

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ title }} - Payroll Evaluation</title>
       {% load static %}
       <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
       <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
       <script src="{% static 'app/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 Processing</a>
               </div>
               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
                       <li><a href="{% url 'evaluation' %}">Payroll Evaluation</a></li>
                       <li><a href="{% url 'about' %}">About</a></li>
                       <li><a href="{% url 'contact' %}">Contact</a></li>
                   </ul>
                   {% include 'app/loginpartial.html' %}
               </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 'app/scripts/jquery-1.10.2.js' %}"></script>
       <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
       <script src="{% static 'app/scripts/respond.js' %}"></script>
   {% block scripts %}{% endblock %}
   
   </body>
   </html>

3. To execute the application, on the main menu, click Debug and click Start Without Debugging
4. Click the Payroll Evaluation link:

   

5. 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

   

6. Click the Calculate button:

   

7. 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

8. Click the Calculate button:

   

9. Close the form and return to your programming environment

Home	Copyright © 2010-2026, FunctionX	Sunday 29 March 2026, 22:12	Home