Django: Message Board Website

7 minute read

Published: June 12, 2026

Bab ini membahas pembuatan proyek Django pertama yang menggunakan database, yaitu Message Board Website, dengan fokus pada dasar-dasar database relasional, alur kerja Django ORM, integrasi admin, serta pengujian aplikasi.

Pada bab ini kita akan mempelajari:

Setup proyek Django 6 baru untuk aplikasi message board.
Dasar database relasional dan cara Django ORM memetakan model Python ke tabel database.
Membuat dan mengaktifkan model Post dengan migrasi.
Menggunakan Django Admin untuk mengelola data model.
Implementasi function-based view untuk menampilkan daftar post.
Refaktor ke class-based ListView.
Menghubungkan template dan URL untuk homepage.
Menulis pengujian model, URL, template, dan konten dengan TestCase.
Workflow Git dan GitHub untuk menyimpan progres.

1. Gambaran Bab Message Board

Bab ini menjadi titik transisi dari proyek berbasis halaman statis ke aplikasi web yang benar-benar memanfaatkan database.

Tiga tujuan belajar utama di bab ini:

Model dan struktur database.
Rendering data dinamis melalui view dan template.
Pengujian halaman yang berbasis database.

Pada chapter ini, seluruh langkah disesuaikan ke Django 6 agar konsisten dengan seri PAWF sebelumnya.

Berikut gambaran struktur direktori akhir proyek yang akan dibangun pada bab ini:

project5/
├── .venv/
├── db.sqlite3
├── manage.py
├── django_project/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── posts/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
│   └── migrations/
└── templates/
    └── post_list.html

2. Setup Awal pada `project5`

2.1 Membuat folder proyek

# Windows
cd onedrive\desktop\pawf\django
mkdir project5
cd project5

# macOS
cd ~/desktop/pawf/django
mkdir -p project5
cd project5

Jika ada virtual environment yang masih aktif, nonaktifkan terlebih dahulu:

deactivate

2.2 Membuat virtual environment dan instal dependensi

# Windows
python -m venv .venv
.venv\Scripts\Activate.ps1
python -m pip install Django==6.0.4 black

# macOS
python3 -m venv .venv
source .venv/bin/activate
python3 -m pip install Django==6.0.4 black

2.3 Membuat project dan app

django-admin startproject django_project .
python manage.py startapp posts

Daftarkan app posts di django_project/settings.py:

INSTALLED_APPS = [
	"django.contrib.admin",
	"django.contrib.auth",
	"django.contrib.contenttypes",
	"django.contrib.sessions",
	"django.contrib.messages",
	"django.contrib.staticfiles",
	"posts",  # new
]

Jalankan migrasi awal dan verifikasi server berjalan:

python manage.py migrate
python manage.py runserver

Buka http://127.0.0.1:8000/ untuk memastikan halaman awal Django muncul dengan benar.

3. Dasar Database dan Django ORM

Sebelum menulis kode, penting untuk memahami bentuk data yang akan digunakan.

Message Board ini hanya memiliki satu tabel:

Post
------
text

Contoh baris data yang tersimpan:

Post
-------------------------------
My first message board post.
A 2nd post!
A third message.

Django ORM memungkinkan kita mendefinisikan tabel ini menggunakan class Python, tanpa perlu menulis SQL mentah. ORM Django mendukung database relasional utama: SQLite, PostgreSQL, MySQL, MariaDB, dan Oracle.

4. Membuat dan Mengaktifkan Model `Post`

Perbarui posts/models.py:

from django.db import models


class Post(models.Model):
	text = models.TextField()

	def __str__(self):
		return self.text[:50]

Metode __str__() membuat model lebih mudah dibaca di Django Admin dan di shell Python.

Aktifkan perubahan model dengan menjalankan migrasi:

python manage.py makemigrations posts
python manage.py migrate

Output terminal akan menunjukkan bahwa migrasi berhasil, dan tabel Post telah dibuat di database.

django output

5. Mengaktifkan Django Admin untuk Posts

Buat superuser:

python manage.py createsuperuser

Daftarkan model di posts/admin.py:

from django.contrib import admin

from .models import Post

admin.site.register(Post)

Setelah menjalankan ulang server dengan python manage.py runserver, buka http://127.0.0.1:8000/admin/ lalu login menggunakan akun superuser yang baru dibuat.

Admin Login Page

Setelah masuk ke halaman utama admin, cari bagian Posts. Klik + Add untuk membuat post baru, isi pesan pada field Text, lalu klik Save.

Admin Homepage

Admin New Entry

Gunakan tombol Add Post + di kanan atas untuk menambahkan dua entri lagi sehingga total ada tiga post untuk bagian berikutnya.

Admin with Three Posts

6. Function-Based View untuk Homepage

Untuk menampilkan post message board di homepage, kita perlu menghubungkan view, template, dan URL. Pola ini seharusnya mulai terasa familiar, setelah mempelajari tahapan dan bab sebelumnya.

Kita mulai dari view terlebih dahulu. Pada tahap awal kita gunakan function-based view, lalu nanti beralih ke generic class-based view. Di file posts/views.py, ganti teks default dan masukkan kode Python berikut:

from django.shortcuts import render

from .models import Post


def post_list(request):
	posts = Post.objects.all()
	return render(request, "post_list.html", {"posts": posts})

Post.objects.all() adalah query ORM pertama dalam proyek ini, yang mengembalikan seluruh baris dari model Post.

7. Templates dan URLs

Kita sudah punya model dan view, jadi yang tersisa adalah konfigurasi template dan URL. Buat folder templates di tingkat proyek:

mkdir templates

Perbarui konfigurasi DIRS di django_project/settings.py:

TEMPLATES = [
	{
		"BACKEND": "django.template.backends.django.DjangoTemplates",
		"DIRS": [BASE_DIR / "templates"],  # new
		"APP_DIRS": True,
		...
	},
]

Buat file templates/post_list.html:

<!-- templates/post_list.html -->
<h1>Message Board Homepage</h1>
<ul>
 {% for post in posts %}
 <li>{{ post.text }}</li>
 {% endfor %}
</ul>

Perbarui project URL di django_project/urls.py:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
	path("admin/", admin.site.urls),
	path("", include("posts.urls")),
]

Buat file posts/urls.py:

from django.urls import path

from .views import post_list

urlpatterns = [
	path("", post_list, name="post_list"),
]

Pada tahap ini, homepage sudah menampilkan semua baris post dari database.

django message board

8. Refaktor ke Class-Based `ListView`

Function-Based View (FBV) menulis logika view sebagai fungsi, sedangkan Class-Based View (CBV) menulisnya sebagai class yang memanfaatkan pewarisan bawaan Django. Pada tahap awal, FBV terasa jelas dan mudah diikuti, tetapi untuk pola berulang seperti menampilkan daftar data, CBV membuat kode lebih ringkas dan konsisten. Peralihan ini penting agar view lebih mudah dikembangkan ke depan, misalnya saat menambah pagination, filtering, atau custom context tanpa banyak duplikasi kode.

Beralih dari FBV ke generic class-based view di posts/views.py:

# from django.shortcuts import render
# from .models import Post

# def post_list(request):
#     posts = Post.objects.all()
#     return render(request, "post_list.html", {"posts": posts})

# Class-Based View (CBV)
from django.views.generic import ListView  # new
from .models import Post

class PostList(ListView):  # new
    model = Post
    template_name = "post_list.html"

ListView secara default mengekspos context dengan nama post_list. Karena itu, perbarui templates/post_list.html:

<h1>Message Board Homepage</h1>
<ul>
  {% for post in post_list %}
  <li>{{ post.text }}</li>
  {% endfor %}
</ul>

Perbarui posts/urls.py:

from django.urls import path

from .views import PostList

urlpatterns = [
	path("", PostList.as_view(), name="home"),
]

Perilaku homepage tetap sama, tetapi kini menggunakan pola CBV yang lebih reusable.

9. Pengujian Aplikasi Message Board

Tambahkan pengujian di posts/tests.py:

from django.test import TestCase
from django.urls import reverse

from .models import Post


class PostTests(TestCase):
	@classmethod
	def setUpTestData(cls):
		cls.post = Post.objects.create(text="This is a test!")

	def test_model_content(self):
		self.assertEqual(self.post.text, "This is a test!")

	def test_url_exists_at_correct_location(self):
		response = self.client.get("/")
		self.assertEqual(response.status_code, 200)

	def test_homepage(self):
		response = self.client.get(reverse("home"))
		self.assertEqual(response.status_code, 200)
		self.assertTemplateUsed(response, "post_list.html")
		self.assertContains(response, "This is a test!")

Jalankan pengujian:

python manage.py test

atau jika ingin output lebih detail:

python manage.py test -v 2

Django secara otomatis membuat dan menghancurkan database pengujian sementara, sehingga data asli tidak terpengaruh. Output OK, artinya ketiga test lulus semua.

10. Git, Ignore, dan Push ke GitHub

Inisialisasi repository:

git init

Buat file .gitignore:

.venv/
__pycache__/
*.sqlite3

Buat commit:

git add .
git commit -am "Add project message board with models, views, templates, and tests"

Connect to GitHub and push:

git push -u origin main

11. Kesimpulan

Pada bab ini kita telah membangun dan menguji aplikasi Django berbasis database yang lengkap, mencakup:

Model Post dengan Django ORM.
Integrasi admin untuk manajemen konten.
Implementasi FBV dan refaktor ke CBV dengan ListView.
Penyambungan URL-template-view untuk rendering homepage yang dinamis.
Pengujian praktis untuk data model, respons URL, penggunaan template, dan konten yang dirender.

Bab ini menandai peralihan dari halaman statis ke pengembangan web berbasis data. Langkah berikutnya adalah mengembangkan struktur ini menjadi aplikasi Blog yang lebih kompleks dengan autentikasi pengguna, alur CRUD, dan penataan gaya CSS.

Share on

Facebook LinkedIn X (formerly Twitter)

Ircham Ali