Cara Membuat Website Menggunakan Django Framework Bagian 2

Tulisan ini adalah lanjutan dari Cara Membuat Website Menggunakan Django Web Framework bagian pertama, jika belum membacanya silahkan dibaca terlebih dahulu supaya bisa berurutan sesuai versi Saya. Pada tulisan Membuat Website Menggunakan Django bagian kedua ini akan dibahas tentang migrate, halaman admin dan membuat super user, file static dan media sebagai tempat upload gambar, dan menggunakan templates.

Membuat Website Menggunakan Django

Karena kita akan melanjutkan project mywebsite sebelumnya, jadi saya masih menggunakan perlengkapan yang sama. Dan project yang sama seperti sebelumnya.

Setiap akan memulai mengerjakan pembuatan website di django, saya selalu melakukan hal berikut:

  1. Masuk ke folder project dalam praktik ini bernama mywebsite di terminal cd Documents/dev-django/mywebiste (sesuai dengan lokasi project Anda).
  2. Mengaktivkan virtual environmensource ../env/bin/activate. Folder virtual environment saya bernama env dan berada diluar dari folder mywebsite karena itu saya menggunakan ../env…. Intinya disesuaikan saja

Ok dua itu saja yang selalu saya lakukan saat membuat website menggunakan django, setiap kali mau mengedit atau mengerjakan apapun diproject. Dan sekarang kita akan mulai pembahasannya.

Saat RUNSERVER kok ERROR?

Setelah selesai membuat kode di urls.py, models.py, dan views.py apakah ada yang iseng runserver? JIka ada yang coba menjalankan runserver pasti akan menemukan error seperti ini.


django.core.management.base.SystemCheckError: SystemCheckError: System check identified some issues:

ERRORS:
blog.Blog_Post.gambar_post: (fields.E210) Cannot use ImageField because Pillow is not installed.
HINT: Get Pillow at https://pypi.org/project/Pillow/ or run command "pip install Pillow".

django runserver error
Pada saat saya runserver ternyata ada error yang kira-kira seperti itu. Kira-kira begini: kita tidak bisa menggunakan ImageFied pada blog.Blog_Post.gambar_post karena Pillow tidak terinstall.

Saya hampir lupa karena ImageField adalah sebuah field file untuk upload gambar membutuhkan module bernama pillow.

Jadi sekarang kita install dulu modul pillow dengan cara seperti yang sudah dijelaskan dalam error itu. Pastikan terhubung dengan internet ya…

pip install Pillow

Kalau sudah selesai cek apakah benar sudah ada paket pillow dalam environment kita dengan pip list
django install pillow
Ok sudah ada kita lanjut….

Makemigrations dan Migrate

Perintah makemigrations perlukan saat kita melakukan perubahan di file models.py untuk mensinkronkan dengan database yang sudah dibuat. Dan migrate adalah untuk menerapkan hasil perubahan kedatabase.

Misal setelah melakukan migrate ternyata kemudian hari perlu menambahkan kolom atau menghapus kolom tertentu dari tabel database kita, maka ini perlu dilakukan pertama makemigrations untuk mendata perubahan apa saja dan membandingkannya dengan database. Jika tidak sama maka akan disimpan dalam sebuah file difolder khusus bernama migrations dalam app project kita. Setelah itu perintah migrate untuk menerapkan perubahan tersebut kedatabase berdasarkan apa yang sudah disimpan di folder migrations tersebut.

Pun perintah migrate perlu dilakukan untuk pertama kali setelah selesai membuat models seperti yang kita buat kemarin. Jika models sudah selesai dibuat dan melakukan migrate, maka si django akan membuat tabel-table kedatabase sesuai dengan yang kita buat dimodels.

Nama class itu sebagai nama tabel dan variabel-variabel didalam class itu menjadi kolom-kolomnya. Maka sebelum melakukan migrate, perlu adanya merancang seperti apa database yang ingin dibuat. Mungkin untuk jenis website tertentu kita memerlukan database relation, atau mungkin tidak. Tapi database relation akan dibahas ditema lain saja.

Saat ini kita hanya perlu membuat satu tabel saja maka bisa langsung melakukan migrate

Oh iya sebelum itu saya ingin memperlihatkan sesuatu terlebih dahulu
website django
Apahah Anda melihat tulisan yang berwarna merah itu?

Anda memiliki 17 migrasi yang belum diterapkan. Proyek Anda mungkin tidak berfungsi dengan baik sampai Anda menerapkan migrasi untuk aplikasi: admin, auth, tipe konten, sesi.
Jalankan ‘python manage.py migrate’ untuk menerapkannya.

Kira-kira seperti itu terjemahan versi google translate, He he he …

Intinya kita disuruh untuk migrate, dan itu yang akan kita lakukan sekarang.

python3 manage.py migrate

Setelah saya mengeksekusi perintah itu maka hasilnya seperti ini
website django migrate
Untuk perintah makemigrations diperlukan saat ada perubahan struktur tabel, atau kita menambah table di models.py, maka harus melakukan python3 manage.py makemigrations setelah itu lakukan migrate. Disini saya merasa belum perlu menambah atau mengurangi table. Mungkin kedepan akan juga membuat tabel komentar.

Membuat Superuser

Kita sekarang sudah memiliki tabel database lengkap, termasuk tabel admin, auth, contentypes, dan sessions selain dari tabel Blog_Post yang kita buat di models.py. Tabel-tabel itu ada secara default(bawaan) dari Django sendiri. Jadi kita saat membuat website menggunakan django, tidak lagi ada permasalah autentikasi dan bagian administrasi serta sistem login.

Perhatikan bagian ini Apply all migrations: admin, auth, contenttypes, sessions
dari gambar migrate di atas.

Semua sudah ada, sudah disediakan oleh Django. Itu juga menjadi alasan mengapa membuat website menggunakan Django. Bagian admin tinggal dikembangkan saja, yang belum ada adalah user-nya.

Jika Anda buka file urls.py di folder mywebsite, itu ada path yang menuju admin/, meski sebelum melakukan migrate Anda masih tetap bisa menuju halaman http://127.0.0.1/admin tapi karena usernya belum ada maka tidak bisa login. Dan sekarang mari kita buat user admin, setelah itu bebas mau menambahkan user lainnya.

python3 manage.py createsuperuser

django create super user
Ketika Anda mengeksekusi perintah ini, akan diminta untuk mengisi username jika dikosongkan akan diisi username default pilihan django. mengisi email, juga passowrd. Untuk password minimal 8 karakter kombinasi minimal 1 angka dan huruf.

Sekarang Anda sudah bisa login ke http://127.0.0.1/admin menggunakan username dan password yang baru dibuat, jangan lupa runserver dulu ya…
django login admin
Tapi masih belum bisa melakukan apa-apa karena models.py belum di load dihalaman admin. Kita bisa menambahkan beberapa baris kode di file admin.py yang ada di folder blog. Tapi itu nanti, saya ingin mengatur folder media terlebih dahulu, untuk bisa upload gambar.

Folder /media/

Folder /media/ di Django sebagai tempat menimpan gambar yang diupload dari ImageField kolom gambar_post yang kita buat kemarin di models.py. Anda bisa membuat nama folder selain media, boleh apa saja sesuai keinginan Anda. Yang harus dilakukan sekarang adalah:

  1. Buat folder bernama media yang berada satu tempat dengan folder static dan templates.
  2. Buka file settings.py dan tambahkan baris kode berikut


    MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  3. Kita punya dua buah file bernama urls.py yang satu berada di folder blog dan satu lagi berada di folder mywebiste.

    Buka file urls.py yang berada di mywebsite dan buat seperti ini.

    
    from django.contrib import admin
    from django.urls import path, include
    from django.conf.urls.static import static
    from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    from django.conf import settings
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('blog/', include('blog.urls')),
    ]
    
    if settings.DEBUG:
        urlpatterns += staticfiles_urlpatterns()
        urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    
    

Admin Site Register

Ok, Proses membuat website menggunakan django sudah hampir selesai. Ditahap ini kita hanya perlu meregister models agar bisa diload pada halaman admin dan membuat posting pertama.


from django.contrib import admin
from blog.models import Blog_Post
admin.site.register(Blog_Post)

Sekarang kita lihat, sudah ada Blog_posts disana, dan kita bisa langsung memebuat artikel pertama.
django login admin

Templates

Dari tahapan membuat website menggunakan django, ini bagian akhir dari proses kita. Setelah tinggal terserah Anda ingin menggunakan template bootstrap atau memilih membuat sendiri.

Akan saya tujukkan cara menggunakan static css dan js ditamplate.

Cara Menampilkan Artikel

website django
Dari contoh di atas, kita membuat sebuah file bernama index.html di folder templates. Nama file html disesuaikan dengan yang kita buat di views.py.

Di file views.py pada baris ke 9, kita memiliki extra_content. Untuk menampilkan isi dari extra_content tersebut gunakan dua kurung kurawal {{ }} ditengahnya masukkan nama key ada extra_content. Di file html saya meletakkannya pada tag title untuk memberi page title. Anda bisa membuat extra_content berapapun sesuai kebutuhan.

Kemudian untuk memunculkan Isi pada tabel Blog_Post, kita menggunakan pengulangan for, data yang dikirim dari views.py berupa object_list, maka keywordnya adalah object_list


    {% for post in object_list %}
        {{ post.judul_post }} 
img src="{{ post.gambar_post.url }}" alt="" width="300px" p {{ post.body_post|safe }} /p {% endfor %}

Kemudian apa yang ingin ditampilkan mengikuti nama variabel pada models.py.

Khusus untuk gambar ditambahkan .url.

Jika tampilan masih seperti itu tanpa css dan js rasanya kurang sedap dipandang mata, maka kita akan melakukan layouting dengan bootstrap.

Layouting dengan Bootstrap

website django static

Sekarang saya sudah menambahkan css dan js di file index.html.
Untuk bisa menggunakan css dan js kita pertama memanggil static dengan {% load static %}, penulisan ini mesti ditempatkan dibaris pertama

Kemudian untuk menggunakannya seperti ini pada baris ke 8 dan 9

Setelah itu kita bisa membuat tampilan yang lebih baik lagi dengan css dan js.
membuat website menggunakan django
Selamat berkreasi dengan Django.

Selanjutnya

Sampai disini kita sudah menyelesaikan rangkaian dari membuat website menggunakan Django. Sebenarnya masih ada lagi yaitu DetailView yang belum sempat dibahas.

Pada tulisan Membuat website menggunakan Django berikutnya kita akan praktik makemigrations dan DetailView