Django - Adding Template

In last tutorial we configured view and url to change homepage and get text data. But when we are creating any web app, no one needs such text output, we need the output in HTML so that it looks good. 

In this tutorial, we will create an HTML templet and then use that in the django. We will use the same templet for multiple URLs and views.  

To start with that first we need to configure locations of templates in the Django. By default, it takes a templet from the directory of the application, which is good if your applications have different HTML templets or different web app themes. But if you have a common theme or a common header then its best not to put templates in the application directory instead we put all templates in a common directory.

For our project, we will create a directory called Templates in the project folder.

mkdir Templates

Now our project folder will looks like

Configure settings.py

Open settings.py file and find TEMPLATES section. Look for 'DIRS' settings and replace them with

'DIRS': [os.path.join(BASE_DIR,'Templates')],

"os.path.join" is used to combine path in python. BASE_DIR is path of your manage.py file or your project directory now we are adding /Templates in that path.. so it will become <Base_Dir>/Templates.

Once settings.py file is configured, we need to create a HTML templet.

HTML Template file

To create first HTML Template file, goto Templates dir and create home.html file.

<h1> Welcome to Stock system</h1>
<p> Paragraph data </p>

Configure view.py file

Goto your stockmgmnt/view.py file where we have defined all view functions. In last tutorial we used HttpResponse to return http data. But, now we will use render which is by default imported in your view file. To use html templet return with render as below

return render(request,'home.html')

This will return data from home.html

Now check your output on url <url>/stock/.

 

Passing Parameter to HTML Template

We have created static HTML file for render and got output, but in larger webapp we need to pass data to html file, like profile info and other details.

With Django context we can pass parameter to html file. For that first we need to configure html file. Open your HTML file and replace your current lines with

<h1> Welcome to {{application_name}} </h1>
<p>{{pdata}}</p>

Here we are using 2 parameters, first is appication_name and second is pdata. Now we need to define those parameter in view function. Goto your view.py file and edit function as:

def home(request):
    context = {
    'application_name' : 'Stock Management',
    'pdata' : 'Some data for testing'
    }
    return render(request,'home.html',context)

Here I have defined a context with 2 parameter and then passed context in render function. Now check the output of your url.

You can use same HTML file with multiple view functions. This is helpfull when you hve HTML template and want to use same template for multiple pages. Like Table templet and etc.

Try using same HTML file with different view functions..

 

Happing Coading.. !!!!!!!!!!

Below is video for above tutorial

 

About the author

akarperiwal

0 Comments

Please login to comment