Cara Membuat Website dengan Django Web Framework

Setelah berkenalan dengan Django Web Framework, sekarang kita akan mencoba membuat website dengan Django Web Framework. Dan pada tahap ini, kita akan menelusuri lebih dalam lagi apa saja yang akan kita dapatkan jika membuat website dengan Django. Apakah sulit atau mudah? apakah lebih powerfull dari framework PHP yang lain?

Sebelum benar-benar kita membuat website dengan Django, mungkin kedepan akan sedikit pilihan jika ingin mengonlinekan hasil karya ini. Sebab masih sedikit penyedia web share hosting yang menyediakan dukungannya terhadap Python. Tentu saja karena masih sangat sedikit yang menggunakan Django untuk kebutuhan web site. Atau kita bisa memilih untuk menggunakan VPS agar lebih leluasa menginstall Python dan Django. Memang ini menjadi tambahan skill pengetahuan tentang Server Linux agar bisa mengconfigurasi vps dengan efisien. Pilihan lain memilih share hosting dari luar negeri, karena banyak yang sudah support untuk Python dan DJango.

Persiapan Membuat Website dengan Django

Dipraktik ini saya menggunakan GNU/Linux Devuan dan Python 3.5.x dan beberapa paket pendukungnya seperti python-venv. Mula-mula kita akan membuat sebuah folder untuk area environment proyek ini. Pastikan bahwa sudah terinstall Python 3 di Linux. Karena default linux sudah ada python 2.7

Berikut langkah persiapannya

  1. Buka terminal

    dpkg -s python3

    Hasil output dari perintah tersebut seperti ini

    Package: python3
    Status: install ok installed
    Priority: optional
    Section: python
    Installed-Size: 67
    Maintainer: Matthias Klose <[email protected]>
    Architecture: amd64
    Multi-Arch: allowed
    Source: python3-defaults
    Version: 3.5.3-1
    Replaces: python3-minimal (<< 3.1.2-2) Provides: python3-profiler Depends: python3.5 (>= 3.5.3-1~), libpython3-stdlib (= 3.5.3-1), dh-python
    Pre-Depends: python3-minimal (= 3.5.3-1)
    Suggests: python3-doc (>= 3.5.3-1), python3-tk (>= 3.5.3-1~), python3-venv (>= 3.5.3-1)
    Description: interactive high-level object-oriented language (default python3 version)
       Python, the high-level, interactive object oriented language,
       includes an extensive class library with lots of goodies for
       network programming, system administration, sounds and graphics.
       .
       This package is a dependency package, which depends on Debian's default
       Python 3 version (currently v3.5).
    Homepage: http://www.python.org/

    Jika sudah diketahui ada python 3 maka sekarang membuat virtual environment. Saya akan membuat folder bernama dev-django kemudian masuk dalam folder itu dan membuat virtual environment disana.

Membuat Virtual Environment

Ringkasan perintah yang akan kita jalankan seperti berikut ini. Keterangan ada di bawahnya.

  1. python3 -m venv env
  2. source env/bin/activate
  3. pip install –upgrade pip
  4. django-admin startproject mywebsite
  5. cd mywebsite
  6. python3 manage.py runserver

Penjelasan Singkat

Masuk dalam folder dev-django dan ketik perintah python3 -m venv env, env adalah nama folder yang bisa terserah Anda mau diberi nama apa. Pada saat proses ini kita membutuhkan koneksi Internet untuk mengunduh paket yang diperlukan. Aktifkan environmennya dengan source env/bin/activate untuk menon aktifkannya cukup deactivate
persiapan membuat website
pip list memeriksa paket yang ada dalam environement
pip upgrade
Setelah berhasil, tidak ada pesan error lanjutkan dengan mengupgrade terlebih dahulu pip, yaitu manajemen paket di python dengan perintah pip install --upgrade pip dan setelah selesai lanjutkan dengan menginstall paket Django. pip install Django==2.2.* Kita install Django versi 2.2 atau kalau Anda mau install Django versi terbaru tidak perlu menambahkan ==2.2.*, dalam contoh ini saya menggunakan versi Django 2.2
membuat website install django
Coba periksa dengan pip list, seharusnya sudah bertambah ada Django disana
pip list
Masih didalam folder dev-django jalankan perintah django-admin startproject mywebsite untuk membuat sebuah project bernama mywebsite, setelah itu folder project bernama mywebsite yang akan menghasilkan file dasar dibutuhkan untuk memulai membuat website menggunakan django, berikut isinya seperti ini

mywebsite/
├── manage.py
└── mywebsite
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

Root directory mywebsite bisa direname dan aman, tapi folder mywebsite/mywebsite jangan direname karena akan bermasalah error.

Masuk kedalam project yang ada difolder mywebiste cd mywebsite dan menjalankan local server milik python python3 manage.py runserver untuk memeriksa apakah sudah berhasil dengan baik atau masih ada error. Setelah menjalankan runserver buka browser dan buka http://127.0.0.1:8000 jika tampilan seperti ini maka itu berhasil dan sudah mulai untuk coding. Dan untuk menonaktifkan tinggal pencet tombol CTRL + C.
runserver membuat website

Dalam pembuatan proyek membuat website dengan django hindari memberi nama seperti django dan test karena akan bermasalah dan itu juga dilarang.

Sedikit Pengaturan di settings.py

Kita membutuhkan text editor saat ini, untuk sementara tinggalkan dulu terminal-cli. Saya menggunakan Visual Studio Code dalam menulis kode program.

Di Visual Code Studio selanjutnya saya akan menyebut VSCode, buka folder mywebsite seperti ini
membuat website open folder
Perhatikan pada baris berikut ini!

  1. Pada blok INSTALLED_APPS: pada baris ke 33 disini nanti kita akan mengatur aplikasi apa saja yang diaktifkan pada projek ini. Cara membuat aplikasinya akan dijelaskan kemudian.
  2. Sekarang menuju bagian TEMPLATES, dibaris ke 57 pada ‘DIRS’ = [], nanti kita akan masukkan nama folder template HTML, yang menunjukkan bahwa lokasi template atau bisa juga disebut ‘theme/tema’ dari website kita nantinya. Lokasinya berada di dalam root mywebsite.

    membuat website templates

    Sekarang kita isi dulu 'DIRS'=[], menjadi 'DIRS': ['templates'], lalu buat folder bernama template di bawah root project kita. Dalam contoh ini saya mengisi DIRS dengan nama templates, berarti saya harus membuat folder bernama templates seperti ini.

    membuat website templates

    Perhatikan letak foldernya ya

  3. STATIC_URL: yang berada dibaris ke 120, ini adalah tempat file static kita, diantaranya file CSS dan JS yang akan digunakan pada template nanti. Dan tambahkan baris kode seperti ini


    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
         os.path.join(BASE_DIR, 'static')
    ]

    Lalu buat folder bernama static dengan lokasi yang sama seperti folder templates tadi, jadinya seperti ini.

    membuat website static

    Sekarang Anda bisa membuat folder lagi didalam folder static dengan nama css untuk file CSS dan js untuk file javascript. atau tidak juga tidak apa-apa tapi dalam contoh ini saya membuat file css dan js disana. Karena untuk kerapihan dan kemudahan organisasi file dan folder.

Ok untuk file settings.py cukup dulu, nanti akan ditambahkan kemudian pada seri tutorial berikutnya Membuat website dengan DJango.

Membuat App

Kita kembali lagi ke terminal untuk membuat app di django. App dalam project django ini ibaratnya seperti rumah yang ada di lingkungan RT. Satu rumah tidak terpengaruh dengan rumah lainnya yang memiliki fungsi berbeda-beda. App bisa dipasang atau dilepas tanpa mempengaruhi project yang dibuat seperti memasang modul.

Untuk membuat app pertama kita pastikan berada di folder yang ada file manage.py, contoh ini saya akan membuat app bernama blog dan perintahnya adalah

python3 manage.py startapp blog
Ok. kalau sudah bisa kembali lagi ke text editor yang Anda gunakan. Buka kembali settings.py dibaris INSTALLED_APPS tambahkan app yang baru dibuat yaitu blog, seperti ini penulisannya
membuat website blog

Lalu buka file urls.py yang berada difolder mywebsite dan tambahkan include seperti berikut:

from django.urls import path, include

Kemudian tambahkan kode pada urlpatterns seperti ini:

path('blog/', include('blog.urls')),

Lengkapnya seperti ini:

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


urlpatterns = [
     path('admin/', admin.site.urls),
     path('blog/', include('blog.urls')),
]

Blog APP

Sekarang buat file bernama urls.py di dalam folder blog:
membuat website blog urls

Dan buat kode seperti ini:

from django.urls import path, re_path
from blog import views as bv


urlpatterns = [
     path('', bv.index.as_view(), name='blogindex'),
]

  • from django.urls import path, re_path Pertama kita import modul path dan re_path dari django
  • from blog import views as bv Import views yang dibuat alias menjadi bv (as bv), as bv ini tidak harus dilakukan.
  • Membuat urlpatterns path('', bv.index.as_view(), name='blogindex'),, path menuju ke views yang sudah kita buat alias menjadi bv (kalau tidak buat alias berarti bv ditulis views saja). Didalam views kita mencari class bernama index. Dan name ini untuk memudahkan saat membuat link url ditemplate nanti.

Membuat Models

Model pada Django ini berfungsi untuk menghubungkan aplikasi kita dengan database, dan sekaligus membuat tabel database. Karena itu sebaiknya sebelum membuat model perlu dirancang baik-baik supaya tidak sering edit database kita. Meskipun sudah dibuat dan masih tetap bisa diedit.

Pada masa development ini saya tidak mengubah pengaturan database di settings.py karena memang disarankan menggunakan SQLite pada proses development. Ketika sudah selesai dan akan live maka bisa mengubah pengaturan database menjadi yang lain, misalnya MySQL atau MariaDB, dan lainnya. Anda bisa mengubahnya di settings.py pada baris DATABASES, tapi ini akan kita bahas kemudian. Untuk saat ini gunakan saja SQLite dulu.

Saya akan memberikan contoh models seperti ini:

from django.db import models
from django.utils.text import slugify


class Blog_Post(models.Model):
     judul_post = models.CharField(max_length=200, unique=True)
     url_post = models.SlugField(max_length=200, blank=True, unique=True)
     body_post = models.TextField()
     kategory_post = models.CharField(max_length=50)
     gambar_post = models.ImageField(upload_to='%Y/%m/%d')
     tanggal_post = models.DateTimeField(auto_now_add=True)


     def save(self):
         self.url_post = slugify(self.judul_post)
         super(blog_post, self).save()


     def __str__(self):
         return "{} | {}".format(self.id, self.judul_post)

Sedikit penjelasan kode:

  1. Baris pertama kita mengimport class models dari django.db berupa rangkaian query koneksi kedatabase, dan kita disini tidak perlu lagi membuat koneksi ke database karena sudah dibuat oleh django.
  2. Baris kedua import slugify yang berguna untuk membuat slug pada url blog kita nanti dan disimpan di kolom url_post pada tabel blog_post
  3. Pada class Blog_Post(models.Model) adalah nama table yang akan dibuat didatabase sekaligus menjadi form pada halaman Admin untuk membuat postingan.
    • judul_post berupa kolom VARCHAR (CharField) dengan panjang maksimum 200 dan harus bersifat unik, karena kita mengaktifkan unique=True, supaya tidak ada duplikat post.
    • url_post juga masih berupa kolom VARCHAR yang ini boleh kosong, dan akan diisi otomatis saat menyimpan. Kita sudah atur pada baris ke 13 di fungsi save, dengan menjadikan judul sebagai slug.
    • body_post adalah kolom berupa text untuk membuat isi posting pada blog kita nanti.
    • gambar_post ini sebenarnya kolom VARCHAR yang digunakan untuk menyimpan url gambar yang diupload. Dan pada formnya berupa input type file. Dan kita akan mengupload gambar pada folder bernama /media/%Y/%M/%d dimana %Y = tahun, %M = angka bulan, dan %d = tanggal sesuai dengan saat file diupload. Folder /media/ nanti kita akan buat caranya setelah ini.
    • tanggal_post kolom DATETIME yang akan terisi otomatis tanggal dan waktu saat menyimpan posting dengan auto_now_add=True jika diisi dengan auto_now=True maka datetime akan berubah setiap kali tulisan diedit.
  4. Baris ke 13 def save(self): menyimpan objek ke database, dan baris 14 adalah tambahan untuk membuat slug pada kolom url_post yang diambil dari judul_post pada saat menyimpan.
  5. def __str__(self): untuk menampilkan object agar lebih mudah dibaca

Membuat View

Program ini belum selesai dan akan menghasilkan error ketika coba dibuka pada browser. Karena di urls.py meminta class bernama index tetapi di views.py tidak ada, mari kita membuat class index()

Built-in class-based generic views yang disediakan oleh Django ada diantaranya TemplateView, ListView, dan DetailView. TemplateView untuk membuat halaman statis yang sangat jarang diubah isinya, sedangkan ListView dan DetailView untuk membuat halaman dinamic dan keduanya ini membutuhkan atau terkoneksi dengan model. Karena itu kita membuat model terlebih dahulu.

Setelah model selesai dibuat, sekarang kita buat model class index yang sudah dipanggil oleh urls.py. Caranya :


from django.views import generic
from blog import models

class index(generic.ListView):
     model = models.Blog_Post
     template_name = 'index.html'
     extra_context = {
         'Belajar Website Django'
     }


     def get_context_data(self, *args, **kwargs):
         self.kwargs.update(self.extra_context)
         kwargs = self.kwargs
         return super().get_context_data(*args, **kwargs)

Apakah itu?

  1. Kita mengimport generic display view bernama generic dari viewsnya django. Sebenernya bisa juga dibuat seperti ini from django.views.generic import ListView classnya diubah seperti ini class index(ListView): tapi dalam contoh ini saya tidak membuat seperti itu, karena akan ada lagi yang ditambahkan seperti DetailView. Jadi dengan mengambil seluruh dari generic kita tidak edit lagi baris pertama ini.
  2. Kemudian mengambil seluruh class dalam models yang berada di aplikasi blog.
  3. Selanjutnya membuat class bernama index dibagian ini harap diperhatikan kapitalisasinya, karena python sensitive-case.
  4. model = models.Blog_Post mengambil class Blog_Post dari model.
  5. template_name = 'index.html' memilih template bernama index.html yang berlokasi difolder /templates. Folder templates ini sudah kita setting sebelumnya. Nama filenya bisa apa saja, tapi pastikan itu semua ada.
  6. extra_context ini sifatnya optional, hanya untuk menambah context yang dibutuhkan.
  7. def get_context_data(self, *args, **kwargs): Apabila Anda membuat extra_context maka fungsi get_context_data diperlukan untuk update context baru.

Berikutnya

Kita cukupkan sampai disini dulu ya cara membuat website dengan django, Selanjutnya kita akan lanjutkan lagi belajar menampilkan itu semua kedalam Template. Membuat Template dan Migrate. Juga membahas file static. Berikutnya: membuat website menggunakan django