Template Integration In Django Framework With Odinub

Hey Everyone, for today I will show you how to integrate template in Django framework.
For that you have to follow few simple steps.  Before moving ahead you have you have to create your own Django server and Django application. Don’t panic for that I have attached link for both posts here. You just have follow that easy steps and moving further with this post.
Before starting we need to aware about Templates.
What is Templates?
Being a web framework, Django need a convenient way to generate HTML dynamically. The most common approach relies on templates.  A template contains the static parts of desired HTML output as well as some special syntax describing how dynamic content will be inserted.

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
•    Publish online documents with headings, text, tables, lists, photos, etc.
•    Retrieve online information via hypertext links, at the click of a button.
•    Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
•    Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of  content from presentation.

How to integrate template?

First of all you have create a templates directory in your polls directory Using this command.

sudo  mkdir templates

Then you can move in that directory using this command.

ls

then you can create all your HTML pages with CSS via this command.

sudo nano index.html

Whenever you done with your html page make sure to save the file by pressing CTRL + X and then y.

Steps for Ttemplate Integration

Step : 1 change your directory where settings.py file is located.
Then open settings.py file using this command.
sudo nano settings.py
And then

-> STATIC_URL = '/static/'
        change static to templates
    -> Add this below STATIC_URL:
        STATICFILES_DIRS = [
            os.path.join(BASE_DIR, 'templates'),
        ]

Step : 2 Then change your directory where your html files are located.
Then

-> write {% load static %} before starting of your html code.
        e.g:
            {% load static %}
            <!DOCTYPE html>

Step : 3
For css:  

-> Give path like this:
        {% static 'appname/foldername/.css' %}
        e.g: 
            <link href={% static '/tempApp/css/style.css' %} rel="stylesheet" type="text/css" media="all" />
    
    -> If your css conatins any images then apply images like this in your html file
        (go to css -> find url of images and copy that with tag )
            <style>
                tag name{
                    ({% 'url of image' %})
                }
            </style>
        
        e.g:
             <style>
                .main-row {
                            background: url({% static 'tempApp/images/bg.jpg'  %})no-repeat center 0px;
                    }
            </style>

Do the same for JS also.
All the steps for template integration is done here.

Now change the directory to polls and open view.py file with this command.

sudo nano views.

Then import render function in your view.spy file by adding this line in the file.

from django.shortcuts import render

Then create your function in view.py file using def keyword. 
You can redirect to the html page using render function. Your view.py file will be look like this.

Whenever you make any function in your views.py file make sure that put url of that function in your polls’s urls.py file. Your urls.py file look like this.

Now navigate to the directory where manage.py file is located and then run this command to run your webpage.

sudo python manage.py runserver your-ip-address:your port no.

if you guys facing error containing this port is already in running state then you can write this command to kill that running process of port .

sudo kill -9 $(sudo lsof –t –i:your-port-number)

then re-run the server.
Make sure to activate your virtual environment otherwise your django application doesn’t work it throws the installation error.
To activate virtual environment navigate to the djongo-apps directory and the run this command.

. env/bin/activate

To deactivate your virtual environment you can run this command.

deactivate   

Now open any web browser then write this in search box.

http://your-ip-address:your-port-no/polls/your-function-name

for example,
http://192.168.1.19:8000/polls/index
your web page look something like this .


With the hope that you guys understand how to integrate your templates in Django  framework with Odinub.

Now don’t waste your time and make your on webpage using Odinub.

Feel free to ask any kind of query. Thank you !
 

Code :
Code Title :
Code Language :
HTML/CSS
0 Commenting Overall Comment