Django Template – Template Inheritance

Pendahuluan

Jika Anda sudah terbiasa membuat web, tentu familiar dengan komponen-komponen yang berulang pada setiap halaman, contohnya navigation bar.

Django menyediakan block tag untuk menggunakan komponen tersebut dalam template.

Untuk melakukan inheritance, digunakan block extends. Berikut contoh ilustrasi penggunaan block

Perhatian: block tag dapat digunakan lebih dari satu dan Kita juga bisa memiliki base.html lebih dari satu.

Implementasi Template Inheritance

Pertama, tambahkan template untuk project level. Buat folder baru dengan nama templates. Lokasi folder adalah dimana file manage.py berada. (lihat ilustrasi struktur file dibawah).

nama_project
  |- my_app
  |- nama_project
  |- manage.py
  |- templates  (buat folder templates disini)

Kemudian tambahkan file baru pada folder tersebut, disini digunakan base.html. (Penamaan file bebas).

<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>Document</title>
</head>
<body>
    <h1>base.html, start block tag</h1>
    {% block content%}
    {% endblock %}
    <h1>base.html, end block tag</h1>
</body>
</html>

Buka file my_app/templates/my_app/example.html, ubah seperti berikut.

{% extends 'base.html' %}
{% block content %}
    <h1>Inside block example.html</h1>
{% endblock %}

Terakhir, kita registrasikan folder templates yang baru dibuat diatas. Buka file settings.py, tambahkan value pada key DIRS pada variable TEMPLATES. Karena kita akan gunakan method dari os, perlu import library os pada awal file.

Berikut isi lengkap file settings.py :

"""
Django settings for skillplus project.

Generated by 'django-admin startproject' using Django 4.0.5.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-l+^q=e8b_1pd0tkx0_)p^%$urcg^o-7ts*4-)tc)$_()@dzg6$'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'my_app.apps.MyAppConfig',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'skillplus.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'skillplus.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Jalankan webserver, lalu masuk ke alamat http://127.0.0.1:8000/my_app/, akan tampil seperti gambar dibawah.

Sampai disini kita sudah dapat melakukan template inheritance.

Sharing is caring:

Leave a Comment