Payroll Management System Project in Django with Source Code

Posted by adones evangelistaPosted in Python Projects April 20, 2021

Payroll management system project in django

Payroll Management System Project in Django with Source Code

This Payroll Management System in Django is a Python-based project. Using Python, Django, and MySQL, we built a payroll management system. The key module in this project is the employee module, which handles the employee features. The payroll module is typically used to handle employees salary while the company module handles company features.

A Payroll Management System in Django, Keeps track of all of the employee’s information and data. We’ve created all of the employee’s, company, voucher, payrolls, logs, and general settings crud (create, read, update, and delete) operations. This is a role-based module in which the admin can perform any operation on the data.

Watch the video here to see the full running Payroll Management System in Django with Source Code 2021

The Payroll Management System is an easy project for beginners to learn how to build a web-based python Django project. We will provide you with the complete source code and database for the python project so that you can easily install it on your machine and learn how to program in Python Django.

To start creating a Payroll Management System Project in Python Django, makes sure that you have PyCharm Professional IDE Installed in your computer.

This Payroll Management System in Django Framework, Also includes a Download Source Code for free, just find the downloadable source code below and click download now.

Admin Features of Payroll Management System Project in Django

Manage Employee – For the employee, The admin can add, and edit, employee information.
Company Management – For the company, The admin can see the list of company details. Admin can update the record of the company details.
Manage payroll– For the payroll, The admin can view the list of payroll details. Admin can create a payroll to their employees.
Manage Voucher– For the voucher, The admin can add, and edit, voucher information.
Login – By default the admin need to login first to enable to access the system.
Manage logs– For the logs, The admin can view all the logs.
Manage Company– For the Company, The admin can add, edit, and delete company information.

Payroll Management System Project in Django Steps on How to Create a Project

Time needed: 5 minutes.

Here’s the step’s on how to create a Payroll Management System Project in Django

Step 1: Open file.
First , open “pycharm professional” after that click “file” and click “new project“.
Step 2: Choose Django.
Next, after click “new project“, choose “Django” and click.
Step 3: Select file location.
Then, select a file location wherever you want.
Step 4: Create application name.
After that, name your application.
Step 5: Click create.
Lastly, finish creating project by clicking “create” button.
Step 6: Start Coding.
Finally, we will now start adding functionality to our Django Framework by adding some functional codes.

Functionality and Codes of the Payroll Management System Project in Django

Create template for the login in form in Payroll Management System Project in Django.

In this section, we will learn on how create a templates for the login form. To start with, add the following code in your login.html under the folder of login/templates/login.

<html>
<header>
{% load static %}
<title>Login</title>
<link rel="stylesheet" type="text/css" href="{% static 'dashboard/css/bootstrap.min.css' %}">
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'myaccount/style.css' %}">
<script  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
  </header>
  
<body>

<div class="container">
    <div class="row">
	    <div class="col-sm-6 col-sm-push-3 login-div">
		    {% if message %}
			<div class="alert alert-danger alert-dismissable "><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ message }}</div>
			{% endif %}
			<div class='card'>
				<form method="post" class="">
				{% csrf_token %}
				{% for field in form %}
					<div class="form-group">
						{{field.label_tag}}
						{{ field }}
					</div>
				{% endfor %}
					<button type="submit" name="submit" class="btn btn-primary form-control"/>Login</button>
				</form>
			</div>
		</div>
	</div>
</div>
    
  
  
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<html>

<header>

{% load static %}

<title>Login</title>

<link rel="stylesheet" type="text/css" href="{% static 'dashboard/css/bootstrap.min.css' %}">

<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto+Condensed" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="{% static 'myaccount/style.css' %}">

<script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script

src="https://code.jquery.com/jquery-3.2.1.min.js"

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

</header>

<body>

<div class="container">

<div class="row">

<div class="col-sm-6 col-sm-push-3 login-div">

{% if message %}

<div class="alert alert-danger alert-dismissable "><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>{{ message }}</div>

{% endif %}

<div class='card'>

<form method="post" class="">

{% csrf_token %}

{% for field in form %}

<div class="form-group">

{{field.label_tag}}

{{ field }}

</div>

{% endfor %}

<button type="submit" name="submit" class="btn btn-primary form-control"/>Login</button>

</form>

</div>

</div>

</div>

</div>

</body>

</html>

Create template for the employee table in Payroll Management System Project in Django.

In this section, we will learn on how create a templates for the employee table. To start with, add the following code in your all_employees.html under the folder of employee/templates/employee.

{% extends "hrms/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
	<div class="card">
		<div class="card-header">
			<h4 class="card-title">
			{{ head }}
			</h4>
		</div>
		<div class="card-body">

        <a href='{% url "employee-add" %}' class="btn btn-danger" >Add Employee</a>

        


				{% comment %} <form class="form-control" action="{% url 'search-employees' %}" method="post" style="margin-top: 10px">
						{% csrf_token %}
					<div class="row">
	            <div class="col example-grid-col">
								  <select class="form-control" name="company">
								  	<option value="">Choose company</option>
										{% for com in companies %}
											<option value="{{com.company_name}}">{{com.company_name}}</option>
										{% endfor %}
								  </select>
	            </div>
	            <div class="col example-grid-col">
	                <input type="text" class="form-control" name="employee_name" value="" placeholder="Search by employee">
	            </div>
	            
				<div class="col example-grid-col">
					<select class="form-control" name="payment_method">
						<option value="">Choose payment method</option>
							<option value="daily">daily</option>
							<option value="weekly">weekly</option>
							<option value="semi-monthly">semi-monthly</option>
							<option value="monthly">monthly</option>
					</select>
	            </div>

	            <div class="col example-grid-col">
	                <input type="text" name="start_date" value="" class="datepicker dateinput form-control"  id="id_date_hired" placeholder="Start Date">
	            </div>
	            <div class="col example-grid-col">
	                <input type="text" name="end_date" value="" class="datepicker dateinput form-control"  id="id_date_hired" placeholder="End Date">
	            </div>

	            <div class="col example-grid-col">
					<select class="form-control" name="search_by">
						<option value="">Choose Search By</option>
							<option value="date_hired">Date Hired</option>
							<option value="contract_expiration">Contract Expiration</option>
					</select>
	            </div>

	            <div class="col example-grid-col">
					<select class="form-control" name="order">
						<option value="">Choose Order</option>
							<option value="ascending">ascending</option>
							<option value="descending">descending</option>
					</select>
	            </div>

							<div class="col example-grid-col">
	                <button type="submit" class="btn btn-info" name="button">Search</button>
	            </div>
	        </div>
				</form> {% endcomment %}
				<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
			<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

			<div class="table-responsive" style="margin-top: 10px">
				<table id="example" class="table table-striped table-bordered" style="width:100%">

					<thead class="bg-success text-white">
						<tr>
							<th scope="col" class="text-center">#</th>
							<th scope="col" class="text-center">Emp Id</th>
							<th scope="col" class="text-center">Employee Name</th>
							<th scope="col" class="text-center">SSS</th>
							<th scope="col" class="text-center">Phone</th>
							<th scope="col" class="text-center">Position</th>
							<th scope="col" class="text-center">Company</th>
							<th scope="col" class="text-center">Date Hired</th>
							<th scope="col" class="text-center">Contact Expiration</th>
							<th scope="col" class="text-center">Remarks</th>
							<th scope="col" class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
						{% for emp in employees %}
							<tr>
								<th class="align-middle text-center" scope="row">{{ forloop.counter}}</th>
								<td class="align-middle text-center">{{ emp.emp_id }} </td>
								<td class="align-middle text-center">{{ emp }} </td>
								<td class="align-middle text-center">{{ emp.get_hiring_details.sss }}</td>
								<td class="align-middle text-center">{{ emp.phone }}</td>
								<td class="align-middle text-center">{{ emp.get_hiring_details.position }}</td>
								<td class="align-middle text-center">{{ emp.company }}</td>
								<td class="align-middle text-center">{{ emp.date_hired }}</td>
								<td class="align-middle text-center">{{ emp.contract_expiration }}</td>
								<td class="align-middle text-center">{{ emp.remarks }}</td>
								<td class="align-middle text-center">
									<a href="{% url 'employee-update' emp.id %}" class="btn btn-danger">Update</a>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
{% endblock content %}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

{% extends "hrms/base.html" %}

{% load crispy_forms_tags %}

{% block content %}

<div class="card">

<div class="card-header">

<h4 class="card-title">

{{ head }}

</h4>

</div>

<div class="card-body">

<a href='{% url "employee-add" %}' class="btn btn-danger" >Add Employee</a>

{% comment %} <form class="form-control" action="{% url 'search-employees' %}" method="post" style="margin-top: 10px">

{% csrf_token %}

<div class="row">

<div class="col example-grid-col">

<select class="form-control" name="company">

<option value="">Choose company</option>

{% for com in companies %}

<option value="{{com.company_name}}">{{com.company_name}}</option>

{% endfor %}

</select>

</div>

<div class="col example-grid-col">

<input type="text" class="form-control" name="employee_name" value="" placeholder="Search by employee">

</div>

<div class="col example-grid-col">

<select class="form-control" name="payment_method">

<option value="">Choose payment method</option>

<option value="daily">daily</option>

<option value="weekly">weekly</option>

<option value="semi-monthly">semi-monthly</option>

<option value="monthly">monthly</option>

</select>

</div>

<div class="col example-grid-col">

<input type="text" name="start_date" value="" class="datepicker dateinput form-control" id="id_date_hired" placeholder="Start Date">

</div>

<div class="col example-grid-col">

<input type="text" name="end_date" value="" class="datepicker dateinput form-control" id="id_date_hired" placeholder="End Date">

</div>

<div class="col example-grid-col">

<select class="form-control" name="search_by">

<option value="">Choose Search By</option>

<option value="date_hired">Date Hired</option>

<option value="contract_expiration">Contract Expiration</option>

</select>

</div>

<div class="col example-grid-col">

<select class="form-control" name="order">

<option value="">Choose Order</option>

<option value="ascending">ascending</option>

<option value="descending">descending</option>

</select>

</div>

<div class="col example-grid-col">

<button type="submit" class="btn btn-info" name="button">Search</button>

</div>

</div>

</form> {% endcomment %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

<div class="table-responsive" style="margin-top: 10px">

<table id="example" class="table table-striped table-bordered" style="width:100%">

<thead class="bg-success text-white">

<tr>

<th scope="col" class="text-center">#</th>

<th scope="col" class="text-center">Emp Id</th>

<th scope="col" class="text-center">Employee Name</th>

<th scope="col" class="text-center">SSS</th>

<th scope="col" class="text-center">Phone</th>

<th scope="col" class="text-center">Position</th>

<th scope="col" class="text-center">Company</th>

<th scope="col" class="text-center">Date Hired</th>

<th scope="col" class="text-center">Contact Expiration</th>

<th scope="col" class="text-center">Remarks</th>

<th scope="col" class="text-center">Action</th>

</tr>

</thead>

<tbody>

{% for emp in employees %}

<tr>

<th class="align-middle text-center" scope="row">{{ forloop.counter}}</th>

<td class="align-middle text-center">{{ emp.emp_id }} </td>

<td class="align-middle text-center">{{ emp }} </td>

<td class="align-middle text-center">{{ emp.get_hiring_details.sss }}</td>

<td class="align-middle text-center">{{ emp.phone }}</td>

<td class="align-middle text-center">{{ emp.get_hiring_details.position }}</td>

<td class="align-middle text-center">{{ emp.company }}</td>

<td class="align-middle text-center">{{ emp.date_hired }}</td>

<td class="align-middle text-center">{{ emp.contract_expiration }}</td>

<td class="align-middle text-center">{{ emp.remarks }}</td>

<td class="align-middle text-center">

<a href="{% url 'employee-update' emp.id %}" class="btn btn-danger">Update</a>

</td>

</tr>

{% endfor %}

</tbody>

</table>

</div>

</div>

</div>

{% endblock content %}

Create template for the base in Payroll Management System Project in Django.

In this section, we will learn on how create a templates for the base. To start with, add the following code in your base.html under the folder of hrms/templates/hrms.

{% load static %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <!-- Mirrored from demo.frontted.com/hero/050520180000/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 28 Sep 2018 11:42:13 GMT -->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{{ title }}</title>
        <link type="text/css" href="{% static 'assets/css/vendor-morris.css" rel="stylesheet'%}">
        <link type="text/css" href="{% static 'assets/css/vendor-bootstrap-datepicker.css' %}" rel="stylesheet">
        <!-- Prevent the demo from appearing in search engines -->
        <meta name="robots" content="noindex">
        <!-- App CSS -->
        <link type="text/css" href="{% static 'assets/css/app.css' %}" rel="stylesheet">
        <link type="text/css" href="{% static 'assets/css/app.rtl.css' %}" rel="stylesheet">
        <!-- Simplebar -->
        <link type="text/css" href="{% static 'assets/vendor/simplebar.css' %}" rel="stylesheet">
    </head>
    <body>
        </style>
        <div class="mdk-drawer-layout js-mdk-drawer-layout" data-fullbleed data-push data-responsive-width="992px" data-has-scrolling-region>
            <div class="mdk-drawer-layout__content">
                <!-- header-layout -->
                <div class="mdk-header-layout js-mdk-header-layout  mdk-header--fixed  mdk-header-layout__content--scrollable">
                    <!-- header -->
                    <div class="mdk-header js-mdk-header bg-success" data-fixed>
                        <div class="mdk-header__content">
                            <nav class="navbar navbar-expand-md bg-success navbar-dark d-flex-none">
                                <button class="btn btn-link text-white pl-0" type="button" data-toggle="sidebar">
                                <i class="material-icons align-middle md-36">short_text</i>
                                </button>
                                <div class="page-title m-0">{{ head }}</div>
                                <div class="collapse navbar-collapse" id="mainNavbar">
                                    <ul class="navbar-nav ml-auto align-items-center">
                                        Hello, {{ request.user }}!
                                        
                                        
                                        
                                        
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                    <!-- content -->
                    <div class="mdk-header-layout__content top-navbar mdk-header-layout__content--scrollable h-100">
                        <!-- main content -->
                        <div class="container-fluid">
                            {% if messages %}
                                {% for message in messages %}
                                    <div class="alert {{ message.tags }}">
                                        {{ message }}
                                    </div>
                                {% endfor %}
                            {% endif %}
                            {% block content %}
                            {% endblock content %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- // END drawer-layout__content -->
            <!-- drawer -->
            <div class="mdk-drawer js-mdk-drawer" id="default-drawer">
                <div class="mdk-drawer__content">
                    <div class="mdk-drawer__inner" data-simplebar data-simplebar-force-enabled="true">
                        <nav class="drawer  drawer--dark bg-danger">
                            <div class="drawer-spacer">
                                <div class="media align-items-center">
                                    <a href="index.html" class="drawer-brand-circle mr-2 bg-success">P</a>
                                    <div class="media-body">
                                        <a href="index.html" class="h5 m-0 text-link">Payroll System</a>
                                    </div>
                                </div>
                            </div>
                            <!-- HEADING -->
                            <div class="py-2 drawer-heading text-white">
                                Dashboards
                            </div>
                            <!-- DASHBOARDS MENU -->
                            <ul class="drawer-menu" id="dasboardMenu" data-children=".drawer-submenu">
                                <li class="drawer-menu-item active ">
                                    <a href='{% url "company-show" %}'>
                                        <span class="drawer-menu-text">Company</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item active ">
                                    <a href='{% url "employee-show" %}'>
                                       
                                        <span class="drawer-menu-text"> Employee</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item active ">
                                    <a href='{% url "payroll-list" %}'>
                                        
                                        <span class="drawer-menu-text"> Payroll</span>
                                    </a>
                                </li>
                                {% comment %}
                               <li class="drawer-menu-item active ">
                                    <a href='{% url "payroll-contributions" %}'>
                                       
                                        <span class="drawer-menu-text"> Contributions</span>
                                    </a>
                                </li> 
                                {% endcomment %}
                               
                                <li class="drawer-menu-item active ">
                                    <a href='{% url "voucher" %}'>
                                       
                                        <span class="drawer-menu-text"> Voucher</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item active ">
                                    <a href='{% url "show" %}'>
                                       
                                        <span class="drawer-menu-text"> Logs</span>
                                    </a>
                                </li>

                                <li class="drawer-menu-item active ">
                                    <a href='{% url "general-settings" %}'>
                                        
                                        <span class="drawer-menu-text"> General Settings</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item active ">
                                    <a href='{% url "logout" %}'>
                                        
                                        <span class="drawer-menu-text"> Logout</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- // END drawer -->
            <!-- drawer -->
            <div class="mdk-drawer js-mdk-drawer" id="user-drawer" data-position="right" data-align="end">
                <div class="mdk-drawer__content">
                    <div class="mdk-drawer__inner" data-simplebar data-simplebar-force-enabled="true">
                        <nav class="drawer drawer--light">
                            <div class="drawer-spacer drawer-spacer-border">
                                <div class="media align-items-center">
                                    <img src="https://pbs.twimg.com/profile_images/928893978266697728/3enwe0fO_400x400.jpg" class="img-fluid rounded-circle mr-2" width="35" alt="">
                                    <div class="media-body">
                                        <a href="#" class="h5 m-0">Frontted</a>
                                        <div>Account Manager</div>
                                    </div>
                                </div>
                            </div>
                            <div class="drawer-spacer bg-body-bg">
                                <div class="d-flex justify-content-between mb-2">
                                    <p class="h6 text-gray m-0"><i class="material-icons align-middle md-18 text-primary">monetization_on</i> Balance</p>
                                    <span>₱21,011</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <p class="h6 text-gray m-0"><i class="material-icons align-middle md-18 text-primary">shopping_cart</i> Sales</p>
                                    <span>142</span>
                                </div>
                            </div>
                            <!-- MENU -->
                            <ul class="drawer-menu" id="userMenu" data-children=".drawer-submenu">
                                <li class="drawer-menu-item">
                                    <a href="account.html">
                                        <i class="material-icons">lock</i>
                                        <span class="drawer-menu-text"> Account</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item">
                                    <a href="profile.html">
                                        <i class="material-icons">account_circle</i>
                                        <span class="drawer-menu-text"> Profile</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item">
                                    <a href="login.html">
                                        <i class="material-icons">exit_to_app</i>
                                        <span class="drawer-menu-text"> Logout</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- // END drawer -->
        </div>
        <!-- // END drawer-layout -->
        {% comment %}
        modal
    {% endcomment %}
    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">{{ head }}</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <form method="POST" novalidate="">
                    <div class="modal-body">
                        <div class="form-group">
                            {% csrf_token %}
                            {{ form|crispy  }}
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="submit" id="modal" class="btn btn-success"> Save</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- The Modal -->
    <div class="modal" id="govbenefits">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Government Benefits Report</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <form action="{% url 'gov-benefits' %}" method="POST" novalidate="">
                    <div class="modal-body">
                        <div class="form-group">
                            {% csrf_token %}
                            {{ form|crispy  }}
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="submit" id="modal" class="btn btn-success"> Save</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- jQuery -->
    <script src="{% static 'assets/vendor/jquery.min.js' %}"></script>
    <!-- Bootstrap -->
    <script src="{% static 'assets/vendor/popper.js' %}"></script>
    <script src="{% static 'assets/vendor/bootstrap.min.js' %}"></script>
    <!-- Simplebar -->
    <!-- Used for adding a custom scrollbar to the drawer -->
    <script src="{% static 'assets/vendor/simplebar.js' %}"></script>
    <!-- Vendor -->
    <script src="{% static 'assets/vendor/Chart.min.js' %}"></script>
    <script src="{% static 'assets/vendor/moment.min.js' %}"></script>
    <!-- APP -->
    <script src="{% static 'assets/js/color_variables.js' %}"></script>
    <script src="{% static 'assets/js/app.js' %}"></script>
    <script src="{% static 'assets/vendor/dom-factory.js' %}"></script>
    <!-- DOM Factory -->
    <script src="{% static 'assets/vendor/material-design-kit.js' %}"></script>
    <!-- MDK -->
    <script>
    (function() {
    'use strict';
    // Self Initialize DOM Factory Components
    domFactory.handler.autoInit()
    // Connect button(s) to drawer(s)
    var sidebarToggle = document.querySelectorAll('[data-toggle="sidebar"]')
    sidebarToggle.forEach(function(toggle) {
    toggle.addEventListener('click', function(e) {
    var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'
    var drawer = document.querySelector(selector)
    if (drawer) {
    if (selector == '#default-drawer') {
    $('.container-fluid').toggleClass('container--max');
    }
    drawer.mdkDrawer.toggle();
    }
    })
    })
    })()
    </script>
    <script src="{% static 'assets/vendor/morris.min.js' %}"></script>
    <script src="{% static 'assets/vendor/raphael.min.js' %}"></script>
    <script src="{% static 'assets/vendor/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'assets/js/datepicker.js' %}"></script>
    <script>
    $(function() {
    window.morrisDashboardChart = new Morris.Area({
    element: 'morris-area-chart',
    data: [{
    year: '2017-01',
    a: 6352.27
    },
    {
    year: '2017-02',
    a: 4309.98
    },
    {
    year: '2017-03',
    a: 1465.98
    },
    {
    year: '2017-04',
    a: 1298.25
    },
    {
    year: '2017-05',
    a: 3209
    },
    {
    year: '2017-06',
    a: 2083
    },
    {
    year: '2017-07',
    a: 1285.23
    },
    {
    year: '2017-08',
    a: 1289
    },
    {
    year: '2017-09',
    a: 4430
    },
    {
    year: '2017-10',
    a: 8921.19
    }
    ],
    xkey: 'year',
    ykeys: ['a'],
    labels: ['Earnings'],
    lineColors: ['#fff'],
    fillOpacity: '0.2',
    gridEnabled: true,
    gridTextColor: '#ffffff',
    resize: true
    });
    });
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.js
    "></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
    "></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js
    "></script>
    <script>
    $(document).ready(function() {
    $('#example').DataTable();
    } );
    </script>
</body>
<!-- Mirrored from demo.frontted.com/hero/050520180000/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 28 Sep 2018 11:44:46 GMT -->
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

{% load static %}

{% load crispy_forms_tags %}

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>{{ title }}</title>

<link type="text/css" href="{% static 'assets/css/vendor-morris.css" rel="stylesheet'%}">

<link type="text/css" href="{% static 'assets/css/vendor-bootstrap-datepicker.css' %}" rel="stylesheet">

<meta name="robots" content="noindex">

<link type="text/css" href="{% static 'assets/css/app.css' %}" rel="stylesheet">

<link type="text/css" href="{% static 'assets/css/app.rtl.css' %}" rel="stylesheet">

<link type="text/css" href="{% static 'assets/vendor/simplebar.css' %}" rel="stylesheet">

</head>

<body>

</style>

<div class="mdk-drawer-layout js-mdk-drawer-layout" data-fullbleed data-push data-responsive-width="992px" data-has-scrolling-region>

<div class="mdk-drawer-layout__content">

<div class="mdk-header-layout js-mdk-header-layout mdk-header--fixed mdk-header-layout__content--scrollable">

<div class="mdk-header js-mdk-header bg-success" data-fixed>

<div class="mdk-header__content">

<nav class="navbar navbar-expand-md bg-success navbar-dark d-flex-none">

<button class="btn btn-link text-white pl-0" type="button" data-toggle="sidebar">

<i class="material-icons align-middle md-36">short_text</i>

</button>

<div class="page-title m-0">{{ head }}</div>

<div class="collapse navbar-collapse" id="mainNavbar">

<ul class="navbar-nav ml-auto align-items-center">

Hello, {{ request.user }}!

</ul>

</div>

</nav>

</div>

</div>

<div class="mdk-header-layout__content top-navbar mdk-header-layout__content--scrollable h-100">

<div class="container-fluid">

{% if messages %}

{% for message in messages %}

<div class="alert {{ message.tags }}">

{{ message }}

</div>

{% endfor %}

{% endif %}

{% block content %}

{% endblock content %}

</div>

</div>

</div>

</div>

<div class="mdk-drawer js-mdk-drawer" id="default-drawer">

<div class="mdk-drawer__content">

<div class="mdk-drawer__inner" data-simplebar data-simplebar-force-enabled="true">

<nav class="drawer drawer--dark bg-danger">

<div class="drawer-spacer">

<div class="media align-items-center">

<a href="index.html" class="drawer-brand-circle mr-2 bg-success">P</a>

<div class="media-body">

<a href="index.html" class="h5 m-0 text-link">Payroll System</a>

</div>

</div>

</div>

<div class="py-2 drawer-heading text-white">

Dashboards

</div>

<ul class="drawer-menu" id="dasboardMenu" data-children=".drawer-submenu">

<li class="drawer-menu-item active ">

<a href='{% url "company-show" %}'>

<span class="drawer-menu-text">Company</span>

</a>

</li>

<li class="drawer-menu-item active ">

<a href='{% url "employee-show" %}'>

<span class="drawer-menu-text"> Employee</span>

</a>

</li>

<li class="drawer-menu-item active ">

<a href='{% url "payroll-list" %}'>

<span class="drawer-menu-text"> Payroll</span>

</a>

</li>

{% comment %}

<li class="drawer-menu-item active ">

<a href='{% url "payroll-contributions" %}'>

<span class="drawer-menu-text"> Contributions</span>

</a>

</li>

{% endcomment %}

<li class="drawer-menu-item active ">

<a href='{% url "voucher" %}'>

<span class="drawer-menu-text"> Voucher</span>

</a>

</li>

<li class="drawer-menu-item active ">

<a href='{% url "show" %}'>

<span class="drawer-menu-text"> Logs</span>

</a>

</li>

<li class="drawer-menu-item active ">

<a href='{% url "general-settings" %}'>

<span class="drawer-menu-text"> General Settings</span>

</a>

</li>

<li class="drawer-menu-item active ">

<a href='{% url "logout" %}'>

<span class="drawer-menu-text"> Logout</span>

</a>

</li>

</ul>

</nav>

</div>

</div>

</div>

<div class="mdk-drawer js-mdk-drawer" id="user-drawer" data-position="right" data-align="end">

<div class="mdk-drawer__content">

<div class="mdk-drawer__inner" data-simplebar data-simplebar-force-enabled="true">

<nav class="drawer drawer--light">

<div class="drawer-spacer drawer-spacer-border">

<div class="media align-items-center">

<img src="https://pbs.twimg.com/profile_images/928893978266697728/3enwe0fO_400x400.jpg" class="img-fluid rounded-circle mr-2" width="35" alt="">

<div class="media-body">

<a href="#" class="h5 m-0">Frontted</a>

<div>Account Manager</div>

</div>

</div>

</div>

<div class="drawer-spacer bg-body-bg">

<div class="d-flex justify-content-between mb-2">

<p class="h6 text-gray m-0"><i class="material-icons align-middle md-18 text-primary">monetization_on</i> Balance</p>

<span>₱21,011</span>

</div>

<div class="d-flex justify-content-between">

<p class="h6 text-gray m-0"><i class="material-icons align-middle md-18 text-primary">shopping_cart</i> Sales</p>

<span>142</span>

</div>

</div>

<ul class="drawer-menu" id="userMenu" data-children=".drawer-submenu">

<li class="drawer-menu-item">

<a href="account.html">

<i class="material-icons">lock</i>

<span class="drawer-menu-text"> Account</span>

</a>

</li>

<li class="drawer-menu-item">

<a href="profile.html">

<i class="material-icons">account_circle</i>

<span class="drawer-menu-text"> Profile</span>

</a>

</li>

<li class="drawer-menu-item">

<a href="login.html">

<i class="material-icons">exit_to_app</i>

<span class="drawer-menu-text"> Logout</span>

</a>

</li>

</ul>

</nav>

</div>

</div>

</div>

</div>

{% comment %}

modal

{% endcomment %}

<div class="modal" id="myModal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">{{ head }}</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<form method="POST" novalidate="">

<div class="modal-body">

<div class="form-group">

{% csrf_token %}

{{ form|crispy }}

</div>

</div>

<div class="modal-footer">

<button type="submit" id="modal" class="btn btn-success"> Save</button>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

</form>

</div>

</div>

</div>

<div class="modal" id="govbenefits">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Government Benefits Report</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<form action="{% url 'gov-benefits' %}" method="POST" novalidate="">

<div class="modal-body">

<div class="form-group">

{% csrf_token %}

{{ form|crispy }}

</div>

</div>

<div class="modal-footer">

<button type="submit" id="modal" class="btn btn-success"> Save</button>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

</form>

</div>

</div>

</div>

<script src="{% static 'assets/vendor/jquery.min.js' %}"></script>

<script src="{% static 'assets/vendor/popper.js' %}"></script>

<script src="{% static 'assets/vendor/bootstrap.min.js' %}"></script>

<script src="{% static 'assets/vendor/simplebar.js' %}"></script>

<script src="{% static 'assets/vendor/Chart.min.js' %}"></script>

<script src="{% static 'assets/vendor/moment.min.js' %}"></script>

<script src="{% static 'assets/js/color_variables.js' %}"></script>

<script src="{% static 'assets/js/app.js' %}"></script>

<script src="{% static 'assets/vendor/dom-factory.js' %}"></script>

<script src="{% static 'assets/vendor/material-design-kit.js' %}"></script>

<script>

(function() {

'use strict';

// Self Initialize DOM Factory Components

domFactory.handler.autoInit()

// Connect button(s) to drawer(s)

var sidebarToggle = document.querySelectorAll('[data-toggle="sidebar"]')

sidebarToggle.forEach(function(toggle) {

toggle.addEventListener('click', function(e) {

var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'

var drawer = document.querySelector(selector)

if (drawer) {

if (selector == '#default-drawer') {

$('.container-fluid').toggleClass('container--max');

}

drawer.mdkDrawer.toggle();

}

})

})

})()

</script>

<script src="{% static 'assets/vendor/morris.min.js' %}"></script>

<script src="{% static 'assets/vendor/raphael.min.js' %}"></script>

<script src="{% static 'assets/vendor/bootstrap-datepicker.min.js' %}"></script>

<script src="{% static 'assets/js/datepicker.js' %}"></script>

<script>

$(function() {

window.morrisDashboardChart = new Morris.Area({

element: 'morris-area-chart',

data: [{

year: '2017-01',

a: 6352.27

},

{

year: '2017-02',

a: 4309.98

},

{

year: '2017-03',

a: 1465.98

},

{

year: '2017-04',

a: 1298.25

},

{

year: '2017-05',

a: 3209

},

{

year: '2017-06',

a: 2083

},

{

year: '2017-07',

a: 1285.23

},

{

year: '2017-08',

a: 1289

},

{

year: '2017-09',

a: 4430

},

{

year: '2017-10',

a: 8921.19

}

],

xkey: 'year',

ykeys: ['a'],

labels: ['Earnings'],

lineColors: ['#fff'],

fillOpacity: '0.2',

gridEnabled: true,

gridTextColor: '#ffffff',

resize: true

});

});

</script>

<script src="https://code.jquery.com/jquery-3.3.1.js

"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

"></script>

<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js

"></script>

<script>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

</body>

</html>

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable Source Code Below.

Anyway, if you want to level up your programming knowledge, especially python, try this new article I’ve made for you Best Python Projects with source code for Beginners. But If you’re going to focus on web development using Django, you can download here from our list of Best Django Projects with source code based on real-world projects.

How To Run The Payroll Management System Project in Django?

Step 1: Extract/unzip the file
Step 2: Go inside the project folder, open cmd and type the following commands to install Django Framework and run the webserver:
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver
Step 3: Finally, open the browser and go to http://127.0.0.1:8000/

For admin panel:

Username: admin
Password: adminl12345

Summary

In summary, this 2021 Payroll Management System Project in Django with Source Code can be useful to students or professional who wants to learn python programming language. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy Coding!

Inquiries

If you have any questions or suggestions about Payroll Management System Project in Django with Source Code, please feel free to leave a comment below.

Author

adones evangelista

Hello Everyone , I'm Adones Evangelista. A writer and also a programmer of itsourcecode.com.

Leave a Comment! Cancel Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.