The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Templates and Static Files

Next ►
►

In this section, we will explore how Django handles templates and static files. Templates are used to generate dynamic HTML content, while static files include CSS, JavaScript, and images that are served as-is to the client.

Key Concepts

  1. Templates:

    • Templates are HTML files that can include dynamic content using Django Template Language (DTL).
    • They allow you to separate the presentation layer from the business logic.

  2. Static Files:

    • Static files are assets like CSS, JavaScript, and images.
    • They are served directly to the client without any processing.

Templates

Creating a Template

  1. Directory Structure:

    • Create a directory named templates inside your app directory.
    • Inside the templates directory, create a subdirectory with the same name as your app.
    myapp/
    templates/
        myapp/
            index.html

  2. Writing a Template:

    • Create an HTML file (e.g., index.html) inside the templates/myapp directory.
    <!-- templates/myapp/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Django App</title>
</head>
<body>
    <h1>Welcome to {{ app_name }}!</h1>
</body>
</html>

  3. Rendering a Template in a View:

    • Use the render function to render the template in your view.
    # views.py
from django.shortcuts import render

def index(request):
    context = {'app_name': 'My Django App'}
    return render(request, 'myapp/index.html', context)

Template Inheritance

  1. Base Template:

    • Create a base template that other templates can extend.
    <!-- templates/myapp/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Django App{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Django App</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>&copy; 2023 My Django App</p>
    </footer>
</body>
</html>

  2. Extending the Base Template:

    • Extend the base template in other templates.
    <!-- templates/myapp/index.html -->
{% extends "myapp/base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<h2>Welcome to {{ app_name }}!</h2>
{% endblock %}

Static Files

Configuring Static Files

  1. Settings:

    • Add the STATIC_URL and STATICFILES_DIRS settings in your settings.py file.
    # settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

  2. Directory Structure:

    • Create a static directory at the project level.
    myproject/
    static/
        css/
            styles.css
        js/
            scripts.js
        images/
            logo.png

Using Static Files in Templates

  1. Loading Static Files:

    • Use the {% load static %} tag to load static files in your templates.
    <!-- templates/myapp/index.html -->
{% extends "myapp/base.html" %}
{% load static %}

{% block title %}Home{% endblock %}

{% block content %}
<h2>Welcome to {{ app_name }}!</h2>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<img src="{% static 'images/logo.png' %}" alt="Logo">
{% endblock %}

Practical Exercise

Exercise: Create a Template and Use Static Files

  1. Task:

    • Create a new template named about.html that extends the base.html template.
    • Add a CSS file to style the about.html page.
    • Include an image on the about.html page.

  2. Steps:

    • Create about.html in the templates/myapp directory.
    • Add a CSS file in the static/css directory.
    • Add an image in the static/images directory.
    • Update the about.html template to use the CSS file and display the image.

  3. Solution:

    <!-- templates/myapp/about.html -->
{% extends "myapp/base.html" %}
{% load static %}

{% block title %}About{% endblock %}

{% block content %}
<h2>About Us</h2>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<img src="{% static 'images/logo.png' %}" alt="Logo">
<p>This is the about page of My Django App.</p>
{% endblock %}

    /* static/css/styles.css */
body {
    font-family: Arial, sans-serif;
}

h2 {
    color: #333;
}

p {
    font-size: 1.2em;
}

Summary

In this section, we covered the basics of using templates and static files in Django. We learned how to create and render templates, use template inheritance, and include static files like CSS, JavaScript, and images in our templates. These concepts are fundamental for building the front-end of your Django applications. In the next section, we will dive into models and databases, which are crucial for handling data in Django.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved