Tutorial Detail

• Topics: Django
• Difficulty: ++/+++++
• Estimated Completion Time: .. hour(s)

Di tutorial pertama ini kita akan membuat sebuah aplikasi musik streaming sederhana. Fiturnya adalah:

• CRUD dengan memanfaatkan fitur django-admin,
• Tampilan front-end yang simpel dengan html & css,
• Local storage dulu lah ya, cloud nanti di tutorial berikutnya ;)

Let's Get Started!

Project Baru

Oke, untuk tahap pertama kita buat project baru dengan menggunakan script bawaan django, yaitu django-admin.py.

    django-admin.py startproject streaming

Buat Aplikasi Baru

Langkah berikutnya adalah membuat aplikasi didalam project yang tadi kita buat. Caranya:

    cd streaming
    python manage.py startapp audio

kita namakan saja audiostream. [screenshot ls -l audio]

Nah, sekarang coba deh jalanin perintah dibawah ini untuk test project kita bisa jalan apa ngga, dengan menggunakan test server bawaan django:

    python manage.py runserver

[screenshot runserver] Coba deh buka browser, terus menuju ke alamat: http://localhost:8000, dan WOW! Ini artinya project kita sudah dimulai! [screenshot browser welcome to django]

Pasti banyak pertanyaan nih, kenapa port nya yg dipake 8000? Simpelnya, supaya ngga conflict dgn apache (kalo keinstall). Mau ganti port, atau ip address? Silakan baca ini. Django mempersenjatai dirinya sendiri dengan simpel webserver sehingga kita tidak direpotkan dengan urusan tetek-bengek instalasi webserver. Karena salah satu filosofi django adalah quick development. Nantinya kalo aplikasi kita harus di-deploy, baru deh kita pikirin webserver :) jadi sekarang ngga usah mikirin webserver, ada yg lebih penting: mari mikirin langkah berikutnya biar project kita ada progress nya :)

Setting The Project

edit settings.py, ubah settingan database-nya. Terserah mau pake database apa, mysql, postgres, sqlite dll. Untuk mempermudah, kita pake sqlite aja ya, karena kalo pake database lain, selain harus install servernya, juga kita harus install driver nya di python. Sedangkan sqlite ngga perlu, python versi 2.7 udah include driver sqlite jadi tinggal pake.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': 'streaming.db',
        'USER': '',
        'PASSWORD': '',
        'HOST': '',
        'PORT': '',
    }
}

Simpel kan sqlite?! :D Cukup isi engine dan nama database aja, yg lain gak pake.

Masih di settings.py, pastikan 'django.contrib.admin' & 'stream.audio' ada dan atau tidak ter-comment di dalam INSTALLED_APPS

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.admin',
    'stream.audio',
)

Fitur django.contrib.admin akan kita gunakan untuk membangun back-end. FYI, fitur admin ini salah satu unggulan dari django, beneran deh. KEREN! Sedangkan stream.audio adalah nama aplikasi yang sedang kita bangun ini.

Models

Oke, saatnya membuat models untuk aplikasi kita. Buka file /stream/audio/models.py. Models itu, singkatnya adalah pendefinisian struktur database. Tapi tenang, bagi yg belum mengerti SQL, kita ngga perlu tau SQL, biar django yg melakukannya untuk kita. Kita tinggal mendefinisikan field-field atau informasi yang akan disimpan dan digunakan. Untuk menyimpan informasi audio, katakan saja kita butuh judul, file audio itu sendiri, genre, dan keterangan.

from django.db import models
import datetime
class audio(models.Model):
name = models.CharField(max_length=100, unique=True)
audio_file = models.FileField(upload_to='../media/uploads/', null=False, blank=False)
genre = models.CharField(max_length=50, blank=True, null=True)
description = models.TextField(blank=True, null=True)
upload_date = models.DateTimeField(default=datetime.datetime.now)

Udah, selesai bikin model. Untuk meng-convert jadi database dan tabel-tabel, serahkan pada django dan tools nya :)

    /stream/audio/manage.py syncdb

Jika tidak ada aral melintang (error), akan muncul keterangan tentang pembuatan tabel-tabel database. Lalu kita juga diminta memasukkan username, email & password untuk pembuatan superuser supaya bisa login ke admin area.

Ok, sebelum ke bagian selanjutnya, coba lagi deh aplikasi kita dengan

    /stream/audio/manage.py runserver

dan lihat ke browser.

[screenshot browser lagi]

urls

urls.py itu ibarat router yang mengatur view mana yang dieksekusi tergantung dari url yang di akses oleh user. Contoh: (r'list^$', 'stream.audio.views.list_audio') artinya apabila user mengakses http://localhost:8000/list maka yg dieksekusi adalah function list_audio() yang ada di /stream/audio/views.py. Karena kita belum bikin front-end, jadi untuk saat ini urls.py akan kita setting hanya untuk admin site aja.

from django.conf.urls.defaults import *
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
(r'^admin/(.*)', admin.site.root),
)

Jadi untuk sementara, kita hanya bisa mengakses http://localhost:8000/admin/ saja. Untuk yg lain sementara akan muncul 404. Dan supaya aplikasi audio kita 'terdaftar' di admin site, buat file /stream/audio/admin.py dengan isi:

from django.contrib import admin #Import the admin
from models import audio #Import our todo Model.
admin.site.register(audio) #Register the model with the admin

Udah, back-end kita telah selesai :) Gak percaya? Coba akses http://localhost:8000/admin/ terus login dengan user & password yg tadi kamu entry. Dan aplikasi audio kita udah ada di list admin. Dengan demikian kita udah bisa menjalankan proses CRUD. Keren kan django-admin?! :D

Silakan entry 1-2 data sebagai contoh untuk membangun front-end nantinya. Wow, magic! Bahkan form untuk upload audio ngga perlu kita yg buat, udah dicover semuanya sama django-admin :D

Proses CRUD udah bisa dijalankan, berarti misi membuat back-end telah selesai. Mari sekarang kita buat front-end nya.

Views

Pengembangan front-end kita mulai dengan membuat function didalam views.py yang akan memanggil file template html dan menampilkan datanya.

from models import audio
from django.shortcuts import render_to_response
def listfile(request):
files = audio.objects.all()
return render_to_response('index.html', {'data': files})

function render_to_response digunakan untuk menggabungkan html & data audio.objects.all() sama saja dengan perintah SQL: "SELECT * FROM tabel_audio"

Edit settings.py For Front-end

File html akan kita taro di /stream/templates/. Untuk itu kita perlu tambahkan ke settings.py direktori tersebut.

TEMPLATE_DIRS = (
    "/home/riza/django_projects/stream/templates",
)

Jangan lupa buat direktori itu ya :)

Kemudian kita bikin file template-nya, kita namakan index.html

    /stream/$ mkdir templates
    /stream/templates$ cd templates
    /stream/templates$ touch index.html

edit index.html, tambahkan code berikut untuk menampilkan nama file audio didalam list:

Local Audio Stream

{% for file in files %}
    
{{ file.name }}
{% endfor %}

{% %} digunakan untuk sintaks django template. Sedangkan {{ }} digunakan untuk menampilkan variabel dari django views.

• play the audio!
• styling the app
• done!