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

https://medium.com/@kevinperdana
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

https://medium.com/@kevinperdana
PYTHON
5. Buka settings.py di dalam folder project. Tambahkan kode seperti di bawah.

Gambar 104 File settings.py

6. Pada file models.py di dalam app buku, ketik kode seperti gambar di bawah.

Gambar 105 File models.py

58 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
PYTHON
7. Buka cmd kembali dan ketik manage.py 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

https://medium.com/@kevinperdana
PYTHON
9. Kemudian buka cmd, ketik manage.py 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

https://medium.com/@kevinperdana
PYTHON
11. Lakukan runserver.

Gambar 110 Runserver

12. Buka halaman Admin Django di url http://127.0.0.1:8000/admin kemudian

login dengan username dan password yang telah dibuat pada materi
sebelumnya.

Gambar 111 Halaman Login Admin

61 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
PYTHON
13. Tampilan Halaman Admin setelah login.

Gambar 112 Halaman Admin

14. Buka file admin.py 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

https://medium.com/@kevinperdana
PYTHON
15. Model untuk buku telah tampil. Lakukan penambahan post seperti gambar di
bawah.

Gambar 114 Tambah Post

63 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
PYTHON
16. Postingan yang telah ditambahkan, tampil dengan nama Post object.

Gambar 115 List Postingan

17. Buka kembali app buku, dan file models.py tambahkan kode seperti dibawah,
untuk menampilkan judul buku setiap object.

Gambar 116 Kode models.py

64 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
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

https://medium.com/@kevinperdana
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 urls.py, tambah kode seperti
gambar di bawah.

Gambar 120 Tambah urls

66 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
PYTHON
2. Klik app buku, buka file urls.py kemudian tambah kode seperti gambar di bawah.

Gambar 121 urls.py app buku

3. Buka file views.py pada app buku, kemudian tambah kode seperti gambar di
bawah.

Gambar 122 views.py app buku

67 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
PYTHON
4. Tambahkan link untuk app buku pada index.html Halaman Utama.

Gambar 123 index.html Halaman Utama

5. Tambahkan link untuk app buku pada index.html Halaman About.

Gambar 124 index.html Halaman About

68 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana
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

https://medium.com/@kevinperdana
PYTHON
7. Buat folder templates, dan file index.html untuk app buku. Atur kode seperti
gambar di bawah.

Gambar 126 index.html Halaman Data Buku

8. Halaman Data Buku.

Gambar 127 Halaman Data Buku

70 | Page Kevin Perdana, ST

https://medium.com/@kevinperdana