Tutorial 1: Pengenalan Aplikasi Django dan Model-View-Template (MVT) pada Django

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024

---

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:

• Mengerti konsep MVT pada aplikasi Django
• Mengerti bagaimana alur Django menampilkan sebuah halaman HTML
• Mengerti konfigurasi routing yang ada pada urls.py
• Memahami kaitan models, views dan template pada Django
• Memahami pembuatan unit test pada framework Django

Ringkasan Hasil Tutorial 0

Untuk membantumu mengerjakan tutorial 1 dengan baik, kami mengharapkan hasil pengerjaan tutorial 0 sebagai berikut.

1. Pada komputer lokal, terdapat direktori utama book-tracker yang telah diinisiasi sebagai repositori lokal.

2. Pada direktori utama book-tracker tersebut, terdapat beberapa berkas dan subdirektori berikut.

3. Subdirektori env.

4. Subdirektori proyek book_tracker. Berbeda dengan direktori utama, subdirektori ini terbentuk setelah menjalankan perintah

   django-admin startproject book_tracker .
   

5. Berkas .gitignore.

6. Berkas manage.py.
7. Berkas requirements.txt.
8. (Opsional) Berkas db.sqlite3.

Struktur proyek book-tracker pada direktori lokal adalah sebagai berikut.

1. Pada repositori GitHub, pastikan repositori book-tracker memiliki berkas dan direktori berikut.

2. Direktori proyek book_tracker. Direktori ini hasil menjalankan perintah

   django-admin startproject book_tracker .
   

3. Berkas .gitignore.

4. Berkas manage.py.
5. Berkas requirements.txt.

Struktur proyek book-tracker pada repositori GitHub adalah sebagai berikut.

Pengenalan Mengenai Konsep MVT

Dalam dunia pengembangan web, terdapat berbagai konsep dan arsitektur yang membantu dalam merancang dan mengembangkan aplikasi. Salah satu konsep yang umum digunakan adalah MVT (Model-View-Template).

Apa Itu Konsep MVT?

MVT adalah singkatan dari Model-View-Template. MVT adalah sebuah konsep arsitektur yang digunakan dalam pengembangan web untuk memisahkan komponen-komponen utama dari sebuah aplikasi. Konsep ini memungkinkan pengembang web untuk mengorganisasi dan mengelola kode dengan lebih terstruktur.

Apa Itu Model?

Model merupakan komponen dalam konsep MVT yang bertanggung jawab untuk mengatur dan mengelola data dari aplikasi. Model mewakili struktur data dan logika aplikasi yang berada di belakang tampilan. Model menghubungkan aplikasi dengan basis data dan mengatur interaksi dengan data tersebut.

Apa Itu View?

View merupakan komponen yang menangani logika presentasi dalam konsep MVT. View mengontrol bagaimana data yang dikelola oleh model akan ditampilkan kepada pengguna. Dalam konteks MVT, view berperan sebagai pengatur tampilan dan mengambil data dari model untuk disajikan kepada pengguna.

Apa Itu Template?

Template adalah komponen yang berfungsi untuk mengatur tampilan atau antarmuka pengguna. Template memisahkan kode HTML dari logika aplikasi. Dalam MVT, template digunakan untuk merancang tampilan yang akhirnya akan diisi dengan data dari model melalui view.

Hubungan Antara Komponen-komponen MVT

Secara ringkas, konsep MVT berjalan dalam kerangka berikut:

• Model: Menyimpan data dan logika aplikasi.
• View: Menampilkan data dari model dan menghubungkannya dengan template.
• Template: Menentukan tampilan antarmuka pengguna.

Manfaat MVT

• Pemisahan Tugas

MVT memisahkan tugas antara logika aplikasi, tampilan, dan data, sehingga memungkinkan pengembang untuk bekerja pada setiap komponen secara terpisah.

• Kode yang Mudah Dikelola

Dengan pemisahan tugas yang jelas, kode menjadi lebih terorganisir dan mudah dikelola.

• Penggunaan Kembali

Kode dapat digunakan kembali dalam berbagai bagian aplikasi yang berbeda.

• Skalabilitas

Struktur MVT mendukung skalabilitas dengan memungkinkan pengembangan paralel pada setiap komponen.

Catatan:

• Konsep MVT sangat terkait dengan framework Django dalam pengembangan web dengan bahasa pemrograman Python.
• Dalam praktiknya, pemahaman yang baik mengenai konsep MVT akan membantu kamu dalam merancang aplikasi web yang lebih terstruktur dan mudah dikelola.

Tutorial: Membuat Aplikasi Django beserta Konfigurasi Model

Dalam tutorial ini, akan dijelaskan mengenai konsep aplikasi dan proyek dalam Django.

Apa Itu Proyek dan Aplikasi dalam Django?

• Proyek (Project) adalah keseluruhan proyek web yang kamu bangun dengan menggunakan Django. Proyek berisi berbagai aplikasi yang berfungsi secara bersama untuk menciptakan situs web atau aplikasi web yang lengkap.

• Aplikasi (Apps) adalah unit modular yang melakukan tugas-tugas spesifik dalam suatu proyek Django. Setiap aplikasi dapat memiliki model, tampilan, template, dan URL yang terkait dengannya. Aplikasi memungkinkanmu untuk membagi fungsionalitas proyek menjadi bagian-bagian terpisah yang dapat dikelola secara independen.

Sebelum dimulai, kamu perlu mengingat kembali bahwa direktori utama adalah direktori terluar, sedangkan direktori proyek adalah direktori di dalam direktori utama. Perlu diingat bahwa keduanya memiliki nama yang hampir sama. Direktori utama memiliki nama book-tracker, sementara itu direktori proyek memiliki nama book_tracker. Perbedaan hanya terletak pada penggunaan dash (-) dan underscore (_).

Langkah 1: Persiapan Awal

1. Buka direktori utama book-tracker.

2. Sebelum memulai, pastikan kamu berada di direktori utama book-tracker yang telah dibuat pada tutorial sebelumnya.

3. Di dalam direktori ini, kamu akan melanjutkan pengembangan proyek Django.

4. Buka terminal atau command prompt dan pastikan direktori kerja kamu adalah direktori utama book-tracker.

5. Aktifkan virtual environment yang telah dibuat sebelumnya. Jalankan perintah berikut sesuai dengan sistem operasi perangkat kamu.

6. Windows:

   env\Scripts\activate.bat
   

7. Unix (Linux & Mac OS):

   source env/bin/activate
   

Langkah 2: Membuat Aplikasi main dalam Proyek Book Tracker

Kamu akan membuat aplikasi baru bernama main dalam proyek book tracker.

1. Jalankan perintah berikut untuk membuat aplikasi baru.

python manage.py startapp main

Setelah perintah di atas dijalankan, akan terbentuk direktori baru dengan nama main yang akan berisi struktur awal untuk aplikasimu.

Mungkin kamu cukup bingung dengan istilah direktori utama, direktori proyek, atau direktori aplikasi. Akan tetapi, seiring berjalannya waktu, kamu pasti bisa!

1. Daftarkan aplikasi main ke dalam proyek.

2. Buka berkas settings.py di dalam direktori proyek book_tracker.

3. Temukan variabel INSTALLED_APPS.

4. Tambahkan 'main' ke dalam daftar aplikasi yang ada.

   INSTALLED_APPS = [
       ...,
       'main',
       ...
   ]
   

Dengan melakukan langkah-langkah tersebut, kamu telah mendaftarkan aplikasi main ke dalam proyek book tracker kamu sehingga proyekmu sudah mengenali bahwa terdapat aplikasi main yang dapat dijalankan.

Tutorial: Implementasi Template Dasar

Kamu akan membuat template main.html di dalam direktori baru bernama templates pada aplikasi main. Template ini akan digunakan untuk menampilkan data book tracker kamu.

Saat ini, aplikasi book tracker belum menampilkan data apapun. Data akan ditampilkan pada tutorial selanjutnya.

Langkah 1: Membuat dan Mengisi Berkas main.html

Sebelum mulai, mari pahami secara singkat mengenai HTML. HTML (Hypertext Markup Language) adalah penanda bahasa yang digunakan untuk membuat struktur dan tampilan konten pada halaman web.

Hint: Kamu akan mempelajari HTML lebih lanjut di tutorial 4.

1. Buat direktori baru bernama templates di dalam direktori aplikasi main.

2. Di dalam direktori templates, buat berkas baru bernama main.html dengan isi sebagai berikut. Gantilah nilai yang sesuai dengan data kamu.

<h1>Book Tracker Page</h1>

<h5>Name:</h5>
<p>Pak Bepe</p>
<!-- Ubahlah sesuai dengan nama kamu -->
<h5>Class:</h5>
<p>PBP A</p>
<!-- Ubahlah sesuai dengan kelas kamu -->

1. Buka berkas HTML di web browser.

2. Sebelum dihubungkan dengan aplikasi, cobalah membuka berkas main.html di web browser-mu.

3. Perlu dicatat bahwa pada tahap ini hanya untuk memeriksa tampilan dasar HTML dan belum terhubung dengan Django.

4. Berikut merupakan contoh tampilan HTML yang diharapkan.

   

Tutorial: Implementasi Model Dasar

Langkah 1: Mengubah Berkas models.py dalam Aplikasi main

Pada langkah ini, kamu akan mengubah berkas models.py yang terdapat di dalam direktori aplikasi main untuk mendefinisikan model baru.

1. Buka berkas models.py pada direktori aplikasi main.

2. Isi berkas models.py dengan kode berikut.

from django.db import models

class Book(models.Model):
    name = models.CharField(max_length=255)
    date_added = models.DateField(auto_now_add=True)
    page = models.IntegerField()
    description = models.TextField()

Penjelasan Kode:

• models.Model adalah kelas dasar yang digunakan untuk mendefinisikan model dalam Django.
• Book adalah nama model yang kamu definisikan.
• name (nama), date_added (tanggal tambah), page (halaman), dan description (deskripsi) adalah atribut atau field pada model. Setiap field memiliki tipe data yang sesuai seperti CharField, DateField, IntegerField, dan TextField.

Langkah 2: Membuat dan Mengaplikasikan Migrasi Model

Apa itu migrasi model?

• Migrasi model adalah cara Django melacak perubahan pada model basis data kamu.
• Migrasi ini adalah instruksi untuk mengubah struktur tabel basis data sesuai dengan perubahan model yang didefinisikan dalam kodemu.

Bagaimana cara melakukan migrasi model?

1. Jalankan perintah berikut pada terminal atau command prompt di direktori utama untuk membuat migrasi model.

python manage.py makemigrations

makemigrations menciptakan berkas migrasi yang berisi perubahan model yang belum diaplikasikan ke dalam basis data.

1. Masih di direktori utama, jalankan perintah berikut untuk menerapkan migrasi ke dalam basis data lokal.

python manage.py migrate

migrate mengaplikasikan perubahan model yang tercantum dalam berkas migrasi ke basis data.

Setiap kali kamu melakukan perubahan pada model, seperti menambahkan atau mengubah atribut, kamu perlu melakukan migrasi untuk merefleksikan perubahan tersebut.

Tutorial: Menghubungkan View dengan Template

Dalam tutorial ini, kamu akan menghubungkan view dengan template menggunakan Django. Langkah-langkah ini akan menjelaskan bagaimana membuat fungsi view show_main dalam aplikasi main dan me-render template dengan data yang telah diambil dari model.

Langkah 1: Mengintegrasikan Komponen MVT

Kamu akan mengimpor modul yang diperlukan dan membuat fungsi view show_main.

1. Buka berkas views.py yang terletak di dalam berkas aplikasi main.

2. Tambahkan baris-baris impor berikut di bagian paling atas berkas apabila belum ada.

from django.shortcuts import render

Penjelasan Kode:

from django.shortcuts import render berguna untuk mengimpor fungsi render dari modul django.shortcuts. Fungsi render digunakan untuk me-render tampilan HTML dengan menggunakan data yang diberikan.

1. Tambahkan fungsi show_main di bawah impor:

def show_main(request):
    context = {
        'name': 'Pak Bepe',
        'class': 'PBP A'
    }

    return render(request, "main.html", context)

Penjelasan Kode:

• def show_main(request) merupakan deklarasi fungsi show_main, yang menerima parameter request. Fungsi ini akan mengatur permintaan HTTP dan mengembalikan tampilan yang sesuai.

• context adalah dictionary yang berisi data yang akan dikirimkan ke tampilan. Pada konteks ini, dua data disertakan, yaitu:

  • name: Data nama.
  • class: Data kelas.

• return render(request, "main.html", context) berguna untuk me-render tampilan main.html dengan menggunakan fungsi render. Fungsi render mengambil tiga argumen:

  • request: Ini adalah objek permintaan HTTP yang dikirim oleh pengguna.
  • main.html: Ini adalah nama berkas template yang akan digunakan untuk me-render tampilan.
  • context: Ini adalah dictionary yang berisi data yang akan diteruskan ke tampilan untuk digunakan dalam penampilan dinamis.

Langkah 2: Modifikasi Template

Sekarang, kamu akan mengubah template main.html agar dapat menampilkan data yang telah diambil dari model.

1. Buka berkas main.html yang telah dibuat sebelumnya dalam direktori templates pada direktori main.

2. Ubah nama dan kelas yang sebelumnya dibuat secara statis menjadi kode Django yang sesuai untuk menampilkan data.

...
<h5>Name:</h5>
<p>{{ name }}</p>
<p></p>
<h5>Class:</h5>
<p>{{ class }}</p>

Penjelasan Kode:

Sintaks Django {{ name }} dan {{ class }} digunakan untuk menampilkan nilai dari variabel yang telah didefinisikan dalam context.

Tutorial: Mengonfigurasi Routing URL

Kamu akan mengatur routing URL agar aplikasi main dapat diakses melalui web browser.

Langkah 1: Mengonfigurasi Routing URL Aplikasi main

1. Buatlah berkas baru bernamaurls.py di dalam direktori main.
2. Isi urls.py dengan kode berikut.

from django.urls import path
from main.views import show_main

app_name = 'main'

urlpatterns = [
    path('', show_main, name='show_main'),
]

Penjelasan Kode dalam urls.py pada Aplikasi main:

• Berkas urls.py pada aplikasi main bertanggung jawab untuk mengatur rute URL yang terkait dengan aplikasi main.
• Impor path dari django.urls untuk mendefinisikan pola URL.
• Gunakan fungsi show_main dari modul main.views sebagai tampilan yang akan ditampilkan ketika URL terkait diakses.
• Nama app_name diberikan untuk memberikan nama unik pada pola URL dalam aplikasi.

Langkah 2: Mengonfigurasi Routing URL Proyek

Kamu akan menambahkan rute URL dalam urls.py pada proyek untuk menghubungkannya ke tampilan main.

1. Buka berkas urls.py di dalam direktori proyek book_tracker, bukan yang ada di dalam direktori aplikasi main.
2. Impor fungsi include dari django.urls.

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

1. Tambahkan rute URL seperti berikut untuk mengarahkan ke tampilan main di dalam variabel urlpatterns.

urlpatterns = [
    ...
    path('', include('main.urls')),
    ...
]

Penjelasan:

• Berkas urls.py pada proyek bertanggung jawab untuk mengatur rute URL dalam skala proyek.
• Fungsi include digunakan untuk mengimpor rute URL dari aplikasi lain (dalam hal ini, dari aplikasi main) ke dalam berkas urls.py proyek.
• Path URL '' akan diarahkan ke rute yang didefinisikan dalam berkas urls.py aplikasi main. Path URL dibiarkan berupa string kosong agar halaman aplikasi main dapat diakses secara langsung.

Sebagai bayangan, apabila kamu menggunakan path 'main/' pada contoh di atas, maka kamu perlu mengakses halaman http://localhost:8000/main/ untuk mengakses halaman aplikasi main. Karena path yang ditentukan adalah '', maka kamu dapat mengakses aplikasi main melalui URL http://localhost:8000/ saja.

1. Jalankan proyek Django dengan menjalankan perintah python manage.py runserver pada terminal atau command prompt di direktori utama.

2. Bukalah http://localhost:8000/ di web browser favoritmu untuk melihat halaman yang sudah kamu buat.

Dengan langkah-langkah di atas, kamu telah berhasil mengimplementasikan tampilan dasar dalam aplikasi main dan menghubungkannya dengan rute URL proyek. Pastikan kamu memahami setiap langkah dan informasi yang diberikan untuk mengaktifkan tampilan dalam proyek Django-mu

Apa bedanya urls.py pada aplikasi dan urls.py pada proyek?

• Berkas urls.py pada aplikasi mengatur rute URL spesifik untuk fitur-fitur dalam aplikasi tersebut
• urls.py pada proyek mengarahkan rute URL tingkat proyek dan dapat mengimpor rute URL dari berkas urls.py aplikasi-aplikasi, memungkinkan aplikasi dalam proyek Django untuk bersifat modular dan terpisah.

Tutorial: Pengenalan Django Unit Testing

Unit testing dapat digunakan untuk mengecek apakah kode yang dibuat bekerja sesuai dengan keinginan. Hal ini juga berguna ketika kamu melakukan perubahan kode. Dengan menggunakan tes, kamu bisa mengecek apakah perubahan yang dilakukan dapat menyebabkan perilaku yang tidak diinginkan pada aplikasi.

Langkah 1: Membuat Unit Test

1. Bukalah berkas tests.py pada direktori aplikasi main.
2. Isi tests.py dengan kode berikut.

from django.test import TestCase, Client

class mainTest(TestCase):
    def test_main_url_is_exist(self):
        response = Client().get('')
        self.assertEqual(response.status_code, 200)

    def test_main_using_main_template(self):
        response = Client().get('')
        self.assertTemplateUsed(response, 'main.html')

Penjelasan:

• test_main_url_is_exist adalah tes untuk mengecek apakah path URL '' dapat diakses. Path '' artinya hanya http://localhost:8000/ tanpa path tambahan di bagian belakang URL.
• test_main_using_main_template adalah tes untuk mengecek apakah halaman '' di-render menggunakan template main.html.

Langkah 2: Menjalankan Test

1. Jalankan tes dengan menggunakan perintah berikut.

python manage.py test

1. Jika tes berhasil, akan mengeluarkan informasi berikut.

Found 2 test(s).
 Creating test database for alias 'default'...
 System check identified no issues (0 silenced).
 ..
 ----------------------------------------------------------------------
 Ran 2 tests in 0.006s

 OK
 Destroying test database for alias 'default'...

Selamat! Kamu telah berhasil menulis Django Test dan menjalankannya.

Penutup

1. Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.

Huruf U menandakan bahwa terdapat berkas baru yang belum dilacak oleh Git. Huruf M menandakan bahwa terdapat berkas yang telah dilacak sebelumnya yang dimodifikasi.

1. Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
2. Jalankan perintah berikut untuk melakukan add, commit dan push.

git add .
git commit -m "<pesan_commit>"
git push origin <branch_utama>

• Ubah <pesan_commit> sesuai dengan keinginan. Contoh: git commit -m "tutorial 1 selesai".

• Ubah <branch_utama> sesuai dengan nama branch utamamu. Contoh: git push origin main atau git push origin master.

• Berikut struktur direktori GitHub setelah kamu menyelesaikan tutorial ini.

Referensi Tambahan

• Django Unit Testing

Kontributor

• Muhammad Nabil Mu'afa
• Muhammad Iqbal Dwitama

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.