#06-Django Global Template & Static Folder

Jika sebelumnya kita membuat MTV dengan tampilan ala kadarnya, kali ini kita akan membuat tampilan yang menarik menggunakan AdminLTE3

Base Template merupakan html static yang nantinya akan digunakan untuk semua app, supaya tidak perlu ditulis berulang-ulang pada setiap app, kita akan menggunakan metode Base Template.

Buat folder static sesuai struktur sbb:

myapp/
├── myapp/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
│
├── polls
│   ├── migrations
│   ├── templates
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── static/ #static folder untuk staticfiles
├── templates/ #tempates folder untuk global templates
└── manage.py
Global templates folder

templates folder adalah folder untuk menyimpan template umum pada project, misal : base.html, sidebar.html, dll

Supaya nantinya base.html dapat dibaca melalui app, maka kita harus menambahkan setting berikut pada setting.py

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',
            ],
        },
    },
]
Global Static Folder

static folder pada django adalah folder yang berisi file-file public yang kita gunakan untuk styling, di antaranya: js, css, images, dll.

Download AdminLTE3 disini

copy dist/* ke folder static
copy plugins ke folder static
copy index.html ke templates/base.html

lalu buka localhost/polls hasilnya seperti di bawah ini

Untuk memberi tahu kepada django bahwa kita akan menggunakan staticfiles yang ada pada folder static, maka kita harus merubah setting pada settings.py yang ada pada project django_blog kita.

Tambahkanlah setting berikut ini pada bagian bawah settings.py yang kita miliki

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Selanjutnya, kita akan memanggil file-file static tersebut tersebut dalam template kita dengan cara:

{% static 'path/to/static/files' %}

Contoh :

<link rel="stylesheet" href="{% static '/plugins/fontawesome-free/css/all.min.css' %}">

Pada file base.html cari bagian section Main Content ubah isinya sbb :

<!-- Main content -->
    <section class="content">
        {% block content %}
            <!-- main content -->
        {% endblock %}
    </section>
    <!-- /.content -->

Hasilnya sbb :

AdminLTE3

Ganti Sidebar sesuai aplikasi Polls

Buat templates/sidebar.html

<nav class="mt-2">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->
      <li class="nav-item has-treeview menu-open">
        <a href="#" class="nav-link active">
          <i class="nav-icon fas fa-tachometer-alt"></i>
          <p>
            Dashboard
            <i class="right fas fa-angle-left"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a href="{% url 'polls:index' %}" class="nav-link">
              <i class="far fa-circle nav-icon"></i>
              <p>Question</p>
            </a>
          </li>
        </ul>
      </li>
    </ul>
</nav>

Cari Sidebar Menu ubah baris sbb :

<!-- Sidebar Menu -->
   {% include "sidebar.html" %}
<!-- /.sidebar-menu -->

Hasilnya sbb :

Sidebar Question

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>