Nancyvarkey at 14:45, 17 September 2018

2018-09-17T14:45:10Z

Pravin1389 at 17:39, 6 September 2018

2018-09-06T17:39:24Z

Pravin1389: Created page with "'''Title of script: '''Creating html template in Django '''Keywords: '''Video tutorial, Django Template {| border=1 |- || '''Visual cue''' || '''Narration''' |- || Slide: Cr..."

2018-09-06T17:27:53Z

Created page with "'''Title of script: '''Creating html template in Django '''Keywords: '''Video tutorial, Django Template {| border=1 |- || '''Visual cue''' || '''Narration''' |- || Slide: Cr..."

New page

'''Title of script: '''Creating html template in Django

'''Keywords: '''Video tutorial, Django Template

{| border=1
|-
|| '''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.
|-
|}

@@ Line 124: / Line 124: @@
 {% if articles %}
-<ul>
+<nowiki> <ul> </nowiki>
 {% 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 %}
@@ Line 136: / Line 134: @@
 {% else %}
-<p>No Blog articles are available.</p>
+<nowiki> <p>No Blog articles are available.</p> </nowiki>
-</ul>
+<nowiki> </ul> </nowiki>
 {% endif %}
@@ Line 145: / Line 143: @@
 </html>
 || 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
 '''{{ }}'''
 || '''Django''' '''templates system '''comes with a wide variety of built-in '''tags '''and '''filters'''
@@ Line 203: / Line 203: @@
 Highlight
-−
-'''{{ article.title | title }}'''
+<nowiki> '''{{ article.title | title }}''' </nowiki>
 || So within '''for''' tag we see the following
@@ Line 218: / Line 218: @@
 Highlight
-−
-{{ article.title''' | '''title }}
+<nowiki> {{ article.title''' | '''title }} </nowiki>
 || '''Pipe '''is used to apply filter
-−
 '''Filters '''are used to modify the variables.
@@ Line 231: / Line 231: @@
 Highlight
+<nowiki>
 '''{{ article.title | title }} - Blog:{{article.blog.name}}'''
 || Further we also display the '''blog''' associated with the '''article'''
@@ Line 252: / Line 253: @@
 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.

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

Nancyvarkey at 14:45, 17 September 2018

Pravin1389 at 17:39, 6 September 2018

Pravin1389: Created page with "'''Title of script: '''Creating html template in Django '''Keywords: '''Video tutorial, Django Template {| border=1 |- || '''Visual cue''' || '''Narration''' |- || Slide: Cr..."