Modul pelatihan-django-dasar-possupi-v1

1. Hello World Django
Django merupakan fullstack web framework yang dirancang dan dibangun oleh Adrian Holovaty
dan Jacob Kaplan Moss. Awal mulanya Django merupakan web framework internal yang dimiliki
oleh kantor dimana Adrian Holovaty bekerja sebagai jurnalis. Namun seiring perkembangannya,
Django dirilis menjadi open source.
Anda dapat membangun aplikasi web dengan menggunakan konsep MVC. Di Django hal tersebut
dinamakan dengan MTV (Model, Template, View), dimana model adalah kode yang berisi objek
yang menjadi representasi dari sebuah tabel di Database, template adalah kode yang berisi HTML,
CSS, Javascript dan presentasi lainnya yang ditujukan kepada user, view adalah kode yang berisi
bisnis proses dari aplikasi, menerima request dari user, memberikan response kepada user, dan
berinteraksi dengan database yang dipilih.
Dalam pelatihan kali ini kita akan menggunakan Django 1.6 . Anda dapat mengunduhnya di
http://djangoproject.com/ dan carilah versi 1.6 . Installer akan tersedia dalam bentuk zipped (.zio)
atau gunzipped (.tar.gz). Setelah Anda selesai mengunduhnya lakukanlah beberapa langkah berikut
untuk memulai instalasi (Pastikan Anda sudah menginstall Python versi 2.6.x ke atas):
 ekstrak installer tersebut. Jika Anda menggunakan Linux ekstrak folder tersebut dengan
perintah Extract melalui file manager yang Anda gunakan atau melalui terminal gunakan
perintah tar -xzvf django-1.6.tgz. Jika Anda menggunakan Windows atau OSX silahkan
gunakan aplikasi seperti 7zip untuk membuka bundelan tersebut.
 masuk ke dalam folder hasil ekstrak sebelumnya, cobalah Anda lihat apakah di dalamnya
terdapat file setup.py
 Jika terdapat file tersebut maka lakukan proses instalasi Django dengan menggunakan
perintah: python setup.py install di terminal
 Waktu yang dibutuhkan untuk instalasi lebih dari 1 menit, jadi Anda dapat mengunduh
dokumentasinya di website yang sama
 Jika proses instalasi selesai, Anda dapat memeriksa apakah Django sudah terinstal atau
belum dengan menggunakan perintah django-admin.py version di terminal
 Jika muncul no versi dari Django yang Anda baru saja install di komputer Anda, maka
proses instalasi Django telah berhasil
Proses instalasi pun sudah selesai dan Django siap digunakan. Sekarang kita akan mencoba
membuat proyek Django baru. Silahkan Anda berpindah ke folder yang diinginkan untuk
menyimpan proyek Django, misal /home/username_anda/Document . Setelah memilih folder
buatlah proyek Django baru dengan menggunakan perintah django-admin.py startproject
demo_possupi di terminal dan dalam beberapa saat proyek Django baru akan tercipta.
Silahkan masuk ke dalam folder proyek demo_possupi dan Anda akan melihat sebuah folder yang
bernama sama yaitu demo_possupi dan file manage.py. Jika ada kedua benda tersebut sekarang
kita akan mencoba menyalakan web server untuk development yang dimiliki Django dengan
perintah python manage.py runserver di terminal. Secara default Django akan menyalakan web
server yang dimilikinya di IP Address 127.0.0.1 atau localhost dan port 8000. Jika server sudah
menyala dan tidak muncul error akses proyek demo_possupi di web browser dengan URL
http://localhost:8000 dan Anda akan melihat tampilan seperti pada gambar berikut:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 1)

Tampilan saat web server Django diakses melalui web browser
Tampilan saat web server Django dinyalakan

2. Menentukan Spesifikasi Aplikasi Event
Spesifikasi yang dibutuhkan sederhana saja. Kita membutuhkan tabel event dan visitor untuk
menampung aplikasi yang akan kita bangun. Kita akan membuat sebuah halaman utama yang
menampilkan semua event kemudian ada tombol detail event. Kita bisa menekan tombol detail
event tersebut dan melihat detail event seperti informasi event dan siapa saja yang mengunjungi
event tersebut. Tentunya pengunjung boleh mendaftarkan diri untuk mengikuti event tertentu.
Aplikasi juga memiliki halaman admin yang siap mengelola kedua tabel tersebut. Kita
membutuhkan halaman admin untuk mengelola data event dan data visitor. Kita membutuhkan
DDL untuk tabel event seperti berikut ini:
CREATE TABLE "dp_event_event" (
"id" integer NOT NULL PRIMARY KEY,
"title" varchar(50) NOT NULL,
"organizer" varchar(30) NOT NULL,
"venue" text NOT NULL,
"about" text NOT NULL,
"finished" bool NOT NULL,
"date_begin" datetime NOT NULL,
"date_end" datetime NOT NULL,
"date_created" datetime NOT NULL
)
dan DDL untuk tabel visitor seperti berikut ini:
CREATE TABLE "dp_event_visitor" (
"id" integer NOT NULL PRIMARY KEY,
"name" varchar(50) NOT NULL,
"phone" varchar(15) NOT NULL,
"email" varchar(75) NOT NULL,
"twitter" varchar(200) NOT NULL,
"target_event_id" integer NOT NULL REFERENCES "dp_event_event" ("id"),
"date_join" datetime NOT NULL
)
Tapi DDL diatas jangan disalin. Karena proses pembuatan tabel akan berbeda dari cara yang biasa.

3. Menggunakan Database di Django
Dengan Django Anda dapat menggunakan berbagai database seperti MySQL, MongoDB, SQLite3,
PostgreSQL, Oracle, dan berbagai database lainnya. Anda dapat menentukan database yang akan
digunakan, dan Django akan menangani database yang Anda gunakan.
Untuk memulai penggunaan database di Django, Anda dapat melakukan beberapa konfigurasi di
file setting.py yang terdapat di folder demo_possupi/demo_possupi kemudian tentukan database
yang akan digunakan. Misal dalam percobaan kita kali ini, akan digunakan database SQLite3
dengan nama demo_possupi.sqlite3. Perhatikan konfigurasinya di bawah ini (penting: tanda garis
strip menandakan bahwa ada kode sebelum atau sesudah dari potongan kode yang ditampilkan):
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'demo_possupi.sqlite3'),
}
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Pada bagian konfigurasi database, biasanya terdapat dua hal saja yang diperlukan. Yaitu database
engine dan nama database yang akan digunakan. Pada konfigurasi diatas kita hanya menggunakan
dua hal tersebut karena menggunakan SQLite3. Jika menggunakan database seperti MySQL atau
PostgreSQL, maka kita membutuhkan konfigurasi tambahan seperti letak port dari server database,
URL, akun untuk mengakses database tersebut, dan lainnya.
Setelah selesai melakukan konfigurasi database, sekarang kita akan melakukan proses
synchronization antara database dengan aplikasi Django kita dengan menggunakan perintah python
manage.py syncdb . Perhatikakn contohnya berikut ini:
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# python manage.py syncdb
Creating tables ...
Creating table django_admin_log
Creating table auth_permission
Creating table auth_group_permissions
Creating table auth_group
Creating table auth_user_groups
Creating table auth_user_user_permissions

Creating table auth_user
Creating table django_content_type
Creating table django_session
You just installed Django's auth system, which means you don't have any superusers defined.
Would you like to create one now? (yes/no): yes
Username (leave blank to use 'root'): root
Email address: ridwanbejo@gmail.com
Password:
Password (again):
Superuser created successfully.
Installing custom SQL ...
Installing indexes ...
Installed 0 object(s) from 0 fixture(s)
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi#
Beberapa hal yang dilakukan ketika kita menggunakan perintah python manage.py syncdb antara
lain:
 Django membuat table default yang berisi session, group, group_permission, user,
admin_log, dan tabel lainnya seperti pada snapshot diatas. Jika kita belum membuat satu
model pun di Django, maka tabel default akan dibentuk lebih dahulu
 Jika Anda sudah mendefinisikan model di sebuah aplikasi di Django, maka Django akan
membuatkan tabelnya jika belum terdapat di database
 Tabel yang telah dibuat tidak akan dibuat ulang. Jika kita ingin melakukan perubahan pada
model. Anda dapat melakukanya dengan cara melakukan drop table pada tabel yang
berhubungan dengan sebuah model atau menggunakan migration tools seperti South
 Anda harus memberikan nama pada user root dari aplikasi Django Anda
 Anda dapat memberikan password untuk masuk ke halaman aplikasi Django
Sekarang kita akan mencoba halaman admin yang sudah disediakan oleh Django. Nyalakan terlebih
dahulu web server Django dengan perintah python manage.py runserver kemudian cobalah Anda
akses URL http://localhost:8000/admin di web browser maka akan muncul tampilan seperti berikut:
Form login halaman admin Django

Kemudian masukkan account Django yang telah Anda buat sebelumnya, dan Anda akan melihat
halaman admin Django seperti pada gambar berikut:
Halaman utama dari halaman admin Django
Halaman kelola user dari halaman admin Django
Halaman kelola grup dari halaman admin
Django

4. Membangun Model untuk Aplikasi Event
Model merupakan sebuah file yang terdapat di setiap aplikasi Django. Di dalam Django dapat
memiliki banyak aplikasi sesuai dengan kebutuhan sistem. Setiap aplikasi Django biasanya terdiri
dari:
 model.py, berisi class yang merupakan representasi dari setiap tabel. Tentunya sebuah class
dapat memiliki fungsionalitasnya yang unik dari class lainnya
 views.py, berisi kumpulan fungsi yang akan diakses oleh user dengan perantara URL yang
didefinisikan di urls.py yang terdapat di aplikasi atau di urls.py yang terdapat di folder
demo_possupi
 urls.py, berisi kumpulan URL yang didefinisikan untuk mewujudkan sistem dan
memberikan reaksi terhadap user. Setiap URL akan mengarah kepada suatu fungsi di
views.py
 admin.py, berisi konfigurasi aplikasi yang ditampilkan di halaman admin Django
 tests.py, berisi testing yang digunakan untuk menguji aplikasi Django
 __init__.py, merupakan sebuah file yang menjadi penanda bawa folder tersebut merupakan
module Python
Untuk membuat sebuah aplikasi di Django, Anda dapat melakukannya dengan menggunakan
perintah python manage.py startapp <nama_aplikasi> misalnya seperti pada kasus berikut ini
dimana kita membuat sebuah aplikasi yang bernama dp_event:
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# python manage.py startapp
dp_event
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# ls
db.sqlite3 demo_possupi demo_possupi.sqlite3 dp_event manage.py
Sekarang sebuah folder yang bernama dp_event sudah tercipta dengan menggunakan perintah
diatas. Folder tersebut berisi file admin.py, __init__.py, tests.py, models.py, dan views.py.
Kemudian daftarkan aplikasi yang baru saja kita ciptakan di setting.py dengan menambahkan
nama aplikasi kita ke konfigurasi INSTALLED_APPS.
Di bab ini kita akan mencoba membuat tabel dengan mengandalkan model yang dimiliki Django.
Jangan lupa untuk mengubah hak akses dari folder dp_event jika Anda menggunakan Linux.
Berikut adalah model yang akan kita gunakan untuk aplikasi event yang akan digunakan. Salin kode
berikut ke dalam file models.py:
from django.db import models
# Create your models here.

class Event(models.Model):
title = models.CharField(max_length=50)
organizer = models.CharField(max_length=30)
venue = models.TextField()
about = models.TextField(blank=True)
finished = models.BooleanField()
date_begin = models.DateTimeField()
date_end = models.DateTimeField()
date_created = models.DateTimeField(auto_now=True)
def __unicode__(self):
return self.title
class Meta:
ordering = ['date_begin']
class Visitor(models.Model):
name = models.CharField(max_length=50)
phone = models.CharField(max_length=15)
email = models.EmailField()
twitter = models.URLField(blank=True)
target_event = models.ForeignKey(Event)
date_join = models.DateTimeField(auto_now=True)
def __unicode__(self):
return self.name
class Meta:
ordering = ['date_join']
Setelah selesai membuat kode model diatas, saatnya melakukan synchronization database Django
kita dengan menggunakan perintah python manage.py syncdb. Berikut adalah snapshot saat tabel
dari model diatas dibuat:
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# python manage.py syncdb
Creating tables ...
Creating table dp_event_event
Creating table dp_event_visitor
Installing custom SQL ...
Installing indexes ...
Installed 0 object(s) from 0 fixture(s)

Anda dapat melihat kedua tabel yang telah dibuat dengan menggunakan SQLiteman. SQLiteman
merupakan sebuah aplikasi desktop yang digunakan untuk membantu pengelolaan database
SQLite3. Berikut ini adalah tampilan dari database untuk aplikasi event:
Susunan tabel event di SQLiteman
Susunan tabel visitor di SQLiteman

5. Membangun Halaman Administrator untuk Aplikasi Event
Halaman admin biasanya dibuat dari awal ketika kita membangun sebuah aplikasi web. Dengan
menggunakan Django, Anda dapat menggunakan halaman admin yang di-generate dari model yang
telah didefinisikan sebelumnya. Tampilannya yang sederhana dapat Anda manfaatkan semaksimal
mungkin untuk menunjang aplikasi web yang Anda gunakan.
Sebelumnya kita hanya melakukan login dan melihat halaman yang menyajikan tabel groups dan
users. Sekarang kita akan mencoba menambahkan model yang telah kita definisikan ke halaman
admin. Suntinglah file admin.py di folder dp_event, dan salinlah kode berikut:
from django.contrib import admin
from dp_event.models import *
# Register your models here.
admin.site.register(Event)
admin.site.register(Visitor)
Setelah Anda menyalin kode diatas, silahkan buka halaman admin di http://localhost:8000/admin ,
dan di halaman tersebut Anda akan melihat dua menu yang merupakan nama model yang telah kita
buat sebelumnya. Berikut ini adalah halaman admin setelah ditambahkan dua model tersebut:
Halaman admin Django setelah ditambahkan dua model baru

Menambahkan event baru di halaman admin django
Event baru sudah ditambahkan
Riwayat penggantian data di tabel

Melakukan pengubahan data event di halaman admin Django
Melihat data event yang baru ditambahkan di SQLiteman

6. Membangun View dan Template untuk Aplikasi Event
Diasumsikan bahwa halaman admin sudah selesai dibangun, sekarang saatnya kita membuat
halaman untuk publik. Untuk percobaan di pelatihan ini, kita akan mencoba menampilkan daftar
event yang belum berakhir, dan menerima pengunjung yang ingin datang ke event tersebut. View
adalah sebuah file yang berisi function yang akan menangani request dan response terhadap user.
Template merupakan file yang berisi HTML + CSS + Javascript yang akan ditampilkan kepada user
melalui web browser.
Sebelum membangun template mari kita atur terlebih dahulu tempat penyimpanan template.
Buatlah folder yang bernama templates di dalam folder proyek demo_possupi. Kemudian
tambahkan pengaturan yang ditebalkan berikut di setting.py:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
TEMPLATE_DEBUG = True
TEMPLATE_DIRS = (
BASE_DIR+'/templates',
)
ALLOWED_HOSTS = []
# Application definition
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Kita juga akan menggunakan CSS dan Javascript untuk mempercantik halaman web yang akan
dibangun. Kita akan menggunakan Twitter Bootstrap unuk pelatihan kali ini. Buatlah folder yang
bernama static di dalam folder proyek demo_possupi. Dan simpan Twitter Bootstrap ke dalam
folder static . Kemudian tambahkan pengaturan yang ditebalkan berikut di setting.py:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/
STATIC_URL = '/static/'

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Selesai mengatur folder untuk template dan file static di Django, mari kita coba untuk membuat
view pertama di Django. Suntinglah file urls.py yang berada di folder demo_possupi dengan
menambahkan baris kode yang ditebalkan seperti pada potongan kode berikut ini:
from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^$', 'dp_event.views.index'),
)
Bagian yang ditebalkan memiliki arti kurang lebih jika user melakukan request terhadap URL
http://localhost:8000 maka Django akan mengeksekusi view yang bernama index. Tanda $
menyatakan bahwa di belakan URL yang didefinisikan tidak boleh ada karakter apapun. Karena
view index belum didefinisikan. Mari kita membuat view di file views.py di folder dp_event. Lalu
salin potongan kode berikut:
from django.shortcuts import render_to_response, redirect
from django.http import HttpResponse
from django.core.context_processors import csrf
# Create your views here.
def index(request):
return HttpResponse("Selamat datang di pelatihan django ....")
Di dalam file views.py, Anda dapat meng-import berbagai modul Django, Python, ataupun
teknologi yang dibuat dengan Python lainnya untuk digunakan di dalam view kita. Biasanya yang
dibutuhkan adalah modul untuk menampilkan template seperti
django.shortcuts.render_to_response, melakukan redirect dengan django.shortcuts.redirect, dan
modul untuk mencegah cross site request forgery atau csrf dengan django.core.context_processors
import csrf. Dan tentu saja kita membutuhkan model yang telah kita bangun, untuk digunakan jika
ingin menampilkan data yang diambil dari tiap model tersebut.
Pada potongan kode diatas, kita membuat sebuah view yang bernama index. Sebuah view hanyalah
fungsi biasa, hanya saja untuk dianggap sebagai view harus dilewatkan satu paramerter yang

digunakan untuk menangani request dari user. Jika view diatas dipanggil maka akan ditampilkan
sebuah response seperti berikut:
view pertama di Django
Untuk membuat view di Django diperlukan beberapa tahap. Agar lebih menarik, mari kita coba
tampilkan data event yang sudah ada di dalam database ke halaman utama. Tentu saja event yang
ditampilkan adalah event yang belum berakhir. Berikut adalah perubahan isi file views.py yang
akan digunakan untuk menampilkan daftar event yang belum berakhir:
from django.shortcuts import render_to_response, redirect
from django.http import HttpResponse
from django.core.context_processors import csrf
import datetime
def index(request):
list_event = Event.objects.filter(date_end__gte=datetime.datetime.now())
return render_to_response('list_event.html', {'list_event':list_event})
Pada kode diatas kita memanggil modul datetime yang digunakan untuk mendapatkan tanggal hari
ini, dan manipulasi tanggal. Di dalam view index, kita mencoba untuk mengambil daftar semua
event yang belum berakhir. Setelah semua event didapatkan, maka view index akan melewatkan
daftar event tersebut ke dalam template list_event.html dan menampilkannya di web browser.
Berhubung kita belum membuat template list_event.html , kita coba akses view tersebut dan
lihatlah apa yang terjadi:

Contoh tampilan halaman error Django jika template yang dibutuhkan belum tersedia
Setelah melihat contoh error diatas, mari kita buat template untuk menangani halaman utama.
Buatlah sebuah file yang bernama list_event.html di folder templates. Kemudian salin kode
berikut ini:
<html>
<head>
<title>Daftar Event</title>
{% load staticfiles %}
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
</head>
<body>
<div class="col-md-12">
<h1>Daftar Event yang Bisa Anda Kunjungi !</h1>
<hr />
{% for event in list_event %}
<div class="col-md-4 well">
<strong>{{ event.title | upper }}</strong>
<hr/>
Diselenggarakan oleh {{ event.organizer }} <br/>
dari {{ event.date_begin }} hingga {{ event.date_end }} <br/><br/>
<a href="/event/{{event.id}}" class="btn btn-default">Lihat Detail</a>
</div>
{% endfor %}

</div>
</body>
</html>
Berikut ini adalah beberapa tag dari template Django yang perlu diperhatikan dari contoh diatas:
 {% load staticfiles %}
 {% static 'bootstrap/js/bootstrap.min.js' %}
 {% for event in list_event %}
 {{ event.title | upper }}
 {{ event.organizer }}
 {% endfor %}
Setelah memahami tag di template Django, mari kita lihat hasilnya di web browser:
Menampilkan template yang berisi daftar event yang bisa diikuti oleh user
Dan yang terakhir di bab ini adalah kita akan mencoba membuat halaman detail dari setiap event.
Kita belum bisa melihat dimana tempat event, detail event, dan siapa saja yang menghadiri event
tersebut. Mari kita awali dengan mendefinisikan URL di file urls.py di folder demo_possupi.
Salinlah bagian yang ditebalkan dan tambahkan ke urls.py:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

url(r'^event/(d+)', 'dp_event.views.detail_event'),
)
Di URL yang terbaru kita dapat mengakses URL utama dengan ditambahkan segmen event dan
menambahkan parameter id dari event tersebut. Kurang lebih URL yang akan diakses seperti
http://localhost:8000/event/199123 dimana 199123 adalah id dari sebuah event yang kita klik di
halaman utama. Untuk menghasilkan respon yang memperlihatkan detail event, URL tersebut akan
ditangani oleh view detail_event. Tambahkan kode berikut di views.py yang berada di folder
dp_event:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
def detail_event(request, id_event):
event = Event.objects.get(id=int(id_event))
return render_to_response('detail_event.html', {'event':event})
View diatas menerima dua parameter, yaitu request dan id_event . Parameter id_event didapatkan
dari angka yang dilewatkan setelah segmen event, misalnya 199123. Kemudian id_event akan
digunakan untuk mencari event yang memiliki id yang diinginkan. Jika ditemukan, event yang
didapat akan ditampilkan di template detail_event.html menggunakan render_to_response.
Berikut adalah kode dari template detail_event.html:
<html>
<head>
<title>Daftar Event</title>
</head>
<body>
<h1>{{ event.title | upper }}</h1>
<hr />
<div class="well">
venue: {{ event.venue }} <br/>
info lain: {{ event.about }}
</div>

</div>
</body>
</html>
Pada template diatas kita menampilkan tempat event diselenggarakan dan info lainnya dari event
yang akan diselenggarakan. Di bab berikutnya, kita akan mencoba menampilkan siapa saja yang
akan datang ke event tersebut. Berikut ini adalah tampilan detail dari sebuah event:
Tampilan detail event

7. Menyusun Form Ikut event untuk User
Satu hal yang belum kita dapatkan di bagian front-end dari aplikasi event ini adalah belum adanya
interaksi dari user yang berkunjung untuk memberikan data mereka kepada aplikasi. Kita
memerlukan sebuah form yang mencatat setiap user yang ingin ikut ke event tertentu. Kemudian
setelah mengisi form ikut event tertentu, maka di detail event yang akan diikuti, munculah daftar
pengunjung dari event tersebut.
Kita membutuhkan halaman khusus yang menyediakan form untuk diisi user. Mari kita awali
dengan mendefinisikan URL untuk menampilkan form mengikuti event dan URL untuk memproses
data yang dikirimkan dari form tersebut. Salinlah bagian yang ditebalkan ke file urls.py di folder
demo_possupi:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
url(r'êvent/(d+)', 'dp_event.views.detail_event'),
url(r'êvent/join/(d+)', 'dp_event.views.join_event'),
url(r'êvent/join/process$', 'dp_event.views.process_join_event'),
)
URL yang ditebalkan pertama menangani penampilan form mengikuti event dengan id tertentu.
URL tersebut ditangani oleh view join_event(). Sedangkan URL yang ditebalkan kedua menangani
proses pencatatan pengunjung yang ingin mengikuti event tertentu. URL tersebut ditangani oleh
view process_join_event().
URL untuk menangani pengunjung yang ingin mengikuti event telah didefinisikan. Sekarang kita
tambahkan dua tombol baru di detail event. Tombol pertama untuk kembali ke halaman utama, dan
tombol kedua untuk melihat form mengikuti event. Salinlah bagian yang ditebalkan ke file
detail_event.html di folder templates:
<body>
<h1>{{ event.title | upper }}</h1>
<hr />
<div class="well">
venue: {{ event.venue }} <br/>
info lain: {{ event.about }}

<br/><br/>
</div>
<div class="pull-right">
<a style="margin-right:10px;" href="/" class="btn btn-primary">Lihat Acara
Lainnya</a>
<a style="margin-right:30px;" href="/event/join/{{event.id}}" class="btn btn-default">
Ikut Acara</a>
</div>
</div>
Jika bagian yang tebal sudah ditambahkan, kita akan melihat dua tombol tersebut muncul di bagian
paling bawah detail event seperti pada gambar berikut ini:
Menambahkan dua tombol baru di halaman detail event
Bila Anda mengklik tombol ikut acara sekarang, maka Anda akan melihat error seperti berikut:

Error karena view untuk join event belum dibuat
Kita akan melihat error diatas karena belum ada view join_event() yang dibutuhkan untuk
menangani penampilan form mengikuti event. Oleh karena itu mari kita buat view tersebut di
views.py di folder dp_event. Salinlah bagian yang ditebalkan:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
def index(request):
return render_to_response('detail_event.html', {'event':event})
def join_event(request, id_event):
c = {}
c.update(csrf(request))
c.update({'event':event})
return render_to_response('form_event.html', c)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Fungsi join_event() memiliki parameter lainnya yang menangkap id_event. Proses yang pertama
kali dilaksanakan adalah melakukan pengambilan data dari event yang dipilih. Kemudian kita
membuat sebuah handler untuk Cross Site Request Forgery (CSRF) pada objek request dan
parameter yang dilewatkan ke template form_event.html. Di Django, setiap penampilan form,
biasanya harus ditangani oleh CSRF Middleware terlebih dahulu jika fitur CSRF dinyalakan.
CSRF adalah sebuah cara dimana hacker melakukan serangan dengan menyisipkan kode javascript
berbahaya ke website kita yang dapat menangkap data yang diberikan oleh user, membajak cookies,
atau bahkan pengalihan tautan yang ada di website kita kepada website si pemilik kode javascript
berbahaya tersebut.
Karena view join_event() membutuhkan template yang bernama form_event.html sekarang kita
akan membuat file tersebut di folder templates. Salinlah kode berikut ini:
<html>
<head>
<title>Ikut Acara</title>
</head>
<body>
<h1>Ikut Acara - {{ event.title }}</h1>
<hr />
<div class="well">
<form role="form" action="/event/join/process" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="formInput">Nama</label>
<input type="text" class="form-control" id="formInput" name="name"
placeholder="Isi dengan nama..">
</div>
<label for="formInput">Email</label>
<input type="email" class="form-control" id="formInput" name="email"
placeholder="Isi dengan e-maill..">
</div>
<label for="formInput">Telepon</label>
<input type="text" class="form-control" id="formInput" name="phone"
placeholder="Isi dengan nomor telepon..">
</div>

<label for="formInput">Twitter</label>
<input type="text" class="form-control" id="formInput" name="twitter"
placeholder="Isi dengan akun twitter..">
</div>
<input type="hidden" name="id_event" value="{{ event.id }}" />
<a href="/event/{{event.id}}" class="btn btn-default">Batal</a>
<input type="submit" value="Daftarkan !" class="btn btn-default" />
</form>
</div>
</div>
</body>
</html>
Perhatikan bahwa di dalam form terdapat tag {% csrf_token %}. Hal tersebut dilakukan untuk
menjaga form tersebut dari CSRF yang dilakukan seseorang. Jika sudah disalin, maka ketika Anda
mengklik tombol Ikut Acara di suatu event akan tampil form seperti berikut ini:
form untuk mengikuti event
Tapi tunggu dulu. Di dalam atribut action yang terdapat di form, jika form disubmit, maka akan
diarahkan ke /event/join/process . Kita sudah mendefinisikan URLnya di urls.py namun belum
membuatkan view process_join_event() di views.py. Oleh karena itu mari kita buat terlebih dahulu
view tersebut di views.py di folder dp_event. Tambahkan kode yang ditebalkan berikut ini:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
c = {}
c.update(csrf(request))
c.update({'event':event})
return render_to_response('form_event.html', c)

def process_join_event(request):
event = Event.objects.get(id=int(request.POST['id_event']))
visitor = Visitor(
name = request.POST['name'],
phone = request.POST['phone'],
email = request.POST['email'],
twitter = request.POST['twitter'],
target_event = event
)
visitor.save()
return redirect('/event/' + request.POST['id_event'])
Karena form yang kita kirimkan menggunakan metode POST, maka process_join_event() cukup
membutuhkan parameter request saja. Data yang dikirim dari form antara lain: id_event, name,
phone, email, twitter. Untuk mendapatkan nilai POST, kita menggunakan request.POST. Di
dalam view tersebut, pertama kali akan dilakukan pengambilan data event yang akan diikuti dengan
menggunakan id_event yang dikirimkan dari form. Selanjutnya kita membuat objek visitor dengan
membuatnya dari kelas model visitor.
Kita dapat melewatkan data yang dibutuhkan tabel visitor. Khusus untuk target_event, karena
Django menggunakan Object Relational Mapper (ORM) maka setiap field tabel yang
menggunakan relasi seperti ForeignKey harus dilewatkan nilai berupa objek.
Sekarang kita coba isi form mengikuti event. Silahkan pilih event yang sudah Anda buat
sebelumnya. Sebagai contoh berikut ini adalah contoh pengisian form mengikuti event:
Contoh pengisian form mengikuti event
Sekarang kita lihat hasilnya terlebih dahulu di SQLiteman dan halaman admin Django. Cobalah

lihat gambar berikut ini:
Melihat pengunjung yang mengisi form mengikuti event di SQLiteman
Melihat pengunjung yang mengisi form mengikuti event di Halaman Admin Django
Akhirnya kita sudah dapat membuat pengunjung untuk mendaftar ke event tertentu. Namun
sayangnya, kita belum dapat melihat siapa sajakah pengunjung yang sudah hadir. Jika kita melihat
halaman detail event, kita belum dapat melihat siapa saja yang sudah mendaftarkan diri ke event
tersebut. Oleh karena itu mari kita modifikasi sedikit view join_event() dan template
detail_event.html.

Tambahkan perubahan kode yang ditebalkan berikut pada view join_event():
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
list_visitor = Visitor.objects.filter(target_event = id_event)
return render_to_response('detail_event.html', {'event':event, 'list_visitor':list_visitor})
def join_event(request, id_event):
c = {}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tambahkan kode yang ditebalkan berikut pada template detail_event.html:
<html>
<head>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</head>
<body>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
<br/>
<h2>Daftar Pengunjung</h2>
<hr />
{% if list_visitor %}
{% for visitor in list_visitor %}
<div class="well col-sm-3">
{{ visitor.name }} ({{ visitor.twitter }})
</div>
{% endfor %}
{% else %}
<div class="well" style="text-align:center;">
<strong>Belum ada pengunjung...</strong>
</div>
{% endif %}
</div>
</body>
</html>

Jika Anda sudah berhasil menambahkan perubahan kode diatas, maka Anda akan melihat tampilan
seperti berikut ini:
Daftar pengunjung yang berhasil ditambahkan di halaman detail event

8. Saran dan Kesimpulan
Setelah selesai melakukan pelatihan ini, kita dapat memahami beberapa hal seperti berikut:
- mampu memahami dan membuat view di Django
- mampu memahami dan membuat model di Django
- mampu memahami dan membuat template di Django
- mampu membuat halaman admin di Django
- memahami pengaturan aplikasi Django di settings.py
- memahami cara mendefinisikan URL di urls.py
- mampu menggunakan file CSS dan JS di aplikasi web yang kita gunakan berbasis Django
- mampu memahami dan membuat form untuk user aplikasi kita
- mampu memahami cara berinteraksi dengan database yang digunakan Django di aplikasi web kita
Di aplikasi event ini belum ada:
- autentikasi untuk member dari aplikasi agar bisa mengikuti event
- belum ada registrasi untuk member
- belum ada fitur untuk mencetak tiket berupa pdf
- belum ada proses pengiriman tiket ke email
- dan masih banyak kekurangan lainnya

9. Daftar Pustaka
- Django Documentation
- Python Tutorials by TutorialsPoint
- Twitter Bootstrap Documentation

Modul pelatihan-django-dasar-possupi-v1

More Related Content

What's hot

Viewers also liked

More from Ridwan Fadjar

Modul pelatihan-django-dasar-possupi-v1