Django displays source code instead of web page - html

Question

I am new to django. Any help will be appreciated. It displays source code instead of web page. To be specific the base page (base.html). What I want is to use the data from patient details and doctors detail as they are from different groups. I think that the problem is when i pass my dictionary.
Views.py
def booking(request):
if not request.user.is_active:
messages.success(
request, ("In order to book an appointment you must login first"))
return redirect('login')
doctor_details = Doctor.objects.all()
f = {'doctor_details': doctor_details}
g = request.user.groups.all()[0].name
if g == 'Patient':
patient_details = Patient.objects.all().filter(EmailAddress=request.user)
d = {'patient_details': patient_details}
return render(request, 'booking.html', f, d)
Html
{% extends 'base.html' %}
{% block content %}
{% load static %}
<div class="loginContainer">
<div class="img">
<img src="{% static 'image/booking.svg' %}">
</div>
<div class="login-content">
{% for d in patient_details %}
<form method="POST" id="signupForm">
{% for f in doctors_details %}
{% csrf_token %}
<h2 class="title">Booking form</h2>
<div class="input-div one">
<div class="i">
<ion-icon name="person-circle"></ion-icon>
</div>
<div class="div">
<h5>Patient ID: PID - {{d.id}}</h5>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="person"></ion-icon>
</div>
<div class="div">
<h5>Name: {{d.FirstName}} {{d.LastName}}</h5>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="business"></ion-icon>
</div>
<div class="div">
<h5>Department</h5>
<input type="text" class="input" name="age" required>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="medkit"></ion-icon>
</div>
<div class="div">
<h5>{{f.name}}</h5>
<input type="text" class="input" name="age" required>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="bandage"></ion-icon>
</div>
<div class="div">
<h5>Symptoms</h5>
<input type="textarea" class="input" name="address" required>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="document-text"></ion-icon>
</div>
<div class="div">
<h5>Comments (Optional)</h5>
<input type="textarea" class="input" name="address">
</div>
</div>
<button type="submit" class="loginBtn">Submit</button>
Return to Personal Profile
Cancel Booking
{% endfor %}
</form>
{% endfor %}
</div>
</div>
{% ifequal error 'no' %}
<script type="text/javascript">
alert("You have successfully registered.")
window.location = ('loginPage')
</script>
{% endifequal %}
{% ifequal error 'yes' %}
<script type="text/javascript">
alert("Something went wrong.")
</script>
{% endifequal %}
{% endblock %}
Urls.py
from django.urls import path
from . import views
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.index),
path('contact', views.contact),
path('loginPage', views.loginPage, name='login'),
path('doctorlogin', views.doctorlogin, name='doclogin'),
path('help', views.help),
path('signup', views.signup, name='signup'),
path('doctors', views.doctors, name='doctors'),
path('booking', views.booking, name='booking'),
path('userProfile', views.userProfile, name='userProfile'),
path('doctorProfile', views.doctorProfile, name='doctorProfile'),
path('logout', views.logout, name='logout')
]
urlpatterns = urlpatterns + \
static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Answer 1

You should pass context as one dictionary. You can use update method to add new items to your dictionary:
def booking(request):
if not request.user.is_active:
messages.success(
request, ("In order to book an appointment you must login first"))
return redirect('login')
doctor_details = Doctor.objects.all()
f = {'doctor_details': doctor_details}
g = request.user.groups.all()[0].name
if g == 'Patient':
patient_details = Patient.objects.all().filter(EmailAddress=request.user)
f.update({'patient_details': patient_details}) # Using update
return render(request, 'booking.html', f)

Answer 2

Thank you everyone for contributing. I found my mistake. The problem was in the way i use the views.py. The above answer is correct but i prefer to use it this way.
Views.py
def booking(request):
if not request.user.is_active:
messages.success(
request, ("In order to book an appointment you must login first"))
return redirect('login')
doctor_details = Doctor.objects.all()
g = request.user.groups.all()[0].name
if g == 'Patient':
patient_details = Patient.objects.all().filter(EmailAddress=request.user)
d = {'patient_details': patient_details,
'doctor_details': doctor_details} #edited part
return render(request, 'booking.html', d)
And for the html part.
Html
{% extends 'base.html' %}
{% block content %}
{% load static %}
<div class="loginContainer">
<div class="img">
<img src="{% static 'image/booking.svg' %}">
</div>
<div class="login-content">
<form method="POST" id="signupForm">
{% csrf_token %}
<h2 class="title">Booking form</h2>
{% for f in patient_details%} #here is the change
<div class="input-div one">
<div class="i">
<ion-icon name="person-circle"></ion-icon>
</div>
<div class="div">
<h5>Patient ID: PID - {{f.id}}</h5>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="person"></ion-icon>
</div>
<div class="div">
<h5>Name: {{f.FirstName}} {{f.LastName}}</h5>
</div>
</div>
{% endfor %}
<div class="input-div one">
<div class="i">
<ion-icon name="business"></ion-icon>
</div>
<div class="div">
<h5>Department</h5>
<input type="text" class="input" name="age" required>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="medkit"></ion-icon>
</div>
<div class="div">
<div class="custom-select">
<select name="doctors" required>
{% for f in doctor_details %} #here is the change
<option value="{{f.name}}">{{f.name}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="bandage"></ion-icon>
</div>
<div class="div">
<h5>Symptoms</h5>
<input type="textarea" class="input" name="address" required>
</div>
</div>
<div class="input-div one">
<div class="i">
<ion-icon name="document-text"></ion-icon>
</div>
<div class="div">
<h5>Comments (Optional)</h5>
<input type="textarea" class="input" name="address">
</div>
</div>
<button type="submit" class="loginBtn">Submit</button>
Return to Personal Profile
Cancel Booking
</form>
</div>
</div>
{% ifequal error 'no' %}
<script type="text/javascript">
alert("You have successfully registered.")
window.location = ('loginPage')
</script>
{% endifequal %}
{% ifequal error 'yes' %}
<script type="text/javascript">
alert("Something went wrong.")
</script>
{% endifequal %}
{% endblock %}