12 | P a g e
PYTHON
Membuat Model dan Menampilkan Data ke Views
Di Django, model adalah object yang dipetakan ke database. Ketika Anda membuat
model, Django mengeksekusi SQL untuk membuat tabel yang sesuai dalam database
tanpa harus menulis satu baris pun dari SQL. Django memberikan awalan nama tabel
dengan nama App Django Anda.
Model ini juga menghubungkan informasi terkait dalam database.
9.1 Membuat Model App
Langkah-langkah berikut ini adalah lanjutan dari modul sebelumnya.
1. Pastikan Apache dan MySQL pada Xampp diaktifkan, karena project sebelumnya
sudah terkoneksi dengan Database. Apabila belum diaktifkan maka muncul error
ketika runserver.
Gambar 100 Error Ketika runserver
56 | Page Kevin Perdana, ST
[Link]
PYTHON
2. Aktifkan Apache dan MySQL pada Xampp.
Gambar 101 Apache dan MySQL diaktifkan
3. Buka cmd, dan buat App dengan nama buku.
Gambar 102 Membuat App
4. Cek di struktur project pada Visual Studio Code.
Gambar 103 App buku
57 | Page Kevin Perdana, ST
[Link]
PYTHON
5. Buka [Link] di dalam folder project. Tambahkan kode seperti di bawah.
Gambar 104 File [Link]
6. Pada file [Link] di dalam app buku, ketik kode seperti gambar di bawah.
Gambar 105 File [Link]
58 | Page Kevin Perdana, ST
[Link]
PYTHON
7. Buka cmd kembali dan ketik [Link] makemigrations untuk melakukan
migrasi model App.
Gambar 106 Makemigrations App
8. Buka app buku, folder migrations dan file 0001_initial.py untuk melihat detail
model yang akan dimigrasi.
Gambar 107 Detail Model yang Akan dimigrasi
59 | Page Kevin Perdana, ST
[Link]
PYTHON
9. Kemudian buka cmd, ketik [Link] migrate untuk mengeksekusi.
Gambar 108 Eksekusi Migrasi
10. Buka database dan tabel seperti gambar dibawah untuk melihat field yang telah
dibuat.
Gambar 109 Tabel buku
60 | Page Kevin Perdana, ST
[Link]
PYTHON
11. Lakukan runserver.
Gambar 110 Runserver
12. Buka halaman Admin Django di url [Link] kemudian
login dengan username dan password yang telah dibuat pada materi
sebelumnya.
Gambar 111 Halaman Login Admin
61 | Page Kevin Perdana, ST
[Link]
PYTHON
13. Tampilan Halaman Admin setelah login.
Gambar 112 Halaman Admin
14. Buka file [Link] pada app buku. Ketik kode seperti gambar di bawah untuk
menampilkan model pada Halaman Admin.
Gambar 113 Register Model pada Halaman Admin
62 | Page Kevin Perdana, ST
[Link]
PYTHON
15. Model untuk buku telah tampil. Lakukan penambahan post seperti gambar di
bawah.
Gambar 114 Tambah Post
63 | Page Kevin Perdana, ST
[Link]
PYTHON
16. Postingan yang telah ditambahkan, tampil dengan nama Post object.
Gambar 115 List Postingan
17. Buka kembali app buku, dan file [Link] tambahkan kode seperti dibawah,
untuk menampilkan judul buku setiap object.
Gambar 116 Kode [Link]
64 | Page Kevin Perdana, ST
[Link]
PYTHON
18. List post/object yang telah berubah menampilkan judul buku.
Gambar 117 List Post/Object Menampilkan Judul Buku
19. Silahkan Anda cek tabel untuk mengetahui record data buku.
Gambar 118 Record Data Buku
65 | Page Kevin Perdana, ST
[Link]
PYTHON
20. Tambah Data Buku sesuai keinginan.
Gambar 119 Tambah Buku
9.2 Menampilkan Data ke Views
Setelah data tersimpan di dalam database, langkah berikut ini adalah menampilkan
data dengan model dan ditampilkan ke views.
1. Klik folder project websiteku, kemudian buka file [Link], tambah kode seperti
gambar di bawah.
Gambar 120 Tambah urls
66 | Page Kevin Perdana, ST
[Link]
PYTHON
2. Klik app buku, buka file [Link] kemudian tambah kode seperti gambar di bawah.
Gambar 121 [Link] app buku
3. Buka file [Link] pada app buku, kemudian tambah kode seperti gambar di
bawah.
Gambar 122 [Link] app buku
67 | Page Kevin Perdana, ST
[Link]
PYTHON
4. Tambahkan link untuk app buku pada [Link] Halaman Utama.
Gambar 123 [Link] Halaman Utama
5. Tambahkan link untuk app buku pada [Link] Halaman About.
Gambar 124 [Link] Halaman About
68 | Page Kevin Perdana, ST
[Link]
PYTHON
6. Copy banner untuk Halaman Data Buku dan paste di dalam folder static, img di
dalam app buku (dibuat terlebih dahulu folder tersebut).
Gambar 125 Copy dan Paste Banner
69 | Page Kevin Perdana, ST
[Link]
PYTHON
7. Buat folder templates, dan file [Link] untuk app buku. Atur kode seperti
gambar di bawah.
Gambar 126 [Link] Halaman Data Buku
8. Halaman Data Buku.
Gambar 127 Halaman Data Buku
70 | Page Kevin Perdana, ST
[Link]
