Difference between revisions of "Python-Django/C2/Create-HTML-template-in-Django/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 9: Line 9:
 
|-
 
|-
 
|| Slide: Creating html template in Django
 
|| Slide: Creating html template in Django
|| Hello and welcome to the spoken tutorial on “'''Creating HTML Template in Django”'''
+
|| Hello and welcome to the spoken tutorial on “'''Creating HTML Template in Django”'''.
 
|-
 
|-
 
|| Slide: Learning Objectives
 
|| Slide: Learning Objectives
 
|| In this tutorial, we will learn to:
 
|| In this tutorial, we will learn to:
  
* Create a '''Django '''template
+
* Create a '''Django template'''
* Use '''Django HTML '''template
+
* Use '''Django HTML template'''
  
 
|-
 
|-
Line 31: Line 31:
 
|| To follow this tutorial, you need to know
 
|| To follow this tutorial, you need to know
  
* How to''' '''create''' '''views in''' Django'''
+
* How to create '''views''' in''' Django'''
 
* Knowledge in '''HTML'''
 
* Knowledge in '''HTML'''
 
* If not, then please go through the prerequisite tutorials in this website.
 
* If not, then please go through the prerequisite tutorials in this website.
Line 39: Line 39:
 
||  
 
||  
 
* We have hardcoded the output in the '''view''' earlier in this series.
 
* We have hardcoded the output in the '''view''' earlier in this series.
* '''Django''' template separates the design from '''Python'''
+
* '''Django template''' separates the design from '''Python'''
* '''Django view''' can use this template
+
* '''Django view''' can use this '''template'''
* Template '''HTML''' files contain '''Django''' template '''tags''' and '''variables'''  
+
* '''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 '''
 
* '''Django''' replaces these '''tags''' and '''variables''' in the '''HTML''' file, with the data obtained from '''views '''
  
Line 48: Line 48:
  
 
Press CTRl+ALT+T simultaneously
 
Press CTRl+ALT+T simultaneously
|| Let us open the '''terminal '''by pressing '''Ctrl''', '''Alt''' and '''T '''keys simultaneously on your keyboard.
+
|| Let us open the '''terminal '''by pressing '''Ctrl, Alt''' and '''T '''keys simultaneously on your keyboard.
 
|-  
 
|-  
 
|| [Terminal]
 
|| [Terminal]
Line 71: Line 71:
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
|| In our previous tutorial, we had created a '''Django views''' and route to the '''URLs'''
+
|| In our previous tutorial, we had created a '''Django views''' and route to the '''URLs'''.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
|| Let us use '''Django’s template system '''to separate the design from Python
+
|| Let us use '''Django’s template system '''to separate the design from '''Python'''.
  
So, let’s create a template that the view can use
+
So, let’s create a '''template''' that the '''view''' can use.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
  
 
Type cd mysite/blog and press Enter
 
Type cd mysite/blog and press Enter
|| Next, go to the '''blog''' directory in order to create a directory called '''templates'''
+
|| Next, go to the '''blog''' directory in order to create a directory called '''templates'''.
  
 
Type '''cd <space> mysite slash blog'''
 
Type '''cd <space> mysite slash blog'''
Line 88: Line 88:
  
 
Type mkdir templates [Enter]
 
Type mkdir templates [Enter]
|| Let's create a directory called '''templates'''  
+
|| Let's create a directory called '''templates'''.
  
 
Type''' mkdir <space> templates '''
 
Type''' mkdir <space> templates '''
Line 97: Line 97:
  
 
Type mkdir blog [Enter]
 
Type mkdir blog [Enter]
|| Create a directory called '''blog '''within the '''templates '''directory
+
|| Create a directory called '''blog '''within the '''templates '''directory.
  
 
Type '''cd <space> templates'''
 
Type '''cd <space> templates'''
Line 110: Line 110:
  
 
Type gedit blog/blogs.html & [Enter]  
 
Type gedit blog/blogs.html & [Enter]  
|| In the blog directory under templates, create a file called blogs dot html  
+
|| In the '''blog directory''' under '''templates''', create a file called '''blogs dot html'''
  
Type '''gedit <space> blog slash blogs dot html''' '''<space> ampersand'''
+
Type '''gedit <space> blog slash blogs dot html <space> ampersand'''
 
|-
 
|-
 
|| [blogs.html] Type:
 
|| [blogs.html] Type:
Line 144: Line 144:
 
</html>
 
</html>
  
|| We are now in '''blogs.html '''file
+
|| We are now in '''blogs.html '''file.
  
Type the code as shown here
+
Type the code as shown here.
  
 
|-
 
|-
Line 163: Line 163:
 
'''{{ }}'''
 
'''{{ }}'''
  
|| '''Django''' '''templates system '''comes with a wide variety of built-in '''tags '''and '''filters'''
+
|| '''Django templates system '''comes with a wide variety of built-in '''tags '''and '''filters'''
  
Let us understand these''' tags''' and''' filters'''
+
Let us understand these''' tags''' and''' filters'''.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 172: Line 172:
  
 
'''{% %}'''
 
'''{% %}'''
|| '''Template tags '''are used to perform a special function like '''for loop '''and '''if conditions'''
+
|| '''Template tags '''are used to perform a special '''function''' like '''for loop '''and '''if condition'''.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 181: Line 181:
  
 
'''{% endif %}'''
 
'''{% endif %}'''
|| '''If''' tag evaluates a variable when the condition is True
+
|| '''If''' tag evaluates a '''variable''' when the '''condition''' is '''True'''.
  
'''articles''' will be passed by the view
+
'''articles''' will be passed by the '''view'''.
  
So here, it checks if articles is not empty
+
So here, it checks if the '''article''' is not empty.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 194: Line 194:
  
 
'''{% endfor %}'''
 
'''{% endfor %}'''
|| '''For''' tag allows to '''loop '''over each item in a sequence
+
|| '''For tag''' allows to '''loop '''over each '''item''' in a sequence.
  
So if '''articles''' are there, then it enters the '''for''' loop.
+
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.
 
For every '''article''' in the '''articles''', everything between '''for '''and '''endfor '''will be rendered.
Line 205: Line 205:
 
   
 
   
 
<nowiki> '''{{ article.title | title }}''' </nowiki>
 
<nowiki> '''{{ article.title | title }}''' </nowiki>
|| So within '''for''' tag we see the following
+
|| So within '''for tag''' we see the following.
  
Within '''double''' '''curly''' '''braces article.title pipe title'''
+
Within '''double curly braces article.title pipe title'''
  
'''Variables''' and '''objects''' are surrounded by '''double curly braces '''
+
'''Variables''' and '''objects''' are surrounded by '''double curly braces.'''
  
Here '''article''' is the '''Article''' object and '''title''' is it's attribute
+
Here '''article''' is the '''Article''' object and '''title''' is it's '''attribute'''.
  
'''article.title''' is a variable to be displayed on the web page.
+
'''article.title''' is a '''variable''' to be displayed on the web page.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 220: Line 220:
 
   
 
   
 
<nowiki> {{ article.title''' | '''title }} </nowiki>
 
<nowiki> {{ article.title''' | '''title }} </nowiki>
|| '''Pipe '''is used to apply filter
+
|| '''Pipe '''is used to apply '''filter'''.
 
   
 
   
'''Filters '''are used to modify the variables.
+
'''Filters '''are used to modify the '''variables'''.
  
So here, '''article.title '''will return a string
+
So here, '''article.title '''will return a '''string'''.
  
And '''pipe''' '''title''' '''filter''' will modify the string to title case
+
And '''pipe title filter''' will modify the '''string''' to '''title case'''.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 234: Line 234:
 
'''{{ article.title | title }} - Blog:{{article.blog.name}}'''
 
'''{{ article.title | title }} - Blog:{{article.blog.name}}'''
 
</nowiki>
 
</nowiki>
|| Further we also display the '''blog''' associated with the '''article'''
+
|| Further we also display the '''blog''' associated with the '''article''' - '''article.blog.name '''
  
'''article.blog.name '''here '''name '''is the attribute of the blog
+
Here '''name '''is the '''attribute''' of the '''blog'''.
  
You can apply the '''title filter '''here as well
+
You can apply the '''title filter '''here as well.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 245: Line 245:
  
 
'''{% else %} '''
 
'''{% else %} '''
|| After the '''for tag, '''we have an '''else tag''' for the''' if condition'''
+
|| After the '''for tag, '''we have an '''else tag''' for the''' if condition'''.
  
This '''else''' '''tag''' is optional
+
This '''else tag''' is optional.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
Line 254: Line 254:
  
 
<nowiki> <p>'''No Blog articles are available.'''</p> </nowiki>
 
<nowiki> <p>'''No Blog articles are available.'''</p> </nowiki>
|| When the '''If '''condition is False, then that '''articles '''is empty.
+
|| When the '''If condition''' is '''False''', then that '''article '''is empty.
  
It will display''' No Blog articles are available'''
+
It will display''' No Blog articles are available'''.
 
|-
 
|-
 
|| [blogs.html]
 
|| [blogs.html]
  
 
Highlight the complete code
 
Highlight the complete code
|| Now, we have created a '''Django''' '''templates '''using an '''HTML '''file
+
|| Now, we have created a '''Django templates '''using an '''HTML '''file.
  
 
|-
 
|-
Line 277: Line 277:
  
 
Type '''cd <space> dot dot slash dot dot '''
 
Type '''cd <space> dot dot slash dot dot '''
 +
|-
 +
||Press Ctrl + L
 +
|| Let me clear the '''terminal'''.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
  
 
Type gedit blog/views.py & [Enter]
 
Type gedit blog/views.py & [Enter]
|| Let’s modify our '''view '''function in the main '''blog '''directory to use the '''template'''
+
|| 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'''
 
Type '''gedit <space> blog slash views dot py <space> ampersand'''
Line 294: Line 297:
  
 
return render(request, ‘blog/blogs.html’, context)
 
return render(request, ‘blog/blogs.html’, context)
|| We are now in '''views.py''' file,
+
|| We are now in '''views.py''' file.
  
Let's modify the function '''get underscore blogs''' to use the template
+
Let's modify the '''function get underscore blogs''' to use the '''template'''.
  
Replace the content of '''get underscore blogs''' function as shown here
+
 
 +
Replace the content of '''get underscore blogs function''' as shown here.
 
|-
 
|-
 
|| [views.py]
 
|| [views.py]
Line 305: Line 309:
  
 
'''articles = Article.objects.all() '''
 
'''articles = Article.objects.all() '''
|| '''Articles dot objects dot all''' returns a QuerySet that contains all '''Article objects '''in database
+
|| '''Articles dot objects dot all''' returns a '''QuerySet''' that contains all '''Article objects '''in database.
 
|-
 
|-
 
|| [views.py]
 
|| [views.py]
Line 312: Line 316:
  
 
'''context = {'articles': articles}'''
 
'''context = {'articles': articles}'''
|| '''Context '''is a dictionary with template variables as a key with its corresponding values.
+
|| '''Context '''is a dictionary with '''template variables''' as a key with its corresponding values.
 
|-
 
|-
 
|| [views.py]
 
|| [views.py]
Line 319: Line 323:
  
 
'''return render(request, 'blog/blogs.html' , context) '''
 
'''return render(request, 'blog/blogs.html' , context) '''
|| In the return statement, we have used the some of the '''render''' function arguments.
+
|| In the '''return statement''', we have used the some of the '''render function arguments'''.
  
The '''request '''object used to generate a '''response'''  
+
The '''request object''' used to generate a '''response'''.
  
 
Path of the '''Template file '''(blog/blogs.html)
 
Path of the '''Template file '''(blog/blogs.html)
  
The optional argument is '''context, '''which is''' '''to pass the '''variables''' to the '''template'''
+
The optional '''argument''' is '''context, '''which is to pass the '''variables''' to the '''template'''.
 
|-
 
|-
 
|| [views.py]
 
|| [views.py]
Line 332: Line 336:
  
 
'''return render(request, 'blog/blogs.html' , context) '''
 
'''return render(request, 'blog/blogs.html' , context) '''
|| '''render '''function renders the templates with a request context
+
|| '''render function''' renders the '''templates''' with a '''request, context'''.
 
|-
 
|-
 
|| [views.py]
 
|| [views.py]
Line 339: Line 343:
  
 
'''from django.shortcuts import render'''
 
'''from django.shortcuts import render'''
|| '''render '''function is imported from '''django''' '''dot shortcuts''' module
+
|| '''render function''' is imported from '''django dot shortcuts module.'''
 
|-
 
|-
 
|| [view.py]
 
|| [view.py]
  
 
Highlight '''def get_blogs(request) '''section
 
Highlight '''def get_blogs(request) '''section
|| Now, we have modified our view to use '''html''' template
+
|| Now, we have modified our '''view''' to use '''html template'''.
 
|-
 
|-
 
|| Press Ctrl+S
 
|| Press Ctrl+S
Line 350: Line 354:
 
|-
 
|-
 
|| Switch back to Terminal
 
|| Switch back to Terminal
|| Switch back to Terminal
+
|| Switch back to '''Terminal'''.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
Line 357: Line 361:
  
 
Type python manage.py runserver and press Enter
 
Type python manage.py runserver and press Enter
|| As we have already done '''URL '''mapping in the previous tutorial
+
|| As we have already done '''URL '''mapping in the earlier tutorial, let us run the '''Django development server'''.
 
+
Let us run the '''Django development server'''
+
  
 
Type '''python <space> manage dot py <space> runserver '''
 
Type '''python <space> manage dot py <space> runserver '''
Line 368: Line 370:
  
 
localhost:8000/blogs/get_blogs/
 
localhost:8000/blogs/get_blogs/
|| On the web browser, type the following '''url''' in the address bar.
+
|| Open the web browser, and type the following '''url''' in the address bar.
  
localhost:8000/blogs/get_blogs/
+
'''localhost:8000/blogs/get_blogs/'''
 
|-
 
|-
 
|| [browser]
 
|| [browser]
Line 377: Line 379:
  
 
'''My Article - Blog: My First Blog'''
 
'''My Article - Blog: My First Blog'''
|| We can see the html template page as
+
|| We can see the '''HTML template''' page as
  
 
'''Title of article '''hyphen''' Blog : '''followed by''' blog name '''
 
'''Title of article '''hyphen''' Blog : '''followed by''' blog name '''
  
Thus, we have created the html template for '''Django''' project
+
Thus, we have created the '''HTML template''' for '''Django project'''.
 
|-
 
|-
 
||
 
||
Line 400: Line 402:
 
|-
 
|-
 
||
 
||
|| With this, we come to the end of this tutorial
+
|| With this, we come to the end of this tutorial.
  
 
Let us summarize.
 
Let us summarize.
Line 407: Line 409:
 
|| In this tutorial, we have learnt about
 
|| In this tutorial, we have learnt about
  
* Create a '''Django''' template
+
* Create a '''Django template'''
* Use '''Django''' '''HTML''' template
+
* Use '''Django HTML template'''
* '''Tags''' and '''Filters''' in '''Django''' template
+
* '''Tags''' and '''Filters''' in '''Django template'''
  
 
|-
 
|-
Line 415: Line 417:
 
|| As an assignment,
 
|| As an assignment,
  
* Create multiple '''blog '''objects''' '''and  
+
* Create multiple '''blog objects''' and  
* Insert them in table format using '''Django's''' template system
+
* Insert them in table format using '''Django's template system'''
  
 
|-
 
|-

Latest revision as of 20:15, 17 September 2018

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