Introduction

.

.

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 PayrollEvaluation1
7. Click Create
8. In the Solution Explorer, below PayrollEvaluation1, 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 PayrollEvaluation1/app, double-click forms.py
2. Change the document as follows:

   from unittest.util import _MAX_LENGTH
   from django import forms
   from django.contrib.auth.forms import AuthenticationForm
   from django.utils.translation import gettext_lazy as _
   
   class BootstrapAuthenticationForm(AuthenticationForm):
       """Authentication form which uses boostrap CSS."""
       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' }))
       monday       = forms.FloatField(label='Monday',    widget=forms.TextInput({ 'class': 'form-control' }))
       tuesday      = forms.FloatField(label='Tuesday',   widget=forms.TextInput({ 'class': 'form-control' }))
       wednesday    = forms.FloatField(label='Wednesday', widget=forms.TextInput({ 'class': 'form-control' }))
       thursday     = forms.FloatField(label='Thursday',  widget=forms.TextInput({ 'class': 'form-control' }))
       friday       = 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 PayrollEvaluation1 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             = ''
               
       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':
           form = EvaluationForm(request.POST)
   
           if form.is_valid():
               fName     = form.cleaned_data['firstName']
               lName     = form.cleaned_data['lastName']
               hourlySal = form.cleaned_data['hourlySalary']
               mon       = form.cleaned_data['monday']
               tue       = form.cleaned_data['tuesday']
               wed       = form.cleaned_data['wednesday']
               thu       = form.cleaned_data['thursday']
               fri       = form.cleaned_data['friday']
   
               totalTime = float(mon + tue + wed + thu + fri)
               ovtSalary = float(hourlySal * 1.5)
               
               if totalTime    < 40:
                   regularTime = totalTime
                   regularPay  = hourlySal * totalTime
                   overTime    = 0.00
                   overtimePay = 0.00
               else: # if (totalTime >= 40)
                   regularTime = 40;
                   overTime    = totalTime - 40;
                   regularPay  = hourlySal * 40;
                   overtimePay = overTime * ovtSalary
       
               
               netPay    = regularPay + overtimePay;
               emplName  = fName + ' ' + lName
   
       else:
           form = EvaluationForm()
   
       return render(
           request,
           'app/evaluation.html',
           {
               'title'           : 'Payroll Evaluation',
               'form'            : form,
               'strEmployeeName' : emplName,
               'strRegularTime'  : f"{regularTime:.2f}",
               'strOverTime'     : f"{overTime:.2f}",
               'strRegularPay'   : f"{regularPay:.2f}",
               'strOvertimePay'  : f"{overtimePay:.2f}",
               'strNetPay'       : f"{netPay:.2f}"
           }
       )

A Template for a Form

.

Practical Learning: Creating a Template

1. In the Solution Explorer, below PayrollEvaluation1, expand app, then expand templates
2. In PayrollEvaluation1/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="form-group">
           <label for="txtFirstName" class="control-label col-sm-5 fw-bold">First Name:</label>
           <div class="col-sm-7">{{ form.firstName }}</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">{{ form.lastName }}</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">{{ form.hourlySalary }}</div>
       </div>
   
       <div class="form-group">
           <label for="txtMonday" class="fw-bold col-sm-5 control-label">Monday:</label>
           <div class="col-sm-7">{{ form.monday }}</div>
       </div>
   
       <div class="form-group">
           <label for="txtTuesday" class="fw-bold col-sm-5 control-label">Tuesday:</label>
           <div class="col-sm-7">{{ form.tuesday }}</div>
       </div>
   
       <div class="form-group">
           <label for="txtWednesday" class="fw-bold col-sm-5 control-label">Wednesday:</label>
           <div class="col-sm-7">{{ form.wednesday }}</div>
       </div>
   
       <div class="form-group">
           <label for="txtThursday" class="fw-bold col-sm-5 control-label">Thursday:</label>
           <div class="col-sm-7">{{ form.thursday }}</div>
       </div>
   
       <div class="form-group">
           <label for="txtFriday" class="fw-bold col-sm-5 control-label">Friday:</label>
           <div class="col-sm-7">{{ form.friday }}</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 URL for the Web Page

.

Practical Learning: Configuring a URL for the Web Page

1. In the Solution Explorer, below PayrollEvaluation1, expand the other PayrollEvaluation1
2. In PayrollEvaluation1/PayrollEvaluation1, 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 Evaluation:

   

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

   

6. Click the Calculate button:

   

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

8. Click the Calculate button:

   

9. Close the webpage and return to your programming environment
10. Close your programming environment

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