Django Form – Membuat Basic Form

by

Pendahuluan

Mungkin Anda bertanya-tanya, mengapa menggunakan Django Form, sementara dengan HTML sudah bisa dibuat form. Berikut beberapa keuntungan menggunakan Django Form:

  • Form dan input akan digenerate secara otomatis dengan menggunakan widget.
  • Validasi dan proses data.
  • Bisa dihubungkan dengan Models, melakukan update data akan menjadi mudah.

Secara garis besar proses membuat form adalah

  • Membuat file forms.py, yang berisi struktur dari form (mirip dengan models.py).
  • Tambahkan fungsi untuk menampilkan form tersebut pada views.py.
  • Buat file template yang akan menggunakan form tag dari django.
  • Tambahkan path untuk mengakses view.

Praktek Membuat Form Basic

Pada modul ini kita akan membuat form sederhana, kita akan mulai dengan project baru code tidak bercampur dengan pembahasan modul sebelumnya dan tutorial lebih mudah diikuti.

Buka command prompt, masuk ke direktori yang akan digunakan, lalu buat project baru dengan django-admin tool, pada tutorial digunakan nama project formtut

$ django-admin startproject formtut

Pindah ke direktori project, lalu buat application baru menggunakan django-admin tool, pada project diberi nama myapp

$ django-admin startapp myapp

Selanjutnya kita buat template folder, untuk kesederhanaan, pada tutorial akan digunakan project level template. Masuk root directory project, lalu buat folder templates.

$ mkdir templates

Kemudian buat folder baru didalamnya, samakan dengan nama aplikasi, pada tutorial folder yang dibuat adalah myapp

$ cd templates
$ mkdir myapp

Kemudian masuk ke IDE (pada tutorial digunakan visual studio code). Buat 2 file baru dalam folder templates/myapp, index.html dan myform.html. Isinya akan kita tambahkan belakangan.

Selanjutnya buka file nama_project/settings.py, untuk registrasi lokasi templates dan aplikasi yang dibuat. Berikut isi settings.py setelah dilakukan modifikasi

"""
Django settings for formtut project.

Generated by 'django-admin startproject' using Django 4.0.5.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-9cn*(s8_w@^hvxeta9)!7hy6x2!fwg6#b+qu^mh1t!yw5#cgxc'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

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

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'formtut.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATE_DIR],
        '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'formtut.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Selanjutnya, buka folder aplikasi (pada tutorial adalah myapp), lalu tambahkan file forms.py, tambahkan code berikut:

from django import forms

class FormName(forms.Form):
    name = forms.CharField()
    email = forms.EmailField()
    text = forms.CharField(widget=forms.Textarea)

Kemudian buka file myapp/views.py, tambahkan code berikut untuk menampilkan index.html dan myform.html.

from django.shortcuts import render
from myapp import forms

def index(request):
    return render(request, 'myapp/index.html')

def form_name_view(request):
    form = forms.FormName()
    return render(request, 'myapp/myform.html', {'form':form})

Kemudian buka urls.py pada level project, pada tutorial adalah formtut/urls.py, lalu tambahkan path

"""formtut URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('', views.index, name='index'),
    path('myform/', views.form_name_view, name="myform"),
    path('admin/', admin.site.urls),    
]

Kemudian buka file templates/myapp/index.html, tambahkan html dasar berikut:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Homepage</h1>
</body>
</html>

Kemudian buka file templates/myapp/myform.html, tambahkan html berikut:

Note: untuk mempercantik tampilan form, kita gunakan css framework bootstrap.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Django Form</title>
</head>
<body>
    <h1>My Form</h1>
    <div class="container">
        <form method="post">
            {{form.as_p}}
            {% csrf_token %}
            <input type="submit" class="btn btn-primary" value="Submit">
        </form>
        
    </div>
</body>
</html>

Perintah form.as_p akan menampilkan isi form sebagai paragraph.

csrf_token adalah token Cross-Site Request Forgery, digunakan untuk keamanan HTPP POST action ketika form disubmit.

Jika Anda jalankan web server dengan perintah 

$ python manage.py runserver

Kemudian buka link 127.0.0.1:8000/myform, maka form sudah berhasil kita tampilkan. Tentu secara tampilan masih banyak yang harus diperbaiki, namun untuk kesederhanaan tutorial kita tidak akan bahas mengenai HTML dan CSS.

Mengakses Data Post

Setelah form bisa ditampilkan, selanjutnya adalah bagaimana kita menangkap data yang disubmit oleh user.

Untuk contoh sederhana, buka file myapp/views.py, modifikasi fungsi untuk menampilkan form

from django.shortcuts import render
from myapp import forms

def index(request):
    return render(request, 'myapp/index.html')

def form_name_view(request):
    form = forms.FormName()

    if request.method == "POST":
        form = forms.FormName(request.POST)

        if form.is_valid():
            print("Validation Success")
            print("Name: " + form.cleaned_data['name'])
            print("Email: " + form.cleaned_data['email'])
            print("Text: " + form.cleaned_data['text'])

    return render(request, 'myapp/myform.html', {'form':form})

Code diatas akan memeriksa apakah user menekan tombol submit, lalu diperiksa apakah form valid (form validation akan kita bahas pada modul selanjutnya). Jika kondisi dipenuhi, maka akan ditampilkan kedalam console.

Data dapat diakses melalui atribute cleaned_data, mirip dengan python dictionary, dimana field data dapat diakses menggunakan key, dalam hal ini key adalah nama field yang didefinsikan dalam forms.py.

Validation Success
Name: test
Email: test@test.com
Text: test
[23/Jun/2022 16:53:04] "POST /myform/ HTTP/1.1" 200 1238

Sampai disini kita sudah belajar konsep dasar dari Django Forms dan membuat form sederhana, serta membaca data yang dikirimkan oleh user.

Pada modul selanjutnya kita akan bahas django form validation

Sharing is caring:

Leave a Comment