1. Hello World Django

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: [email protected] 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 Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 5)

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 Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 6)

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


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#


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 Pelatihan Django Dasar POSS UPI 2014. Gedung Ilmu Komputer, Universitas Pendidikan Indonesia, Bandung. (halaman 11)

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'âdmin/', 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


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 from 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 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: Daftar Event {% load staticfiles %} <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}">

Daftar Event yang Bisa Anda Kunjungi !

{% for event in list_event %}
<strong>{{ event.title | upper }}
Diselenggarakan oleh {{ event.organizer }}
dari {{ event.date_begin }} hingga {{ event.date_end }}

Lihat Detail
{% endfor %}


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


admin.autodiscover() urlpatterns = patterns('', url(r'âdmin/', include(admin.site.urls)), url(r'^$', 'dp_event.views.index'), url(r'êvent/(\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: Daftar Event {% load staticfiles %} <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}">

{{ event.title | upper }}


venue: {{ event.venue }}
info lain: {{ event.about }}


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: ----------------------------------------------------------------admin.autodiscover() urlpatterns = patterns('', url(r'âdmin/', include(admin.site.urls)), url(r'^$', 'dp_event.views.index'), 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:

{{ event.title | upper }}


venue: {{ event.venue }}
info lain: {{ event.about }}


Lihat Acara Lainnya Ikut Acara

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:

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


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: Ikut Acara {% load staticfiles %} <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}">

Ikut Acara - {{ event.title }}

{% csrf_token %}
Nama

Email

Telepon


Twitter
Batal

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

Daftar Pengunjung

{% if list_visitor %} {% for visitor in list_visitor %}
{{ visitor.name }} ({{ visitor.twitter }})
{% endfor %} {% else %}
<strong>Belum ada pengunjung...
{% endif %}


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


1. Hello World Django

Recommend Documents

Daftar Event yang Bisa Anda Kunjungi !

{{ event.title | upper }}

{{ event.title | upper }}

Ikut Acara - {{ event.title }}

Daftar Pengunjung