Introduction
Django has proven its resilience as a framework for web development. Django provides developers with a discrete playing field with powerful libraries that help cut down on development time. Django enables the developer to engage with both the client-side and the server-side in a well versed environment. In this article, we explore the Django template context that helps with rendering content to a template on the client-side.
Prerequisites
- Python 3.x
- Django
- Pip
Getting Started
As always, having a virtual environment set up is crucial as it helps with controlling code dependencies. So create a virtual environment using python venv a standard library for creating and managing virtual environments. Using terminal, implement the following steps.
Make new directory
mkdir directoryname
and cd into the new directorycd directoryname
Create virtual environment
python3 -m venv myvenv
CD into the virtual environment
cd myvenv
Activate virtual environment
source bin/activate
Now install Django in new virtual environment
First, install pip
sudo apt-get install python3-pip
Using pip, install Django framework
pip3 install django
Verify installation
django-admin --version
Set up Django project
With Django framework now installed, create Django project using
django-admin startproject projectname
CD into the project created
cd projectname
Make migrations for the database
python3 manage.py migrate
Create super user for admin access using
python3 manage.py createsuperuser
and enter your username, email and password.Now create your first Django app using
python3 manage.py startapp appname
Start server
python3 manage.py runserver
and on your terminal you will get a link i.ehttp://127.0.0.1:8000/
When you click the link, you will be directed to a webpage on your browser and it should look as shown below:
Rendering your first template
Django has a dynamic templating system that helps in rendering HTML files to the web.
Configuring settings.py file
Go to settings.py under your project folder and configure the INSTALLED_APPS list variable. Add 'my_app.apps.WebAppConfig'
to the list variable.
Creating templates folder
In your app folder, create a new folder and name it templates. Inside the templates folder create another folder with the same name as your app name i.e if you app name is my_app the folder inside the templates folder should be my_app too.
Create an index.html file in the newly created folder.
Creating your first view
Go to views.py file in your app folder.
from django.shortcuts import render
def home(request):
return render(request, 'my_app/index.html')
In your app folder, create a urls.py file and initiate your home page route
from django.urls import path
from my_app.views home
urlpatterns = [
path('', home, name='home'),
]
In your project folder, edit the urls.py file to include the urls from your app.
from django import urls
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('my_app.urls'))
]
Using template context
The template context is a dictionary with variable names represented as key value pairs. It is initiated within a view function to pass content to be render to a webpage. For example, we want to render data from the database to a webpage. Let the data be personal information for users.
Let's create a model for users in models.py
from django.db import models
class Users(models.Model):
fullname = models.CharField(max_length=100)
email = models.CharField(max_length=50)
mobile = models.CharField(max_length=15)
Make migrations to database:
python3 manage.py makemigrations
python3 manage.py migrate
To render the data, we can add the context to the home view function as follows:
from multiprocessing import context
from django.shortcuts import render
from .models import Users
def home(request):
context = {'users_list': Users.objects.all()}
return render(request, 'my_app/index.html', context)
In the index.html file, we can use template tags to render the user information as follows:
<!--Users Table-->
<div class="row">
<div class="table-responsive bg-white my-3" style="border-radius: 5px;">
<div class="title fw-bold fs-3">
Users List
</div>
<table class="table table-striped">
<thead class="border-bottom font-weight-bold">
<tr
<td>Full Name</td>
<td>Mobile</td>
<td>Email</td>
</tr>
</thead>
<tbody>
{% for user in users_list %}
<tr>
<td>{{user.fullname}}</td>
<td>{{user.mobile}}</td>
<td>{{user.email}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
All the user information will be render on the webpage inform of a table. The {{user.fullname}}
will be replaced by the fullname of the user and the same is true for the other variable names.
Conclusion
The template context's functionality helps in rendering content to a webpage in a quick and efficient manner. You can learn more about Django template context here.
Top comments (0)