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.
<pre class="prettyprint">
    django-admin.py startproject streaming
</pre>

Buat Aplikasi Baru
---------------------
Langkah berikutnya adalah membuat aplikasi didalam project yang tadi kita buat. Caranya:
<pre class="prettyprint">
    cd streaming
    python manage.py startapp audio
</pre>
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:
<pre class="prettyprint">
    python manage.py runserver
</pre>
[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](https://docs.djangoproject.com/en/1.3/ref/django-admin/#runserver-port-or-address-port). 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](https://docs.djangoproject.com/en/dev/misc/design-philosophies/?from=olddocs#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.

<pre class="prettyprint">
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': 'streaming.db',
        'USER': '',
        'PASSWORD': '',
        'HOST': '',
        'PORT': '',
    }
}
</pre>

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
<pre class="prettyprint">
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',

)
</pre>

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.

<pre class="prettyprint">
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)
</pre>

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

<pre class="prettyprint">
    /stream/audio/manage.py syncdb
</pre>

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

<pre class="prettyprint">
    /stream/audio/manage.py runserver
</pre>

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.

<pre class="prettyprint">
from django.conf.urls.defaults import *
from django.contrib import admin

admin.autodiscover()

urlpatterns = patterns('',
    (r'^admin/(.*)', admin.site.root),
)
</pre>

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:
<pre class="prettyprint">
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

</pre>

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.

<pre class="prettyprint">
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})

</pre>

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.

<pre class="prettyprint">
TEMPLATE_DIRS = (
    "/home/riza/django_projects/stream/templates",
)
</pre>

Jangan lupa buat direktori itu ya :)

Kemudian kita bikin file template-nya, kita namakan index.html
<pre class="prettyprint">
    /stream/$ mkdir templates
    /stream/templates$ cd templates
    /stream/templates$ touch index.html
</pre>

edit index.html, tambahkan code berikut untuk menampilkan nama file audio didalam list:
<pre class="prettyprint">
<h2>Local Audio Stream</h2>
<ul>
{% for file in files %}
    <li>{{ file.name }}</li>
{% endfor %}
</ul>
</pre>

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

- play the audio!
- styling the app
- done!