Catatan Percakapan BlankOn Riset 1 Oktober 2012

Lokakarya Dasar-dasar jQuery

Pemateri: Rabitya, alias Fitra Aditya

Waktu: mulai 09:14:45 PM

Tempat: with #blankon-riset

Bahan bacaan: http://fitraditya.files.wordpress.com/2012/10/kelas_daring_blankon_jquery.pdf

(08:12:20 PM) princeofgiri: mulai saja
(08:12:25 PM) princeofgiri: yang ikut di sini ntar kasih PR
(08:12:26 PM) princeofgiri: :D
(08:12:39 PM) mijortsa: wah
(08:12:42 PM) princeofgiri: minggu depan harus dikumpulkan
(08:12:48 PM) mijortsa: ngintip aja
(08:12:48 PM) Rabitya: kayak'e orang2 lagi pada kena sindrom 'I hate monday'
(08:12:55 PM) princeofgiri: yang udah gabung gak boleh kabur
(08:13:11 PM) You are now known as icik2
(08:13:27 PM) princeofgiri: atau tunggu setelah dokumentasi
(08:13:36 PM) dotovr: wah PR nya ntar tak kasih ke icik2 :D
(08:13:46 PM) Rabitya: princeofgiri: boleh deh
(08:13:52 PM) princeofgiri: :D
(08:14:03 PM) Rabitya: itu untuk PR sudah saya siapin di halaman belakang yang studi kasus
(08:14:04 PM) Rabitya: :D
(08:14:16 PM) icik2: id ngintip pak, pakai icik2
(08:14:27 PM) princeofgiri: Rabitya, berarti yang disini harus ngerjakan PR
(08:14:39 PM) princeofgiri: gak ada ampun
(08:15:00 PM) \*\*\*icik2 kabuuuuuur
(08:15:06 PM) \*\*\*priyess lapo aku mlebu kene... :)
(08:16:17 PM) setiaji [~setiaji@39.192.105.198] entered the room.
(08:16:29 PM) setiaji: selamat malam
(08:16:53 PM) adzymaniac [724f1cac@gateway/web/freenode/ip.114.79.28.172] entered the room.
(08:17:05 PM) adzymaniac: Rabitya: Jadi lokakarya pak?
(08:17:07 PM) ajid left the room (quit: Read error: Connection reset by peer).
(08:17:17 PM) princeofgiri: nah kan
(08:17:22 PM) princeofgiri: ketambahan yang mau ngerjakan PR
(08:18:06 PM) setiaji: kita jadi lokakarya jQuery kah ?
(08:18:09 PM) \*\*\*priyess onok kancane...
(08:18:20 PM) adzymaniac: princeofgiri: Yang tadi pagi bilang "Ikut pantau ;P" ditwit mana?
(08:18:31 PM) Rabitya: jadi, nungguin dokumentasi dulu kata bosnya
(08:18:42 PM) setiaji: ooo, ok pak
(08:18:58 PM) princeofgiri: adzymaniac, hajar saja itu orang desa #eh
(08:22:00 PM) priyess: lah di kanal #blankon ga ada rapat gitu...
(08:22:18 PM) icik2: pindah aja pak
(08:22:45 PM) icik2: tim dokumentasi lagi nyari kapur tulis gak nemu2
(08:24:51 PM) priyess: tak tinggal ngrumpi karo pak dotovr...
(08:25:29 PM) dotovr: wah ini rapatnya 3 lokasi yang berbeda :D
(08:25:52 PM) icik2: dotovr: saya dapat 3 undangan pak
(08:26:00 PM) adzymaniac: satu lagi dimana pak?
(08:26:17 PM) icik2: 1 lagi gak di tunjukin tempatnya
(08:26:17 PM) dotovr: icik2 adzymaniac satu lagi PM :D
(08:26:22 PM) icik2: wkwkwk
(08:26:41 PM) adzymaniac: Wah
(08:27:03 PM) princeofgiri: ambil posisi anti migren
(08:27:04 PM) princeofgiri: :D princeofgiri priyess
(08:29:39 PM) embarpasaribu [b4f50cca@gateway/web/freenode/ip.180.245.12.202] entered the room.
(08:30:07 PM) Rabitya: mulai jam 9 aja apa yak?
(08:30:35 PM) adzymaniac: embarpasaribu: Halo pak
(08:30:50 PM) embarpasaribu: selamat malam
(08:31:14 PM) princeofgiri: ok
(08:31:24 PM) embarpasaribu: acaranya dah habis?
(08:31:33 PM) princeofgiri: jam 9 langsung mulai
(08:31:49 PM) adzymaniac: embarpasaribu: Kita ngobrol PR kemarin dulu yuk pak
(08:32:27 PM) embarpasaribu: boleh
(08:32:46 PM) embarpasaribu: jadi pake bootstrap ?
(08:32:50 PM) adzymaniac: embarpasaribu: Bapak nyuprek2nya sampai mana?
(08:32:53 PM) adzymaniac: Jadi pak
(08:33:02 PM) adzymaniac: embarpasaribu: https://github.com/adzymaniac/blankon-i
(08:33:16 PM) adzymaniac: Barusan saya sesuaikan dengan struktur yang diajukan pak diorahman
(08:33:48 PM) embarpasaribu: aku yang di jsfiddle kemarin
(08:34:18 PM) \*\*\*adzymaniac Bentar pak, saya buka lagi :D
(08:34:53 PM) embarpasaribu: dilaptopku udah sampe extended
(08:35:22 PM) adzymaniac: embarpasaribu: Tadi saya nyoba bikin Popup pake kinetic juga, ee tapi kalo lewat dari besar kanvas ndak nongol dia
(08:36:44 PM) embarpasaribu: pake event click di kinetic ya ?
(08:37:24 PM) adzymaniac: Iya, tapi kurang combobox buat pilih format partisi
(08:37:42 PM) embarpasaribu: aku masih di hp nih
(08:37:52 PM) embarpasaribu: ntar aku coba lihat deh
(08:38:00 PM) adzymaniac: embarpasaribu: Oooh, oke pak
(08:38:12 PM) embarpasaribu: btw. channel ini ada lognya kan ?
(08:38:39 PM) adzymaniac: Wah sepertine cuman #blankon yang di log
(08:38:42 PM) adzymaniac: Nanti saya salinkan
(08:39:09 PM) embarpasaribu: thankyou ji
(08:40:03 PM) embarpasaribu: aku pindah laptop dulu
(08:40:22 PM) embarpasaribu left the room (quit: ).
(08:41:31 PM) embarpasaribu [~embar@180.245.12.202] entered the room.
(08:43:05 PM) setiaji: jam 9 ya, ok d makan dulu...
(08:45:00 PM) adzymaniac left the room (quit: Ping timeout: 245 seconds).
(08:45:04 PM) dotovr left the room (quit: Quit: Page closed).
(08:45:54 PM) dotovr [dfffe20a@gateway/web/freenode/ip.223.255.226.10] entered the room.
(08:46:23 PM) somat [~so@180.243.234.100] entered the room.
(08:57:43 PM) xunilresu [~xunilresu@subs05-223-255-224-11.three.co.id] entered the room.
(08:58:05 PM) xunilresu left the room (quit: Read error: Connection reset by peer).
(09:01:13 PM) xunilresu_ [dfffe00b@gateway/web/freenode/ip.223.255.224.11] entered the room.
(09:02:15 PM) Rabitya: mau dimulai kah?
(09:02:20 PM) Rabitya: atau menunggu?
(09:03:14 PM) embarpasaribu: adjinya belum tiba
(09:03:15 PM) xunilresu_: eh belum mulai tho
(09:03:19 PM) xunilresu_: ?
(09:03:39 PM) embarpasaribu: pak mdamt ndak hadir ya ?
(09:05:59 PM) Rabitya: embarpasaribu: anaknya pak mdamt masuk RS
(09:06:03 PM) Rabitya: jadinya ndak bisa hadir
(09:06:10 PM) embarpasaribu: oh, belum sembuh ya
(09:07:18 PM) setiaji: sakit apa pak
(09:07:24 PM) setiaji: anaknya pak mdamt ?
(09:07:26 PM) embarpasaribu: kalo memang pesertanya udah pada hadir semua, dimulai aja pak
(09:11:17 PM) Rabitya: baiklah kita mulai saja
(09:11:27 PM) Rabitya: sebelum semua pesertanya terlelap
(09:11:29 PM) Rabitya: :)
(09:12:02 PM) Rabitya: materi malam ini bisa diambil di sini
(09:12:03 PM) Rabitya: http://fitraditya.files.wordpress.com/2012/10/
kelas_daring_blankon_jquery.pdf
(09:12:41 PM) setiaji: ok
(09:13:14 PM) embarpasaribu: sip
(09:13:42 PM) Rabitya: sebelum memulai lokakarya pada malam hari ini, marilah
sejenak kita berdoa menurut agama dan keyakinan masing2
(09:13:47 PM) Rabitya: berdoa dipersilakan
(09:14:27 PM) aftian [~aftian@125.164.59.141] entered the room.
(09:14:27 PM) Rabitya: selesai
(09:14:31 PM) Rabitya: =====================================================
(09:14:45 PM) Rabitya: lokakarya dasar-dasar jQuery dimulai
(09:14:46 PM) aftian: eah
(09:15:00 PM) Rabitya: selamat datang juragan aftian
(09:15:01 PM) Rabitya: :)
(09:15:10 PM) aftian: Rabitya: selamat datang juga
(09:15:34 PM) Rabitya: bagi yang belum kenal, perkenalkan saya /me
(09:15:47 PM) Rabitya: Rabitya, alias Fitra Aditya
(09:16:15 PM) Rabitya: akhir2 ini jarang muncul di BlankOn, karena ada hajatan besar :D
(09:16:29 PM) setiaji: :D apa tu pak
(09:16:45 PM) Rabitya: tapi bersyukur, hajatannya berjalan lancar, jadi bisa meluangkan waktu kembali di BlankOn
(09:16:49 PM) icik2: manten baru ya pak :D
(09:17:01 PM) Rabitya: he...3x...
(09:17:29 PM) setiaji: wah semoga diberkahi pak
(09:17:30 PM) setiaji: :D
(09:17:56 PM) embarpasaribu: alhamdulillah
(09:18:06 PM) Rabitya: malam hari ini saya mendapatkan tugas dari pak mdamt untuk memberikan lokakarya mengenai jQuery
(09:18:11 PM) \*\*\*priyess priyess, calon pendekar yang ngambek ga kebagian kaosnya pak aftian :D
(09:18:46 PM) Rabitya: setiaji, embarpasaribu, terima kasih doanya :)
(09:19:07 PM) Rabitya: saya yakin sebagian di sini sudah ada yang mahir menggunakan jQuery
(09:19:24 PM) Rabitya: jadi malam ini lebih tepatnya kalau disebut dengan "belajar bareng"
(09:19:35 PM) Rabitya: mirip gaya anak kuliahan gitu
(09:19:37 PM) Rabitya: :D
(09:20:24 PM) Rabitya: sebenarnya apa itu jQuery
(09:20:43 PM) Rabitya: ada yang menyebutkan bahwa jQuery itu merupakan framework
(09:20:59 PM) Rabitya: ada lagi yang menyebutkan bahwa jQuery itu adalah library
(09:21:12 PM) Rabitya: keduanya sama-sama benar
(09:21:33 PM) Rabitya: secara mudahnya
(09:21:43 PM) Rabitya: jQuery merupakan sekumpulan fungsi siap pakai
(09:22:19 PM) Rabitya: misalnya, fungsi untuk slide up dan slide down
(09:22:33 PM) Rabitya: fungsi untuk mengambil nilai dari suatu input teks
(09:22:36 PM) Rabitya: dan sebagainya
(09:23:05 PM) Rabitya: kalau kita membuat fungsi tersebut dari scratch, atau dari awal
(09:23:18 PM) Rabitya: tentu membutuhkan waktu, pikiran, tenaga, dan juga cemilan
(09:23:30 PM) Rabitya: sesuai dengan slogan jQuery
(09:23:36 PM) Rabitya: write less, do more
(09:24:02 PM) Rabitya: karena siap pakai, kita tidak perlu berpanjang-panjang ria untuk membuat fungsi yang hendak kita pakai
(09:24:17 PM) Rabitya: lalu kenapa harus jQuery
(09:24:55 PM) Rabitya: secara popularitas, jQuery lebih populer dibandingkan dengan javascript lainnya, misalnya prototype, mootools, YUI, dan sebagainya
(09:25:30 PM) Rabitya: selain itu juga, ukuran berkas jQuery lebih kecil dibandingkan dengan sejenisnya
(09:25:33 PM) fbrn [~aris@202.152.204.186] entered the room.
(09:25:51 PM) Rabitya: kalau google dan microsoft saja pakai jQuery, masa' BlankOn gak mau pakai juga
(09:25:52 PM) Rabitya: :)
(09:26:33 PM) Rabitya: bagaimana cara kerja jQuery
(09:26:50 PM) Rabitya: ini dia yang membuat jQuery relatif lebih mudah dibandingkan dengan framework lainnya
(09:27:01 PM) Rabitya: \* ngucapin selamat datang kepada pak fbrn
(09:27:08 PM) adzymaniac [~adzy@125.163.246.68] entered the room.
(09:27:25 PM) Rabitya: karena, jika dibahasamanusiakan, jQuery memiliki prinsip kerja
(09:27:29 PM) Rabitya: 1. temukan
(09:27:32 PM) Rabitya: 2. kerjakan
(09:27:52 PM) Rabitya: atau dalam pseducodenya
(09:28:04 PM) Rabitya: $(selector).action()
(09:29:11 PM) Rabitya: cara menggunakannya pun cukup mudah
(09:29:43 PM) Rabitya: yang pertama-tama kita lakukan adalah menempelkannya pada halaman web kita
(09:30:14 PM) Rabitya: menempelkannya sebaiknya di antara <head> dan </head>
(09:30:14 PM) Rabitya: misalnya
(09:30:46 PM) Rabitya: <script src="jquery.js"></script>
(09:30:52 PM) Rabitya: kemudian
(09:31:17 PM) Rabitya: di bawahnya kita inisiasi, bahwa halaman yang kita buatsiap untuk menjalankan jQuery
(09:31:42 PM) Rabitya: inisiasinya biasanya berupa
(09:31:51 PM) Rabitya: $(document).ready(function(){
(09:31:56 PM) Rabitya: ... {kode di sini} ...
(09:31:58 PM) Rabitya: });
(09:32:16 PM) Rabitya: ada yang tahu kenapa kita perlu menginisiasi kode di
atas?
(09:33:11 PM) Rabitya: ...
(09:33:25 PM) setiaji: :D blom tahu pak
(09:33:57 PM) \*\*\*priyess garuk2 kepala
(09:34:35 PM) Rabitya: inisiasi awalan di atas diperlukan agar semua fungsi
yang kita tulis menggunakan jQuery hanya dijalankan pada saat seluruh halaman
telah berhasil di-load
(09:35:04 PM) Rabitya: jadi kalau progress bar di web browser masih muter2,
jQuery yang ada tidak akan dijalankan
(09:36:20 PM) Rabitya: nah, sekarang kita lihat contoh sederhana di kode_2.html
(09:37:08 PM) Rabitya: oya, selain pdf tadi, ada juga contoh kode yang bisa
diunduh di http://fitraditya.co.de/lumbung/kelas_daring_blankon_jquery.zip
(09:37:55 PM) Rabitya: seperti yang telah saya sebutkan tadi, jQuery memiliki
prinsip kerja "temukan" dan "kerjakan"
(09:38:30 PM) Rabitya: contohnya tadi
(09:38:38 PM) Rabitya: $(selector).action()
(09:39:04 PM) Rabitya: selector bisa berupa #id, .class, atau tag html lainnya
(09:40:22 PM) Rabitya: sedangkan action bisa berupa event, function, atau
fungsi yang kita buat sendiri
(09:40:29 PM) Rabitya: contoh selector
(09:41:16 PM) Rabitya: $("#idku")
(09:41:29 PM) Rabitya: sedangkan contoh action
(09:41:32 PM) Rabitya: .hide()
(09:41:47 PM) Rabitya: pada berkas kode_2.html
(09:42:10 PM) Rabitya: di sana dicontohkan penggunaan selector, event, dan
effect function
(09:42:35 PM) Rabitya: $("button").click(function(){
(09:42:36 PM) Rabitya: $("p").hide();
(09:42:36 PM) Rabitya: });
(09:42:53 PM) Rabitya: jika diartikan dalam bahasa manusia, kira-kira seperti
ini
(09:42:55 PM) Rabitya: :
(09:43:37 PM) sigid [~sigid@114.79.3.172] entered the room.
(09:43:38 PM) istana [~rote@103.3.220.41] entered the room.
(09:43:51 PM) Rabitya: cari tag <button>, apabila diklik, lakukan aksi berikut
(09:43:52 PM) \*\*\*sigid intip-intip
(09:43:55 PM) istana left the room.
(09:44:07 PM) istana [~rote@103.3.220.41] entered the room.
(09:44:12 PM) Rabitya: cari tag <p>, kemudian sembunyikan
(09:44:20 PM) Rabitya: nah, kira2 begitu maksudnya
(09:44:44 PM) Rabitya: $("button").click(function(){ <= ini adalah event
(09:45:05 PM) Rabitya: $("p").hide(); <= ini adalah action
(09:45:16 PM) Rabitya: jadi apabila terjadi ini, maka lakukan itu
(09:45:29 PM) Rabitya: sampai di sini aman?
(09:45:42 PM) Rabitya: \* berharap semoga tidak ada yang terlelap
(09:45:45 PM) Rabitya: :D
(09:45:48 PM) yudha [~yudha@112.215.65.174] entered the room.
(09:46:01 PM) \*\*\*icik2 kadir ee.. hadir pak
(09:46:12 PM) You are now known as mijortsa
(09:46:23 PM) princeofgiri left the room (quit: Ping timeout: 245 seconds).
(09:46:24 PM) setiaji: 86 pak
(09:46:28 PM) setiaji: :D
(09:47:53 PM) Rabitya: selain click(), event lainnya ada change(), mouseover(),
dan lain sebagainya
(09:48:24 PM) Rabitya: kalau untuk pembuatan form, biasanya yang sering dipakai
itu click() dan change()
(09:48:41 PM) Rabitya: misalkan untuk validasi input, atau trigger action
(09:48:53 PM) somat left the room.
(09:49:08 PM) sigid left the room (quit: Quit: Leaving).
(09:49:33 PM) \*\*\*priyess ngacung mau tanya
(09:49:37 PM) Rabitya: nanti di akhir akan ada PR
(09:49:42 PM) Rabitya: ya pak priyess?
(09:50:06 PM) priyess: semua fungsi diletakkan di head ya pak
(09:50:26 PM) priyess: lain dengan javascript yang bisa diletakkan di body
(09:51:14 PM) Rabitya: priyess: sebenarnya bisa diletakkan di mana saja pak
(09:51:43 PM) Rabitya: tergantung kebutuhan
(09:52:26 PM) Rabitya: cuma kalau dalam pemrograman, ada istilah aksesor dan
predesor
(09:52:58 PM) guspur [guspur@trekweb/user/guspur] entered the room.
(09:53:07 PM) Rabitya: untuk fungsi biasanya aksesor, artinya dia harus
didefinisikan di awal sebelum dipanggil
(09:53:19 PM) Rabitya: eh, maaf, maksudnya predesor
(09:54:05 PM) Rabitya: begitu kira2 pak priyess
(09:54:43 PM) \*\*\*priyess manggut2 seakan2 paham
(09:55:06 PM) priyess: lanjut pak
(09:55:14 PM) mijortsa: Rabitya: berarti bisa juga dengan script terpisah pak ?
(09:55:26 PM) Rabitya: mijortsa: boleh pak
(09:55:41 PM) runtah17 [~runtah17@114.79.28.195] entered the room.
(09:55:56 PM) \*\*\*dotovr nyimak dari tadi belum tau kemana
(09:56:15 PM) Rabitya: untuk halaman yang memiliki fungsi dari jQuery yang
banyak, sangat disarankan untuk diletakkan dalam skrip terpisah
(09:56:54 PM) Rabitya: alasannya, agar peramban web bisa meng-cache
(09:57:13 PM) Rabitya: tapi kalau bahasan ini, topiknya tentang optimisasi web
(09:57:16 PM) Rabitya: :)
(09:57:38 PM) mijortsa: Rabitya: bagaimana cara memanggilnya pak misalnya dari
sebuah progam/aplikasi
(09:57:58 PM) Rabitya: misalnya pak
(09:58:07 PM) Rabitya: dari berkas kode_2.html
(09:58:10 PM) mijortsa: misalnya seperti di manokwari pak
(09:58:18 PM) Rabitya: kita bikin
(09:58:42 PM) Rabitya: baris ini menjadi berkas terpisah
(09:58:45 PM) Rabitya: $(document).ready(function(){
(09:58:45 PM) Rabitya: $("button").click(function(){
(09:58:45 PM) Rabitya: $("p").hide();
(09:58:45 PM) Rabitya: });
(09:58:45 PM) Rabitya: });
(09:58:52 PM) samsul [~samsul@unaffiliated/samsul] entered the room.
(09:58:57 PM) Rabitya: kita simpan menjadi kodeku.js
(09:59:06 PM) Rabitya: nanti kita tinggal sisipkan pak
(09:59:09 PM) Rabitya: menjadi
(09:59:24 PM) Rabitya: <script src="kode.js"></script>
(09:59:42 PM) Rabitya: eh, salah, harusnya <script src="kodeku.js"></script>
(09:59:55 PM) Rabitya: kelebihannya pak
(10:00:31 PM) Rabitya: kalau misalkan ada halaman lain yang memiliki fungsi
sama, kita tinggal panggil berkasnya, jadi ndak perlu nulis lagi di bagian
<head>-nya
(10:00:44 PM) Rabitya: kira2 seperti itu mijortsa
(10:01:07 PM) mijortsa: Rabitya: paham pak :D sedikit #angan2
(10:02:12 PM) Rabitya: nanti kalau mau bikin faraid tinggal diimplementasikan
(10:02:13 PM) Rabitya: :D
(10:02:19 PM) Rabitya: baik, kita lanjut
(10:02:41 PM) Rabitya: tadi kita berkenanalan dengan fungsi hide()
(10:02:59 PM) aftian: icick2
(10:03:00 PM) aftian: :D
(10:03:02 PM) Rabitya: sesuai dengan artinya dalam bahasa indonesia, fungsi ini
gunanya untuk menyembunyikan
(10:03:15 PM) Rabitya: contohnya di kode_2.html
(10:03:49 PM) Rabitya: kalau dijalankan, fungsi yang ada cuma bisa
menyembunyikan, tapi tidak bisa memunculkannya lagi
(10:03:57 PM) Rabitya: istilahnya, sulap gagal
(10:04:32 PM) Rabitya: nah, agar bisa menyembunyikan + memunculkannya lagi,
kita bisa menggunakan fungsi toggle()
(10:04:41 PM) Rabitya: contohnya ada di kode_3.html
(10:05:19 PM) Rabitya: kalau dipencet, bisa menyembunyikan, dan juga bisa
memunculkannya lagi
(10:05:25 PM) Rabitya: jadi sudah bisa main sulap
(10:05:56 PM) mijortsa: aftian: bisa bolak-balik amira-rumah :D
(10:06:35 PM) Rabitya: selain hide() dan toggle(), masih ada fungsi lainnya
(10:06:51 PM) Rabitya: yang kalau dijelaskan satu2, saya bisa bolos kerja
sampai minggu depan
(10:07:01 PM) yudha left the room (quit: Quit: Leaving).
(10:07:01 PM) Rabitya: jadi selengkapnya bisa dilihat di sini
(10:07:05 PM) yht [~yht@180.244.13.131] entered the room.
(10:07:15 PM) Rabitya: http://api.jquery.com/category/effects/
(10:07:32 PM) Rabitya: sekarang kita beralih ke callback function
(10:08:14 PM) Rabitya: agar lebih memahami apa itu callback function, silakan
lihat kode_4.html
(10:08:47 PM) Rabitya: kalau tulisannya dipencet, sliding dan kotaknya jalan
secara bersamaan
(10:09:15 PM) Rabitya: nah loh, lalu bagaimana jika seandainya kita ingin
menjalankannya secara bergantian
(10:09:24 PM) Rabitya: sliding dulu, baru kotaknya jalan
(10:10:20 PM) Rabitya: untuk itulah kita menggunakan callback function
(10:10:51 PM) Rabitya: seperti pada kode_5.html
(10:11:04 PM) Rabitya: terlihat bahwa animasi berjalan secara berurutan
(10:11:05 PM) runtah17: Maaf pak saya baru, untuk liat kode_4.hml dmn?
(10:11:15 PM) Rabitya: oh, iya
(10:11:22 PM) Rabitya: pak runtah bisa mendapatkannya di sini
(10:11:39 PM) Rabitya: http://fitraditya.co.de/lumbung/
kelas_daring_blankon_jquery.zip
(10:11:51 PM) Rabitya: untuk berkas pdf-nya sudah dapat belum pak runtah17?
(10:12:15 PM) Rabitya: kalau belum bisa difotokopi pinjam punya teman sebelah
(10:12:15 PM) Rabitya: :)
(10:12:21 PM) samuderavoidlabs [~shellc0de@180.251.46.38] entered the room.
(10:12:30 PM) samuderavoidlabs: assalamualaikum wr.wb
samsul samuderavoidlabs
(10:12:45 PM) Rabitya: samuderavoidlabs: wa'alaykum salam
(10:12:51 PM) samuderavoidlabs: :)
(10:13:01 PM) Rabitya: sampai di sini aman?
(10:13:19 PM) setiaji: pak, tanya
(10:13:20 PM) runtah17: Ok pak, thanks :) lanjut nyimak lg :)
(10:13:33 PM) Rabitya: ya pak setiaji?
(10:13:58 PM) setiaji: callbacknya itu berurutan ya dijalankannya ?
(10:15:44 PM) Rabitya: setiaji: callback itu maksudnya
(10:15:59 PM) aftian: istana: mijortsa guspur mohon di log pak
(10:16:03 PM) Rabitya: mm, saya analogikan begini pak
(10:16:33 PM) guspur: wah saya dak ikut dari awal
(10:16:35 PM) Rabitya: kan kalau kode program dijalankannya per baris kan ya,
betul pak setiaji?
(10:16:41 PM) setiaji: ya pak
(10:16:46 PM) Rabitya: aftian: nanti biar saya yang log pak
(10:16:55 PM) Rabitya: nah, analoginya begini
(10:17:02 PM) mijortsa: aftian: baik pak, ini keren :D dosene manten anyar :D
(10:17:05 PM) aftian: Rabitya: sakalangkong kak
(10:17:09 PM) Rabitya: misalkan ada adi dan budi
(10:17:32 PM) \*\*\*guspur maaf kok gak ada undangan pak rabitya ya
(10:17:32 PM) Rabitya: adi dan budi dipanggil oleh pak edi
(10:18:39 PM) Rabitya: karena adi urutan absennya pertama, jadi yang dipanggil
terlebih dahulu itu si adi
(10:18:47 PM) istana left the room.
(10:19:34 PM) Rabitya: logikanya, ketika pak edi ingin memangil si budi,
tentunya pak edi menyelesaikan urusannya terlebih dahulu dengan adi
(10:19:43 PM) Rabitya: barulah kemudian memanggil si budi
(10:20:30 PM) Rabitya: (dalam hal ini) gak mungkin pak edi berbicara langsung
ke dua orang sekaligus antara adi dan budi
(10:20:43 PM) Rabitya: sama seperti callback function tadi
(10:21:14 PM) Rabitya: gunanya untuk memastikan bahwa fungsi di atasnya benar2
telah dikerjakan, barulah memanggil fungsi di bawahnya
(10:21:47 PM) Rabitya: seperti itu pak setiaji
(10:21:57 PM) Rabitya: analoginya malah mbulet
(10:21:58 PM) Rabitya: :D
(10:22:21 PM) setiaji: :D masuk pak
(10:22:40 PM) setiaji: yg berperan sbg jquerynya, pak edi ya pak ?
(10:23:18 PM) Rabitya: bisa dibilang seperti itu pak
(10:23:29 PM) Rabitya: aman pak setiaji?
(10:23:53 PM) setiaji: lanjut... :D
(10:23:59 PM) Rabitya: callback function ini sering dipakai untuk menghindari
looping biasanya
(10:24:03 PM) Rabitya: baik, lanjut
(10:24:29 PM) Rabitya: sekarang tentang HTML manipulation
(10:24:40 PM) Rabitya: semuanya punya facebook kan?
(10:25:13 PM) Rabitya: kalau kita posting komentar di facebook, otomatis
komentar kita langsung muncul tanpa perlu me-load halaman, bukan?
(10:25:27 PM) Rabitya: itulah yang disebut dengan HTML manipulation
(10:25:33 PM) samsul left the room (quit: Ping timeout: 245 seconds).
(10:25:55 PM) Rabitya: dengan HTML manipulation, kita menambah, menyisipkan,
bahkan menghapus elemen html pada halaman web
(10:26:48 PM) Rabitya: contohnya pada kode_6.html dan kode_7.html
(10:27:29 PM) Rabitya left the room.
(10:27:46 PM) yht: weleh
(10:27:49 PM) yht: metu
(10:28:02 PM) mijortsa: wah.. diseret bojone iki :D
(10:28:17 PM) Rabitya [~Acer@180.252.145.194] entered the room.
(10:28:22 PM) yht: :D
(10:28:25 PM) Rabitya: maaf
(10:28:30 PM) Rabitya: gak sengaja kena tutup
(10:28:32 PM) Rabitya: :D
(10:28:45 PM) Rabitya: lanjut lagi
(10:28:50 PM) mijortsa: :D
(10:29:10 PM) Rabitya: contoh HTML manipulation ada di kode_6.html dan
kode_7.html
(10:29:20 PM) Rabitya: yaitu penggunaan before() dan after()
(10:29:36 PM) Rabitya: eh, salah
(10:29:50 PM) Rabitya: yang bener perbedaan antara before() dan prepend()
(10:29:51 PM) Rabitya: :D
(10:30:06 PM) Rabitya: sudah ada paham apa perbedaan keduanya pada saat di
klik?
(10:31:24 PM) Rabitya: ...
(10:32:01 PM) \*\*\*mijortsa belum tau pasnya dimana pak?
(10:33:08 PM) Rabitya: sebentar
(10:33:16 PM) \*\*\*Rabitya ambil air minum
(10:33:56 PM) priyess: before diatasnya, prepend sebelumnya
(10:33:58 PM) Rabitya: perbedaannya adalah
(10:34:12 PM) priyess: bedanya di baris baru begitu ya...
(10:34:35 PM) Rabitya: kalau before(), apa yang ditambahkan, mengikuti tag
sebelumnya
(10:34:37 PM) Rabitya: misalkan
(10:35:11 PM) Rabitya: kita ingin menambahkan kata "sip" di depan tag
<p>blankon</p>
(10:35:38 PM) Rabitya: hasilnya adalah <p>sip</p><p>blankon</p>
(10:35:51 PM) Rabitya: berbeda dengan prepend
(10:36:02 PM) Rabitya: dia menyisipkannya
(10:36:26 PM) Rabitya: kita ingin menyisipkan kata "sip" pada tag <p>blankon</
p>
(10:36:34 PM) \*\*\*priyess wah, njawab banter salah...
(10:36:55 PM) Rabitya: maka hasilnya adalah <p>sipblankon</p>
(10:37:19 PM) Rabitya: begitu perbedaannya
(10:37:20 PM) Rabitya: :)
(10:38:04 PM) aftian left the room (quit: Quit: Leaving.).
(10:38:11 PM) \*\*\*mijortsa ooo... manggut2
(10:38:21 PM) setiaji: ya ya ya
(10:39:15 PM) Rabitya: oke, kita lanjut
(10:40:02 PM) Rabitya: selain html manipulation, ada juga css manipulation
(10:40:19 PM) Rabitya: gunanya untuk menambah atau mengubah nilai properti css
(10:40:34 PM) Rabitya: contohnya ada di kode_8.html
(10:41:01 PM) Rabitya: sampai di sini dulu ada pertanyaan?
(10:41:31 PM) yht: wew... baru tahu bisa manipulasi sejauh ini X_X
(10:41:52 PM) yht: Rabitya, pdf diambil dimana pak?
(10:42:26 PM) mijortsa: yht: http://fitraditya.files.wordpress.com/2012/10/
kelas_daring_blankon_jquery.pdf
(10:42:55 PM) Rabitya: wah, trims pak mijortsa
(10:42:58 PM) Rabitya: :D
(10:43:13 PM) yht: ok... makasih
(10:43:27 PM) luniamaiya [dfffe01a@gateway/web/freenode/ip.223.255.224.26]
entered the room.
(10:44:37 PM) Rabitya: kalau tidak ada pertanyaan, saya lanjutkan kembali
(10:45:01 PM) Rabitya: terakhir, AJAX
(10:45:31 PM) \*\*\*mijortsa pasti club bola nih :D
(10:45:41 PM) setiaji: :))
(10:45:42 PM) Rabitya: AJAX = Asynchronous JavaScript and XML
(10:45:55 PM) Rabitya: klub belanda ya pak mijortsa?
(10:45:56 PM) Rabitya: :D
(10:46:10 PM) mijortsa: :D catat pak
(10:46:39 PM) Rabitya: gunanya adalah, mengirimkan, menerima, dan memproses
data dalam jumlah kecil, pada halaman web secara background
(10:46:45 PM) Rabitya: contohnya facebook
(10:46:53 PM) Rabitya: kalau kita update status
(10:47:07 PM) Rabitya: kan halamannya gak perlu loading untuk menyimpannya
(10:47:16 PM) Rabitya: nah, itu yang disebut dengan ajax
(10:48:36 PM) Rabitya: contoh fungsinya adalah load()
(10:48:43 PM) Rabitya: kode_9.html
(10:49:06 PM) Rabitya: oya, untuk menjalankan kode_9.html dan kode_10.html,
hanya bisa dijalankan melalui web server
(10:50:47 PM) mijortsa: image header karo kernel
(10:50:49 PM) Rabitya: kalau tidak, tidak bisa berjalan
(10:51:01 PM) Rabitya: mijortsa: lah
Unknown command.
(10:51:25 PM) \*\*\*mijortsa maaf ada yg PM :D jadi salah ketik
(10:51:33 PM) mijortsa: lanjut pak
(10:51:50 PM) Rabitya: baik, karena waktunya semakin mepet, mari kita ke contoh
kasus
(10:51:56 PM) Rabitya: 1. form input validation
(10:52:15 PM) Rabitya: http://jsfiddle.net/
(10:52:18 PM) Rabitya: eh, salah
(10:52:30 PM) Rabitya: http://jsfiddle.net/TGEM3/
(10:52:45 PM) samsul [~samsul@unaffiliated/samsul] entered the room.
(10:52:49 PM) Rabitya: contoh halaman login sederhana dengan jQuery
(10:53:15 PM) Rabitya: apabila username sama dengan password, akan muncul
tulisan login berhasil
(10:53:23 PM) Rabitya: kalau tidak, akan muncul login salah
(10:53:34 PM) Rabitya: nah, PR 1
(10:53:35 PM) Rabitya: :D
(10:54:09 PM) Rabitya: bikin form input yang terdiri dari:
(10:54:14 PM) Rabitya: - username
(10:54:18 PM) Rabitya: - password
(10:54:25 PM) Rabitya: - ulangi password
(10:54:29 PM) Rabitya: - email
(10:54:40 PM) Rabitya: - nomor telepon
(10:54:48 PM) Rabitya: validasinya:
(10:54:59 PM) Rabitya: - password dan ulangi password harus sama
(10:55:23 PM) Rabitya: - nomor telepon harus berupa angka
(10:55:52 PM) Rabitya: - captcha sederhana (operasi matematika / tulisan)
(10:56:30 PM) cahyod [~cahyod@dyn2206b.dialin.rad.net.id] entered the room.
(10:57:37 PM) yht: wew....
(10:58:37 PM) Rabitya: bisa dikembangkan dari contoh di atas
(10:58:43 PM) \*\*\*mijortsa dotovr fbrn hihihi dapat PR :D
(10:58:46 PM) cho2 [~cho2@36.74.10.155] entered the room.
(10:58:48 PM) Rabitya: contoh kasus kedua
(10:59:05 PM) Rabitya: 2. dynamic form element
(10:59:06 PM) dotovr: mijortsa: weheee PR tambah terus :D
(10:59:14 PM) Rabitya: cuma 2
(11:00:08 PM) kokabiel [~kokabiel@114.79.57.143] entered the room.
(11:00:55 PM) setiaji: pak, captcha nya pake apa
(11:01:37 PM) Rabitya: setiaji: biasa saja pak
(11:01:43 PM) martadinata [~dedy@114.79.0.82] entered the room.
(11:01:47 PM) Rabitya: tambahan juga boleh
(11:01:52 PM) Rabitya: tulisan biasa juga boleh
(11:02:11 PM) Rabitya: penekanannya cuma di validasi menggunakan javascriptnya
saja pak
(11:02:45 PM) setiaji: :D siap
(11:03:47 PM) cahyod left the room (quit: Quit: Ex-Chat).
(11:06:45 PM) Rabitya: yang contoh kasus kedua
(11:06:48 PM) Rabitya: ini dia
(11:06:59 PM) \*\*\*mijortsa minta contekan ah.. ke pak dotovr sssst bagi2 pak
(11:07:16 PM) Rabitya: http://jsfiddle.net/3ezbk/
(11:07:30 PM) dotovr: mijortsa: bentar lagi pak, saya robek dari buku dulu :D
(11:07:31 PM) Rabitya: awalnya, tombol login disabled
(11:07:54 PM) Rabitya: tapi kalau password dan ulangi password isinya sama,
tombolnya langsung berubah enable
(11:08:03 PM) Rabitya: nah PR kkedua
(11:08:12 PM) Rabitya: bikin form:
(11:08:20 PM) Rabitya: 1. Nilai matematika
(11:08:28 PM) Rabitya: 2. Nilai Bahasa indonesia
(11:08:34 PM) Rabitya: 3. nilai ipa
(11:08:38 PM) Rabitya: 4. nilai ips
(11:08:55 PM) Rabitya: ketiga nilainya dijumlahkan lalu dirata-ratakan
(11:09:28 PM) Rabitya: kalau nilai rata2nya > 75, otomatis muncul tulisan A
(11:10:05 PM) Rabitya: eh, jangan ding
(11:10:52 PM) Rabitya: begini saja deh
(11:11:02 PM) Rabitya: keempat nilai tadi dirata-ratakan
(11:11:22 PM) embarpasaribu left the room.
(11:11:28 PM) Rabitya: kalau nilai ratanya2 di atas 75, muncul select box
isinya pilihan universitas negeri favorit
(11:11:50 PM) Rabitya: kalau di bawah 75, muncul select box isinya pilihan
universitas negeri lainnya / swasta
(11:11:53 PM) Rabitya: :D
(11:12:02 PM) Rabitya: mudah kan?
(11:13:09 PM) Rabitya: pak mijortsa, minta tolong di log ya..
(11:13:17 PM) Rabitya: tadi sempat disconnect soale
(11:13:20 PM) priyess left the room (quit: Quit: Page closed).
(11:13:22 PM) mijortsa: baik pak
(11:13:46 PM) Rabitya: baik, lokakarya kali ini saya cukupkan sampai di sini
(11:14:07 PM) Rabitya: semoga apa yang kita oprek malam ini, bisa
diimplementasikan khususnya bagi perkembangan blankon
(11:14:20 PM) setiaji: ok pak. trims sudah share ilmunya
(11:14:30 PM) setiaji: pr nya dibahas kapan ?
(11:14:34 PM) Rabitya: baik itu blankon installer, maupun aplikasi lainnya yang
menggunakan front-end html
(11:14:36 PM) mijortsa: trimse kamse pak
(11:14:46 PM) Rabitya: nunggu jadwal dulu pak setiaji
(11:14:55 PM) Rabitya: takutnya bentrok lagi kayak malam ini
(11:15:11 PM) Rabitya: buat pak mijortsa, kapan itu mau bikin kalkulator
faraid?
(11:15:13 PM) Rabitya: :D
(11:15:21 PM) Rabitya: tinggal diimplementasikan yang barusan itu
(11:15:29 PM) runtah17: Ok pak , terimakasih
(11:15:34 PM) mijortsa: :D belum pak, masih puyeng
(11:16:03 PM) Rabitya: terima kasih atas perhatiannya, wassalamu'alaykum
(11:16:06 PM) Rabitya: ==========================================
(11:16:13 PM) mijortsa: waalaikumsalam
(11:16:17 PM) \*\*\*Rabitya udah ditungguin :D
(11:16:21 PM) setiaji: walaikumsalam
(11:16:23 PM) setiaji: :D
(11:16:36 PM) runtah17: :)
(11:16:47 PM) runtah17 left the room (quit: Quit: Bye).
(11:16:50 PM) mijortsa: wehehe lagi bulan madu
(11:16:57 PM) setiaji left the room.
(11:17:02 PM) Rabitya left the room.