Skip to main content

Django Function Based Views

django function based views

Pada pelajaran kedua belajar web developer menggunakan django kita sudah pernah membuat Views. Pada views.py kita menggunakan tipe Function Based Views, dan saya ingin membahas lebih banyak tentang Views di Django ini.

Untuk membuat tampilan pada Django, memiliki dua tipe tampilan yaitu Function Based Views (FBV) dan Class Based Views (CBV). Tampilan berdasarkan fungsi adalah tampilan dalam Django yang ditentukan oleh fungsi. Fungsi bisa saja digunakan untuk kode program yang sederhana dan juga biasanya awal belajar django menggunakan FBV karena mudah diimplementasikan dan mudah dipahami. Tapi untuk membuat project yang besar, praktik ini kurang baik untuk dilakukan karena akan membuat penulisan kode berulang, menjadi lebih panjang dan sulit dibaca.

Back to top

1) Contoh Function Based Views

Kita bisa menggunakan FBV seperti berikut

from django.shortcuts import render

def view(request):
    return render(request, 'index.html')

Atau kalau ingin menggunakan variabel

from django.shortcuts import render

def view(request):
    context = {
        'var1': True,
        'var2': 'foo'
    }
    return render(request, 'index.html', contect=context)

Dan pada halaman index.html akan seperti ini untuk menampilkan variabelnya

<html>
{% if var1 %}
  <h1>{{ var2 }}</h2>
</html>

Bisa kita lihat sederhana dan mudah untuk dipahami bagaimana python akan memproses kode kita hingga ditampilkan pada halaman html

Back to top

2) Aplikasi Function Based Views

Sekarang kita akan coba menerapkannya pada praktik yang sesungguhnya dari apa yang sudah kita pelajari sebelumnya. Karena ini adalah lanjutan dari cara membuat website sendiri maka sebaiknya Anda pelajari dulu dar sana, setelah itu baru melanjutkan untuk praktik pada halaman ini supaya kita bisa nyambung sampai disini.

Setelah Anda membuat models seperti yang dicontohkan pada halaman sebelumnya dan membuat beberapa posting sebagai contoh, kita akan menampilkannya dibrowser. Untuk bisa menampilkan pada browser, kita akan membuat kode pada blog/views.py dan kodenya adalah sebagai berikut:

Pertama buka dulu file blog/urls.py dan buat kode seperti ini

from django.urls import path
from blog import views

urlpatterns = [
    path('', views.Index)
]

Pertama kita import path dan juga import views dari blog, kemudian di urlpatterns membuat url yang menuju ke fungsi Index yang ada di blog/views.py. Lalu buat fungsi Index pada blog/views.py seperti berikut ini.

from django.shortcuts import render
from django.template import loader
from django.http import HttpResponse
from blog import models

# Create your views here.
def Index(request):
    artikel = models.Artikel.objects.all()
    template = loader.get_template('index.html')
    context = {
        'title':'Belajar Web Development Menggunakan Django Framework | EdiKartono.com',
        'posting':artikel,
    }
    return HttpResponse(template.render(context, request))

Import komponen yang dibutuhkan yakni render, loader, dan HttResponse adalah milik dari django yang utama. Kita juga mengimport seluruh isi class dari model, atau bisa juga mengimport satu saja dengan menggunakan from blog.models import Artikel kalau ingin mengimport class Artikel saja.

Selanjutnya kita membuat fungsi Index, seperti yang dibuat pada urls.py. Ingat ya antara index dan Index itu berbeda dipython. Dan

  • artikel = models.Artikel.objects.all() ini untuk kueri ke database. Pada variabel artikel kita mengambil seluruh data pada tabel Artikel melalui objects.all(). Jadi pada kode models.Artikel.objects.all() dimana Artikel adalah nama tabel yang akan diambil datanya.
  • template = loader.get_template('index.html') menentukan template file html yang digunakan untuk menampilkannya. Dalam contoh ini saya menggunakan index.html.
  • context = {} kita bisa menentukan meta data yang ingin ditampilkan pada file index.html.
  • Yang terakhir untuk mengembalikan nilai dari function Index return HttpResponse(template.render(context, request))

 

Ok, sekarang kita akan membuat file index.html dengan kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    {% for post in posting %}
    <h3><a href="/blog/{{ post.slug_post }}">{{ post.judul_post }}</a></h3>
    <p>{{ post.body_post }}</p>
    <p>Penulis: {{ post.penulis }} Tanggal: {{ post.tanggal_post }}</p>
    {% endfor %}
</body>
</html>

Pada tag title {{ title }} kita sudah sama tau itu dari context title yang kita buat di file blog/views.py dan untuk menampilkan seluruh isi dari tabel data kita adalah dengan menggunakan for loop

  • {% for post in posting %} ini awal tag for kita, menampilkan semua isi data dari tabel Artikel. posting kita dapat dari context juga dan membuatnya variabel bernama post
  • Dan untuk mengambil datanya sama seperti penggunaan for loop di python, post.nama_kolom. Kolom yang dimaksud bisa dilihat pada models yang sudah dibuat sebelumnya. Yaitu ada judul_post, body_post dan lainnya.
  • Jangan lupa ditutup dengan {% endfor %} agar tidak menghasilkan error.

Sampai disini kita sudah bisa mencobanya dibrowser, jalankan server django dan buka alamat 127.0.0.1:8000/blog. Kalau hanya buka 127.0.0.1:8000 itu pasti error, karena kita tidak memberikan rute di urls.py untuk alamat 127.0.0.1:8000, yang kita buat adalah 127.0.0.1:8000/blog.

Tapi kalau mau bisa diakses dari 127.0.0.1:8000 maka edit dulu urls.py menjadi seperti ini (ini file urls.py yang ada di myproject ya, bukan yang ada di blog/urls.py)

from django.contrib import admin
from django.urls import path, include
from blog import views as blg

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

3) Detail Views

Seperti umumnya aplikasi blog dibuat untuk menampilkan detail atau seluruh tulisan pada artikel, mari kita coba membuatnya dengan melakukan penambahan kode program pada blog/urls.py, blog/views.py dan membuat satu file detail.html

Edit pada file blog/urls.py

Di Django 2.0 ke atas untuk membuat url dinamis kita bisa menggunakan path converters berikut

  • str - semua string yang tidak kosong dan tidak termasuk (/)
  • int - semua bilangan bulat positif
  • slug - semua string slug yang bisa berupa angka dan huruf ditambah dengan karakter kurung dan garis bawah
  • uuid - format UUID Misalnya, 075194d3-6885-417e-a8a8-6c931e272f00.
  • path - format jalur string tidak kosong termasuk pemisha / bisa digunakan untuk url lengkap.
  • regex dan regular expressions selain dari yang sudah ada, kita juga bisa membuat format url sesuai dengan ketentuan sendiri.

Untuk contoh ini kita akan menggunakan slug karena sudah punya yang tersimpan pada kolom slug_post dari tabel Artikel

Buka file urls.py yang ada di folder myproject dan ubah menjadi seperti ini

from django.contrib import admin
from django.urls import path, include
from blog import views as b
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('', b.Index)
]

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

Ada penambahan baru yaitu

....
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings

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

Ini berfungsi untuk meload gambar yang sudah diupload pada saat kita membuat posting tulisan artikel blog.

Dan tambahkan path('<slug:tp>', views.Detail) pada file blog/url.py ini untuk menangkap masukan berupa url dari browser agar bisa diproses pada views.Detail untuk mengambil data sesuai berdasarkan judul yang diklik. Dan kode lengkapnya seperti ini, sesuaikan urutannya yang paling atas adalah url yang lebih detail.

....
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings

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

Sekarang kita beralih ke blog/views.py untuk membuat function Detail, dan seperti ini isinya

def Detail(request, tp):
    artikel = models.Artikel.objects.get(slug_post=tp)
    template = loader.get_template('detail.html')
    context = {
        'posting':artikel
    }
    return HttpResponse(template.render(context, request))

Perbedaan dari function Index adalah pada baris artikel = models.Artikel.objects.get(slug_post=tp) yaitu memilih object berdasarkan tp pada kolom slug_post. Apabila ada maka akan dikembalikan untuk ditampilkan pada file detail.html. Dan isi dari file detail.html adalah

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ posting.judul_post }}</title>
</head>
<body>
    <h1>{{ posting.judul_post }}</h1>
    <span>Penulis: {{posting.penulis}}, Tanggal: {{posting.tanggal_post}}, Kategori: {{posting.kategori_post }}</span>
    <p>
        <img src="{{ posting.gambar_post.url }}" alt="{{ posting.judul_post }}"/>
        {{ posting.body_post }}
    </p>
</body>
</html>

Disini kita tidak lagi menggunakan for loop, dan bisa langsung menampilkannya dengan {{ posting.judul_post }}. posting ini dari context pada views.Detail dan diikuti dengan nama kolom pada tabel Artikel.

Back to top

4) Kesimpulan

Sampai disini kita sudah mengenal bagaimana cara menggunakan Function Based Views pada Django, file yang berhubungan dengan ini adalah urls.py. Jika kita membuat class maka file urls.py juga harus disesuaikan dengan tipenya.

Adapun kelebihan dan kekurangan menggunakan Function Based Views ini adalah

4.1) Kelebihan

  1. Mendapatkan kode program yang sederhana dan clean
  2. Mudah dipelajari, dipahami, dan juga diajarkan oleh programmer baru.
  3. Alur kode eksplisit
  4. Bisa digunakan langsung kedekorator
  5. baik untuk fungsionalitas satu kali atau khusus

4.2) Kekurangan

  1. Sulit untuk menggunakan kembali kode
  2. Penanganan HTTP melalui percabangan bersyarat

Sebaiknya Anda juga membaca tentang class.based.views

Back to top