Wednesday, May 16, 2012

Belajar Flask: Form

Cara ketiga untuk memerintahkan atau mengirimkan informasi ke suatu aplikasi web adalah dengan memakai Form. Kalau kedua cara sebelumnya (Query String dan URI) memakai perintah HTTP GET maka Form akan memakai perintah HTTP POST.

Bagaimana cara memakai Form di Flask?

Dengan memakai contoh yang sama dengan yang ada pada tulisan tentang pemakaian query string, maka template untuk dasar.html dan apakabar.html tidak akan mengalami perubahan. Tetapi template pertama.html harus kita ubah karena sekarang kita perlu membuat form untuk mengirimkan informasi ini. Berkas pertama.html sekarang menjadi:
{% extends "dasar.html" %}

{% block isi %}
    Kirim salam ke siapa?
    <form method="post">
        Nama: 
        <input type="text" name="depan">
        <input type="text" name="belakang">
        <br />
        <input type="submit" name="name" value="Kirim">
    </form>
{% endblock %}
Perhatikan dapa deklarasi form ini saya tidak mencantumkan atribut action yang berarti form ini akan dikirim kembali ke alamat yang menampilkan form ini, dalam hal ini URL /. Dengan demikian fungsi yang menampilkan template yang berisikan form ini harus juga memproses form ini. Sehingga program python-nya menjadi:
from flask import Flask, render_template, request, redirect, \
                  url_for
app = Flask(__name__)

@app.route("/", methods=['POST', 'GET'])
def pertama():
    if request.method == 'POST':
        if 'depan' in request.form and \
           'belakang' in request.form:
            depan = request.form['depan']
            belakang = request.form['belakang']
            return render_template("apakabar.html", 
                                   namaDepan=depan, 
                                   namaBelakang=belakang)

    return render_template("pertama.html")

if __name__ == '__main__':
    app.run(debug=True, host="127.0.0.1", port=8080)

Mari kita bedah perbedaan dalam program ini:
  • Baris 5, pada decorator app.route saya tambahkan satu parameter yaitu methods yang berisikan daftar perintah HTTP apa saja yang akan diterima serta akan diproses oleh fungsi ini; kalau parameter ini tidak dicantumkan maka Flask akan secara otomatis menganggap fungsi tersebut hanya menerima perintah GET
  • Karena pada deklarasi form saya tidak mencamtukan atribut action (lihat baris 5 pada berkas pertama.html) maka form ini akan dikirim oleh browser ke alamat yang sama, yang berarti fungsi pertama bukan hanya bertugas menampilkan template pertama.html tetapi juga bertugas menangani form ini. Oleh karenanya methods harus saya  deklarasi untuk memberitahu Flask bahwa fungsi ini akan memproses perintah GET dan perintah POST;
  • Baris 7, karena fungsi ini sekarang menangani dua perintah HTTP maka saya terlebih dahulu harus tahu perintah mana yang masuk: apa GET (berarti saat menampilkan halaman ini saat pertama sekali) atau POST (berarti karena pengiriman form);
  • Ingat kembali kalau variable request memiliki dictionary bernama args untuk menampung variable-variable pada query string. Nah khusus untuk form, variable request juga ada dictionary khusus yang bernama form yang berisikan semua elemen dari form yang dikirim;
  • Baris 8-9, karena saya sudah tahu ini merupakan  pengiriman form maka saya mau memastikan saja kesemua elemen dalam form ini yang saya butuhkan ikut terkirim;
  • Baris 10, saya mengambil isi dari input text yang bernama depan (lihat baris 7 dari berkas apakabar.html);
  • Baris 11, saya mengambil isi dari input text yang bernama belakang (lihat baris 8 dari berkas apakabar.html);
  • Baris 12-14, membangkitkan template apakabar.html dengan mengirimkan kedua variable yang dibutuhkannya;
  • Baris 16, akan dijalankan jika perintah yang ditangani adalah perintah GET yang hanya menampilkan template pertama.html.


Kembali ke: Belajar Flask


Saturday, May 12, 2012

Belajar Flask: URI

Cara kedua untuk memerintahkan atau mengirimkan informasi ke suatu aplikasi web adalah dengan memakai URI. Ini juga merupakan cara yang dianjurkan oleh konsep REST.

URI adalah singkatan untuk Uniform Resource Identifier atau standar (=uniform) penamaan (=identifier) suatu sumber daya (=resource) di web. Sumber daya disini bisa berupa: gambar, video, audio, berkas, ebook, halaman HTML, berkas PDF, dll. Sedangkan URL (Uniform Resource Locator) merupakan alamat dimana URI itu bisa ditemukan. Dalam URI tidak dikenal istilah query string sehingga pemakaiannya seperti pada cara pertama sangat dihindari disini, dan juga oleh konsep REST.

Kalau tidak bisa memakai query string terus bagaimana kita mengirim parameter? Dengan menanggap path itu merupakan deklarasi parameter. Misalnya alamat pada contoh pada tulisan sebelum ini tentang query string:
http://localhost:8080?par1=rahmad&par2=dawood
dapat kita tulis ulang menjadi:
http://localhost:8080/rahmad/dawood
Pada contoh ini, saya telah menetapkan directory level pertama sebagai nilai dari parameter par1 dan directory level kedua sebagai nilai dari parameter par2.

Terus bagaimana memakai konsep URI ini di Flask?

Dengan memakai contoh yang sama dengan yang ada pada tulisan sebelum ini tentang pemakaian query string, maka template untuk dasar.html dan apakabar.html tidak akan mengalami perubahan. Tetapi template pertama.html harus kita ubah karena URL-nya berubah dari memakai query string ke memakai URI. Berkas pertama.html sekarang menjadi:
{% extends "dasar.html" %}

{% block isi %}
    Kirim salam ke siapa?
    <ul>
        <li>
            <a href="/apakabar/Rahmad/Dawood">
                Rahmad Dawood
            </a>
        </li>
    </ul>
{% endblock %}
Terus program python-nya menjadi:
from flask import Flask, render_template, request
from flask import redirect, url_for

app = Flask(__name__)

@app.route("/")
def pertama():
    return render_template("pertama.html")

@app.route("/apakabar/<depan>/<belakang>")
def apakabar(depan, belakang):
    return render_template("apakabar.html", 
                           namaDepan=depan,
                           namaBelakang=belakang)

app.run(debug=True, host="127.0.0.1", port=8080)
Mari kita bedah perubahan pada program ini:

  • Baris 10, pada  pemetaan URL, ada tambahan <depan> dan <belakang> yang menandakan bahwa kedua elemen ini merupakan parameter yang wajib ada pada perintah ini. Perhatikan juga fungsi apakabar sekarang memerlukan dua parameter yang namanya sama dengan yang tercatat dibagian pemetaan URL, yaitu: depan dan belakang;
  • Disini perintah if yang sebelumnya ada untuk memeriksa apakah parameter-parameter ini dikirim juga telah hilang karena sudah ditangani langsung oleh Flask;
  • Baris 12-14 adalah proses pengiriman variable depan dan belakang ke template apakabar.html untuk ditampilkan.
Disamping secara konsep lebih kompak juga secara pemrograman lebih gampang! :)


Kembali ke: Belajar Flask


Referensi


Belajar Flask: Query String

Seperti yang telah saya tuliskan sebelumnya, query string merupakan cara pertama untuk memerintahkan atau mengirimkan informasi ke suatu aplikasi web.

Query string pada dasarnya adalah bagian dari URL setelah karakter tanda tanya (?). Misalnya, pada URL berikut:
http://localhost:8080?par1=rahmad&par2=dawood
Yang dimaksud query string disini adalah segala sesuatu setelah tanda tanya (?) dan disini terdapat dua parameter yang dipisahkan oleh karakter dan (&), yaitu: parameter par1 yang bernilai rahmad dan parameter par2 yang bernilai dawood.

Nah sekarang bagaimana memakai query string di Flask?

Dalam contoh berikut halaman utama (dengan URL "/") akan mengirimkan sebuah nama ke halaman dengan URL "/apakabar" untuk ditampilkan. Kedua halaman ini akan memakai dasar.html sebagai fondasinya.

Isi dasar.html:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
       {% block isi %}{% endblock %}
    </body>
</html>

URL "/apakabar" akan menampilkan template apakabar.html yang berisi:
{% extends "dasar.html" %}

{% block isi %}
    <h1>Apakabar {{ namaDepan }} {{ namaBelakang }}...</h1>
{% endblock %}
Perhatikan pada baris 4 ada tag khusus {{ namaDepan }} dan {{ namaBelakang }}yang merupakan perintah ke Jinja (dan Flask) untuk mengambil nilai dari kedua variable ini dan tampikan dilokasi tersebut.

Sedangkan halaman utama pada URL "/" akan menampilkan template pertama.html yang berisi:
{% extends "dasar.html" %}

{% block isi %}
    Kirim salam ke siapa?
    <ul>
        <li>
            <a href="/apakabar?depan=Rahmad&belakang=Dawood">
                Rahmad Dawood
            </a>
        </li>
    </ul>
{% endblock %}

Sedangkan program python-nya sendiri akan seperti berikut:
from flask import Flask, render_template, request
from flask import redirect, url_for

app = Flask(__name__)

@app.route("/")
def pertama():
    return render_template("pertama.html")

@app.route("/apakabar")
def apakabar():
    if "depan" in request.args and "belakang" in request.args:
        return render_template("apakabar.html", 
                        namaDepan=request.args["depan"],
                        namaBelakang=request.args["belakang"])
    return redirect(url_for("pertama"))

app.run(debug=True, host="127.0.0.1", port=8080)
Mari kita bedah program ini:
  • Baris 1-2 untuk memuat segala class dan fungsi yang akan dipakai;
  • Baris 4 untuk menginisialisasi aplikasi Flask ini;
  • Baris 18 untuk menjalankan program aplikasi web pada alamat http://127.0.0.1:8080
  • Baris 6-8 untuk menampilkan halaman utama pada URL "/" (atau URL lengkapnya "http://127.0.0.1:8080/") dari template pertama.html;
  • Baris 10-16 untuk menampilkan URL "/apakabar" (atau URL lengkapnya "http://127.0.0.1:8080/apakabar");
  • Perlu diketahui bahwa Flask akan secara otomatis memilah query string yang diterimanya dan menempatkan semua parameter yang ditemukannya pada dictionary yang bernama args yang merupakan bagian dari variable request. Key dari dictionary args adalah nama-nama parameter yang ditemukan pada query string tersebut sedangkan value-nya adalah nilai dari parameter tersebut;
  • Baris 12 untuk memeriksa apakah ada parameter depan dan belakang. Jika kedua parameter ini ada maka nilainya akan diambil dan dikirimkan ke halaman apakabar.html untuk ditampilkan (baris 13-15). Jika salah satu saja dari parameter ini tidak ditemukan pada query string maka perintah-perintah yang dilindungi oleh pernyataan if (baris 13-15) akan diabaikan dan langsung ke baris 16;
  • Perintah if ini saya tulis untuk menjaga dari kemungkinkan pengiriman URL yang salah yang mungkin terjadi jika seorang user salah mengetikkan URL ini dan bukannya mengklik link yang disediakan. Misalnya URL yang diketik adalah http://localhost:8080/apakabar?dpan=Rahmad&belakang=Dawood dimana parameter dpan salah diketik yang seharusnya depan;
  • Perhatikan disini parameter kedua dan ketiga saat memanggil fungsi render_template (baris 15-16) adalah namaDepan dan namaBelakang yang namanya sama dengan variable-variable yang akan ditampilkan pada halaman apakabar.html (lihat kembali baris 4 pada apakabar.html di atas);
  • Baris 16 untuk  memerintah Flask untuk mengalihkan (=redirect) ke fungsi yang bernama pertama, yang akan kembali menampilkan URL "http://127.0.0.1:8080/". Fungsi url_for akan membantu untuk membangkitkan URL yang benar, saya bisa saja tidak memakai fungsi ini dan langsung menuliskan "/".

Kembali ke: Belajar Flask


Referensi

Belajar Flask: Pengiriman Informasi

Disamping mampu memberikan informasi yang kita butuhkan, suatu aplikasi web juga harus mampu menerima informasi dari kita. Secara umum terdapat tiga cara untuk mengirimkan informasi ke suatu aplikasi web. Dua dari tiga cara ini akan memakai perintah GET (yaitu: query string dan URI) dan satu cara akan memakai perintah POST (yaitu: form). Sebenarnya sih ada beberapa cara lain yang memakai perintah-perintah HTTP lainnya tetapi kedua perintah ini yang paling sering dipakai.

Dalam beberapa tulisan berikut akan saya uraikan cara memakai ketiga cara ini di Flask. Tetapi sebelum memulai, perlu saya jelaskan sedikit tentang perintah HTTP GET dan POST.

GET merupakan perintah HTTP yang dikirimkan oleh browser ke web server saat anda mengklik suatu link. Perintah GET pada dasarnya adalah permintaan oleh browser ke server untuk mengambil (GET) suatu dokumen yang telah dimintakan oleh seorang user. Perintah GET ini juga bisa disertakan dengan parameter-parameter, misalnya: ambil dokumen versi PDF bukan HTML atau ubah warna tulisannya menjadi biru tua. Dalam konteks aplikasi web, GET dipergunakan untuk memerintahkan aplikasi web untuk melakukan sesuatu atau untuk menjalankan suatu fungsi. Sedangkan parameter dari perintah GET dipakai sebagai cara untuk mengirimkan parameter-parameter tertentu ke perintah atau fungsi yang hendak dijalankan.

Sedangkan POST merupakan perintah HTTP yang dikirimkan oleh browser ke web server saat anda mengisi dan mengirimkan sebuah form. Contoh form yang sudah pasti pernah anda kirim adalah form untuk login. Pada form login anda diminta mengisi username, mengisi password, dan menekan tombol login atau submit (=kirim). Pada saat anda menekan tombol ini maka browser akan mengambil semua informasi yang telah anda isikan dan mengirimkannya ke server dengan perintah HTTP POST. Dalam konteks aplikasi web, perintah POST juga dipergunakan untuk keperluan yang sama.

Kembali ke: Belajar Flask


Wednesday, May 9, 2012

Belajar Flask: Strategi dasar pemakaian template

Pada tulisan sebelum ini saya menerangkan tentang Template di Flask. Sekarang saya akan memaparkan dua strategi pemakaian Template yang sering diterapkan untuk mempermudah dan lebih memberi struktur kepada halaman-halaman aplikasi web. Kedua strategi tersebut adalah:
  1. Membuat fondasi untuk mengurangi pengulangan;
  2. Membagi halaman atas modul-modul kecil.

Mebuat Fondasi

Salah satu strategi utama dalam pembuatan suatu program adalah untuk menghindari pengulang. Strategi ini muncul bukan karena para programmer ini pada malas tetapi untuk menghindari kesalahan dikemudian hari.

Misalnya dalam suatu program, ada beberapa perhitungan yang memerlukan pemakaian konstanta Pi. Salah satu cara ini diprogram adakah dengan memasukkan angka 3,14 ke semua rumus yang membutuhkannya. Tetapi, seandainya nanti kita perlu menaikkan tingkat ketelitian perhitungan dan mengubah 3.14 ke 3.14159 maka kita harus mencari semua tempat yang memakai angka ini dan menggantinya secara manual. Cara lain untuk memprogram ini, yang lebih bagus, adalah dengan membuat sebuah konstanta bernama PI, memberikannya nila 3,14, dan semua perhitungan yang memerlukannya angka ini tinggal memakai konstanta tersebut. Dengan cara ini jika kita perlu mengubah 3.14 ke 3.14159 maka tinggal mengubah nilai konstantanya saja.

Strategi ini bisa kita terapkan juga pada aplikasi web dengan memanfaatkan templates. Caranya dengan membuat template dasar yang menjadi dasar bagi template-template lainnya. Isi template dasar ini bisa berupa berkas-berkas: CSS, Javascript, tag-tag META, dan lain-lain.

Mari kita lihat contohnya. Dalam contoh ini, template fondasi saya beri nama hlmFondasi.html yang akan diacu oleh template hlmLogin.html.

Isi hlmFondasi.html:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Rahmad Dawood">
        
        <title>Aplikasiku

        <!-- jQuery -->
        <script src="static/js/jquery/1.5/jquery.min.js">
        </script>

        <!-- CSS kita -->
        <link href="static/css/style.css" rel="stylesheet">
        </link>
    </head>
    <body>
        {% block isi %}{% endblock %}
    </body>
</html>
Perhatikan disini saya telah menaruh tag khusus {% block isi %}{% endblock %} yang bertujuan untuk menandaikan bahwa disinilah tempat (=block) yang akan diisi oleh template-template lain yang memakai hlmFondasi.html sebagai  fondasi. Perhatikan juga block ini saya beri nama: isi.

Nah bagaimana isi berkas hlmLogin.html:
{% extends "hlmFondasi.html" %}

{% block isi %}
    <h1>Mohon login</h1>
    <form method="post" action="/login">
        Username: <input type="text" name="txtUsername"> <br />
        Password: <input type="password" name="txtPassword"> <br />
        <input type="submit" name="btnSubmit" value="Submit">
    </form>
{% endblock %}
Perhatikan di berkas ini ada dua tag khusus:
  • {% extends "hlmFondasi.html" %} yang mengatakan bahwa berkas ini akan memakai hlmFondasi.html sebagai fondasi dasar dan
  • {% block isi %} ... {% endblock %} yang memerintahkan Jinja untuk mengambil isi antara kedua tag ini dan tempatkan di bagian yang telah ditandai block bernama isi pada template hlmFondasi.html.
Nah dengan cara ini, jika misalnya saya mau menambah berkas javascript maka tinggal mengubah hlmFondasi.html saja dan tidak perlu merubah semua template yang ada.

Modul-modul Kecil

Kalau diperhatikan, suatu halaman web dapat dibagi-bagi atas beberapa modul dasar. Misalnya ada header, footer, menu dibagian atas, atau menu dibagian kiri. Bagian-bagian ini pasti sama pada semua halaman, sesuai dengan salah satu strategi utama dalam pembuatan program untuk tidak mengulangi sesuatu, oleh karenanya bagian-bagian ini pun dapat kita pecah-pecahkan atas modul-modul dalam berkas terpisah yang tinggal dimasukkan dan diacu oleh template lain saat diperlukan.

Sebagai contoh, umpamakan kita ada modul untuk header bernama modHeader.html yang akan dipakai ulang oleh template hlmLogin.html.

Berikut isi modHeader.html:
<div id="header">
    <h1>Apakabar Dunia</h1>
    <p>Ini header untuk aplikasiku</p>
    <hr />
</div>
dan berikut isi hlmLogin.html yang kita ubah untuk memakai modul header ini:
{% extends "hlmFondasi.html" %}

{% block isi %}
    {% include "modHeader.html" %}

    <h1>Mohon login</h1>
    <form method="post" action="/login">
        Username: <input type="text" name="txtUsername"> <br />
        Password: <input type="password" name="txtPassword"> <br />
        <input type="submit" name="btnSubmit" value="Submit">
    </form>
{% endblock %}
Perhatikan diberkas ada tag {% include "modHeader.html" %} yang memerintahkan Jinja untuk menggantikan tag ini dengan isi dari berkas modHeader.html.

Nah dengan cara ini, jika kita mau mengubah header, misalnya mengubah tulisannya, tinggal mengubah berkas modHeader.html dan kesemua berkas yang memakai modul ini akan ikut berubah tampilannya.

Kembali ke: Belajar Flask

Tuesday, May 8, 2012

Belajar Git: Branch dan Strategi Pembagian Tugas

Jika saya bekerja dalam sebuah tim yang terdiri dari beberapa orang, strategi umum yang saya pakai dalam memakai Git adalah untuk setiap anggota tim membuat branch (=cabang) tersendiri dari kode yang mereka sedang kerjakan. Setelah kode tersebut selesai dibuat, lolos dari segala uji, dan telah melalui code review baru branch ini di merge dengan cabang utama dari aplikasi. Kenapa demikian:
  1. Dengan cara seperti ini maka kita yakin cabang utama (=master) akan berisikan kode yang tanpa kesalahan;
  2. Proses pengembangan tidak mungkin berjalan mulus tanpa masalah; si programmer pasti akan mengalami kesalahan-kesalahan: sintaks, semantik, dll. Dengan memakai branch maka kesalahan-kesalahan sementara ini tidak akan terbawa ke cabang utama tetapi terlokalisir pada cabang si programmer tersebut;
  3. Dengan terlokasirnya kesalahan-kesalahan sementara ini maka akan mengurangi pusingnya anggota tim yang lain yang juga pasti mengalamai kesalahan-kesalahan dalam proses pengembangan mereka. Sudah kode sendiri ada masalah dan ditambah kesalahan orang lain lagi apa tidak tambah pusing begitu?! :)

Apa itu Branch

Jika anda melakukan branch maka anda pada dasarnya membuat suatu cabang dari repository anda. Jika anda membuat perubahan dan melakukan commit pada cabang ini maka ini hanya terjadi pada cabang tersebut dan tidak akan berdampak pada cabang utama maupun cabang-cabang  lain yang mungkin ada. Disamping itu cabang ini nantinya bisa digabung (=merge) dengan cabang-cabang yang lain atau disatukan kembali dengan cabang utama.

Mari kita lihat contoh pemakaiannya.

Langkah-langkah

  1. Buat branch baru bernama cabangku:
    git branch cabangku
    
  2. Lihat branch yang terdaftar pada mesin anda:
    git branch
    
    Keluaran dari perintah ini kira-kira seperti berikut:
     cabangku
    * master
     origin
    
    Perhatikan cabang yang saat ini aktif adalah yang diberi tanda bintang (*), yaitu master pada tampilan di atas.
  3. Pindah ke cabangku:
    git checkout cabangku
    
  4. Buat segala perubahan seperti biasa dan janga lupa untuk melakukan commit pada perubahan-perubahan tersebut. Perhatikan disini saat anda kirim perubahan dari cabang ke server harus disebutkan cabang anda:
    git push origin cabangku
    
  5. Gabungkan cabangku ke cabang utama:
    git checkout master
    git merge cabangku
    
    Perintah pertama bertujuan untuk pindah ke cabang utama kita (master) sedangankan perintah kedua ada permintaan untuk melakukan proses merge itu sendiri.
  6. Nah dalam proses penggabungan ini kemungkinan besar anda akan mengalamai konflik maka untuk mengatasinya tinggal melakukan langkah-langkah yang telah saya uraikan pada tulisan sebelum ini tentang penanganan konflik;
  7. Jika anda mau menghapus cabangku:
    git branch -D cabangku
    

Kembali ke: Belajar Git


Sunday, May 6, 2012

Belajar Git: Merge dan Penangan Konflik

Jika anda bekerja dalam sebuah tim, ada saatnya anda dan rekan anda akan mengubah suatu berkas secara bersamaan. Misalnya pada skenario berikut, yang sering terjadi:
  • Anda mulai mengubah berkas konfigurasi;
  • Sebelum anda selesai membuat perubahan, rekan anda juga melakukan perubahan pada berkas konfigurasi tersebut. Tetapi karena perubahan yang dilakukan rekan hanya sedikit, dianya bisa langsung mengirimkan perubahan tersebut ke server sebelum anda;
  • Sekarang saat anda mau mengirimkan perubahan yang anda lakukan akan muncul konflik dimana berkas dasar yang anda ubah bukan lagi berkas yang ada di server, karena sudah diubah oleh rekan anda;
  • Karena Git tidak cukup cerdas untuk menggabungkan perubahan-perubahan ini maka Git akan akan menyerahkan tugas ini ke anda. Dimana Git akan: menggagalkan proses push anda dengan menampilkan pesan konflik, meminta anda untuk melakukan proses merge (=penggabungan), dan selesai digabungkan baru dicoba untuk di-push lagi. 
Pesan konflik yang muncul saat anda push, kira-kira, akan seperti ini:
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to '<alamat repository anda>'
To prevent you from losing history, non-fast-forward updates 
were rejected
Merge the remote changes (e.g. 'git pull') before pushing 
again. See the 'Note about fast-forwards' section of 
'git push --help' for details.
Disini Git meminta anda untuk pull (=menarik) versi paling terkini dari server, gabungkan dengan perubahan yang anda lakukan, dan push hasil penggabungan ini. Untuk mengingkatkan kembali bagaimana melakukan proses-proses ini bisa membaca kembali saya sebelumnya.

Perhatikan pada saat anda melakukan proses pull, Git akan memberikan pesan kesalahan konflik lagi tetapi sekarang seperti ini:
   5d0a41a..c53d73d  master     -> origin/master
Auto-merging <nama berkas>
CONFLICT (content): Merge conflict in <nama berkas>
Automatic merge failed; fix conflicts and then commit the
result.
Dimana Git berusaha untuk menggabungkan berkas anda secara otomatis (=Auto-merging) tetapi gagal dan meminta anda untuk melakukannya. Untuk menandai mana saja yang menjadi masalah, Git akan menandai, pada berkas yang bermasalah, baris-baris yang mengalami konflik. Tandanya kira-kira seperti ini:
<<<<<<< HEAD
Disini tulisan dari berkas anda sendiri
=======
Disini tulisan dari berkas yang di server
>>>>>>> c53d73dd7227d709d9064beb03f0b926aa6ad526
Perhatikan berkas asli anda tidak hilang dan akan disimpan dengan nama yang sama tetapi diberi akhiran .orig.

Cara paling mudah melakukan penggabungan ya langsung diubah berkas ini dan di-push lagi. Tetapi saya kadang-kadang bingung melihat apa yang perlu digabungkan apalagi kalau perubahannya banyak. Untuk mempermudah proses penggabungan ini saya memakai perangkat lunak Meld yang dapat menampilkan secara visual perbedaan-perbedaan dalam dokumen yang harus saya gabungkan.

Meld

Meld merupakan aplikasi yang dapat mevisualisasikan perbedaan-perbedaan akibat perubahan pada suatu berkas. Cara instalasinya di Ubuntu 12.04 cukup sederhana yaitu dengan langkah:
sudo apt-get install meld

Proses Merge

Cara memakai Meld untuk membantu anda dalam proses penggabungan ini adalah dengan menjalankan perintah berikut:
git mergetool
Jika ada konflik yang harus ditangani maka git akan menanyakan apakah ingin menjalankan aplikasi  Meld, jika iya tinggal tekan enter dan Meld akan dijalan dengan menampilkan berkas yang bermasalah dan yang menimbulkan konflik.

Perhatikan layar sebelah kiri merupakan isi berkas anda, layar sebelah kanan isi berkas di server (tidak kelihatan pada gambar dibawah), dan layar ditengah adalah tempat penggabungan yang perubahannya anda harus lakukan sendiri. Setelah penggabungan selesai, tekan tombol Save untuk menyimpan perubahannya dan pilih menu Quit untuk keluar dari Meld.


Nah setelah selesai melakukan proses penggabungan ini baru perintah commit dan push bisa dijalankan lagi:
git commit
git push origin master

Kembali ke: Belajar Git


Referensi


Saturday, May 5, 2012

Belajar Flask: Template

Perhatikan kembali aplikasi web sederhana yang saya buat pada bagian sebelum ini:
from flask import Flask
app = Flask(__name__)
 
@app.route('/')
def halamanUtama():
    return """<html>
                  <head>
                      <link href="static/css/style.css"
                            rel="stylesheet"
                            type="text/css"></link>
                  </head>
                  <body>    
                      Apakabar dari Flask...
                  </body>    
              </html>"""
 
app.run(debug=True, host="127.0.0.1", port=8080)

Nah bayangkan bagaimana panjangnya dan rumitnya program ini seandainya halaman yang hendak dibangkitkan lebih rumit lagi; penuh berisikan berbagai: div, span, gambar, styles, javascript, dll. Pasti program tersebut akan akan sangat panjng dan sangat rumit untuk dibuat. Nah untuk mengurangi kerumitan inilah Template diciptakan.

Template

Dalam Bahasa Inggris arti kata Template adalah cetakan. Dalam konteks aplikasi web, Template juga diartikan sebagai cetakan tetapi disini cetakan untuk suatu halaman web yang hendak dibangkitkan oleh suatu aplikasi web. Disini daripada mengkodekan halaman yang perlu dibangkitan, seperti contoh di atas, suatu aplikasi web hanya perlu: memilih template yang sesuai, ubag beberapa informasi yang perlu ditampilkan pada template tersebut, dan kirimkan hasil perubahan ini ke browser untuk ditampilkan. Proses ini jauh lebih sederhana baik dari segi pemrograman maupun dari segi proses di aplikasi web tersebut.

Perlu diketahui Template bukan konsep yang berasal dari Flask tetapi sudah luas diterapkan pada framework-framework untuk aplikasi web sebelumnya, seperti: JSP, ASP, dan PHP.

Jinja: Template-nya Flask

Flask sendiri tidak memiliki fasilitas Template secara langsung tetapi mendayagunakan salah satu Template Engine berbasis Python yang telah luas dipergunakan, yaitu: Jinja. Untuk mengetahui siapa-siapa saja yang memakai Jinja anda bisa lihat di daftar yang ada di situsnya Jinja.

Template di Jinja tidak lebih dari halaman HTML biasa tetapi yang telah disisipkan beberapa tanda khusus (=markup) untuk memberitahukan bahwa bagian tersebut harus disesuaikan atau harus diisikan dengan informasi tertentu. Karena Template tidak ada bedanya dengan berkas HTML maka anda bisa saja meminta seseorang yang mahir membuat halaman web untuk membuat halamannya untuk anda tanpa orang tersebut perlu mengetahui sedikitpun tentang Jinja, Flask, dan Python. Berkas HTML halaman tersebut kemudian anda ubah dan sisipi dengan tanda-tanda khusus tersebut pada tempat yang perlu dilakukan penyesuaian.

Karena tidak ada perbedaan antara berkas HTML biasa dan Template, bagaimana Flask bisa membedakannya? Cukup sederhana, semua berkas Template ditempatkan didalam direktori yang diberi nama templates! :)

Mari kita lihat penerapan konsep ini melalui sebuah contoh yang sederhana.

Contoh Sederhana

Umpamanya saya mau membangkitkan halam web seperti ini:
<html>
    <head>
        <title>Halaman apakabar...</title>
    </head>
    <body>
        <h1>Apakabar Rahmad Dawood?</h1>
    </body>
</html>

Namun saya maunya nama yang muncul bukan Rahmad Dawood tetapi bisa diubah-ubah oleh program sesuai kebutuhan nantinya. Ini berarti nama tersebut harus kita tandai sebagai sesuatu yang perlu diisi saat halaman ini dibangkitkan. Caranya seperti ini:
<html>
    <head>
        <title>Halaman apakabar...</title>
    </head>
    <body>
        <h1>Apakabar {{ namaku }}?</h1>
    </body>
</html>

Perhatikan disini, saya telah menggantikan tulisan "Rahmad Dawood" dengan "{{ namaku }}" yang merupakan tanda khusus di Jinja untuk:
  1. Mencari variable yang bernama namaku
  2. Mengambil nilainya;
  3. Tampilkan nilai tersebut pada lokasi tersebut.
Jika namaku nilailnya saya tetapkan sebagai "Rahmad Dawood"  maka HTML yang dibangkitkan akan sama persis dengan HTML asli saya.

Sekarang simpan HTML yang telah kita ubah ini ke dalam directory bernama templates dan berikan nama index.html. Ingat, templates merupakan subdirectory di dalam directory aplikasi kita.

Untuk membangkitkan halaman ini dari Flask bagaimana caranya? Juga cukup sederhana dan bisa dilihat pada contoh berikut:
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def halamanApakabar():
    return render_template("index.html", namaku="Rahmad Dawood")

app.run(debug=True, host="127.0.0.1", port=8080)

Perhatikan pada program ini, saya tidak lagi mengembalikan tulisan HTML murni (seperti halnya pada contoh di awal tulisan ini) melainkan memanggil fungsi render_template yang akan membangkitkan halaman HTML berdasarkan template yang namanya saya berikan, yaitu: index.html. Perhatikan lagi saya meminta fungsi render_template untuk membuat sebuah variable bernama namaku dan menyimpan nilai "Rahmad Dawood" di dalamnya. Fungsi ini kemudian akan mengirimkan variable ini ke proses yang akan mengolah template ini  untuk dipergunakan dalam proses pembangkitan halaman HTML tersebut.

Sekarang simpan berkas ini dan berikan nama apakabar.py dan mari kita coba aplikasinya. Caranya sama seperti program sederhana kita sebelumnya, yaitu dengan mengetikan perintah berikut ke dalam terminal:
python apakabar.py
Membuka browser dan tuju ke alamat:
http://127.0.0.1:8080

Kembali ke: Belajar Flask


Reference

Friday, May 4, 2012

Belajar Flask: Penanganan Berkas-berkas Statis

Tidak semua berkas dalam suatu aplikasi web akan berupa suatu program. Hampir semua aplikasi web pasti akan memerlukan dan mengacu kepada berbagai berkas statis. Misalnya untuk keperluan tampilan, suatu aplikasi web akan mengacu kepada berkas-berkas: gambar, video, audio, CSS, Flash, dan/atau javascript. Kesemua berkas ini bersifat statis karena tidak akan berubah sepanjang umur aplikasi ini.

Karena alasan efisiensi, penanganan berkas-berkas statis pada suatu aplikasi web biasanya diserahkan kepada web server, seperti: Apache. Kenapa demikian? Karena memang dari awalnya Web Server dirancang untuk bisa dengan sangat efisien melayani berbagai permintaan akan berkas-berkas statis. Jadi, daripada pusing-pusing merancang dan membuat ulang proses ini,  bukankah lebih baik memanfaatkan alat yang memang sudah diyakini keampuhannya? Ini filosofi yang diambil Flask. Walaupun Flask sendiri bisa melayani permintaan berkas-berkas statis tetapi saat aplikasi dirilis ke umum disarankan sebaiknya permintaan tersebut diserahkan saja ke Web Server. [Catatan: Nanti akan saya tunjukkan cara menghubungkan Flask dengan Apache.]

Untuk menandai mana berkas-berkas statis, Flask mempunyai cara yang sangat sederhana, yaitu: cukup dengan membuat sebuah direktori bernama static dan tempatkan semua berkas statis anda didalamnya!

Sebagai contoh, umpamanya kita hendak membangkitkan berkas HTML berikut:
<html>
  <head>
    <link href="static/css/style.css" 
          rel="stylesheet" 
          type="text/css"></link>
  </head>
  <body>    
    Apakabar dari Flask...
  </body>    
</html>
Perhatikan disini  berkas HTML ini memerlukan sebuah berkas css yang diberi nama style.css dan berada didalam directory static/css. Umpamakan lagi isi berkas css ini hanya membuat warna tulisan menjadi biru, seperti berikut:
body {
    color:blue;
}

Langkah-langkah yang kita lakukan:
  1. Tuju ke direktori aplikasi kita dan buatkan kedua direktori yang kita butuhkan:
    mkdir static
    mkdir static/css
    
  2. Di dalam directory static/css buatkan berkas bernama style.css yang berisikan kode css yang kita kehendaki:
    body {
        color:blue;
    }
    
  3. Sekarang kita akan buatkan berkas aplikasi Flask-nya, yang kita beri nama statis.py:
    from flask import Flask
    app = Flask(__name__)
     
    @app.route('/')
    def halamanUtama():
        return """<html>
                      <head>
                          <link href="static/css/style.css"
                                rel="stylesheet"
                                type="text/css"></link>
                      </head>
                      <body>    
                          Apakabar dari Flask...
                      </body>    
                  </html>"""
     
    app.run(debug=True, host="127.0.0.1", port=8080)
  4. Jalankan aplikasi kita ini dengan mengetikan perintah berikut di dalam terminal:
    python statis.py
  5. Sekarang buka browser dan tuju ke alamat:
    http://127.0.0.1:8080
    Perhatikan tulisan yang muncul akan berwana biru.

Kembali ke: Belajar Flask