Python and Django Full Stack - Templates

 

Templates in Django

Templates can be understood as a skeleton of the page. There are two parts to a templates file – One, the static information, and two, template tags, that inject dynamic data with special syntax, through its views, forming the final HTML.

They are key to understanding how Django interacts with the website. Later, we will connect templates with models, so data can be created and displayed dynamically.

1.     Create a new folder – in the base folder first_project/templates/first_app

2.     Let Django know of the templates. Edit the DIR key inside the settings.py to include ‘templates’.

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': ['templates',],

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

                'django.contrib.messages.context_processors.messages',

            ],

        },

    },

]

 

3.     Inside first_project/templates/first_app, create an index.html file. It is a good practice to keep separate template files for separate apps.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>First App</title>

</head>

<body>

    <h1>Hello, this is index.html</h1>

    {{insert_me}} // template tags aka Django template variable.

</body>

</html>

 

The template tag will allow us to inject content into HTML directly.

 

4.      Open first_project/first_app/views.py

from django.shortcuts import render

# Create your views here.

 

def index(request):

    my_dict = {

        'insert_me':'Hello I am from first_app/index.html ' // This is the template we want to use.

    }

    return render(request, 'first_app/index.html', context=my_dict)

 

Notice that we did away with HttpResponse, and will now use render.

The statement “render(request, 'first_app/index.html', context=my_dict)” links this view to the index html we created.

 

The host server will now show



Comments

Post a Comment

Popular posts from this blog

Python and PostgreSQL – Creating database, schema, tables and inserting data using python library psycopg2

In this post, we will learn to create a database called 'foodApp' in postgreSQL,a schema called 'foodschm' within the database, a table called 'menu' within the schema, and finally, insert data into the table 'menu'.   Install PostgreSQL from https://www.postgresql.org/download/ .  Install psycopg2 using pip install.  C reate a folder under your working directory. Let's call it 'foodApp'. Inside  'foodApp', create a directory called backend.Next, i nside the folder backend, create the program called main.py with the code as follows: 1.       Import psycopg2  import psycopg2 2.       Define database connection properties and connect to the host. Connect to the default database ‘postgres’ with whatever password you gave it during installation.    Make sure to keep the autocommit to true. Without this, postgresql will throw up a transaction error.  Use the connection object to create a cu...
Read more

Full Stack Web Developer BootCamp. (A course by Jose Portilla on Udemy) - Updated for recent versions of Python and Django

Image
      Welcome to a step by step write up to creating a web application using Python (V3.10) and dJango (v4.1.5). While going through the course by Jose Portilla on Udemy for a full stack web development bootcamp by Jose Portilla, I realised that the course followed much older versions of python and Django. Hence, I noted updated findings and hope that it may help someone chart their path through a bit easily. I am skipping the parts in learning HTML/CSS/JavaScript etc and going straight to Section 16 (Django Level One Basics) of the course.   1.      Install Django using Python pip feature. Command prompt: pip install django 2.      Create your project under your working directory. Let us call it "first_project". Command prompt:   django-admin startproject first_project This command will create the following files under the first_project directory -   asgi.py, settings.py, urls,py and wsgi.py:  ...
Read more

Python and Django Full Stack - Have React speak to PostgreSQL

Backend Overview The most popular way of getting ReactJS to speak to PostgreSQL is using a backend framework that can handle the communication between the two, such as Express.js or Django.  While the PERN stack (PostgreSQL, Express, React, Node.js) is a popular full-stack solution for building web applications with React and PostgreSQL, the  React/Django/PostgreSQL stack is popular for its versatility and ease of use, and is suitable for large-scale web applications that require a solid backend. In this post, we will work with the Django framework and achieve our objective of having react communicate with PostgreSQL. ReactJS/Django/PostgreSQL stack Here's a general overview of how to connect ReactJS, Django, and PostgreSQL to build a full-stack web application: Setting up the backend: Install Django using pip:  pip install django Create a new Django project using the command line:  django-admin startproject projectname Create a new Django app within the project:...
Read more