Clinic Management System Project in Django with Source Code

April 15, 2021April 13, 2021 by adones evangelista

Clinic Management System Project in Django with Source Code

This Clinic Management System Project in Django created based on python, Django, and MYSQL Database. A Clinic Management System created using Python Django Framework on the backend and HTML, CSS, and JavaScript on the frontend. This is a role-based module in which the admin can perform any operation on the data.

A Clinic Management System is a full-stack Django web application that offers a clean, descriptive, and interactive user interface for viewing and registering for patients. It has responsive features and tabs for patients, health histories, patients visits, prescriptions, clinic staff, suppliers, feedbacks, drug records, and appointments.

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

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

This Clinic Management System Project also includes a Download Source Code for free, just find the downloadable source code below and click download now.

Admin Features of Clinic Management System Project in Django

Manage Patients – For the patients, the admin can add, edit, delete and view patients information.
Health Histories Management – For the health histories, the admin can add, edit, delete and health histories information.
Manage Patients Visits – For the patients visits, the admin can add, edit, and delete patients visits information.
Prescriptions Management – For the prescriptions, the admin can add, edit, delete and view prescriptions information.
Manage Clinic Staff– For the clinic staff, the admin can add, edit, delete and view clinic staff information.
Suppliers Management – For the suppliers, the admin can add, edit, delete and view suppliers information.
Manage Feedbacks – For the feedbacks, the admin can add, edit, and delete feedback information.
Drug Record Management – For the drug records, the admin can add, edit, delete and view drug records information.
Manage Appointments – For the Appointments, the admin can add, edit, delete and view appointments information.

Clinic Management System Project Steps on How to Create a Project

Time needed: 5 minutes.

Here’s the step’s on how to create a Clinic 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.

Module and Functionality for Clinic Management System Project

Create template for the homepage in Clinic Management System Project.

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

<!DOCTYPE html>
{% load static %}

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Event Management System</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli:500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>

<body class="bg-success">
<div class="container-fluid header text-center bg-primary">
  <h1 style="color: white;">CHMSC Events Management System</h1>
  <h3 style="color: white;"> Welcome {{ name }} </h3>
  <a href="{% url 'scmapp:user_logout' %}" style="font-size:20; color: white;">Logout</a><br>
  <span style="font-size:18px">{{ status }}</span>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <a href="{% url 'scmapp:user_event' %}">
      <div class="card bg-danger">
        <img src="{% static 'res/event.jpeg' %}">
        <div class="card-title text-center" style="color: white;">Events</div>
      </div>
      </a>
    </div>

    <div class="col-lg-6">
      <a href="{% url 'scmapp:ground_booking' %}">
      <div class="card bg-danger">
        <img src="{% static 'res/volley.jpg' %}" style="height:312px;">
        <div class="card-title text-center" style="color: white;">Events Booking</div>
      </div>
      </a>
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> -->

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

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<!DOCTYPE html>

{% load static %}

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<title>Event Management System</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Muli:500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="{% static 'css/index.css' %}">

</head>

<body class="bg-success">

<div class="container-fluid header text-center bg-primary">

<h1 style="color: white;">CHMSC Events Management System</h1>

<h3 style="color: white;"> Welcome {{ name }} </h3>

<a href="{% url 'scmapp:user_logout' %}" style="font-size:20; color: white;">Logout</a><br>

<span style="font-size:18px">{{ status }}</span>

</div>

<div class="container">

<div class="row">

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

<a href="{% url 'scmapp:user_event' %}">

<div class="card bg-danger">

<img src="{% static 'res/event.jpeg' %}">

<div class="card-title text-center" style="color: white;">Events</div>

</div>

</a>

</div>

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

<a href="{% url 'scmapp:ground_booking' %}">

<div class="card bg-danger">

<img src="{% static 'res/volley.jpg' %}" style="height:312px;">

<div class="card-title text-center" style="color: white;">Events Booking</div>

</div>

</a>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>

</html>

Create template for the login and registration form in Clinic Management System Project.

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

<!DOCTYPE html>
{% load static %}
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Registration| Welcome</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli:500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="{% static "css/registration.css" %}">
  <script type="text/javascript" src="{% static "js/main.js" %}"></script>
</head>
<body class="bg-success">

<div class="container-fluid header text-center bg-primary">
  <h1 style="color: white;">CHMSC Events Management System</h1>
</div>

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-0 btn-bar" onclick="navigation(event)">
      <a href="#" class="myactive" id="registration">Registration</a>
      <a href="#" class="" id="login">Login</a>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-lg-6 box bg-danger" style="display:block;">
      <!-- <span style="font-size:26px;">Registration</span> -->
      <center><h1 class="bg-primary" style="color: white; margin-right: 30px;"> Registration</h1></center>
      <span style="font-size:18px;">{{ status }}</span>

      <div class="row justify-content-center">
        <div class="col-lg-6">
          <div class="inputbox">
            <form action="{% url 'scmapp:test' %}" method="post">
              {% csrf_token %}
              Username<br>
              <input type="text" name="uname" autocomplete="off" required><br>

              E-Mail<br>
              <input type="text" name="email" autocomplete="off" required><br>

              Gender<br>
              <input type="radio" name="gender" value="Male"> Male
              <input type="radio" name="gender" value="Female"> Female<br>

              Password<br>
              <input type="password" name="password" minlength="8" autocomplete="off" required><br>

              Re-enter Password<br>
              <input type="password" name="repassword" minlength="8" autocomplete="off" required>

              <input type="submit" value="Submit" name="submit" style="margin:0 25% 0 25%;">
            </form>
          </div>
        </div>
    </div>
    <a href="#" onclick="navigation(event)" id="loginLink" style="color: white;">Already registered? Login</a>

    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-lg-6 loginBox bg-danger" style="display:none;">
      <center><h1 class="bg-primary" style="color: white; margin-right: 30px;">Login</h1></center>

      <div class="row justify-content-center">
        <div class="col-lg-6">
          <div class="inputBox" style="font-size:18px;">
            <form action="{% url 'scmapp:login_user' %}" method="post">
              {% csrf_token %}
              Username<br>
              <input type="text" name="name" autocomplete="off" required><br>

              Password<br>
              <input type="password" name="password" minlength="8" autocomplete="off" required>

              <input type="submit" value="Login" name="login" style="margin:0 25% 0 25%;">
            </form>
          </div>
        </div>
      </div>
      <a href="#" onclick="navigation(event)" id="regLink" style="color: white;">Not a registered user? Register</a>

    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> -->

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

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

<!DOCTYPE html>

{% load static %}

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<title>Registration| Welcome</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Muli:500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="{% static "css/registration.css" %}">

<script type="text/javascript" src="{% static "js/main.js" %}"></script>

</head>

<body class="bg-success">

<div class="container-fluid header text-center bg-primary">

<h1 style="color: white;">CHMSC Events Management System</h1>

</div>

<div class="container-fluid">

<div class="row justify-content-center">

<div class="col-0 btn-bar" onclick="navigation(event)">

<a href="#" class="myactive" id="registration">Registration</a>

<a href="#" class="" id="login">Login</a>

</div>

</div>

</div>

<div class="container-fluid">

<div class="row justify-content-center">

<div class="col-lg-6 box bg-danger" style="display:block;">

<center><h1 class="bg-primary" style="color: white; margin-right: 30px;"> Registration</h1></center>

<span style="font-size:18px;">{{ status }}</span>

<div class="row justify-content-center">

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

<div class="inputbox">

<form action="{% url 'scmapp:test' %}" method="post">

{% csrf_token %}

Username<br>

<input type="text" name="uname" autocomplete="off" required><br>

E-Mail<br>

<input type="text" name="email" autocomplete="off" required><br>

Gender<br>

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female<br>

Password<br>

<input type="password" name="password" minlength="8" autocomplete="off" required><br>

Re-enter Password<br>

<input type="password" name="repassword" minlength="8" autocomplete="off" required>

<input type="submit" value="Submit" name="submit" style="margin:0 25% 0 25%;">

</form>

</div>

</div>

</div>

<a href="#" onclick="navigation(event)" id="loginLink" style="color: white;">Already registered? Login</a>

</div>

</div>

</div>

<div class="container-fluid">

<div class="row justify-content-center">

<div class="col-lg-6 loginBox bg-danger" style="display:none;">

<center><h1 class="bg-primary" style="color: white; margin-right: 30px;">Login</h1></center>

<div class="row justify-content-center">

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

<div class="inputBox" style="font-size:18px;">

<form action="{% url 'scmapp:login_user' %}" method="post">

{% csrf_token %}

Username<br>

<input type="text" name="name" autocomplete="off" required><br>

Password<br>

<input type="password" name="password" minlength="8" autocomplete="off" required>

<input type="submit" value="Login" name="login" style="margin:0 25% 0 25%;">

</form>

</div>

</div>

</div>

<a href="#" onclick="navigation(event)" id="regLink" style="color: white;">Not a registered user? Register</a>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>

</html>

Create template for the event in Clinic Management System Project.

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

<!DOCTYPE html>
{% load static %}

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CHMSC Events</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli:500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/admin_event.css' %}">
</head>
<body class="bg-primary">
<div class="container-fluid header text-center bg-success">
 <h2 style="color: white;">CHMSC Events</h2>
</div>

<div class="container box bg-success">
  <h2 class="bg-danger" style="color: white;">Event Details</h2>

  <table>
    <tr class="bg-danger" style="color: white;">
      <td>No</td>
      <td>Event name</td>
      <td>Date</td>
      <td>Time</td>
      <td>Duration(hours)</td>
    </tr>

    {% for e in event %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ e.name}}</td>
        <td>{{ e.date }}</td>
        <td>{{ e.time }}</td>
        <td>{{ e.duration }}</td>
      </tr>
    {% empty %}
      <tr>
        <td colspan="5" align="center">No events</td>
      </tr>
    {% endfor %}

  </table>

  <div class="footer">
    <a href="{% url 'scmapp:user_home' %}"><button>Back</button></a>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> -->

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

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>

{% load static %}

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<title>CHMSC Events</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Muli:500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="{% static 'css/admin_event.css' %}">

</head>

<body class="bg-primary">

<div class="container-fluid header text-center bg-success">

<h2 style="color: white;">CHMSC Events</h2>

</div>

<div class="container box bg-success">

<h2 class="bg-danger" style="color: white;">Event Details</h2>

<table>

<tr class="bg-danger" style="color: white;">

<td>No</td>

<td>Event name</td>

<td>Date</td>

<td>Time</td>

<td>Duration(hours)</td>

</tr>

{% for e in event %}

<tr>

<td>{{ forloop.counter }}</td>

<td>{{ e.name}}</td>

<td>{{ e.date }}</td>

<td>{{ e.time }}</td>

<td>{{ e.duration }}</td>

</tr>

{% empty %}

<tr>

<td colspan="5" align="center">No events</td>

</tr>

{% endfor %}

</table>

<div class="footer">

<a href="{% url 'scmapp:user_home' %}"><button>Back</button></a>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></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 Clinic Management System Project with Source Code?

First Step: Extract/unzip the file
Second Step: 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
Third Step: Finally, open the browser and go to http://127.0.0.1:8000/

Summary

In summary, this 2021 Clinic Management System Project 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 Clinic Management System Project with Source Code, please feel free to leave a comment below.

Leave a Comment Cancel reply

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