Python-Django/C2/Create-HTML-template-in-Django/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of script: Creating html template in Django

Keywords: Video tutorial, Django Template

Visual cue Narration
Slide: Creating html template in Django Hello and welcome to the spoken tutorial on “Creating HTML Template in Django”.
Slide: Learning Objectives In this tutorial, we will learn to:
  • Create a Django template
  • Use Django HTML template
Slide: System Requirements To record this tutorial, I am using
  • Ubuntu Linux 16.04 OS
  • Python 3.5
  • Python 3.4-venv or higher
  • gedit Text Editor and
  • Firefox web browser
Slide: Prerequisites To follow this tutorial, you need to know
  • How to create views in Django
  • Knowledge in HTML
  • If not, then please go through the prerequisite tutorials in this website.
Slide: What is a Django Template?
  • We have hardcoded the output in the view earlier in this series.
  • Django template separates the design from Python
  • Django view can use this template
  • Template HTML files contain Django template tags and variables
  • Django replaces these tags and variables in the HTML file, with the data obtained from views
Open a Terminal window

Press CTRl+ALT+T simultaneously

Let us open the terminal by pressing Ctrl, Alt and T keys simultaneously on your keyboard.
[Terminal]

cd my-django [Enter]

Now using cd command, go to the folder my hyphen django which we had created earlier.
[Terminal]

Type source myapp_env/bin/activate

and press Enter

Let us activate the virtual environment myapp underscore env

Type source <space> myapp underscore env slash bin slash activate

And press Enter.

Here onwards, please remember to press the Enter key after typing each command.
[Terminal] In our previous tutorial, we had created a Django views and route to the URLs.
[Terminal] Let us use Django’s template system to separate the design from Python.

So, let’s create a template that the view can use.

[Terminal]

Type cd mysite/blog and press Enter

Next, go to the blog directory in order to create a directory called templates.

Type cd <space> mysite slash blog

[Terminal]

Type mkdir templates [Enter]

Let's create a directory called templates.

Type mkdir <space> templates

[Terminal]

Type cd templates [Enter]

Type mkdir blog [Enter]

Create a directory called blog within the templates directory.

Type cd <space> templates

Then, type mkdir <space> blog

[Terminal]

Highlight

blog/templates/blog/

Type gedit blog/blogs.html & [Enter]

In the blog directory under templates, create a file called blogs dot html

Type gedit <space> blog slash blogs dot html <space> ampersand

[blogs.html] Type:

<!DOCTYPE html>

<html>

<body>

{% if articles %}

<ul>

{% for article in articles %}

<li>{{ article.title | title }} - Blog:{{ article.blog.name }} </li>

{% endfor %}

{% else %}

<p>No Blog articles are available.</p>

</ul>

{% endif %}

</body>

</html>

We are now in blogs.html file.

Type the code as shown here.

[blogs.html]

{% if articles %}

Highlight

{% %}

{{ article.title | title }} - Blog:{{article.blog.name}}

Highlight

{{ }}

Django templates system comes with a wide variety of built-in tags and filters

Let us understand these tags and filters.

[blogs.html]

Highlight

{% %}

Template tags are used to perform a special function like for loop and if condition.
[blogs.html]

Highlight

{% if articles %}

{% endif %}

If tag evaluates a variable when the condition is True.

articles will be passed by the view.

So here, it checks if the article is not empty.

[blogs.html]

Highlight

{% for article in articles %}

{% endfor %}

For tag allows to loop over each item in a sequence.

So if articles are there, then it enters the for loop.

For every article in the articles, everything between for and endfor will be rendered.

[blogs.html]

Highlight

'''{{ article.title | title }}'''

So within for tag we see the following.

Within double curly braces article.title pipe title

Variables and objects are surrounded by double curly braces.

Here article is the Article object and title is it's attribute.

article.title is a variable to be displayed on the web page.

[blogs.html]

Highlight

{{ article.title''' | '''title }}

Pipe is used to apply filter.

Filters are used to modify the variables.

So here, article.title will return a string.

And pipe title filter will modify the string to title case.

[blogs.html]

Highlight '''{{ article.title | title }} - Blog:{{article.blog.name}}'''

Further we also display the blog associated with the article - article.blog.name

Here name is the attribute of the blog.

You can apply the title filter here as well.

[blogs.html]

Highlight

{% else %}

After the for tag, we have an else tag for the if condition.

This else tag is optional.

[blogs.html]

Highlight

<p>'''No Blog articles are available.'''</p>

When the If condition is False, then that article is empty.

It will display No Blog articles are available.

[blogs.html]

Highlight the complete code

Now, we have created a Django templates using an HTML file.
Press Ctrl+S Save the file.
Switch to Terminal Switch to the terminal
[Terminal]

Type cd ../.. [Enter]

Let's come out from the current folder to the mysite folder.

Type cd <space> dot dot slash dot dot

Press Ctrl + L Let me clear the terminal.
[Terminal]

Type gedit blog/views.py & [Enter]

Let’s modify our view function in the main blog directory to use the template.

Type gedit <space> blog slash views dot py <space> ampersand

[views.py] Type:

def get_blogs(request) :

articles = Article.objects.all()

context = {'articles': articles}

return render(request, ‘blog/blogs.html’, context)

We are now in views.py file.

Let's modify the function get underscore blogs to use the template.


Replace the content of get underscore blogs function as shown here.

[views.py]

Highlight

articles = Article.objects.all()

Articles dot objects dot all returns a QuerySet that contains all Article objects in database.
[views.py]

Highlight

context = {'articles': articles}

Context is a dictionary with template variables as a key with its corresponding values.
[views.py]

Highlight

return render(request, 'blog/blogs.html' , context)

In the return statement, we have used the some of the render function arguments.

The request object used to generate a response.

Path of the Template file (blog/blogs.html)

The optional argument is context, which is to pass the variables to the template.

[views.py]

Highlight

return render(request, 'blog/blogs.html' , context)

render function renders the templates with a request, context.
[views.py]

Highlight

from django.shortcuts import render

render function is imported from django dot shortcuts module.
[view.py]

Highlight def get_blogs(request) section

Now, we have modified our view to use html template.
Press Ctrl+S Save the file
Switch back to Terminal Switch back to Terminal.
[Terminal]

Run the server

Type python manage.py runserver and press Enter

As we have already done URL mapping in the earlier tutorial, let us run the Django development server.

Type python <space> manage dot py <space> runserver

[browser]

Open a browser and type

localhost:8000/blogs/get_blogs/

Open the web browser, and type the following url in the address bar.

localhost:8000/blogs/get_blogs/

[browser]

Output:

My Article - Blog: My First Blog

We can see the HTML template page as

Title of article hyphen Blog : followed by blog name

Thus, we have created the HTML template for Django project.

[Terminal]

Press Ctrl+C keys

Let us now stop the server and deactivate the virtual environment.

Switch to the terminal.

Press Ctrl and C keys to stop the server.

[Terminal]

Type deactivate [Enter]

Then type deactivate and press Enter.
With this, we come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt about
  • Create a Django template
  • Use Django HTML template
  • Tags and Filters in Django template
Slide: Assignment As an assignment,
  • Create multiple blog objects and
  • Insert them in table format using Django's template system
Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forum for specific questions: Please post your timed queries in this Forum.
Slide: FOSSEE to answer questions Please post your general or technical questions in this Forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide: Thanks Slide This script has been contributed by Thiagarajar College of Engineering and the FOSSEE Project, IIT Bombay.

The video has been recorded by Praveen from Spoken Tutorial Project, IIT Bombay.

Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Python-Django/C2/Create-HTML-template-in-Django/English&oldid=44363"