Visitor Management System in Django with Source Code

Posted by adones evangelistaPosted in Python Projects April 21, 2021

Visitor Management System in Django with Source Code 2021

Visitor Management System in Django with Source Code

This Visitor Management System Project in Django is a Python-based project. Using Python, Django, and SQLite3 Database, we built a Visitor Management System web application for managing meetings and visitor information. It will keep track of all meetings and send emails and SMS messages to the host and visitors about the specifics of their meeting.

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

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

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

This Visitor 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 Visitor Management System Project in Django

Manage Meeting History– For the meeting history, The admin view meeting history information details.
Add Profile– For the add profile, The admin can add, edit and delete profile information.
Login – By default the student need to login first to enable to access the system.
Arrange Meeting– For the arrange meeting, The admin can arrange a meeting for the visitors.

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

Time needed: 5 minutes.

Here’s the step’s on how to create a Visitor Management System 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 Visitor Management System in Django

Create template for the admin login in form in Visitor Management System in Django with Source Code.

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

{% load static %}
<link
  href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
  rel="stylesheet"
  id="bootstrap-css"
/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <title>Admin Login</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
      integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div class="container h-100">
      <div class="d-flex justify-content-center h-100">
        <div class="user_card mb-5">
          <div class="d-flex justify-content-center">
            <div class="brand_logo_container">
              <img
                src="{% static '/img/admin.jpg' %}"
                class="brand_logo"
                alt="Logo"
              />
            </div>
          </div>
          <div class="d-flex justify-content-center form_container">
            <form action="/admin_login/" method="post">
              {% csrf_token %}
              <div class="input-group my-3">
                <div class="input-group-append">
                  <span class="input-group-text"
                    ><i class="fas fa-user"></i
                  ></span>
                </div>
                <input
                  type="text"
                  name="username"
                  class="form-control input_user"
                  value=""
                  placeholder="username"
                />
              </div>
              <div class="input-group my-3">
                <div class="input-group-append">
                  <span class="input-group-text"
                    ><i class="fas fa-key"></i
                  ></span>
                </div>
                <input
                  type="password"
                  name="password"
                  class="form-control input_pass"
                  value=""
                  placeholder="password"
                />
              </div>

              <div
                class="d-flex justify-content-center mt-3 login_container my-5"
              >
                <button type="submit" name="button" class="btn login_btn">
                  Login
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </body>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      background: url("{% static '/img/ba.jpg' %}");
      background-size: cover;
    }
    .user_card {
      height: 400px;
      width: 350px;
      margin-top: auto;
      margin-bottom: auto;
      background: #669900;
      opacity: 70px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
      -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
      -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
      border-radius: 5px;
    }
    .brand_logo_container {
      position: absolute;
      height: 170px;
      width: 170px;
      top: -75px;
      border-radius: 50%;
      background: #000099;
      padding: 10px;
      text-align: center;
    }
    .brand_logo {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      border: 2px solid white;
    }
    .form_container {
      margin-top: 100px;
    }
    .login_btn {
      width: 100%;
      background: #000099 !important;
      color: white !important;
    }
    .login_btn:focus {
      box-shadow: none !important;
      outline: 0px !important;
    }
    .login_container {
      padding: 0 2rem;
    }
    .input-group-text {
      background: #000099 !important;
      color: white !important;
      border: 0 !important;
      border-radius: 0.25rem 0 0 0.25rem !important;
    }
  </style>
</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

{% load static %}

<link

href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"

rel="stylesheet"

id="bootstrap-css"

/>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>

<head>

<title>Admin Login</title>

<link

rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

crossorigin="anonymous"

/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link

rel="stylesheet"

href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"

integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"

crossorigin="anonymous"

/>

</head>

<body>

<div class="container h-100">

<div class="d-flex justify-content-center h-100">

<div class="user_card mb-5">

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

<div class="brand_logo_container">

<img

src="{% static '/img/admin.jpg' %}"

class="brand_logo"

alt="Logo"

/>

</div>

</div>

<div class="d-flex justify-content-center form_container">

<form action="/admin_login/" method="post">

{% csrf_token %}

<div class="input-group my-3">

<div class="input-group-append">

<span class="input-group-text"

><i class="fas fa-user"></i

></span>

</div>

<input

type="text"

name="username"

class="form-control input_user"

value=""

placeholder="username"

/>

</div>

<div class="input-group my-3">

<div class="input-group-append">

<span class="input-group-text"

><i class="fas fa-key"></i

></span>

</div>

<input

type="password"

name="password"

class="form-control input_pass"

value=""

placeholder="password"

/>

</div>

<div

class="d-flex justify-content-center mt-3 login_container my-5"

>

<button type="submit" name="button" class="btn login_btn">

Login

</button>

</div>

</form>

</div>

</div>

</div>

</div>

</body>

<style>

body,

html {

margin: 0;

padding: 0;

height: 100%;

background: url("{% static '/img/ba.jpg' %}");

background-size: cover;

}

.user_card {

height: 400px;

width: 350px;

margin-top: auto;

margin-bottom: auto;

background: #669900;

opacity: 70px;

position: relative;

display: flex;

justify-content: center;

flex-direction: column;

padding: 10px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),

0 6px 20px 0 rgba(0, 0, 0, 0.19);

-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),

0 6px 20px 0 rgba(0, 0, 0, 0.19);

-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),

0 6px 20px 0 rgba(0, 0, 0, 0.19);

border-radius: 5px;

}

.brand_logo_container {

position: absolute;

height: 170px;

width: 170px;

top: -75px;

border-radius: 50%;

background: #000099;

padding: 10px;

text-align: center;

}

.brand_logo {

height: 150px;

width: 150px;

border-radius: 50%;

border: 2px solid white;

}

.form_container {

margin-top: 100px;

}

.login_btn {

width: 100%;

background: #000099 !important;

color: white !important;

}

.login_btn:focus {

box-shadow: none !important;

outline: 0px !important;

}

.login_container {

padding: 0 2rem;

}

.input-group-text {

background: #000099 !important;

color: white !important;

border: 0 !important;

border-radius: 0.25rem 0 0 0.25rem !important;

}

</style>

</html>

Create template for the homepage in Visitor Management System in Django with Source Code.

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

{% extends 'base.html' %}
{% load static %}
{% block title %}<title>HealthPlus</title>{% endblock %}
{% block nav %} 
<div class="form-inline my-2 my-lg-0 ml-auto">
        {% if user.is_authenticated %}
        <h6 class="text-dark mx-3 my-auto">Hello, Admin</h6>
        <a class="btn btn-primary mx-2" href="/dashboard" role="button">Dashboard</a>
        {% else %}
        <a class="btn btn-success mx-2" href="admin_login/" role="button">Admin Login</a>
        {% endif %}
        
  </div>
{% endblock %}

{% block header %}
<header class="masthead text-white text-center " style="background:url('{% static '/img/background.jpg' %}')no-repeat center center;background-size:cover;">
    <div class="overlay"></div>
    <div class="container">
    <div class="row">
        <div class="col-xl-6 mx-auto">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title text-dark">Having any health issue ?</h5>
                        <p class="card-text text-dark">Look for the programmers according to your problems.</p>
                        <a href="/doctors" class="btn btn-primary">Find your Programmers.</a>
                    </div>
                </div>
        </div>
    </div>
</div>
</header>
{% endblock %}

{% block body %}
<section class="features-icons bg-light text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="mx-auto features-icons-item">
                        <div class="d-flex features-icons-icon"><i class="icon-screen-desktop m-auto text-primary" ></i></div>
                        <h3>FIND YOUR PROGRAMMERS</h3>
                        <p class="lead mb-0">Select a doctor for your programmers.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="mx-auto features-icons-item ">
                        <div class="d-flex features-icons-icon"><i class="icon-layers m-auto text-primary" ></i></div>
                        <h3>VISIT AND MEET</h3>
                        <p class="lead mb-0">Visit and meet with your programmers.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="mx-auto features-icons-item">
                        <div class="d-flex features-icons-icon"><i class="icon-check m-auto text-primary" ></i></div>
                        <h3>CONSULT PROBLEMS</h3>
                        <p class="lead mb-0">Consult problems with your programmers.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block footer %}
<footer class="footer bg-danger">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 h-100 text-center text-lg-left">
                    <ul class="list-inline mb-2">
                        <li class="list-inline-item text-white">Visit Our Website</li>
                        <li class="list-inline-item text-light"><span>:</span></li>
                        <li class="list-inline-item "><a href="https://itsourcecode.com/" class="text-white">itsourcecode.com</a></li>
                    </ul>
                    <p class="text-white small mb-4 mb-lg-0">Copyright © Itsourcecode Visitor Management System 2021.</p>
                </div>
                <div class="col-lg-6 h-100 text-center text-lg-right">
                    <ul class="list-inline mb-0">                    
                        <li class="list-inline-item "><a href="#"><i class="fa fa-facebook fa-2x fa-fw text-white"></i></a></li>
                        <li class="list-inline-item "><a href="#"><i class="fa fa-twitter fa-2x fa-fw text-white"></i></a></li>
                        <li class="list-inline-item "><a href="#"><i class="fa fa-instagram fa-2x fa-fw text-white"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
{% endblock %}

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

{% extends 'base.html' %}

{% load static %}

{% block title %}<title>HealthPlus</title>{% endblock %}

{% block nav %}

<div class="form-inline my-2 my-lg-0 ml-auto">

{% if user.is_authenticated %}

<h6 class="text-dark mx-3 my-auto">Hello, Admin</h6>

<a class="btn btn-primary mx-2" href="/dashboard" role="button">Dashboard</a>

{% else %}

<a class="btn btn-success mx-2" href="admin_login/" role="button">Admin Login</a>

{% endif %}

</div>

{% endblock %}

{% block header %}

<header class="masthead text-white text-center " style="background:url('{% static '/img/background.jpg' %}')no-repeat center center;background-size:cover;">

<div class="overlay"></div>

<div class="container">

<div class="row">

<div class="col-xl-6 mx-auto">

<div class="card text-center">

<div class="card-body">

<h5 class="card-title text-dark">Having any health issue ?</h5>

<p class="card-text text-dark">Look for the programmers according to your problems.</p>

<a href="/doctors" class="btn btn-primary">Find your Programmers.</a>

</div>

</div>

</div>

</div>

</div>

</header>

{% endblock %}

{% block body %}

<section class="features-icons bg-light text-center">

<div class="container">

<div class="row">

<div class="col">

<div class="mx-auto features-icons-item">

<div class="d-flex features-icons-icon"><i class="icon-screen-desktop m-auto text-primary" ></i></div>

<h3>FIND YOUR PROGRAMMERS</h3>

<p class="lead mb-0">Select a doctor for your programmers.</p>

</div>

</div>

<div class="col-lg-4">

<div class="mx-auto features-icons-item ">

<div class="d-flex features-icons-icon"><i class="icon-layers m-auto text-primary" ></i></div>

<h3>VISIT AND MEET</h3>

<p class="lead mb-0">Visit and meet with your programmers.</p>

</div>

</div>

<div class="col-lg-4">

<div class="mx-auto features-icons-item">

<div class="d-flex features-icons-icon"><i class="icon-check m-auto text-primary" ></i></div>

<h3>CONSULT PROBLEMS</h3>

<p class="lead mb-0">Consult problems with your programmers.</p>

</div>

</div>

</div>

</div>

</section>

{% endblock %}

{% block footer %}

<footer class="footer bg-danger">

<div class="container">

<div class="row">

<div class="col-lg-6 h-100 text-center text-lg-left">

<ul class="list-inline mb-2">

<li class="list-inline-item text-white">Visit Our Website</li>

<li class="list-inline-item text-light"><span>:</span></li>

<li class="list-inline-item "><a href="https://itsourcecode.com/" class="text-white">itsourcecode.com</a></li>

</ul>

<p class="text-white small mb-4 mb-lg-0">Copyright © Itsourcecode Visitor Management System 2021.</p>

</div>

<div class="col-lg-6 h-100 text-center text-lg-right">

<ul class="list-inline mb-0">

<li class="list-inline-item "><a href="#"><i class="fa fa-facebook fa-2x fa-fw text-white"></i></a></li>

<li class="list-inline-item "><a href="#"><i class="fa fa-twitter fa-2x fa-fw text-white"></i></a></li>

<li class="list-inline-item "><a href="#"><i class="fa fa-instagram fa-2x fa-fw text-white"></i></a></li>

</ul>

</div>

</div>

</div>

</footer>

{% endblock %}

Create template for the visitor details form in Visitor Management System in Django with Source Code.

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

{% extends 'base.html' %}
{% load static %}
{% block title %}<title>Meeting Information</title>{% endblock %}
{% block nav %} 
<div class="form-inline my-2 my-lg-0 ml-auto">
        <h6 class="text-dark mx-3 my-auto">Hello, Visitor</h6>
        <a class="btn btn-primary mx-2" href="/dashboard" role="button">Dashboard</a>   
  </div>
{% endblock %}

{% block header %}
<header class="masthead text-white text-center " style="background:url('{% static '/img/bg.jpeg' %}')no-repeat center center fixed;background-size:cover; height: 38rem;">
    <div class="overlay"></div>
    <div class="container">
    <div class="row mx-auto">
        <div class="col">
    <div class="card" style="width: 30rem;">
        <h5 class="card-header bg-info text-monospace text-light text-center">
            <strong>Current Visitor's Information</strong>
        </h5>
    
        <div class="card-body px-lg-5  text-dark">
             <div class="row">
                    <div class="col">
                        <div class="md-form">
                            <small>Name</small>
                            <h4>{{ meeting.visitor_name }}</h4>
                        </div>
                    </div>
                </div>
    
                <div class="md-form my-2">
                        <small>Email</small>
                        <h4>{{ meeting.visitor_email }}</h4>
                </div>

                <div class="md-form mt-4 mb-3">
                        <small>Check In time</small>
                        <h4>{{ meeting.time_in }}</h4>
                </div>
        </div>
        </div>
    </div>
    <div class="col">
            <div class="card text-dark" style="width: 34rem;">
                            <h5 class="card-header bg-info text-monospace text-light text-center">
                                    <strong>Host's Information</strong>
                                </h5>
            <div class="row">
                    <div class="col my-auto">
                            <div class="card-body ">
                                    <h3 class="card-title">{{ host.host_name }}</h3>
                                    <h5 class="card-text">{{ host.host_desc }}</h5>
                            </div>
                    </div>
                    
                    <div class="col">
                    <img src="/media/{{ host.host_image }}" class="card-img-top" alt="...">

                </div>
            </div>
             
            
        
    </div>
</div>
</header>
{% endblock %}

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

{% extends 'base.html' %}

{% load static %}

{% block title %}<title>Meeting Information</title>{% endblock %}

{% block nav %}

<div class="form-inline my-2 my-lg-0 ml-auto">

<h6 class="text-dark mx-3 my-auto">Hello, Visitor</h6>

<a class="btn btn-primary mx-2" href="/dashboard" role="button">Dashboard</a>

</div>

{% endblock %}

{% block header %}

<header class="masthead text-white text-center " style="background:url('{% static '/img/bg.jpeg' %}')no-repeat center center fixed;background-size:cover; height: 38rem;">

<div class="overlay"></div>

<div class="container">

<div class="row mx-auto">

<div class="col">

<div class="card" style="width: 30rem;">

<h5 class="card-header bg-info text-monospace text-light text-center">

<strong>Current Visitor's Information</strong>

</h5>

<div class="card-body px-lg-5 text-dark">

<div class="row">

<div class="col">

<div class="md-form">

<small>Name</small>

<h4>{{ meeting.visitor_name }}</h4>

</div>

</div>

</div>

<div class="md-form my-2">

<small>Email</small>

<h4>{{ meeting.visitor_email }}</h4>

</div>

<div class="md-form mt-4 mb-3">

<small>Check In time</small>

<h4>{{ meeting.time_in }}</h4>

</div>

</div>

</div>

</div>

<div class="col">

<div class="card text-dark" style="width: 34rem;">

<h5 class="card-header bg-info text-monospace text-light text-center">

<strong>Host's Information</strong>

</h5>

<div class="row">

<div class="col my-auto">

<div class="card-body ">

<h3 class="card-title">{{ host.host_name }}</h3>

<h5 class="card-text">{{ host.host_desc }}</h5>

</div>

</div>

<div class="col">

<img src="/media/{{ host.host_image }}" class="card-img-top" alt="...">

</div>

</div>

</div>

</div>

</header>

{% endblock %}

Create template for the meeting form in Visitor Management System in Django with Source Code.

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

{% extends 'base.html' %}
{% load static %}
{% block title%}<title>Meeting Form</title>{% endblock %}
{% block nav %}
<div class="form-inline my-2 my-lg-0 ml-auto">
  <h6 class="text-dark mx-3 my-auto">Hello, Visitor</h6>
  <a class="btn btn-primary mx-2" href="/dashboard" role="button">Dashboard</a>
</div>
{% endblock %}

{% block header %}
<header
  class="masthead text-white text-center "
  style="background:url('{% static '/img/bg.jpeg' %}')no-repeat center center fixed;background-size:cover; height: 38rem;"
>
  <div class="overlay"></div>
  <div class="container">
    <div class="row mx-auto">
      <div class="col">
        <div class="card" style="width: 30rem;">
          <h5 class="card-header bg-info text-monospace text-light text-center">
            <strong>Visitor's Information</strong>
          </h5>

          <div class="card-body px-lg-5 mt-2">
            <form
              class="text-center"
              style="color: #757575;"
              action="/dashboard/save_meeting/"
              method="POST"
            >
              {% csrf_token %}

              <div class="form-row">
                <div class="col">
                  <div class="md-form">
                    {{ form.visitor_name }}
                  </div>
                </div>
              </div>

              <div class="md-form my-3">
                {{ form.visitor_email }}
              </div>

              <div class="md-form my-3">
                {{ form.visitor_phone }}
              </div>

              <button
                class="btn bg-info btn-rounded my-2 waves-effect z-depth-0 text-light"
                type="submit"
                value="{{ host.host_name }}"
                name="host"
                style="width: 10rem;"
              >
                Check In
              </button>
            </form>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-dark" style="width: 35rem;">
          <h5 class="card-header bg-info text-monospace text-light text-center">
            <strong>Host's Information</strong>
          </h5>
          <div class="row">
            <div class="col my-auto">
              <div class="card-body ">
                <h3 class="card-title">{{ host.host_name }}</h3>
                <h5 class="card-text">{{ host.host_desc }}</h5>
              </div>
            </div>

            <div class="col">
              <img
                src="/media/{{ host.host_image }}"
                class="card-img-top"
                alt="..."
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
{% endblock %}

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

{% extends 'base.html' %}

{% load static %}

{% block title%}<title>Meeting Form</title>{% endblock %}

{% block nav %}

<div class="form-inline my-2 my-lg-0 ml-auto">

<h6 class="text-dark mx-3 my-auto">Hello, Visitor</h6>

<a class="btn btn-primary mx-2" href="/dashboard" role="button">Dashboard</a>

</div>

{% endblock %}

{% block header %}

<header

class="masthead text-white text-center "

style="background:url('{% static '/img/bg.jpeg' %}')no-repeat center center fixed;background-size:cover; height: 38rem;"

>

<div class="overlay"></div>

<div class="container">

<div class="row mx-auto">

<div class="col">

<div class="card" style="width: 30rem;">

<h5 class="card-header bg-info text-monospace text-light text-center">

<strong>Visitor's Information</strong>

</h5>

<div class="card-body px-lg-5 mt-2">

<form

class="text-center"

style="color: #757575;"

action="/dashboard/save_meeting/"

method="POST"

>

{% csrf_token %}

<div class="form-row">

<div class="col">

<div class="md-form">

{{ form.visitor_name }}

</div>

</div>

</div>

<div class="md-form my-3">

{{ form.visitor_email }}

</div>

<div class="md-form my-3">

{{ form.visitor_phone }}

</div>

<button

class="btn bg-info btn-rounded my-2 waves-effect z-depth-0 text-light"

type="submit"

value="{{ host.host_name }}"

name="host"

style="width: 10rem;"

>

Check In

</button>

</form>

</div>

</div>

</div>

<div class="col">

<div class="card text-dark" style="width: 35rem;">

<h5 class="card-header bg-info text-monospace text-light text-center">

<strong>Host's Information</strong>

</h5>

<div class="row">

<div class="col my-auto">

<div class="card-body ">

<h3 class="card-title">{{ host.host_name }}</h3>

<h5 class="card-text">{{ host.host_desc }}</h5>

</div>

</div>

<div class="col">

<img

src="/media/{{ host.host_image }}"

class="card-img-top"

alt="..."

/>

</div>

</div>

</div>

</div>

</div>

</div>

</header>

{% endblock %}

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 Visitor Management System 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/

Summary

In summary, this 2021 Visitor Management System 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 Visitor Management System 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.