12 | P a g e
PYTHON
Pola Django Framework
4.1 Pola Django
Berikut gambar Pola Django Framework.
Gambar 26 Pola Django Framework
4.2 Struktur App Django
Berikut gambar Struktur App Django.
Gambar 27 Struktur App Django
12 | Page Kevin Perdana, ST
[Link]
PYTHON
Gambar 28 Detail Struktur App Django
13 | Page Kevin Perdana, ST
[Link]
PYTHON
URL, Views, dan Template
5.1 Jalankan Server
Jalankan terlebih dahulu server website menggunakan cmd seperti di tutorial
sebelumnya.
Gambar 29 Menjalankan Server Website
14 | Page Kevin Perdana, ST
[Link]
PYTHON
5.2 Buka Project ke Dalam VS Code
Ikuti langkah-langkah di bawah ini untuk membuka project website ke dalam VS Code.
1. Pada Menu, klik File Open Folder.
Gambar 30 Open Folder
2. Cari Folder Virtual Env yang sudah dibuat sebelumnya, dan klik Select Folder.
Gambar 31 Cari Folder Virtual Env
15 | Page Kevin Perdana, ST
[Link]
PYTHON
5.3 URL, Views, dan Template untuk Halaman Utama
Langkah-langkah.
1. Pada project (websiteku) klik file urls kemudian ketik kode seperti gambar
dibawah.
Gambar 32 File urls Project
2. Klik kanan project directory, klik New File.
Gambar 33 New File Project
16 | Page Kevin Perdana, ST
[Link]
PYTHON
3. Ketik [Link]
Gambar 34 New File [Link]
4. Ketik kode untuk [Link]
Gambar 35 Isi Kode [Link]
17 | Page Kevin Perdana, ST
[Link]
PYTHON
5. Klik kanan pada Base Directory, kemudian New Folder.
Gambar 36 New Folder pada Base Directory
6. Buat folder baru dengan nama templates.
Gambar 37 Folder templates
18 | Page Kevin Perdana, ST
[Link]
PYTHON
7. Klik file [Link] pada project. Dan ketik kode seperti gambar di bawah.
Gambar 38 [Link]
8. Buat file baru dengan nama [Link] di dalam folder templates project.
Gambar 39 Buat File [Link]
19 | Page Kevin Perdana, ST
[Link]
PYTHON
9. Ketik kode [Link] seperti gambar di bawah.
Gambar 40 Isi Kode [Link]
10. Halaman Utama selesai. Cek di browser Anda.
Gambar 41 Halaman Utama
20 | Page Kevin Perdana, ST
[Link]
PYTHON
5.4 URL, Views, dan Template untuk App
Pada langkah ini akan dibuat app dengan nama about.
1. Buka cmd baru atau terminal (Klik View>Terminal) yang ada di VS Code Anda,
kemudian ketik [Link] startapp about seperti gambar di bawah. Jangan lupa
masuk ke dalam Virtual Environment dan masuk ke Base Directory terlebih
dahulu.
Gambar 42 Membuat App pada cmd
2. Apabila pembuatan App berhasil, hasilnya seperti gambar di bawah.
Gambar 43 App about
21 | Page Kevin Perdana, ST
[Link]
PYTHON
3. Tambahkan kode pada file urls yang ada di dalam Project Directory seperti
gambar di bawah.
Gambar 44 Kode urls pada Project Directory
4. Klik kanan pada App about. Kemudian New File.
Gambar 45 New File App about
22 | Page Kevin Perdana, ST
[Link]
PYTHON
5. Tambahkan file [Link] pada about
Gambar 46 [Link] pada about
6. Ketik kode pada file [Link] seperti gambar di bawah.
Gambar 47 Isi Kode [Link] pada about
23 | Page Kevin Perdana, ST
[Link]
PYTHON
7. Buka [Link] pada Project Directory dan sesuaikan dengan nama App yang
telah dibuat seperti gambar dibawah.
Gambar 48 [Link]
8. Klik kanan pada about, kemudian New Folder.
Gambar 49 New Folder pada about
24 | Page Kevin Perdana, ST
[Link]
PYTHON
9. Buat folder templates di dalam App about.
Gambar 50 Folder templates pada App about
10. Tambahkan folder lagi di dalam templates dengan nama about (sesuai dengan
nama App).
Gambar 51 Folder about di dalam Folder templates
25 | Page Kevin Perdana, ST
[Link]
PYTHON
11. Klik kanan pada folder about kemudian New File.
Gambar 52 New File
12. Buat file dengan nama [Link]
Gambar 53 File baru dengan Nama [Link]
26 | Page Kevin Perdana, ST
[Link]
PYTHON
13. Ketik kode [Link] seperti gambar di bawah.
Gambar 54 Isi Kode [Link]
14. Ketik kode pada file [Link] di dalam folder App about.
Gambar 55 Isi Kode [Link]
27 | Page Kevin Perdana, ST
[Link]
PYTHON
15. Tambahkan satu baris kode pada [Link] di dalam folder templates utama.
Ikuti gambar di bawah.
Gambar 56 File [Link] di dalam folder templates utama
16. Tampilan Halaman Utama website.
Gambar 57 Halaman Utama website
28 | Page Kevin Perdana, ST
[Link]
PYTHON
17. Tampilan Halaman App about.
Gambar 58 Halaman App about
29 | Page Kevin Perdana, ST
[Link]