URL and Rendering HTML in Django

Mazhar SolkarMazhar Solkar
2 min read

Table of contents

URL

  • URL's can be considered as routes in the context of web application.

  • example: httP://www.mazhar.com/, http://www.mazhar.com/about, http://www.mazhar.com/contact

  • URL's are defined inside urls.py file. Each URL is mapped with specific view function which is defined in views.py file.

View

  • Business logic is written in view function, view functions return appropriate response. If needed it interact with model to get data from database.

  • view function acts as a glue between model and template.

  • In your view function, you typically use the render function to combine a template with data and return it as the HTTP response.

  • The render function takes three arguments:

    • The request object

    • The path to the template file

    • A dictionary containing data to be inserted into the template placeholders

Create Django App

Create Django app named 01_basic_project

Add URL's

move to basic_project folder using cd command in urls.py add following code

urls.py

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.homepage),
    path('about/', views.about)
]

Add functions in views.py

You have to create view.py file it is not there in basic_project folder by default. Add following code

from django.http import HttpResponse

def homepage(request):
  return HttpResponse("Hello World! I'm Home.")

def about(request):
  return HttpResponse("My About Page.")

Return HTML response frow view functions

from django.shortcuts import render

def homepage(request):
  return render(request, 'home.html')

def about(request):
  return render(request, 'about.html')

  1. Create templates folder on the same level of manage.py file. inside that folder create home.html and about.html file.

  2. Go to setting.py file and write 'DIRS' : ['templates'].

  3. home.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
</head>
<body>
  <h1>Home</h1>
  <p>Check out my <a href="/about">About</a> page.</p>
</body>
</html>

Add CSS template

  1. Create static folder on the same level of manage.py file.

  2. Inside static folder create css folder and js folder.

  3. Create style.css inside css folder and main.js inside js folder.

  1. Add import os at the top of settings.py file and add following setting.

  2. Add {% load static %} at the top of home.html.

  3. Link CSS <link rel="stylesheet" href="{% static 'css/style.css' %}">

  4. Link JS <script src="{% static 'js/main.js' %}" defer></script>

home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  <script src="{% static 'js/main.js' %}" defer></script>
</head>
<body>
  <h1>Home</h1>
  <p>Check out my <a href="/about">About</a> page.</p>
</body>
</html>
0
Subscribe to my newsletter

Read articles from Mazhar Solkar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

PythonDjangobackendWeb DevelopmentMVT

Written by

Mazhar Solkar
Mazhar Solkar