modul pelatihan-django-dasar-possupi-v1

30
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)

Upload: ridwan-fajar

Post on 22-Jun-2015

1.036 views

Category:

Technology


15 download

DESCRIPTION

Modul Pelatihan Django Dasar: Membahas cara membuat template, view, model, admin, dan konfigurasi ke database SQLite3. Selain itu memahami cara penggunaan Twitter Bootstrap di Django

TRANSCRIPT

Page 1: Modul pelatihan-django-dasar-possupi-v1

1. Hello World Django

Django merupakan fullstack web framework yang dirancang dan dibangun oleh Adrian Holovatydan Jacob Kaplan Moss. Awal mulanya Django merupakan web framework internal yang dimilikioleh 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 tersebutdinamakan dengan MTV (Model, Template, View), dimana model adalah kode yang berisi objekyang 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 berisibisnis proses dari aplikasi, menerima request dari user, memberikan response kepada user, danberinteraksi dengan database yang dipilih.

Dalam pelatihan kali ini kita akan menggunakan Django 1.6 . Anda dapat mengunduhnya dihttp://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 berikutuntuk memulai instalasi (Pastikan Anda sudah menginstall Python versi 2.6.x ke atas):

ekstrak installer tersebut. Jika Anda menggunakan Linux ekstrak folder tersebut denganperintah Extract melalui file manager yang Anda gunakan atau melalui terminal gunakanperintah tar -xzvf django-1.6.tgz. Jika Anda menggunakan Windows atau OSX silahkangunakan aplikasi seperti 7zip untuk membuka bundelan tersebut.

masuk ke dalam folder hasil ekstrak sebelumnya, cobalah Anda lihat apakah di dalamnyaterdapat file setup.py

Jika terdapat file tersebut maka lakukan proses instalasi Django dengan menggunakanperintah: python setup.py install di terminal

Waktu yang dibutuhkan untuk instalasi lebih dari 1 menit, jadi Anda dapat mengunduhdokumentasinya di website yang sama

Jika proses instalasi selesai, Anda dapat memeriksa apakah Django sudah terinstal ataubelum dengan menggunakan perintah django-admin.py version di terminal

Jika muncul no versi dari Django yang Anda baru saja install di komputer Anda, makaproses instalasi Django telah berhasil

Proses instalasi pun sudah selesai dan Django siap digunakan. Sekarang kita akan mencobamembuat proyek Django baru. Silahkan Anda berpindah ke folder yang diinginkan untukmenyimpan proyek Django, misal /home/username_anda/Document . Setelah memilih folderbuatlah proyek Django baru dengan menggunakan perintah django-admin.py startprojectdemo_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 yangbernama sama yaitu demo_possupi dan file manage.py. Jika ada kedua benda tersebut sekarangkita akan mencoba menyalakan web server untuk development yang dimiliki Django denganperintah python manage.py runserver di terminal. Secara default Django akan menyalakan webserver yang dimilikinya di IP Address 127.0.0.1 atau localhost dan port 8000. Jika server sudahmenyala dan tidak muncul error akses proyek demo_possupi di web browser dengan URLhttp://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)

Page 2: Modul pelatihan-django-dasar-possupi-v1

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 2)

Tampilan saat web server Django diakses melalui web browser

Tampilan saat web server Django dinyalakan

Page 3: Modul pelatihan-django-dasar-possupi-v1

2. Menentukan Spesifikasi Aplikasi Event

Spesifikasi yang dibutuhkan sederhana saja. Kita membutuhkan tabel event dan visitor untukmenampung aplikasi yang akan kita bangun. Kita akan membuat sebuah halaman utama yangmenampilkan semua event kemudian ada tombol detail event. Kita bisa menekan tombol detailevent tersebut dan melihat detail event seperti informasi event dan siapa saja yang mengunjungievent tersebut. Tentunya pengunjung boleh mendaftarkan diri untuk mengikuti event tertentu.

Aplikasi juga memiliki halaman admin yang siap mengelola kedua tabel tersebut. Kitamembutuhkan halaman admin untuk mengelola data event dan data visitor. Kita membutuhkanDDL 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.

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 3)

Page 4: Modul pelatihan-django-dasar-possupi-v1

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 akandigunakan, dan Django akan menangani database yang Anda gunakan.

Untuk memulai penggunaan database di Django, Anda dapat melakukan beberapa konfigurasi difile setting.py yang terdapat di folder demo_possupi/demo_possupi kemudian tentukan databaseyang akan digunakan. Misal dalam percobaan kita kali ini, akan digunakan database SQLite3dengan nama demo_possupi.sqlite3. Perhatikan konfigurasinya di bawah ini (penting: tanda garisstrip 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 databaseengine dan nama database yang akan digunakan. Pada konfigurasi diatas kita hanya menggunakandua hal tersebut karena menggunakan SQLite3. Jika menggunakan database seperti MySQL atauPostgreSQL, 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 prosessynchronization antara database dengan aplikasi Django kita dengan menggunakan perintah pythonmanage.py syncdb . Perhatikakn contohnya berikut ini:

root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# python manage.py syncdbCreating tables ...Creating table django_admin_logCreating table auth_permissionCreating table auth_group_permissionsCreating table auth_groupCreating table auth_user_groupsCreating table auth_user_user_permissions

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 4)

Page 5: Modul pelatihan-django-dasar-possupi-v1

Creating table auth_userCreating table django_content_typeCreating table django_sessionYou just installed Django's auth system, which means you don't have any superusers defined.Would you like to create one now? (yes/no): yesUsername (leave blank to use 'root'): rootEmail address: [email protected]: 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 antaralain:

Django membuat table default yang berisi session, group, group_permission, user,admin_log, dan tabel lainnya seperti pada snapshot diatas. Jika kita belum membuat satumodel pun di Django, maka tabel default akan dibentuk lebih dahulu

Jika Anda sudah mendefinisikan model di sebuah aplikasi di Django, maka Django akanmembuatkan tabelnya jika belum terdapat di database

Tabel yang telah dibuat tidak akan dibuat ulang. Jika kita ingin melakukan perubahan padamodel. Anda dapat melakukanya dengan cara melakukan drop table pada tabel yangberhubungan 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 terlebihdahulu web server Django dengan perintah python manage.py runserver kemudian cobalah Andaakses URL http://localhost:8000/admin di web browser maka akan muncul tampilan seperti berikut:

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 5)

Form login halaman admin Django

Page 6: Modul pelatihan-django-dasar-possupi-v1

Kemudian masukkan account Django yang telah Anda buat sebelumnya, dan Anda akan melihathalaman admin Django seperti pada gambar berikut:

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 6)

Halaman utama dari halaman admin Django

Halaman kelola user dari halaman admin Django

Halaman kelola grup dari halaman adminDjango

Page 7: Modul pelatihan-django-dasar-possupi-v1

4. Membangun Model untuk Aplikasi Event

Model merupakan sebuah file yang terdapat di setiap aplikasi Django. Di dalam Django dapatmemiliki banyak aplikasi sesuai dengan kebutuhan sistem. Setiap aplikasi Django biasanya terdiridari:

model.py, berisi class yang merupakan representasi dari setiap tabel. Tentunya sebuah classdapat memiliki fungsionalitasnya yang unik dari class lainnya

views.py, berisi kumpulan fungsi yang akan diakses oleh user dengan perantara URL yangdidefinisikan di urls.py yang terdapat di aplikasi atau di urls.py yang terdapat di folderdemo_possupi

urls.py, berisi kumpulan URL yang didefinisikan untuk mewujudkan sistem danmemberikan reaksi terhadap user. Setiap URL akan mengarah kepada suatu fungsi diviews.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 menggunakanperintah python manage.py startapp <nama_aplikasi> misalnya seperti pada kasus berikut inidimana kita membuat sebuah aplikasi yang bernama dp_event:

root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# python manage.py startappdp_eventroot@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# lsdb.sqlite3 demo_possupi demo_possupi.sqlite3 dp_event manage.pyroot@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi#

Sekarang sebuah folder yang bernama dp_event sudah tercipta dengan menggunakan perintahdiatas. 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 menambahkannama 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 kodeberikut 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)

Page 8: Modul pelatihan-django-dasar-possupi-v1

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 Djangokita dengan menggunakan perintah python manage.py syncdb. Berikut adalah snapshot saat tabeldari model diatas dibuat:

root@ridwanbejo:/home/ridwanbejo/Projects/Django/demo_possupi# python manage.py syncdbCreating tables ...Creating table dp_event_eventCreating table dp_event_visitorInstalling 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)

Page 9: Modul pelatihan-django-dasar-possupi-v1

Anda dapat melihat kedua tabel yang telah dibuat dengan menggunakan SQLiteman. SQLitemanmerupakan sebuah aplikasi desktop yang digunakan untuk membantu pengelolaan databaseSQLite3. Berikut ini adalah tampilan dari database untuk aplikasi event:

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 9)

Susunan tabel event di SQLiteman

Susunan tabel visitor di SQLiteman

Page 10: Modul pelatihan-django-dasar-possupi-v1

5. Membangun Halaman Administrator untuk Aplikasi Event

Halaman admin biasanya dibuat dari awal ketika kita membangun sebuah aplikasi web. Denganmenggunakan Django, Anda dapat menggunakan halaman admin yang di-generate dari model yangtelah didefinisikan sebelumnya. Tampilannya yang sederhana dapat Anda manfaatkan semaksimalmungkin untuk menunjang aplikasi web yang Anda gunakan.

Sebelumnya kita hanya melakukan login dan melihat halaman yang menyajikan tabel groups danusers. Sekarang kita akan mencoba menambahkan model yang telah kita definisikan ke halamanadmin. Suntinglah file admin.py di folder dp_event, dan salinlah kode berikut:

from django.contrib import adminfrom 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 kitabuat 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)

Halaman admin Django setelah ditambahkan dua model baru

Page 11: Modul pelatihan-django-dasar-possupi-v1

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 11)

Menambahkan event baru di halaman admin django

Event baru sudah ditambahkan

Riwayat penggantian data di tabel

Page 12: Modul pelatihan-django-dasar-possupi-v1

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 12)

Melihat data event yang baru ditambahkan di SQLiteman

Melakukan pengubahan data event di halaman admin Django

Page 13: Modul pelatihan-django-dasar-possupi-v1

6. Membangun View dan Template untuk Aplikasi Event

Diasumsikan bahwa halaman admin sudah selesai dibangun, sekarang saatnya kita membuathalaman untuk publik. Untuk percobaan di pelatihan ini, kita akan mencoba menampilkan daftarevent yang belum berakhir, dan menerima pengunjung yang ingin datang ke event tersebut. Viewadalah 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 usermelalui web browser.

Sebelum membangun template mari kita atur terlebih dahulu tempat penyimpanan template.Buatlah folder yang bernama templates di dalam folder proyek demo_possupi. Kemudiantambahkan pengaturan yang ditebalkan berikut di setting.py:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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

TEMPLATE_DEBUG = TrueTEMPLATE_DIRS = ( BASE_DIR+'/templates',)

ALLOWED_HOSTS = []

# Application definition

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Kita juga akan menggunakan CSS dan Javascript untuk mempercantik halaman web yang akandibangun. Kita akan menggunakan Twitter Bootstrap unuk pelatihan kali ini. Buatlah folder yangbernama static di dalam folder proyek demo_possupi. Dan simpan Twitter Bootstrap ke dalamfolder 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/'

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 13)

Page 14: Modul pelatihan-django-dasar-possupi-v1

STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"),)

Selesai mengatur folder untuk template dan file static di Django, mari kita coba untuk membuatview pertama di Django. Suntinglah file urls.py yang berada di folder demo_possupi denganmenambahkan baris kode yang ditebalkan seperti pada potongan kode berikut ini:

from django.conf.urls import patterns, include, url

from django.contrib import adminadmin.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 URLhttp://localhost:8000 maka Django akan mengeksekusi view yang bernama index. Tanda $menyatakan bahwa di belakan URL yang didefinisikan tidak boleh ada karakter apapun. Karenaview index belum didefinisikan. Mari kita membuat view di file views.py di folder dp_event. Lalusalin potongan kode berikut:

from django.shortcuts import render_to_response, redirectfrom django.http import HttpResponsefrom django.core.context_processors import csrffrom 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, ataupunteknologi yang dibuat dengan Python lainnya untuk digunakan di dalam view kita. Biasanya yangdibutuhkan adalah modul untuk menampilkan template sepertidjango.shortcuts.render_to_response, melakukan redirect dengan django.shortcuts.redirect, danmodul untuk mencegah cross site request forgery atau csrf dengan django.core.context_processorsimport csrf. Dan tentu saja kita membutuhkan model yang telah kita bangun, untuk digunakan jikaingin menampilkan data yang diambil dari tiap model tersebut.

Pada potongan kode diatas, kita membuat sebuah view yang bernama index. Sebuah view hanyalahfungsi 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)

Page 15: Modul pelatihan-django-dasar-possupi-v1

digunakan untuk menangani request dari user. Jika view diatas dipanggil maka akan ditampilkansebuah response seperti berikut:

Untuk membuat view di Django diperlukan beberapa tahap. Agar lebih menarik, mari kita cobatampilkan data event yang sudah ada di dalam database ke halaman utama. Tentu saja event yangditampilkan adalah event yang belum berakhir. Berikut adalah perubahan isi file views.py yangakan digunakan untuk menampilkan daftar event yang belum berakhir:

from django.shortcuts import render_to_response, redirectfrom django.http import HttpResponsefrom django.core.context_processors import csrffrom dp_event.models import *import datetime

# Create your views here.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 hariini, dan manipulasi tanggal. Di dalam view index, kita mencoba untuk mengambil daftar semuaevent yang belum berakhir. Setelah semua event didapatkan, maka view index akan melewatkandaftar 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 danlihatlah apa yang terjadi:

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 15)

view pertama di Django

Page 16: Modul pelatihan-django-dasar-possupi-v1

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 kodeberikut 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)

Contoh tampilan halaman error Django jika template yang dibutuhkan belum tersedia

Page 17: Modul pelatihan-django-dasar-possupi-v1

</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:

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 eventtersebut. 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)

Menampilkan template yang berisi daftar event yang bisa diikuti oleh user

Page 18: Modul pelatihan-django-dasar-possupi-v1

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 danmenambahkan parameter id dari event tersebut. Kurang lebih URL yang akan diakses sepertihttp://localhost:8000/event/199123 dimana 199123 adalah id dari sebuah event yang kita klik dihalaman utama. Untuk menghasilkan respon yang memperlihatkan detail event, URL tersebut akanditangani oleh view detail_event. Tambahkan kode berikut di views.py yang berada di folderdp_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 didapatkandari angka yang dilewatkan setelah segmen event, misalnya 199123. Kemudian id_event akandigunakan untuk mencari event yang memiliki id yang diinginkan. Jika ditemukan, event yangdidapat 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)

Page 19: Modul pelatihan-django-dasar-possupi-v1

</div> </body></html>

Pada template diatas kita menampilkan tempat event diselenggarakan dan info lainnya dari eventyang akan diselenggarakan. Di bab berikutnya, kita akan mencoba menampilkan siapa saja yangakan 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)

Tampilan detail event

Page 20: Modul pelatihan-django-dasar-possupi-v1

7. Menyusun Form Ikut event untuk User

Satu hal yang belum kita dapatkan di bagian front-end dari aplikasi event ini adalah belum adanyainteraksi dari user yang berkunjung untuk memberikan data mereka kepada aplikasi. Kitamemerlukan sebuah form yang mencatat setiap user yang ingin ikut ke event tertentu. Kemudiansetelah mengisi form ikut event tertentu, maka di detail event yang akan diikuti, munculah daftarpengunjung dari event tersebut.

Kita membutuhkan halaman khusus yang menyediakan form untuk diisi user. Mari kita awalidengan mendefinisikan URL untuk menampilkan form mengikuti event dan URL untuk memprosesdata yang dikirimkan dari form tersebut. Salinlah bagian yang ditebalkan ke file urls.py di folderdemo_possupi:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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'), url(r'^event/join/(\d+)', 'dp_event.views.join_event'), url(r'^event/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 menanganiproses pencatatan pengunjung yang ingin mengikuti event tertentu. URL tersebut ditangani olehview process_join_event().

URL untuk menangani pengunjung yang ingin mengikuti event telah didefinisikan. Sekarang kitatambahkan dua tombol baru di detail event. Tombol pertama untuk kembali ke halaman utama, dantombol kedua untuk melihat form mengikuti event. Salinlah bagian yang ditebalkan ke filedetail_event.html di folder templates:

<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 }}

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 20)

Page 21: Modul pelatihan-django-dasar-possupi-v1

<br/><br/> </div> <div class="pull-right"> <a style="margin-right:10px;" href="/" class="btn btn-primary">Lihat AcaraLainnya</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 bagianpaling 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)

Menambahkan dua tombol baru di halaman detail event

Page 22: Modul pelatihan-django-dasar-possupi-v1

Kita akan melihat error diatas karena belum ada view join_event() yang dibutuhkan untukmenangani penampilan form mengikuti event. Oleh karena itu mari kita buat view tersebut diviews.py di folder dp_event. Salinlah bagian yang ditebalkan:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# Create your views here.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})

def detail_event(request, id_event): event = Event.objects.get(id=int(id_event)) return render_to_response('detail_event.html', {'event':event})

def join_event(request, id_event): event = Event.objects.get(id=int(id_event)) c = {} c.update(csrf(request)) c.update({'event':event}) return render_to_response('form_event.html', c)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 22)

Error karena view untuk join event belum dibuat

Page 23: Modul pelatihan-django-dasar-possupi-v1

Fungsi join_event() memiliki parameter lainnya yang menangkap id_event. Proses yang pertamakali dilaksanakan adalah melakukan pengambilan data dari event yang dipilih. Kemudian kitamembuat sebuah handler untuk Cross Site Request Forgery (CSRF) pada objek request danparameter 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 javascriptberbahaya 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 javascriptberbahaya tersebut.

Karena view join_event() membutuhkan template yang bernama form_event.html sekarang kitaakan 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)

Page 24: Modul pelatihan-django-dasar-possupi-v1

<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 untukmenjaga form tersebut dari CSRF yang dilakukan seseorang. Jika sudah disalin, maka ketika Andamengklik tombol Ikut Acara di suatu event akan tampil form seperti berikut ini:

Tapi tunggu dulu. Di dalam atribut action yang terdapat di form, jika form disubmit, maka akandiarahkan ke /event/join/process . Kita sudah mendefinisikan URLnya di urls.py namun belummembuatkan view process_join_event() di views.py. Oleh karena itu mari kita buat terlebih dahuluview 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)

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 24)

form untuk mengikuti event

Page 25: Modul pelatihan-django-dasar-possupi-v1

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() cukupmembutuhkan parameter request saja. Data yang dikirim dari form antara lain: id_event, name,phone, email, twitter. Untuk mendapatkan nilai POST, kita menggunakan request.POST. Didalam view tersebut, pertama kali akan dilakukan pengambilan data event yang akan diikuti denganmenggunakan id_event yang dikirimkan dari form. Selanjutnya kita membuat objek visitor denganmembuatnya dari kelas model visitor.

Kita dapat melewatkan data yang dibutuhkan tabel visitor. Khusus untuk target_event, karenaDjango menggunakan Object Relational Mapper (ORM) maka setiap field tabel yangmenggunakan relasi seperti ForeignKey harus dilewatkan nilai berupa objek.

Sekarang kita coba isi form mengikuti event. Silahkan pilih event yang sudah Anda buatsebelumnya. 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)

Contoh pengisian form mengikuti event

Page 26: Modul pelatihan-django-dasar-possupi-v1

lihat gambar berikut ini:

Akhirnya kita sudah dapat membuat pengunjung untuk mendaftar ke event tertentu. Namunsayangnya, kita belum dapat melihat siapa sajakah pengunjung yang sudah hadir. Jika kita melihathalaman detail event, kita belum dapat melihat siapa saja yang sudah mendaftarkan diri ke eventtersebut. Oleh karena itu mari kita modifikasi sedikit view join_event() dan templatedetail_event.html.

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 26)

Melihat pengunjung yang mengisi form mengikuti event di SQLiteman

Melihat pengunjung yang mengisi form mengikuti event di Halaman Admin Django

Page 27: Modul pelatihan-django-dasar-possupi-v1

Tambahkan perubahan kode yang ditebalkan berikut pada view join_event():

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - list_event = Event.objects.filter(date_end__gte=datetime.datetime.now()) return render_to_response('list_event.html', {'list_event':list_event})

def detail_event(request, id_event): event = Event.objects.get(id=int(id_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): event = Event.objects.get(id=int(id_event)) c = {}- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tambahkan kode yang ditebalkan berikut pada template detail_event.html:

<html> <head> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </head> <body> <div class="col-md-12">

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div> <br/> <div class="col-md-12"> <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>

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 27)

Page 28: Modul pelatihan-django-dasar-possupi-v1

Jika Anda sudah berhasil menambahkan perubahan kode diatas, maka Anda akan melihat tampilanseperti berikut ini:

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 28)

Daftar pengunjung yang berhasil ditambahkan di halaman detail event

Page 29: Modul pelatihan-django-dasar-possupi-v1

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

Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 29)

Page 30: Modul pelatihan-django-dasar-possupi-v1

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)