Membuat Website Dengan Django: DetailView dan Migrate

Masih melanjutkan Cara Membuat Website Django, tulisan yang lalu membahas tentang ListView, Template, dan Migrate. Nah.. ditulisan ini juga masih akan ada migrate meski sedikit, kemudian DetailView yaitu mengambil satu tulisan utuh dan membuat templatenya lagi.

Baca Juga: membuat website menggunakan django

Praktik ini masih menggunakan source code yang kita gunakan sebelumnya, jadi tinggal ada tambahan dan edit beberapa saja. Dan akan membuat beberapa file HTML Baru.

Sedikit Tambahan untuk ListView

Kita kemarin sudah berhasil menampilkan seluruh tulisan di database, tapi karena tulisannya baru ada beberapa, maka kita merasa tidak ada masalah di sana. Masalah akan timbul pada saat tulisan sudah mulai banyak, sudah ada puluhan bahkan ratusan tulisan. Dan itu tidak mungkin untuk ditampilkan semua di halaman depan website kita.

Dan tambahan lagi, jika ternyata tulisan itu belum spenuhnya selesai dan Anda tidak ingin mempubikasikannya terlebih dahulu. Atau Anda ingin sementara dalam status “draft“.

Untuk menyelesaikan tantangan ini adalah dengan memanfaatkan filter, kita bisa memfilter suatu artikel yang akan ditampilkan berdasarkan status, atau apapun terserah Anda.

Kemudian kita juga bisa membatasi berapa banyak artikel yang akan ditampilkan sebagai list dihalaman utama. Dan berikut adalah class index yang sudah diedit berdasarkan filter tertentu.


class index(generic.ListView):
    model = models.Blog_Post
    paginate_by = 6
    ordering = ['tanggal_post']
    template_name = 'index.html'
    extra_context = {
        'title':'Belajar Website Django'
    }

    def get_queryset(self):
        self.queryset=self.model.objects.filter(publish=True)
        self.kwargs.update({
            'publish':True
        })
        return super().get_queryset()

nah jadi ini isi class index kita yang baru, tinggal diedit saja. Tapi kode ini akan menimbulkan error jika dirun sekarang. Sebabnya kolom yang bernama publish belum dibuat.

Baik, penjelasan sedikit pada paginate_by ini menentukan berapa jumlah artikel perhalaman yang akan ditampilkan, pada contoh saya memberi nilai 6. Kemudian diututkan berdasarkan apa? menggunakan ordering diisi nama kolom.

Setelah itu pada def get_queryset kita melakukan filter data yang akan ditampilkan hanya yang memiliki nilai True pada kolom publish. Nah kemarin kolom publish belum dibuat, sekarang kita akan buat kolom tambahan pada tabel Blog_Post. Caranya setelah DetailView berikut ini.

DetailView

Kita sudah berhasil menampilkan database kedalam list, setelah itu saya ingin mengambil satu artikel utuh untuk dibaca. Biar mudah kita bersama akan menyebutnya dengan single post.

Berarti kita akan mengubah sedikit kode pada index.html untuk menambahkan link dijudul artikel agar bisa diklik. Saya mengedit dibarik ke 17 sampai 19, seperhatikan apa yang berbeda dari kode kemarin.

Edit Template index.html

membuat website django index.html

Buka urls.py blog

Buka file urls.py yang berada di folder blog, lalu tambahkan path('/' bv.single.as_view()), hingga hasil akhirnya seperti berikut:


from django.urls import path, re_path
from blog import views as bv

urlpatterns = [
    path('/', bv.Single.as_view(), name='single'),
    path('', bv.index.as_view(), name='blogindex'),
]

Url yang baru ditambah (single) diletakkan diatas url index, sebab jika ditempatkan di bawah index, baris itu tidak dieksekusi. Perhatikan juga kapitalisasinya.

Kembali ke views.py

Tambahkan class bernama Single bukan single, nanti bisa error. Dua kata tersebut memiliki arti berbeda bagi si python.


class Single(generic.DetailView):
    model = models.Blog_Post
    template_name = 'single.html'
    slug_field = 'url_post'  # url_post adalah nama kolom ditabel Blog_Post
    slug_url_kwarg = 'my_slug'  # 'my_slug' adalah parameter di urls.py

    def get_queryset(self):
        qs = super(Single, self).get_queryset()
        return qs.filter(url_post = self.kwargs['my_slug'])

Spertinya ini lebih pendek dari class index. Secara penjelasan programnya sama lah ya dengan yang di class index. Punya filter untuk memilih database mana yang akan ditampilkan. Bedanya disini kita bisa dinamis dengan menggunakan my_slug sebagai filternya.

Slug diambil dari url yang ada di address bar browser, kemudian dikirimkan dengan parameter yang bernama my_slug untuk mencari data di database apakah kolom url_post pada table Blog_Post memiliki nilai berupa slug tadi. Jika ada maka akan dikirimkan kembali ke single.html untuk ditampilkan ke layar monitor.

Template single.html

Yang belum kita miliki di sini adalah file single.html, maka buat file single.html difolder templates. Kemudian buat seperti ini
membuat website django single.html

Keterangan:
Load Static keyword yang digunakan untuk mengambil data static dari MEDIA dan STATIC yang sebelumnya sudah disimpan di settings.py dan konfigurasi di urls.py mywebstie. Digunakan untuk meload file statis seperti file css dan file js yang kita simpan di folder static/css dan static/js. Contoh penggunaannya bisa kita lihat pada kode di atas baris ke 8 dan 9.

Data yang dikirimkan dari views.py adalah berupa object, jadi dengan sangat mudah kita menampilkannya dengan keyword object, penempatannya didalam dua kurung kurawal {{ object.judul_post }} dimana judul_post adalah nama kolom pada table Blog_Post.

Untuk menampilkan gambar ditambah .url dibelakangnya dan untuk menampilkan Text Body diberi filter safe, karena default text field pada Django akan menampilkan kode HTML. Jadi tulisan akan tidak elok dibaca. Dengan menambahkan filter | safe maka akan diproses beberapa tag HTML seperti “a href”, “img”, dan “p”.

Untuk membuat tulisan blog di Django, perlu menambahkan beberapa tag dasar HTML, sepert p, strong, em, dan lainnya. Agar tersusun paragraf jika tidak kita bisa menginstall HTML Text Editor atau wywsiwyg Editor sepert CKEditor, TinyMCE, dan lainnya.

Migrate

Tadi kita sudah akan menambah sebuah kolom pada tabel Blog_Post bernama publish. Jadi sebeneranya mudah sahaja, hanya tinggal menambahkan satu baris saja di models.py kemudian jalankan makemigrations dan lalu migrate

Mari kita langsung menambahkan kode publish = models.NullBooleanField(default=False) di models.py pada class Blog_Post. Dan Jadinya seperti ini:


from django.db import models
from django.utils.text import slugify
# Create your models here.

class Blog_Post(models.Model):
    judul_post = models.CharField(max_length=200, unique=True)
    url_post = models.SlugField(max_length=200, blank=True, unique=True)
    body_post = models.TextField()
    kategory_post = models.CharField(max_length=50)
    gambar_post = models.ImageField(upload_to='%Y/%m/%d')
    tanggal_post = models.DateTimeField(auto_now_add=True)
    publish = models.NullBooleanField(default=False)

    def save(self):
        self.url_post = slugify(self.judul_post)
        super().save()
    
    def __str__(self):
        return "{} | {}".format(self.judul_post, self.url_post)

Kalau sudah sekarang buka terminal/command. Lihat gambar di bawah ini

  • Masuk ke folder kerja yaitu mywebsite
  • Aktivkan virtual environment python3
  • Jalankan perintah python3 manage.py makemigrations
  • Jalankan perintah python3 manage.py migrate

membuat website django migrate

Membuat Website Django Penutup

Ok sekarang kita sudah selesai membuat website dengan Django, dan setelah Anda menjalankan runserver kemudian buka http://127.0.0.1:8000, maka jangan bingung jika tiba-tiba semua tulisan kita hilang.
Baca Juga: membuat website dengan django
Itu karena kita sudah membuat filter yang akan ditampilkan hanya tulisan yang berisi nilai True publish==True Sedangkan kita telah membuat field publish dengan nilai default False, coba cek kembali kode program di models.py.

Untuk bisa menampilkan kembali maka editlah tulisan dari admin panel. Tulisan sebelumnya sudah membahas tentang Admin dan membuat user, silahkan cek kembali link di bawah ini.