Python-Django/C2/Create-HTML-template-in-Django/English
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:
|
| Slide: System Requirements | To record this tutorial, I am using
|
| Slide: Prerequisites | To follow this tutorial, you need to know
|
| Slide: What is a Django Template? |
|
| 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 %}
{% endfor %} {% else %} No Blog articles are available. {% endif %} </body> </html> |
We are now in blogs.html file
Type the code as shown here |
| [blogs.html]
{% if articles %} Highlight {% %} Template:Article.title - Blog:Template: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 |
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 |
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 |
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 No Blog articles are available. |
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
|
| Slide: Assignment | As an assignment,
|
| 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. |
