Skip to main content

Belajar Django: Layout Template Dengan Bootstrap

belajar django membuat layout template

Sudah lama kami tidak mengupdate tutorial Django, terakhir tulisan tentang belajar django pada bulan Mei. Membahas tentang perbedaan penggunaan Class Based View dan Function Based View. Dan tulisan ini tetap melanjutkan dari yang sebelumnya, karena memang itu masih belum selesai.

Kalau sebelumnya kita sudah membuat project dan app bernama blog, lalu dilanjutkan dengan membuat model dan view. Pada model, kita sudah berhasil membuat tabel dan mengisi beberapa artikel kemudian ditampilkan ke browser menggunakan view. Ada dua jenis view yang sudah dibahas yakni Class Based View dan Function Based View. Yang juga sudah dibuatkan tulisan khusus untuk membahas kedua jenis view tadi. Sekarang tulisan ini akan membahas tentang layout, kita akan mendekorasi tampilan agar menjadi lebih baik.

Seperti biasanya, sebelum memulai koding persiapkan dulu peralatan yang dibutuhkan. Dalam hal ini, diasumsikan bahwa kita meneruskan projek yang lalu. Jadi persiapannya hanya mengaktifkan virtualenv, sebab install dan setting sudah pernah dilakukan jadi tinggal mengaktifkan kembali. Kalau ada yang sudah lupa boleh dibuka kembali halaman Belajar Web Developer Django. Start awal mulai dari tulisan itu.

Back to top

1) Belajar Django: Mengatur Static File

Tidak seperti saat kita membuat website dengan PHP, yang file statis berupa gambar juga css dan javascript dapat ditampilkan dan dipanggil langsung misalnya untuk menampilkan gambar pada halaman web dengan tag img src. Pada Django ada perlakuan yang berbeda dari itu.

Untuk bisa menggunakan dan memanggil file statis di Django, pertama menentukan folder dimana kita menaruh file statis itu.

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Kode di atas adalah kode tambahan ditulis pada file settings.py.

Pada baris STATIC_URL dan STATICFILES_DIRS menentukan nama folder yang akan ditempatkan untuk meletakkan file statis kita yang dalam contoh ini saya membuat folder bernama static. Jadi nanti file statis yang berupa gambar, css, dan javascript semua ditempatkan dalam folder ini. Lokasi folder ini berada tepat dalam directory project. Yaitu dev-django -> myprojecy -> static. Ingat ya? sebelumnya kita menggunakan directory dev-django untuk meletakkan semua program web app django kita. Lalu membuat project bernama myproject.

Lalu kode MEDIA_URL dan MEDIA_ROOT juga sebagai tempat file statis kita, dan foldernya bernama media. Bedanya antara static dan media adalah, pada folder static itu berisi gambar untuk layout, file css dan javascript. Dan folder media untuk file dan gambar yang diupload saat membuat artikel dari model Artikel pada field gambar_post.

Ok ya...? saya harap sudah clear. Kalau masih belum jelas boleh tinggalkan pertanyaan dikolom komentar di bawah.

Masih didalam file settings.py sekarang cari kode berikut

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

Perhatikan pada 'DIRS': ['templates'], pada awal install django, bagian ini kosong. Sekarang sudah diisi dengan ['templates']. templates itu adalah nama folder untuk menyimpan file .HTML kita. Jadi semua file .HTML berada di folder itu.

Lokasi semua folder yang sudah kita tentukan tadi yaitu static, media, dan templates berada dilokasi yang sama dengan folder blog dan myproject, seperti gambar dibawah ini

static media template

Khusus untuk folder templates, kita bisa membuat layout yang berbeda antara app dan project. Caranya, buat file html, css, dan javascript berbeda dan ditempatkan dalam folder app. Misalnya appnya bernama blog, jadi folder templates-nya ada di myproject -> blog -> templates.

Sekarang kita ke file urls.py, ingat dalam project kita ada dua file urls.py yang pertama berada di myproject/urls.py dan yang kedua berada di myproject/blog/urls.py. Sekarang kita buka yang di myproject/urls.py.

Ok, langsung saja kita lihat kodenya

from django.contrib import admin
from django.urls import path, include
from blog import views as blg
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
    path('', blg.Index.as_view())
]

if settings.DEBUG:
    urlpatterns += staticfiles_urlpatterns()
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Kita ada tambahan baris kode if settings.DEBUG: dan

from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings
Back to top

2) Membuat Template Bootstrap Django

Ada cara yang lebih cepat dan mudah, kita cari saja template HTML yang sudah jadi. Bebas mau yang free atau yang premium, kalau saya untuk contoh ini download di https://bootstrapmade.com/ atau mana saja yang menurut kalian bagus. Atau mau buat sendiri dari nol juga boleh. Buat sendiri dari nol atau download yang sudah jadi, semua harus disesuaikan tata letak file dan kode berdasarkan django.

Berikut ini caranya

  • Simpan semua file gambar, css, dan javascript didalam folder static.
  • Simpan semua file html di folder templates.

Saya tidak membuat dari nol, hanya memodifikasi yang sudah ada dan ini bisa didownload https://www.free-css.com/free-css-templates/page255/devblog-v1.1 gratis. Dan berikut langkah modifikasinya

2.1) Asset

  • Setelah download template DevBlog-v1.1 copy folder assets dan file favicon.ico ke folder static.
  • Copy semua file html atau tiga saja index.html, blog-detail.html, dan blog-list.html ke folder templates.
  • Buat folder bernama base didalam folder templates.
  • Di dalam folder base buat file bernama css.html dan cut baris ini dari index.html ke css.html
    {% load static %}
    <!-- FontAwesome JS-->
    <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
        
    <!-- Theme CSS -->  
    <link id="theme-style" rel="stylesheet" href="{% static "assets/css/theme-3.css" %}">
    .
  • Buat file js.html didalam folder base dan cut baris berikut ini dari file index.html lalu paste di file js.html
    {% load static %}
    <!-- Javascript --> 
    <script src="{% static "assets/plugins/jquery-3.3.1.min.js" %}"></script>
    <script src="{% static "assets/plugins/popper.min.js" %}"></script> 
    <script src="{% static "assets/plugins/bootstrap/js/bootstrap.min.js" %}"></script> 
    
    <!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
    <script src="{% static "assets/js/demo/style-switcher.js" %}"></script>    
  • Buat file nav.html dalam folder base dan cut baris berikut dari file index.html, tempelkan / paste ke file nav.html
    {% load static %}
    <header class="header text-center">	    
        <h1 class="blog-name pt-lg-4 mb-0"><a href="{% url 'index' %}">Edi Kartono Blog</a></h1>
        
        <nav class="navbar navbar-expand-lg navbar-dark" >
           
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
    
            <div id="navigation" class="collapse navbar-collapse flex-column" >
                <div class="profile-section pt-3 pt-lg-0">
                    <img class="profile-image mb-3 rounded-circle mx-auto" src="{% static "assets/images/profile.png" %}" alt="image" >			
                    
                    <div class="bio mb-3">Hi, my name is Edi Kartono. Briefly introduce yourself here. You can also provide a link to the about page.<br><a href="{% url 'about' %}">Find out more about me</a></div><!--//bio-->
                    <ul class="social-list list-inline py-3 mx-auto">
                        <li class="list-inline-item"><a href="https://twitter.com/edikartono"><i class="fab fa-twitter fa-fw"></i></a></li>
                        <li class="list-inline-item"><a href="https://www.linkedin.com/in/edikartono/"><i class="fab fa-linkedin-in fa-fw"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-github-alt fa-fw"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-stack-overflow fa-fw"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-codepen fa-fw"></i></a></li>
                    </ul><!--//social-list-->
                    <hr> 
                </div><!--//profile-section-->
                
                <ul class="navbar-nav flex-column text-left">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'index' %}"><i class="fas fa-home fa-fw mr-2"></i>Blog Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'blogs' %}"><i class="fas fa-bookmark fa-fw mr-2"></i>Blog Post</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'about' %}"><i class="fas fa-user fa-fw mr-2"></i>About Me</a>
                    </li>
                </ul>
                
                <div class="my-2 my-md-3">
                    <a class="btn btn-primary" href="https://edikartono.com/" target="_blank">Get in Touch</a>
                </div>
            </div>
        </nav>
    </header>

     

  • Buat file home.html dalam folder base dan copy semua isi dari file index.html, paste di home.html

Ok, sementara itu dulu. Untuk perubahan selanjutnya bisa terus ikuti tulisan ini sampai selesai

2.2) home.html

Ok, sekarang kita mulai dari file base/home.html. File ini akan kita jadikan sebagai kerangka dasar dari semua template. Tujuannya agar mengurangi untuk membuat baris kode yang sama berulang kali. Jadi cukup buat baris kode yang tidak pernah berubah isinya di home.html.

Biasanya baris kode yang tidak berubah itu pada bagian head, kemudian logo, menu, dan footer. Bagian-bagian ini umumnya sama dan tidak berubah pada semua halaman.

Dan kita juga akan membuat beberapa bagian menjadi dinamis, seperti pada tag title dan description. Bagian ini harus berbeda setiap halamannya.

Pada bagian yang akan dibuat menjadi dinamis, kita menggunakan tag {% block nama_block %} seperti contoh berikut ini pada bagian title

{% block pagetitle %}
<title>{{ object.judul_post }}</title>
{% endblock %}

Contoh tag title dihalaman home

    {% block pagetitle %}
    <title>{{ title }}</title>
    {% endblock pagetitle %}

Pada bagian tag meta description

    {% block metadesc %}
    <meta name="description" content="Blog Template">
    {% endblock metadesc %}

Bagian-bagian yang ada tag block, itu bersifat dinamis. Kalau tidak ingin diubah, maka tidak perlu membuat block dihalaman lain, jadi dia akan mengambil dari base/home.html. Kalau mau diubah isinya maka buat juga seperti yang dilakukan pada tag title.

Baca juga : cara buat website sendiri

2.3) Extends

Untuk mengambil kerangka website dari home.html gunakan {% extends 'base/home.html' %} ditulis pada baris pertama setiap file HTML.

Kamu bisa download semua kode lengkapnya supaya bisa dipelajari sewaktu-waktu.

Download -> drive.google.com/drive/folders/...sharing

Back to top

3) Penutup

Untuk tahap ini, dari belajar django kita sudah bisa membuat blog sederhana. Dibilang sederhana karena masih banyak fitur yang belum dibuat seperti kotak komentar, halaman admin juga masih bisa dibuat lebih baik lagi, halaman kontak dan ini berhubungan dengan form, juga pagination. Tapi, komentar kita bisa menggunakan disqus seperti yang ada dicontoh project kita.

Back to top