pada chapter ini akan dilakukan pembuatan aplikasi sederhana menggunakan hamburger menu. hamburger menu adalah ikon menu yang menempel di pojok kiri atau kanan aplikasi. ketika diklik akan menampilan berbagai macam menu yang dapat dipilih. pada chapter ini akan membuat aplikasi profil merk kendaraan dengan menu hamburger sebagai menu utama yang digunakan menuju ke semua profil.
Category: Uncategorized
-
Django Chap 2 Part 2
pada part ini akan membangun tampilan (frontend) blog secara terstruktur, rapi, dan bisa digunakan ulang.
base.html -> digunakan untuk kerangka utama website. fungsinya untuk menyimpan struktur umum websiteindex.html -> digunakan untuk halaman daftar artikel (hompage). fungsinya untuk menampilkan daftar postingan
post_detail.html -> digunakan untuk menampilkan satu artikel secara lengkap
sidebar.html-> komponen tambahan untuk menampilkan informasi (about me, contact me,dll)
Kode ini digunakan untuk:
- Menentukan struktur tabel database untuk blog post
- Menyimpan data seperti judul, isi, penulis, status, dan waktu
- Menjadi penghubung antara:
- database (SQLite3)
- views (ListView / DetailView)
- template (HTML)
- admin Django
fungsi code diatas adalah untuk mengambil data Post dari database dan mengirimkannya ke HTML (template)
DetailView → untuk menampilkan satu data spesifik
ListView → untuk menampilkan daftar data
class PostList(generic.ListView)-> digunakan untuk menampilkan banyak Post. Biasanya dipakai untuk homepage / halaman blog
queryset = Post.objects.filter(status=1).order_by(‘-created_at’) -> Ini menentukan status = 1 (Publish) dan diurutkan dari yang terbaru. Post Draft tidak akan tampil ke publik
template_name = ‘index.html’ ->
Data akan dikirim ke file templates/index.html
fungsi url.py ini digunakan untuk menentukan URL mana ditangani oleh siapa. Setiap membuka URL di browser, Django akan membaca urls.py, mencocokkan URL yang diakses, menjalankan view yang sesuai
Kode HTML itu berfungsi sebagai template dasar (base template) untuk semua halaman blog
File ini (biasanya dinamai
base.html) dipakai sebagai kerangka umum website. hal ini membuat tidak perlu menulis ulang header, navbar, dan footer di setiap halaman
Isinya bagian-bagian yang selalu sama di setiap halaman, seperti:<head>(title, CSS, font)- Navbar (menu atas)
- Footer (bagian bawah)
- Styling global
kode tersebut digunakan untuk menampilkan list artikel dari database. Ini adalah template Django (HTML) untuk halaman daftar post / homepage blog.
{% extends “base.html” %} -> Template ini mewarisi layout dari base.html, sehingga seluruh struktur utama seperti navbar, footer, dan CSS global berasal dari base.html, sedangkan template ini hanya mengisi bagian kontennya.
{% block content %}…..{% endblock %} -> code ini digunakan untuk mengisi bagian yang ada di base.html, semua HTML di dalamnya akan muncul di halaman utama
Template ini digunakan untuk menampilkan detail satu artikel blog. Di dalam {% block content %}, template menampilkan isi utama halaman detail post. Judul artikel ditampilkan melalui {{ object.title }}, yang berasal dari DetailView Django. Informasi penulis dan tanggal dibuat ditampilkan menggunakan {{ post.author }} dan {{ post.created_on }}. Konten artikel ditampilkan dengan {{ object.content | safe }}, yang berarti isi artikel dirender sebagai HTML tanpa di-escape, sehingga format seperti paragraf atau tag HTML dapat tampil dengan benar. Selain itu, template ini juga menyertakan sidebar dengan {% include ‘sidebar.html’ %}, sehingga komponen tambahan dapat digunakan kembali tanpa menulis ulang kode.
Kode template ini berfungsi untuk menampilkan sidebar pada halaman blog. Bagian HTML menampilkan sebuah sidebar kolom kanan menggunakan Bootstrap (
col-md-4 float-right). Sidebar ini berisi sebuah card dengan judul “About Me”, teks deskripsi singkat, dan sebuah tombol “Contact Me” yang dapat diarahkan ke halaman kontak atau media sosial.