Django: Membuat Personal Website

Bab ini membahas cara membangun Personal Website sederhana berisi Homepage dan About page menggunakan Django 6. Kita akan mempraktikkan function-based view, template, URL dispatcher, context data, pengujian dasar, serta manajemen versi menggunakan Git.

Pada sesi ini kita akan mempelajari:

• Setup proyek baru pada folder project3.
• Membuat Homepage dengan HttpResponse.
• Membuat About page berbasis template menggunakan render().
• Memahami struktur template yang benar (namespaced template path).
• Mengirim data context dari view ke template.
• Menulis test sederhana dengan SimpleTestCase.
• Menyimpan progres proyek menggunakan Git dan GitHub.

1. Konsep Utama

Bab ini menekankan tiga fondasi penting pengembangan web dengan Django:

1. View: fungsi Python yang menerima request dan mengembalikan response.
2. Template: lapisan presentasi untuk menghasilkan HTML.
3. Testing: validasi perilaku aplikasi agar perubahan kode tetap aman.

Dengan tiga komponen ini, kita dapat membangun situs sederhana yang rapi dan mudah dikembangkan pada bab berikutnya.

2. Setup Awal Proyek pada project3

2.1 Membuat folder kerja

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

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

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 pages

Daftarkan app pages pada django_project/settings.py:

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

Inisialisasi database dan jalankan server:

python manage.py migrate
python manage.py runserver

Buka http://127.0.0.1:8000/ untuk memastikan proyek berjalan.

2.4 Struktur direktori lengkap (setelah setup awal)

project3/
├── .venv/
├── db.sqlite3
├── manage.py
├── django_project/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py # update next
│   └── wsgi.py
└── pages/
	├── migrations/
    ├── templates/ # new
	├── __init__.py
	├── admin.py
	├── apps.py
	├── models.py
	├── tests.py
	├── urls.py # new
	└── views.py # update next

Catatan: file dan folder template akan ditambahkan pada bagian selanjutnya saat membangun About page.

3. Homepage dengan Function-Based View

Perbarui pages/views.py:

from django.http import HttpResponse
from django.shortcuts import render


def home_page_view(request):
	return HttpResponse("Homepage")

Buat pages/urls.py:

from django.urls import path
from .views import home_page_view

urlpatterns = [
	path("", home_page_view),
]

Hubungkan ke URL utama di django_project/urls.py:

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

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

Sekarang route / menampilkan teks Homepage.

4. About Page dengan Template

Tambahkan view baru pada pages/views.py:

from django.http import HttpResponse
from django.shortcuts import render


def home_page_view(request):
	return HttpResponse("Homepage")


def about_page_view(request):
	return render(request, "pages/about.html")

Perbarui pages/urls.py:

from django.urls import path
from .views import about_page_view, home_page_view

urlpatterns = [
	path("", home_page_view),
	path("about/", about_page_view),
]

Buat struktur template berikut:

pages/
└── templates/
	└── pages/
		└── about.html

Isi pages/templates/pages/about.html:

<h1>About page</h1>
<p>Ini adalah About page pertama berbasis template Django.</p>

Kenapa harus templates/pages/about.html?

• Ini adalah best practice Django untuk mencegah konflik nama template antar app.
• Django akan mencari template berdasarkan nama; namespacing membuat pemetaan lebih aman dan jelas.

5. Django Template Language dan Context

Template Django mendukung komentar, variabel, filter, dan tag.

Contoh komentar template:

Kita juga bisa mengirim data dari view ke template melalui context dictionary.

Perbarui about_page_view:

def about_page_view(request):
	context = {
		"name": "Alice",
		"age": 33,
	}
	return render(request, "pages/about.html", context)

Perbarui template about.html:

<h1>About page</h1>
<p>Nama saya .</p>
<p>Umur saya  tahun.</p>

Variabel name dan age berasal dari context pada view.

6. Menulis Pengujian Dasar

Tambahkan test pada pages/tests.py:

from django.test import SimpleTestCase


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


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

Jalankan test:

python manage.py test

Catatan penting:

• Gunakan /about/ (dengan trailing slash).
• Jika memakai /about saat test, kita bisa mendapat redirect 301 alih-alih 200.

7. Git dan GitHub

Inisialisasi Git dan cek status:

git init
git status

Buat .gitignore:

.venv/
__pycache__/
db.sqlite3

Simpan daftar dependency:

pip freeze > requirements.txt

Commit awal:

git add -A
git commit -m "Add gitignore, requirements, and initial project setup"

Hubungkan ke GitHub lalu push:

git remote add origin https://github.com/<username>/personal-website.git
git branch -M main
git push -u origin main

8. Ringkasan

Pada sesi ketiga django ini, kita telah menerjemahkan dan mempraktikkan inti Chapter 3 ke konteks proyek lokal django/project3 dengan Django 6, yaitu:

• membangun Homepage dan About page,
• menggunakan function-based view + template,
• mengirim context ke template,
• menulis pengujian URL dasar,
• dan menyiapkan version control dengan Git/GitHub.

Fondasi ini akan dipakai untuk materi selanjutnya: class-based view, template inheritance, serta pengujian yang lebih lengkap.