Ircham Ali

Ircham Ali

Informatics Lecturer and PhD Student in Information Systems

Django: Membuat Web Hello World

5 minute read

Published:

Bab ini membahas gambaran cara kerja internet dan web framework, lalu masuk ke arsitektur Django. Setelah itu, kita membangun website “Hello, World” dari nol menggunakan URL dispatcher dan view, kemudian menutup dengan praktik dasar Git untuk manajemen versi proyek.

Pada bab kita akan mempelajari:

  • Cara kerja internet secara ringkas (domain, DNS, IP, HTTP request/response).
  • Cara kerja web framework untuk website dinamis.
  • Komponen utama arsitektur Django: URL, view, model, dan template.
  • Perbedaan MVC dan pendekatan Django (MVT/MVTU).
  • Langkah membuat proyek Django dan app pertama.
  • Implementasi halaman statis “Hello, World!”.
  • Dasar penggunaan Git: git init, .gitignore, requirements.txt, dan commit awal.

1. Cara Internet Bekerja

Ketika pengguna mengetik alamat seperti https://learndjango.com, browser menjalankan rangkaian proses jaringan sebelum halaman tampil.

Secara sederhana, alurnya adalah:

  1. Pengguna memasukkan nama domain ke browser.
  2. Browser meminta DNS menerjemahkan domain ke alamat IP.
  3. Browser membuka koneksi jaringan ke server tujuan.
  4. Browser mengirim HTTP request untuk resource yang diminta.
  5. Server memproses request dan mengirim HTTP response.
  6. Browser merender halaman web.

HTTP (Hypertext Transfer Protocol) adalah aturan komunikasi utama antar komputer di web. Setelah request diterima server dan response dikembalikan, browser merender HTML serta resource tambahan melalui siklus request/response yang sama.

2. Cara Kerja Web Framework

Website umumnya terbagi menjadi dua:

  • statis: setiap halaman adalah file HTML terpisah
  • dinamis: halaman dihasilkan dari kombinasi template, data, dan logika aplikasi

Django dirancang untuk website dinamis. Dengan framework seperti Django, pengembang tidak perlu menulis semua komponen web secara manual. Banyak tugas berulang sudah distandardisasi agar lebih aman, konsisten, dan mudah dipelihara.

Secara inti, web framework menangani tiga hal:

  1. Memetakan URL ke logika view.
  2. Menyediakan abstraksi untuk interaksi database.
  3. Merender tampilan melalui sistem template.

3. Arsitektur Django

django architecture

Empat komponen utama Django adalah:

  • URL configuration
  • View
  • Model
  • Template

Siklus dasarnya:

  1. HTTP request masuk dari browser.
  2. urls.py mencocokkan URL ke view yang sesuai.
  3. views.py memproses request.
  4. Jika perlu data, view berinteraksi dengan models.py.
  5. Jika perlu tampilan HTML, view meneruskan data ke template.
  6. View mengirim HTTP response kembali ke browser.

Dalam kasus sederhana seperti bab ini, aplikasi bisa berjalan hanya dengan URL dispatcher dan view.

4. MVC vs MVT di Django

Framework lain sering memakai pola MVC:

  • Model: mengelola data dan logika bisnis
  • View: menampilkan data
  • Controller: menerima input dan mengatur alur aplikasi

Di Django, pola yang umum disebut MVT (atau lebih lengkap MVTU):

  • Model: mengelola data dan logika bisnis
  • View: menentukan data yang dikirim
  • Template: menampilkan data ke pengguna
  • URL Configuration: memetakan route ke view

Secara konsep:

  • “View” pada MVC mirip dengan “Template” pada Django
  • “Controller” pada MVC dibagi menjadi URL dispatcher dan view pada Django

5. Setup Awal Proyek Hello, World

5.1 Membuat direktori kerja

# Windows
cd onedrive\desktop\django
mkdir helloworld
cd helloworld

# macOS
cd ~/desktop/django
mkdir helloworld
cd helloworld

5.2 Membuat virtual environment dan instal dependensi

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

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

5.3 Membuat project Django

django-admin startproject django_project .

Struktur awal:

django_project/
├── __init__.py
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
manage.py

6. Menjalankan Server dan Migrasi

Jalankan server pengembangan:

python manage.py runserver

Biasanya Anda akan melihat peringatan migrasi yang belum diterapkan. Hentikan server (Control+C) lalu jalankan:

python manage.py migrate

Perintah ini menerapkan migrasi bawaan (admin, auth, contenttypes, sessions) ke database SQLite lokal. Setelah itu, jalankan server lagi dan peringatan migrasi akan hilang.

Saat server pertama kali berjalan, file db.sqlite3 akan muncul di root proyek.

7. Membuat App Baru

Buat app bernama pages:

python manage.py startapp pages

Struktur dasar app:

pages/
├── __init__.py
├── admin.py
├── apps.py
├── migrations/
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

Daftarkan app ke INSTALLED_APPS 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
]

8. Membuat View Pertama

Perbarui pages/views.py:

from django.http import HttpResponse


def home_page_view(request):
    return HttpResponse("Hello, World!")

Intinya, setiap view menerima objek request dan mengembalikan response.

9. URL Dispatcher

Buat file pages/urls.py:

from django.urls import path
from .views import home_page_view

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

Lalu ubah django_project/urls.py agar app pages dikenali:

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

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

Jalankan ulang server:

python manage.py runserver

Saat membuka http://127.0.0.1:8000/, halaman akan menampilkan teks Hello, World!.

django hello world

10. Dasar Git pada Proyek Django

Inisialisasi repository:

git init
git status

Buat file .gitignore dan tambahkan:

.venv/

Simpan daftar paket terinstal:

pip freeze > requirements.txt

Contoh sebagian isi:

asgiref==3.8.1
black==24.4.2
click==8.1.7
Django==6.0.4
mypy-extensions==1.0.0
packaging==24.1
pathspec==0.12.1
platformdirs==4.2.2
sqlparse==0.5.0

Lakukan commit awal:

git add .
git commit -m "initial commit"

11. Ringkasan

Bab ini menutup fondasi penting sebelum membangun aplikasi Django yang lebih kompleks:

  • Memahami alur internet dan HTTP request/response.
  • Memahami arsitektur inti Django (URL, view, model, template).
  • Membangun website “Hello, World” pertama.
  • Mengenal app Django dan pengaturan routing.
  • Menerapkan praktik dasar Git dan manajemen dependensi.

Pada bab berikutnya, materi berlanjut ke penggunaan template dan view yang lebih kaya serta pengujian aplikasi.

Referensi

Django for Beginners by William S. Vincent

You May Also Enjoy

Django: Building a Hello World Website

6 minute read

Published:

This chapter introduces how the internet and web frameworks work, then moves into Django architecture. After that, we build a...

Django: Introduction and Initial Setup

6 minute read

Published:

This first module emphasizes the importance of preparing your computer correctly before building a Django 6 application. The main focus...

Django: Pengenalan dan Setup Awal

5 minute read

Published:

Module pertama ini menekankan pentingnya menyiapkan komputer dengan benar sebelum mulai membangun aplikasi Django 6. Fokus utama adalah memahami command...