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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script: '''Creating html template in Django '''Keywords: '''Video tutorial, Django Template {| border=1 |- || '''Visual cue''' || '''Narration''' |- || Slide: Cr...")
 
Line 124: Line 124:
 
{% if articles %}  
 
{% if articles %}  
  
<ul>
+
<nowiki> <ul> </nowiki>
  
 
{% for article in articles %}
 
{% for article in articles %}
  
<li>{{ article.title | title }} - Blog:{{ article.blog.name }}
+
<nowiki> <li>{{ article.title | title }} - Blog:{{ article.blog.name }} </li> </nowiki>
 
+
</li>
+
  
 
{% endfor %}
 
{% endfor %}
Line 136: Line 134:
 
{% else %}  
 
{% else %}  
  
<p>No Blog articles are available.</p>
+
<nowiki> <p>No Blog articles are available.</p> </nowiki>
  
</ul>
+
<nowiki> </ul> </nowiki>
  
 
{% endif %}
 
{% endif %}
Line 145: Line 143:
  
 
</html>
 
</html>
 +
 
|| We are now in '''blogs.html '''file
 
|| We are now in '''blogs.html '''file
  
Line 158: Line 157:
 
'''{% %}'''
 
'''{% %}'''
  
{{ article.title | title }} - Blog:{{article.blog.name}}
+
<nowiki> {{ article.title | title }} - Blog:{{article.blog.name}} </nowiki>
  
 
Highlight
 
Highlight
  
 
'''{{ }}'''
 
'''{{ }}'''
 +
 
|| '''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'''
  
Line 203: Line 203:
  
 
Highlight
 
Highlight
 
+
'''{{ article.title | title }}'''
+
<nowiki> '''{{ article.title | title }}''' </nowiki>
 
|| So within '''for''' tag we see the following
 
|| So within '''for''' tag we see the following
  
Line 218: Line 218:
  
 
Highlight
 
Highlight
 
+
{{ article.title''' | '''title }}
+
<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.
  
Line 231: Line 231:
  
 
Highlight
 
Highlight
 
+
<nowiki>
 
'''{{ article.title | title }} - Blog:{{article.blog.name}}'''
 
'''{{ article.title | title }} - Blog:{{article.blog.name}}'''
 +
</nowiki>
 
|| Further we also display the '''blog''' associated with the '''article'''
 
|| Further we also display the '''blog''' associated with the '''article'''
  
Line 252: Line 253:
 
Highlight
 
Highlight
  
<p>'''No Blog articles are available.'''</p>
+
<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 '''articles '''is empty.
  

Revision as of 23:09, 6 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 conditions
[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 articles 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 articles 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

[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 previous 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/

On the web browser, 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