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)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 2)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 3)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 4)
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:
Kemudian masukkan account Django yang telah Anda buat sebelumnya, dan Anda akan melihat
halaman admin Django seperti pada gambar berikut:
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
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi#
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.
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 7)
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)
root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi#
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 8)
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:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 9)
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:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 10)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 12)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 13)
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
from dp_event.models import *
# 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
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 14)
digunakan untuk menangani request dari user. Jika view diatas dipanggil maka akan ditampilkan
sebuah response seperti berikut:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 15)
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 %}
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 16)
</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:
-----------------------------------------------------------------
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 17)
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^$', 'dp_event.views.index'),
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>
{% 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>{{ event.title | upper }}</h1>
<hr />
<div class="well">
Diselenggarakan oleh {{ event.organizer }} <br/>
dari {{ event.date_begin }} hingga {{ event.date_end }} <br/><br/>
venue: {{ event.venue }} <br/>
info lain: {{ event.about }}
</div>
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 18)
</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:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 19)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 20)
<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 btndefault">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:
Bila Anda mengklik tombol ikut acara sekarang, maka Anda akan melihat error seperti berikut:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 21)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 22)
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>
{% 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>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>
<div class="form-group">
<label for="formInput">Email</label>
<input type="email" class="form-control" id="formInput" name="email"
placeholder="Isi dengan e-maill..">
</div>
<div class="form-group">
<label for="formInput">Telepon</label>
<input type="text" class="form-control" id="formInput" name="phone"
placeholder="Isi dengan nomor telepon..">
</div>
<div class="form-group">
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 23)
<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:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 24)
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:
Sekarang kita lihat hasilnya terlebih dahulu di SQLiteman dan halaman admin Django. Cobalah
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 25)
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.
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 26)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 27)
Jika Anda sudah berhasil menambahkan perubahan kode diatas, maka Anda akan melihat tampilan
seperti berikut ini:
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 28)
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 29)
9. Daftar Pustaka
- Django Documentation
- Python Tutorials by TutorialsPoint
- Twitter Bootstrap Documentation
Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan
Indonesia, Bandung. (halaman 30)