Django Template – Static File

by

Project web umumnya menggunakan static file seperti images, JS dan CSS.

Untuk menggunakan static file menggunakan {% static %} tag.

Untuk keperluan latihan, Anda bisa gunakan static file yang Anda miliki, atau bisa download file https://skillplus.web.id/wp-content/uploads/2022/06/membuat-webapp-django.jpg

Pertama, buka file settings.py, periksa variable INSTALLED_APPS harus memiliki entry django.contrib.staticfiles.

Kemudian, pada variable STATIC_URL, default value adalah ‘static/’, pada tutorial akan digunakan nilai tersebut.

Perhatian, Anda juga harus setting variable DEBUG = True dan ALLOWED_HOSTS = [] . (Pada modul sebelumnya diubah untuk menampilkan 404 page).

Berikutnya kita buat folder static dan my_app, untuk menyimpan static file (digunakan konvensi penamaan seperti template, yaitu my_app/static/my_app/).

Berikut kurang lebih strutktur file setelah folder static dibuat

nama_project
  |- my_app
       |- static
            |- my_app
                 |- static files goes here.
  |- nama_project
  |- manage.py 
...
...

Setelah folder dan file selesai disetup, berikutnya kita tampilkan static file tersebut.

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

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <h1>Inside block example.html</h1>
    <img src="{% static 'my_app/membuat-webapp-django.jpg' %}"/>
{% endblock %}

Untuk menggunakan static, pertama kita load dahulu menggunakan {% load static %}, kemudian gunakan menggunakan {% static ‘path to static file’ %}

Jika Anda jalankan, sesuai ekspektasi, kita sudah dapat menggunakan static file.

Sampai disini kita sudah membahas fitur-fitur yang berhubungan dengan template, pada modul selanjutnya kita akan mambahas mengenai model.

Sharing is caring:

Leave a Comment