How to Build a Django Appointment App

Introduction

In this tutorial, we will be building a Django medical appointment booking app. In this application the patient will be entering his name, the start date and time, and end date and time, and the appointment message.

Install module

For this tutorial we will use Django as our primary web server, to install Django run the command below.

pip3 install Django

Project configuration

To begin we will first create our Django project, to do so run the command below in the terminal as shown.

django-admin startproject django_appointment

The above command will create a folder, cd into the folder, and then run the command below to create our appointment app.

python3 manage.py startapp appointment

Next, open your app in a code editor, and inside the settings.py file and in the installed_apps list insert the code below.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'appointment',
]

Create appointment model

Inside the appointment models.py file let’s create a model as shown below.

from django.db import models


class Appointment(models.Model):
    name = models.CharField(max_length=30)
    text = models.CharField(max_length=700)
    start_time = models.DateTimeField()
    end_time = models.DateTimeField()

    def __str__(self):
        return self.name

Create a view

Now let’s create a view to create our appointment, inside the appointment folder insert the code below in the views.py file.

from django.shortcuts import render,redirect
from . models import Appointment


def createAppointment(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        text = request.POST.get('text')
        start_time = request.POST.get('start_time')
        end_time = request.POST.get('end_time')
        a = Appointment(name=name,text=text,start_time=start_time,end_time=end_time)
        a.save()
        return redirect('success')
    else:
        return render(request, 'appointment/home.html')

def success(request):
    return render(request, "appointment/success.html")

The above code takes information from a user and every time a user enters information he is redirected to a success page. Now let’s create templates for the application below.

Create templates

Inside the appointment folder create a folder called templates and inside it create a folder called appointment where we will create two files home.html and success.html.

Inside the home.html file insert the code below.

<!DOCTYPE html>
<html>
<head>
    <title>Appointment Form</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 50px;
        }

        h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 30px;
        }

        form {
            width: 400px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            text-align: left;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        input[type="text"],
        textarea,
        input[type="datetime-local"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 20px;
            font-family: inherit;
            font-size: 16px;
            color: #333;
        }

        input[type="submit"] {
            background-color: #4caf50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1> Elsy Medical Center</h1>
    <form method="POST">
        {% csrf_token %}
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required><br><br>
        
        <label for="text">Text:</label>
        <textarea name="text" id="text" rows="4" required></textarea><br><br>
        
        <label for="start_time">Start Time:</label>
        <input type="datetime-local" name="start_time" id="start_time" required><br><br>
        
        <label for="end_time">End Time:</label>
        <input type="datetime-local" name="end_time" id="end_time" required><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Let’s now create the success template. Inside the success.html file insert the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 50px;
        }

        h2 {
            color: #333;
            font-size: 24px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div>
        <h2>Thanks for booking an appointment with us!</h2>
    </div>
</body>
</html>

Register models to the admin

Inside the admin.py file insert the code below.

from django.contrib import admin
from .models import Appointment

class AppointmentAdmin(admin.ModelAdmin):
    list_display = ('name', 'text', 'start_time','end_time')


admin.site.register(Appointment, AppointmentAdmin)

Create application routes

Inside the appointment folder create a file called urls.py and insert the code below.

from django.urls import path 
from . import views 

urlpatterns = [
    path('',views.createAppointment,name="appointment"),
    path('success/',views.success, name="success"),
]

Create project routes

Inside our main project folder [ django_appointment ] in the urls.py file insert the code below.

from django.contrib import admin
from django.urls import path,include 

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('appointment.urls')),
]

Create database

To create our database we will need to run the commands below in our terminal.

python3 manage.py makemigrations

After the command above executes run the command below.

python3 manage.py migrate

Create superuser

Now we need to create a superuser, this will be our admin where we will be able to see the appointments. To create one run the command below in your terminal.

python3 manage.py createsuperuser

You will be asked to create a username a password an email, take note of these credentials since you will use them to login into the admin dashboard.

Run

Now let’s run our application, to do so run the command below.

python3 manage.py runserver

Results

Open your browser at the address [ http:127.0.0.1:8000 ] and you should be able to access your application as shown below.

Now to access the submitted appointments login the admin at the address [ http://127.0.0.1:8000/admin ] and you now can access the dashboard as shown below.