Skip to main content

Belajar Web Developer Menggunakan Django Framework: Membuat App

belajar web developer menggunakan django framework

Ini adalah tulisan lanjutan dari belajar django. Pada halaman itu, telah dibahas tentang persiapan belajar web developer menggunakan Django framework, membuat virtualenv, install django, membuat project, dan menjalankan servernya. Pada saat mendevelop project menggunakan framework ini, kita belum membutuhkan webserver dan juga database server. Karena sudah ada built-in dari kerangka kerja yang menyediakan aplikasi web server, kita tinggal menjalankannya saja. Juga penggunaan database pada tahap pengembangan kita akan menggunakan SQLITE3.

Apabila kemudian, dirasa sudah siap untuk dionlinekan. Bolehlah kita mencobanya dilocalhost terlebih dahulu menggunakan aplikasi web server seperti apache2 atau nginx. Dan database server menggunakan mysql atau MariaDB, itu pilihan Anda. Dan ini juga akan dibahas pada seri akhir dari belajar web developer menggunakan Django framework. Tidak sekarang ya...?️?️?️ karena masih tahap pengembangan atau deployment.

Agar lebih mudah belajar web developer menggunakan django framework, lebih baiknya jika kita semua sudah belajar python terlebih dahulu sebagai pondasi untuk melangkah ke jenjang berikutnya. Karena pengetahuan itu diperlukan disini.

Back to top

1) Membuat Project Pertama

Sampai di sini saya anggap Anda sudah mengerti cara membuat dan mengaktifkan virtualenv kalau belum, boleh dibuka kembali halaman sebelumnya. Saya akan mengulang sedikit ringkasannya di sini.

  1. Buka terminal atau CMD (Command Line), kita akan menggunakan ini untuk beberapa perintah.
  2. Pertama: siapkan virtualenv terlebih dahulu, dalam contoh ini saya berada di directory dev-django kemudian mengaktifkan virtualenv yang berada dalam folder env dengan perintah source env/bin/activate.
  3. Kedua: membuat project bernama myproject, dengan perintah django-admin startproject myproject. Sekarang didalam directory dev-django sudah ada dua folder bernama env (folder virtualenv) dan myproject (folder project kita). Kita akan bekerja di folder myproject. Anda bisa memberi nama project apa saja terserah, tapi jangan diganti namanya pada folder myproject/myproject.
  4. Ketiga: Masuk ke folder myproject cd myproject.
  5. Keempat: Jalankan runserver python3 manage.py runserver untuk memeriksa apakah project kita sudah berjalan atau belum. (Optional) maksudnya boleh sekarang atau boleh juga nanti

Itu urutan awal mula kita membuat sebuah project di Django Framework. Dan diharapkan setiap kali belajar web developer menggunakan django framework, kita sudah menghafal langkah ini. Untuk selanjutnya, karena kita sudah punya project berarti lewati saja langkah ke dua.

Back to top

2) Membuat App

Setiap kali membuat project django maka akan ada beberapa project didalamnya setidaknya ada satu app yang akan dibuat, atau tanpa project sama sekali juga tidak apa-apa.

Perintah membuat App, kita masih berada didalam folder myproject

# Membuat App
django-admin startapp blog

Contoh kita membuat app bernama blog

2.1) Perbedaan Project dan App Django

Project bisa berjalan tanpa ada app didalamnya, karena prject adalah inti dari situs yang kita buat. Untuk pengembangan situs berskala besar atau yang rumit, mungkin saja kita membutuhkan sebuah app atau lebih. Tergantung dari kebutuhan website itu sendiri.

App Django bila dianalogikan seperti cabang-cabang fitur website. Atau gini aja deh...?️ Project kita ibaratkan seperti keranjang telur, kemudian app adalah telur-telur itu. Paham ya? Kita bisa memindahkan salah satu telur atau semua ke project yang lain.

App berlaku layaknya modul, bisa dipindah gunakan untuk project yang lain jika membutuhkan fitur itu. App tidak bisa berjalan sendiri tanpa project, jadi harus berada didalam project untuk bisa berfungsi.

2.2) Struktur Directory

Setelah kita membuat app dalam contoh ini bernama blog, ada satu lagi penambahan folder dalam project kita, yakni blog sesuai dengan nama app yang kita buat melalui perintah django-admin. Struktur directorynya menjadi seperti ini

+myproject
|--db.sqlite3
|--manage.py
|--myproject
|   |--__init__.py
|   |--settings.py
|   |--urls.py
|   |--wsgi.py
|--blog
    |--migrations
    |--admin.py
    |--app.py
    |--__init__.py
    |--models.py
    |--tests.py
    |--views.py

Dan seperti ini penampakan gambarnya

folder myproject
Back to top

3) Melakukan Pengaturan

Setelah kita membuat project, ada beberapa setting yang akan dilakukan pada file settings.py dan menambahkan beberapa baris kode di file lainnya.

3.1) Settings.py

Perlunya mendaftarkan app yang sudah dibuat pada file settings.py, supaya app ini dapat bekerja pada project kita. Buka file settings.py menggunakan text editor kesukaan Anda dan menuju ke baris nomor 33 pada blok INSTALLED_APPS. Tambahkan nama app yang akan disatukan dengan project, letakkan dibagian akhir seperti ini

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog'
]

Pada blok INSTALLED_APPS ini, Anda daftarkan semua app yang diintegrasikan dengan project supaya bisa dipanggil. Kemudian kita juga bisa menentukan lokasi template kita, ini seumpama sebuah theme menjadi seperti ini.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

pada blok 'DIRS': [] saya menambahkan 'templates' yang itu nanti bakal diisi dengan file HTML untuk menampilkan website kita dibrowser. Kemudian saya membuat folder bernama templates didalam folder mywebsite. Jadi sekarang strukturnya seperti ini.

folder templates

Kembali lagi ke file settings.py, sekarang saya akan mengatur file statis agar bisa diload juga. File statis ini berupa javascript, css, dan juga gambar untuk mempercantik tampilan website.

Tambahkan kode seperti ini pada bagian paling akhir dibawah STATIC_URL = '/static/' dan menjadi seperti ini

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

Kemudian buatlah folder bernama static pada directory mywebsite, dan sekarang susunan foldernya menjadi seperti ini

folder static

Pada blok DATABASES ini digunakan untuk mengatur koneksi project kita ke database, misal Anda ingin menggunakan MariaDB untuk databasenya maka perlu diatur. Karena kita masih menggunakan sqlite3 maka lewati saja pengaturan ini.

Back to top

4) Urls.py

Di file ini, akan mendeklarasikan url untuk emudian memproses kenuju models atau views. Di urls.py inilah lalulintas website terjadi. Saya hanya menambahkan dua baris kode pada saat ini.

Buka file urls.py yang berada di folder myproject dan edit menjadi seperti ini.

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

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

Di atas adalah isi dari file urls.py yang ada difolder myproject, kita menginclude file urls.py dari app kita yakni blog pada baris kode path('blog/', include('blog.urls')).

Kemudian buat file urls.py didalam folder blog jika belum ada, dan ketik kode berikut ini.

from django.urls import path
from blog import views

urlpatterns = [
    path('', views.Index)
]

Pada baris kode from blog import views ini mengimport views yang ada di blog, penulisannya bisa juga seperti ini from .views import nama_class atau nama fungsi kalau mengimport hanya fungsi atau class tertentu. Kode yang saya gunakan di atas untuk mengimport semua class dan fungsi yang ada di blog/views.py

Back to top

5) views.py

Pada blog/urls.py melakukan pemanggilan fungsi/def yang ada di views, karena views.py masih kosong, jika dijalankan ini akan error. Sebab fungsi Index dimaksud tidak ada. Sekarang kita akan membuat fungsi Index pada views. Langsung saja buka file blog/views.py dan tambahkan kode berikut

from django.shortcuts import render
from django.template import loader
from django.http import HttpResponse

# Create your views here.
def Index(request):
    template = loader.get_template('index.html')
    context = {
        'title':'Belajar Web Developer Menggunakan Django Framework | EdiKartono.com',
        'content_body':'Ini adalah toturial bagian pertama belajar cara membuat website menggunakan django framework bersama edikartono.com ',
    }
    return HttpResponse(template.render(context, request))

Pada template = loader.get_template('index.html') kode ini untuk memanggil file index.html yang berada di folder templates. Ingat kita tadi sudah mengaturnya pada file settings.py di blok TEMPLATES pada 'DIRS': ['templates'],. Jika Anda memberikan value berbeda maka sesuaikan.

Back to top

6) Templates

Sampai kita pada bagian akhir belajar web developer menggunakan django framework. Dari file blog/views.py memanggil file bernama index.html yang berada di folder templates, sesuai pada pengaturan di file settings.py. Mudah saja untuk membuat file index.html tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>{{ content_body }}</p>
</body>
</html>

Ini adalah file index.html kita, tapi belum menggunakan css dan javascript, jadi masih polos?️?️?️. {{ title }} dan {{ content_body }} isinya seperti yang ada di context pada file views.py di atas. Program kita ini masih statis, dan belum menggunakan database samasekali.

Hasil akhir seharusnya seperti gambar di bawah ini.

belajar web developer
Back to top

7) Selanjutnya

Sampai di sini belajar web developer menggunakan django framework, Ini baru awal kita membuat website. Masih ada selanjutnya yang lebih seru lagi. Berikutnya kita akan mulai belajar web developer menggunakan django framework ditambah dengan database dan bootstarap. Jadi web kita akan lebih bagus lagi.

Minimal pada tutorial web statis ini kita telah mengetahui alur kerja framework django. Oh iya, untuk membuat kode sebaiknya diketik ulang, karena mungkin akan error sebab kesalahan spasi atau indentasi.

Back to top